/* AlternativeRouteCard — SINGLE SOURCE. tools/_alternative_route_card.py renders the card and this stylesheet rides in
   each consumer's region: every emirate page ("When founders choose elsewhere", via tools/build-emirate-alt-routes.py) and
   the bank pages that declare alternatives (via tools/build-bank-detail.py). The .em-alt section/head/grid rules are the
   Sharjah implementation moved here verbatim (2026-09-07); the card rules follow; the bank additions sit at the end. Tokens only. */
.em-alt { padding: 80px 0; border-top: 1px solid var(--line-soft); }
.em-alt-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.em-alt-head h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; font-weight: 500; margin: 8px 0 12px; }
.em-alt-head p { color: var(--muted); font-size: 15px; margin: 0; }
.em-alt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .em-alt-grid { grid-template-columns: 1fr; } }
.alternative-route-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; transition: border-color .18s, transform .18s; }
.alternative-route-card:hover { border-color: var(--mineral, #8AA394); transform: translateY(-2px); }
.alternative-route-card--accent { background: rgba(138, 163, 148, .06); }
.alternative-route-card__media { margin: 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface-2); }
.alternative-route-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ar-pos, center center); }
.alternative-route-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 22px 24px; }
.alternative-route-card__description { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.alternative-route-card__action { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; align-self: flex-start; }
.alternative-route-card__action:hover { color: var(--mineral, #8AA394); }
.alternative-route-card__action:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .alternative-route-card { transition: none; } .alternative-route-card:hover { transform: none; } }
/* generic grid — same geometry as .em-alt-grid so the emirate output is unchanged; bank consumers use only this one */
.alternative-routes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .alternative-routes__grid { grid-template-columns: 1fr; } .alternative-route-card__media img { object-position: var(--ar-pos-mobile, var(--ar-pos, center center)); } }
/* bank consumer additions (2026-09-08): a title, a reasons label + list, and the no-image variant (text-first, same frame) */
.alternative-route-card__title { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--text); line-height: 1.3; }
.alternative-route-card__label { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }
.alternative-route-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alternative-route-card__list li { position: relative; padding-left: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.alternative-route-card__list li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--faint); }
.alternative-route-card--no-media .alternative-route-card__body { padding-top: 24px; }
.alternative-route-card__title--mark { line-height: 0; font-size: 0; }   /* an h3 that holds only a mark: no line box of its own */
.alternative-route-card__name { display: block; margin-top: 10px; font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--text); }   /* the destination bank's name as visible text under its mark (owner, 2026-09-09): scannable and accessible, never only in alt text */
/* whole-card link (bank comparison cards, 2026-09-09): the anchor root keeps the card's frame; the only interactive treatment is the
   approved border change and a visible focus ring — no lift, no shadow, no second CTA. Text inside stays in its own colours. */
a.alternative-route-card--link { color: inherit; text-decoration: none; cursor: pointer; }
a.alternative-route-card--link:hover { transform: none; border-color: var(--mineral, #8AA394); }
a.alternative-route-card--link:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 3px; }
a.alternative-route-card--link .alternative-route-card__body { padding-bottom: 24px; }
.alternative-route-card__title--mark .bkid--card{--bkid-slot-w:176px;--bkid-slot-h:56px;--bkid-max-w:172px;margin-bottom:4px}.alternative-route-card__title--mark .bkid--card .bkid-logo{height:min(calc(var(--bkid-h,20px) * 1.6),52px)}.alternative-route-card__title--mark .bkid--card .bkid-wordmark{font-size:24px}