/* mdx-hero.css — the compact page hero. A page OPTS IN by linking this sheet LAST in <head> (asset · theme · country · gics
   · desk — not the news article, whose hero is the headline); js/mdx-hero.js (loaded by site-nav.js) adds the "more"
   toggle + the phone stuck row; the headroom nav is css/mdx-nav.css. CSS only over the SSR markup.

   ONE structure on every page:
     [logo]  breadcrumb (theme · gics — small, one line, …)            [price]
             NAME                                                       [  % ]
             ticker · ♥   /   🔔 📖  (the row under the name)           [ 1Y ]
     [secondary chips — classification (asset) · Contains (theme · gics) · stats]  [More ▾]
   "More" opens: the description (first), labels over every chip group, stats, everything hidden. No "← back" link
   (the browser's Back does it; theme/gics show the breadcrumb instead). Phone extras: .exh-stuck (the hero sticks under
   the nav as its identity row — frosted glass + the page's brand pastel, moved with `top`, never `transform`). */

/* ── the identity band (every width) ── */
.ex-hero a.ex-back { display: none; }                /* a plain "← back" link: gone */
.ex-hero-main { display: contents; }                  /* its children join the hero grid */
.ex-quote-row { display: contents; }                  /* theme/country/gics: price + follow/lesson buttons join it too */
.ex-hero-in { grid-template-rows: none; align-items: center; }
.ex-hero-side { order: 0; grid-column: 1; grid-row: 2 / span 2; align-self: center; }
.ex-hero-in:has(> nav.ex-back) .ex-hero-side { grid-row: 1 / span 3; }
/* breadcrumb above the name (theme · gics): the parents only, one line */
.ex-hero nav.ex-back { grid-column: 2; grid-row: 1; justify-self: stretch; margin: 0 0 2px; min-width: 0; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 700; color: var(--fg-dim, var(--dim)); }
.ex-hero nav.ex-back a { color: inherit; text-decoration: none; }
.ex-hero nav.ex-back .ex-crumb-cur, .ex-hero nav.ex-back .ex-crumb-sep:has(+ .ex-crumb-cur) { display: none; }   /* the name is right below */
.ex-hero nav.ex-back > a:first-child:has(~ a), .ex-hero nav.ex-back > a:first-child:has(~ a) + .ex-crumb-sep { display: none; }   /* drop "All themes / Sectors" once there is a real parent */
.ex-hero-main .ex-title { grid-column: 2; grid-row: 2; margin: 0; text-align: left; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the row under the name: ticker · ♥ (asset) — or 🔔 📖 (theme · country · gics · desk) */
.as-tk-row { grid-column: 2; grid-row: 3; justify-content: flex-start; margin: 0; }
.as-ticker { justify-content: flex-start; margin: 0; }
.ex-quote-row > .ex-hero-follow, .ex-hero-main > .ex-hero-follow { grid-column: 2; grid-row: 3; justify-self: start; display: flex; gap: 6px; margin: 4px 0 0; }
.ex-quote-row > .ex-lesson-btn { grid-column: 2; grid-row: 3; justify-self: start; margin: 4px 0 0 44px; }
.ex-quote-row > .ex-hero-follow .ex-filter-btn, .ex-quote-row > .ex-lesson-btn, .ex-hero-main > .ex-hero-follow .ex-filter-btn { width: 32px; height: 32px; }
.ex-hero-in:not(:has(.as-tk-row)):not(:has(.ex-hero-follow)):not(:has(.ex-lesson-btn)) .ex-title { grid-row: 2 / span 2; }   /* nothing under the name */
/* price: right of the name, right-aligned, price over change over period */
.ex-hero-main > .ex-quote, .ex-quote-row > .ex-quote { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ex-hero-main > .ex-quote .q-core, .ex-quote-row > .ex-quote .q-core { align-self: flex-end; text-align: right; font-size: 12px; }

/* ── the secondary row: ONE chip line + "More" at its right — the same place on every page ── */
.as-class, .ex-kids, .ex-hero .ex-meta { grid-column: 1 / span 2; grid-row: 4; margin: 12px 0 0; min-width: 0; justify-content: flex-start; }
.exh-more { grid-column: 3; grid-row: 4; justify-self: end; align-self: start; margin: 12px 0 0 8px; }
/* which line is the secondary one: classification (asset) › Contains (theme · gics) › stats (country · desk · leaf) */
.ex-hero-in:has(.as-class) .ex-kids, .ex-hero-in:has(.as-class) .ex-meta,
.ex-hero-in:has(.ex-kids:not([hidden])) .ex-meta { grid-row: 6; }
.ex-hero:not(.exh-open) .ex-hero-in:has(.as-class) .ex-meta, .ex-hero:not(.exh-open) .ex-hero-in:has(.ex-kids:not([hidden])) .ex-meta { display: none; }
.ex-kids[hidden] { display: none; }
/* collapsed: chips in one scrolling line, no labels, every chip (the "+N more" buttons are for the open view) */
.ex-hero:not(.exh-open) .as-class, .ex-hero:not(.exh-open) .ex-kids { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.ex-hero:not(.exh-open) .as-class::-webkit-scrollbar, .ex-hero:not(.exh-open) .ex-kids::-webkit-scrollbar { display: none; }
.ex-hero:not(.exh-open) .as-row, .ex-hero:not(.exh-open) .as-val { display: contents; }
.ex-hero:not(.exh-open) .as-lbl, .ex-hero:not(.exh-open) .ex-kids-lbl, .ex-hero:not(.exh-open) .as-more, .ex-hero:not(.exh-open) .gk-more { display: none; }
.ex-hero:not(.exh-open) .as-chip, .ex-hero:not(.exh-open) .gk-chip { flex: none; }
.ex-hero:not(.exh-open) .as-chip.as-hidden, .ex-hero:not(.exh-open) .gk-chip.gk-hidden { display: inline-flex; }
.ex-hero .ex-meta { flex-wrap: wrap; padding-top: 0; border-top: 0; }
/* opened: the description leads; every group gets its label above its chips (the asset pattern: "Sector" ↵ [chip]) */
.ex-hero-main .ex-desc, .ex-hero #asDesc { grid-column: 1 / -1; text-align: left; max-width: none; }
.ex-hero.exh-open .ex-desc, .ex-hero.exh-open #asDesc { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; }
.ex-hero.exh-open .ex-kids { flex-wrap: wrap; }
.ex-hero.exh-open .ex-kids-lbl { flex-basis: 100%; margin: 0 0 2px; }
.ex-hero.exh-open .ex-hero-in:has(.as-class) .ex-kids { grid-row: 6; }
#asDesc.as-clamp { cursor: auto; }

/* the "more" toggle (js/mdx-hero.js adds it) */
/* the same box as the chips beside it (.gk-chip / .as-chip in explore.css): border, fill, type, padding */
.exh-more { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(var(--surf, 240,238,233), .20); background: rgba(var(--surf, 240,238,233), .08);
  color: var(--fg, var(--ivory)); font: inherit; font-size: 13px; font-weight: 600; line-height: inherit; padding: 6px 13px; border-radius: var(--pill, 999px); cursor: pointer; white-space: nowrap;
  transition: background .15s; }
.exh-more:hover { background: rgba(var(--surf, 240,238,233), .14); }
.exh-more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .2s; }
.ex-hero.exh-open .exh-more svg { transform: rotate(180deg); }
.exh-more[hidden] { display: none; }

/* ── desktop ── */
@media (min-width: 721px) {
  .ex-hero { padding-top: 6.5rem; padding-bottom: calc(1rem + var(--sheet-overlap)); }
  .ex-hero-in { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 20px; row-gap: 0; }
  .ex-hero-logo img, .ex-logo-disc { width: 76px; height: 76px; }
  .ex-hero-main .ex-title { font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.1; }
  .as-tk-row { margin-top: 6px; }
  .ex-quote .q-idx { font-size: 2.2rem; }
  .ex-quote .q-chg { font-size: 1.1rem; }
  /* the description stays (2 lines) between the band and the secondary row */
  .ex-hero-main .ex-desc, .ex-hero #asDesc, .ex-hero #asDesc.as-clamp { grid-column: 2 / -1; grid-row: 4; margin: 12px 0 0; font-size: .98rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: none; }
  .ex-hero.exh-open .ex-desc, .ex-hero.exh-open #asDesc { display: block; -webkit-line-clamp: unset; }
  .as-class, .ex-kids, .ex-hero .ex-meta { grid-column: 2 / span 1; grid-row: 5; margin-top: 14px; }
  .exh-more { grid-row: 5; margin-top: 14px; }
  .ex-hero-in:has(.as-class) .ex-kids, .ex-hero-in:has(.as-class) .ex-meta, .ex-hero-in:has(.ex-kids:not([hidden])) .ex-meta { grid-row: 6; }
  .ex-hero .ex-meta { padding-top: 0; border-top: 0; }
  /* desktop chips: labels stay inline before each group (there is room) */
  .as-class { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .as-row { display: flex; align-items: center; gap: 7px; }
  .as-lbl { padding-top: 0; font-size: 10.5px; opacity: .75; }
  .ex-hero.exh-open .as-class { -webkit-mask-image: none; mask-image: none; }
}

/* ── phone ── */
@media (max-width: 720px) {
  .ex-hero { padding: 88px 0 calc(10px + var(--sheet-overlap)); }
  .ex-hero-in { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 0 16px; justify-items: stretch; text-align: left; }
  .ex-hero-logo img, .ex-logo-disc { width: 44px; height: 44px; }
  .ex-logo-disc svg { width: 54%; height: 54%; }
  .ex-hero nav.ex-back { font-size: 11.5px; }
  .ex-hero-main .ex-title { font-size: 19px; line-height: 1.15; }
  .as-tk-row { margin-top: 3px; gap: 6px; }
  .as-ticker { gap: 5px; } .as-ticker .as-tk { font-size: 12px; } .as-ticker .as-tk-ex { font-size: 11px; }
  .as-tk-row .fl-heart { width: 28px; height: 28px; }
  .ex-quote .q-idx { font-size: 21px; }
  .ex-quote .q-chg { font-size: 13px; }
  .ex-hero-main > .ex-quote .q-core, .ex-quote-row > .ex-quote .q-core { font-size: 11px; }
  /* chips run to the screen edge while collapsed */
  .ex-hero:not(.exh-open) .as-class, .ex-hero:not(.exh-open) .ex-kids { margin-right: 0; }
  .ex-hero:not(.exh-open) .as-chip, .ex-hero:not(.exh-open) .gk-chip, .exh-more { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; }
  /* collapsed: the description and every other line are behind "More" */
  .ex-hero:not(.exh-open) .ex-desc, .ex-hero:not(.exh-open) #asDesc { display: none; }
  /* opened: description first (row 4), the secondary group under it, the toggle, then the rest */
  .ex-hero.exh-open .ex-desc, .ex-hero.exh-open #asDesc { grid-row: 4; margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
  .ex-hero.exh-open .as-class, .ex-hero.exh-open .ex-kids, .ex-hero.exh-open .ex-meta { grid-row: 5; grid-column: 1 / -1; }
  .ex-hero.exh-open .ex-hero-in:has(.as-class) .ex-kids, .ex-hero.exh-open .ex-hero-in:has(.as-class) .ex-meta,
  .ex-hero.exh-open .ex-hero-in:has(.ex-kids:not([hidden])) .ex-meta { grid-row: 6; }
  .ex-hero.exh-open .as-row { grid-template-columns: 1fr; gap: 4px; }
  .ex-hero.exh-open .exh-more { grid-row: 7; grid-column: 1 / -1; justify-self: end; margin: 12px 0 0; }

  /* the stuck identity row (the hero itself) */
  .ex-hero.exh-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 900; margin: 0; padding: var(--exs-top, 92px) 0 10px;
    background: transparent; background-image: none; isolation: isolate;
    box-shadow: 0 12px 18px -18px rgba(0,0,0,.45); transition: top .22s ease; }
  /* the frosted glass lives on ::before, NOT the row: a backdrop-filter on the row makes it the containing block of every
     position:fixed child → a dialog opened from the stuck row (the asset ♥ playlist picker) was trapped in the bar */
  .ex-hero.exh-stuck::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--exs-veil, rgba(255,255,255,.28));
    -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); }
  .ex-hero.exh-stuck .ex-desc, .ex-hero.exh-stuck #asDesc, .ex-hero.exh-stuck .as-class, .ex-hero.exh-stuck .ex-meta, .ex-hero.exh-stuck .ex-kids,
  .ex-hero.exh-stuck .exh-more, .ex-hero.exh-stuck nav.ex-back, .ex-hero.exh-stuck .ex-lesson-btn { display: none; }
  /* the follow control stays in the stuck row (asset ♥ · theme/country/gics/desk 🔔), under the name; 📖 lesson hides */
  .ex-hero.exh-stuck .ex-hero-follow .ex-filter-btn { background: #fff; border: 1px solid rgba(26,23,18,.18); color: #1a1712; opacity: 1;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }   /* solid on the glass row, like the asset ♥ */
  .ex-hero.exh-stuck .ex-hero-side, .ex-hero.exh-stuck .ex-hero-main > .ex-quote, .ex-hero.exh-stuck .ex-quote-row > .ex-quote { grid-row: 2 / span 2; }
  .ex-hero.exh-stuck .ex-title { grid-row: 2 / span 2; }
  .ex-hero.exh-stuck .ex-hero-in:has(.as-tk-row) .ex-title, .ex-hero.exh-stuck .ex-hero-in:has(.ex-hero-follow:not(:empty)) .ex-title { grid-row: 2; }
  html.exh-navhide .ex-hero.exh-stuck { top: calc(-1 * var(--exs-top, 92px) + 10px + env(safe-area-inset-top, 0px)); }
  .ex-hero.exh-stuck.exh-enter, .ex-hero.exh-stuck.exh-leave { top: -240px; }
  .ex-hero.exh-stuck.exh-enter { transition: none; }
  .ex-hero.exh-stuck.exh-leave { transition: top .12s ease-in; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .ex-hero.exh-stuck { transition: none; } }