/**
 * Explore hub (the ETF Types & Themes catalogue) — [finance_hamster_explore].
 * Matches the owner-approved mock. Reuses the shared foundation/theme tokens that
 * exist (--accent/--accent-text/--pill-bd/--pos/--shadow/--shadow-lg/--bg/--radius/
 * --fh-dur/--fh-ease). The warm SEMANTIC tokens (--ink/--muted/--soft/--card/--bd/
 * --neg) are not exposed by foundation, so they are defined here SCOPED to .fh-explore
 * (mapped to the approved mock palette) and flipped for dark — nothing leaks out.
 */

/* Scoped semantic tokens (light) + dark flips. data-theme overrides win over the media query. */
.fh-explore{ --ink:#211d16; --muted:#655c4e; --soft:#faecd5; --card:#ffffff; --bd:#e8dfcf; --neg:#a83f58; }
@media (prefers-color-scheme:dark){
  .fh-explore{ --ink:#f6f1e7; --muted:#b0a794; --soft:#2d2213; --card:#211d15; --bd:#332c20; --neg:#de8799; }
}
:root[data-theme="light"] .fh-explore{ --ink:#211d16; --muted:#655c4e; --soft:#faecd5; --card:#ffffff; --bd:#e8dfcf; --neg:#a83f58; }
:root[data-theme="dark"] .fh-explore{ --ink:#f6f1e7; --muted:#b0a794; --soft:#2d2213; --card:#211d15; --bd:#332c20; --neg:#de8799; }

.fh-explore{font-size:17px; line-height:1.7; color:var(--ink); max-width:960px; margin:0 auto; padding:0 0 var(--s-9,96px)}
.fh-explore a{color:inherit; text-decoration:none}
.fh-explore-prose{max-width:700px}

/* breadcrumb */
.fh-explore-crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:var(--t-sm,.88rem); color:var(--muted); margin:0 0 var(--s-5,24px)}
.fh-explore-crumb a:hover{color:var(--accent-text); text-decoration:underline}
.fh-explore-crumb .sep{opacity:.5}
.fh-explore-crumb .here{color:var(--ink); font-weight:650}

/* hero */
.fh-explore-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:var(--t-sm,.88rem); font-weight:700; color:var(--accent-text)}
.fh-explore-eyebrow .d{font-size:1.15rem}
.fh-explore-h1{font-size:clamp(1.95rem,5.2vw,2.9rem); line-height:1.05; letter-spacing:-.022em; font-weight:800; color:var(--ink); margin:.34em 0 .24em; text-wrap:balance}
.fh-explore-intro{font-size:clamp(1.06rem,2.2vw,1.24rem); line-height:1.55; color:var(--muted); max-width:660px; margin:0}

/* facet section */
.fh-explore-facet{margin-top:clamp(38px,5vw,56px)}
.fh-explore-facet-h{display:flex; align-items:baseline; gap:12px; margin:0 0 16px; flex-wrap:wrap}
.fh-explore-facet-h h2{font-size:clamp(1.2rem,2.6vw,1.44rem); font-weight:800; color:var(--ink); margin:0; letter-spacing:-.01em}
.fh-explore-facet-h .n{font-size:.85rem; color:var(--muted)}

/* uniform tile grid — every tile equal */
.fh-explore-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px}
.fh-explore-tile{display:flex; flex-direction:column; gap:5px; background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:15px 16px; transition:transform var(--fh-dur,200ms) var(--fh-ease,ease), border-color var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-explore-tile:hover{transform:translateY(-3px); border-color:var(--pill-bd)}
.fh-explore-tile .t{display:flex; align-items:center; gap:9px}
.fh-explore-tile .em{font-size:1.15rem; line-height:1}
.fh-explore-tile b{font-size:.97rem; font-weight:720; color:var(--ink); line-height:1.2}
.fh-explore-tile p{margin:0; font-size:.82rem; color:var(--muted); line-height:1.4}

/* soft CTA into the screener (single-look dark band, like the topic page) */
.fh-explore-cta{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--ink); color:var(--bg); border-radius:var(--radius-lg,24px); padding:24px 28px; margin-top:clamp(40px,5vw,60px)}
.fh-explore-cta h3{margin:0 0 4px; font-size:1.25rem; font-weight:800; color:inherit}
.fh-explore-cta p{margin:0; font-size:.95rem; opacity:.82}
.fh-explore-cta .btn{background:var(--accent); color:#3b2a12; font-weight:750; font-size:1rem; padding:12px 22px; border-radius:12px; white-space:nowrap}
.fh-explore-cta .btn:hover{filter:brightness(1.05)}

.fh-explore-disc{margin-top:34px; padding-top:16px; border-top:1px solid var(--bd); font-size:.85rem; color:var(--muted); max-width:660px}

.fh-explore :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .fh-explore-tile{transition:none}
  .fh-explore-tile:hover{transform:none}
}