/* Expert cards: four compositions sharing one identity and interaction system. */
.ex-verified { display:inline-flex; flex:0 0 auto; inline-size:.58em; block-size:.58em; min-inline-size:18px; min-block-size:18px; color:#3897f0; line-height:1; }
.ex-verified svg { display:block; inline-size:100%; block-size:100%; }
.ex-card {
 --ex-accent:var(--c-crimson,#d7263d); --ex-ink:#f0f3f6; --ex-muted:#aebbc9;
 --ex-line:#2d3a47; --ex-soft:#16212c; --ex-card:#101820; --ex-radius:16px;
 container:expert-card / inline-size; position:relative; isolation:isolate;
 display:flex; flex-direction:column; min-inline-size:0; overflow:hidden;
 border:1px solid var(--ex-line); border-radius:var(--ex-radius);
 background:var(--ex-card); color:var(--ex-ink); box-shadow:none;
 font-family:Heebo,Arial,sans-serif; text-align:start;
 transition:border-color .24s ease;
}
.ex-card[hidden] { display:none; }
.ex-card .ex-card__photo { position:relative; inset:auto; inline-size:auto; aspect-ratio:16 / 11; overflow:hidden; background:#182633; }
.ex-card .ex-photo { display:block; inline-size:100%; block-size:100%; object-fit:cover; object-position:center 30%; transform:none; transition:none; }
.ex-card .ex-photo--initials { display:grid; place-items:center; font:700 52px/1 Heebo,Arial,sans-serif; letter-spacing:0; background:radial-gradient(ellipse at 20% 10%,#51303a,transparent 75%),#17232e; }
.ex-card .ex-card__body { position:relative; display:flex; flex:1; flex-direction:column; gap:0; min-inline-size:0; padding:22px; }
.ex-card__eyebrow { position:absolute; z-index:2; inset-inline-start:12px; inset-block-start:12px; display:flex; align-items:center; gap:6px; max-inline-size:calc(100% - 24px); margin:0; padding:5px 8px; border:1px solid rgb(255 255 255 / 14%); border-radius:5px; background:rgb(8 15 22 / 76%); color:#c7d2df; font-size:8px; font-weight:500; line-height:1.4; letter-spacing:.13em; direction:ltr; pointer-events:none; }
.ex-card__body > .ex-card__eyebrow { position:static; align-self:flex-start; margin-block-end:10px; }
.ex-card__eyebrow::before { content:""; inline-size:16px; block-size:2px; border-radius:1px; background:var(--ex-accent); }
.ex-card .ex-card__name { margin:0; font:700 clamp(19px,7cqi,26px)/1.35 Heebo,Arial,sans-serif; letter-spacing:-.025em; color:var(--ex-ink); text-wrap:pretty; }
.ex-card .ex-card__name > a { display:inline-flex; align-items:flex-start; gap:6px; max-inline-size:100%; color:inherit; text-decoration:none; transition:color .24s ease; }
.ex-card .ex-card__name > a > bdi { min-inline-size:0; overflow-wrap:anywhere; }
.ex-card .ex-card__name a::after { content:""; position:absolute; z-index:1; inset:0; }
.ex-card .ex-card__name .ex-verified { inline-size:16px; block-size:16px; min-inline-size:16px; min-block-size:16px; margin-block-start:calc((1lh - 16px) / 2); }
.ex-card .ex-card__role { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:7px 0 0; color:#c0cbd7; font-size:13px; font-weight:400; line-height:1.5; }
.ex-card .ex-card__summary { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:14px 0 0; color:var(--ex-muted); font-size:13px; font-weight:400; line-height:1.5; }
.ex-card .ex-tags { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.ex-card .ex-tags li { max-inline-size:100%; padding:4px 8px; border:1px solid rgb(174 187 201 / 16%); border-radius:6px; background:rgb(255 255 255 / 3%); color:#c1ccda; font-size:10px; font-weight:400; line-height:1.4; overflow-wrap:anywhere; }
.ex-card .ex-badges { position:static; display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.ex-card .ex-badge { gap:5px; padding:4px 7px; border:1px solid rgb(174 187 201 / 18%); border-radius:6px; background:rgb(17 25 34 / 80%); color:#d5dee8; font-size:10px; font-weight:400; backdrop-filter:none; }
.ex-card .ex-badge .icon { inline-size:11px; block-size:11px; fill:none; color:var(--ex-accent); stroke-width:1.5; }
.ex-card .ex-badge--avail i { inline-size:5px; block-size:5px; box-shadow:none; animation:none; }
.ex-card .ex-card__stats { gap:6px; margin:14px 0 0; font-size:11px; line-height:1.5; }
.ex-card .ex-card__stats b { color:#e2e8f0; font-weight:500; }
.ex-card .ex-social { position:relative; z-index:3; margin:14px 0 0; gap:6px; }
.ex-card .ex-social a { inline-size:28px; block-size:28px; border-radius:7px; color:#bdc9d6; }
.ex-card .ex-social .icon { inline-size:13px; block-size:13px; }
.ex-card .ex-card__btn {
 position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
 inline-size:100%; gap:12px; margin:22px 0 0; padding:12px 0 0;
 border-block-start:1px solid rgb(174 187 201 / 16%); color:#c1ccda;
 font-size:11px; font-weight:400; line-height:18px; text-decoration:none;
}
.ex-card .ex-card__btn::before { content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0; inline-size:24px; block-size:2px; background:var(--ex-accent); border-radius:1px; }
.ex-card .ex-card__btn-label { display:block; transform:translateY(1px); }
.ex-card .ex-card__arrow { display:grid; place-items:center; flex:0 0 28px; inline-size:28px; block-size:28px; border:1px solid rgb(255 255 255 / 14%); border-radius:7px; background:rgb(255 255 255 / 4%); color:var(--ex-accent); }
.ex-card .ex-card__arrow > .icon { display:block; place-self:center; inline-size:14px; block-size:14px; margin:0; stroke-width:1.35; transform:var(--icon-direction,none); transition:none; }
.ex-card .ex-card__body:has(> .ex-card__btn) { padding-block-end:18px; }
.ex-card .ex-card__btn { margin-block-start:auto; }
.ex-card .ex-card__body:has(> .ex-card__btn) > :nth-last-child(2) { margin-block-end:20px; }

/* Editorial portrait: restrained depth and an uninterrupted photograph. */
.ex-card.ex-card--elevated { background:linear-gradient(145deg,#15212c,#0d151d); box-shadow:0 10px 30px -20px rgb(0 0 0 / 55%); }
.ex-card.is-featured { border-color:#65404b; }

/* Micro directory card: portrait and identity share one horizontal row. */
.ex-card.ex-card--outline { display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:12px; padding:12px; background:#0c131a; box-shadow:none; }
.ex-card--outline .ex-card__photo { inline-size:52px; block-size:52px; aspect-ratio:1; margin:0; border:1px solid #394857; border-radius:12px; }
.ex-card--outline .ex-photo--initials { font-size:22px; }
.ex-card--outline .ex-card__body,
.ex-card--outline .ex-card__body:has(> .ex-card__btn) { position:static; justify-content:center; min-block-size:52px; padding:0; padding-inline-end:28px; }
.ex-card--outline .ex-card__name { font-size:16px; line-height:1.35; }
.ex-card--outline .ex-card__name > a { display:flex; align-items:center; gap:4px; }
.ex-card--outline .ex-card__name > a > bdi { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ex-card--outline .ex-card__name .ex-verified { inline-size:13px; block-size:13px; min-inline-size:13px; min-block-size:13px; margin:0; }
.ex-card--outline .ex-card__role { margin:4px 0 0; font-size:11px; line-height:1.4; -webkit-line-clamp:1; }
.ex-card--outline :is(.ex-card__eyebrow,.ex-card__summary,.ex-tags,.ex-card__stats,.ex-social,.ex-badges) { display:none; }
.ex-card--outline .ex-card__body:has(> .ex-card__btn) > :nth-last-child(2) { margin-block-end:0; }
.ex-card--outline .ex-card__btn { position:absolute; inset-inline-end:10px; inset-block-start:50%; transform:translateY(-50%); inline-size:24px; margin:0; padding:0; border:0; }
.ex-card--outline .ex-card__btn::before { content:none; }
.ex-card--outline .ex-card__btn-label { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ex-card--outline .ex-card__arrow { flex-basis:24px; inline-size:24px; block-size:24px; }
.ex-card.ex-card--outline:not(:has(> .ex-card__photo)) { grid-template-columns:minmax(0,1fr); }

/* Layered portrait: an inset image and a floating graphite identity panel. */
.ex-card.ex-card--glass { background:linear-gradient(145deg,#1b2a38,#0d161f); border-color:#3b4c5d; box-shadow:inset 0 1px 0 rgb(255 255 255 / 5%); backdrop-filter:none; }
.ex-card--glass .ex-card__photo { margin:12px 12px 0; aspect-ratio:4 / 3; border-radius:10px; }
.ex-card--glass .ex-card__body { z-index:2; margin:-28px 22px 14px; padding:18px 16px; border:1px solid #334353; border-radius:12px; background:linear-gradient(150deg,#1a2734,#111b25); box-shadow:0 8px 22px rgb(0 0 0 / 16%); }
.ex-card--glass .ex-card__name { font-size:20px; }
.ex-card--glass:not(:has(> .ex-card__photo)) .ex-card__body { margin:12px; }

/* Cinematic portrait: readable information over a full-height photograph. */
.ex-card.ex-card--overlay { justify-content:flex-end; min-block-size:420px; background:#0b1219; box-shadow:none; }
.ex-card--overlay .ex-card__photo { position:absolute; inset:0; inline-size:100%; block-size:100%; aspect-ratio:auto; }
.ex-card--overlay .ex-card__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgb(6 12 18 / 5%),rgb(6 12 18 / 25%) 25%,rgb(6 12 18 / 92%) 60%,#080f16 100%); }
.ex-card--overlay .ex-card__body { z-index:2; flex:0 0 auto; margin-block-start:160px; padding:22px; }
.ex-card--overlay .ex-card__role { color:#d0d9e4; }
.ex-card--overlay .ex-card__summary { color:#b9c6d5; }
.ex-card--overlay .ex-card__eyebrow { color:#b7c5d4; }
.ex-card--overlay:not(:has(> .ex-card__photo)) { min-block-size:0; }
.ex-card--overlay:not(:has(> .ex-card__photo)) .ex-card__body { margin-block-start:0; }

@media (hover:hover) {
 .ex-card:hover { transform:none; border-color:#4c5a69; }
 .ex-card:hover .ex-photo { transform:none; }
 .ex-card .ex-card__btn:hover .ex-card__arrow { background:rgb(255 255 255 / 9%); border-color:rgb(255 255 255 / 24%); }
}
.ex-card .ex-card__btn:focus-visible { outline:2px solid var(--ex-accent); outline-offset:4px; border-radius:5px; }
.ex-card:has(a:focus-visible) { outline:2px solid var(--ex-accent); outline-offset:4px; }
@container expert-card (max-width:260px) {
 .ex-card__body { padding:18px 16px; }
 .ex-card__name { font-size:19px; }
 .ex-card--glass .ex-card__body { margin-inline:16px; padding-inline:14px; }
 .ex-card__summary { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .ex-card,.ex-card .ex-card__name > a { transition:none; } }
@container expert-card (max-width:300px) {
 .ex-card--outline .ex-card__photo { inline-size:44px; block-size:44px; }
 .ex-card--outline .ex-card__name { font-size:15px; }
 .ex-card--outline .ex-card__name > a > bdi { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
 .ex-card--outline .ex-card__role { -webkit-line-clamp:2; }
}