/* ---------------------------------------------------------------------- *
 * ETFs listing page (page-etfs.php). The base (palette variables, hero,
 * sections, disclosures) comes from info-pages.css, loaded alongside; this
 * file only adds the fund grid. Its own file so a cached older stylesheet
 * can never leave the cards half-styled.
 * ---------------------------------------------------------------------- */

.ss-pg--etfs .ss-pg__h1{ max-width:13em; }
.ss-pg--etfs .ss-pg__lead{ max-width:30em; }

.ss-pg__fundgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--p-page); border:1px solid var(--p-line); }
.ss-pg__fund{
	display:flex; flex-direction:column; gap:12px; min-width:0; padding:clamp(20px,2vw,30px);
	background:var(--p-card); color:inherit; text-decoration:none; transition:background-color .15s ease;
}
.ss-pg__fund:hover,.ss-pg__fund:focus-visible{ background:var(--p-card-hover); }
.ss-pg__fund-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ss-pg__fund-ticker{ font-size:clamp(30px,2.4vw,40px); font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--p-ink); }
.ss-pg__fund-nav{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding-top:4px; }
.ss-pg__fund-nav strong{ font-size:19px; font-weight:700; line-height:1.1; color:var(--p-ink); font-variant-numeric:tabular-nums; }
.ss-pg__fund-nav span{ font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--p-label); white-space:nowrap; }
.ss-pg__fund-name{ font-size:14.5px; font-weight:600; line-height:1.35; color:var(--p-text); }
.ss-pg__fund-blurb{ font-size:15px; line-height:1.55; color:var(--p-muted); }
.ss-pg__fund-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:auto; padding-top:14px; border-top:1px solid var(--p-line-soft); }
.ss-pg__fund-stat strong{ display:block; font-size:16px; font-weight:700; line-height:1.2; color:var(--p-ink); }
.ss-pg__fund-stat span{ display:block; margin-top:2px; font-size:9.5px; font-weight:600; letter-spacing:.12em; color:var(--p-label); }
.ss-pg__fund-link{ font-size:14px; font-weight:700; color:var(--p-accent); white-space:nowrap; }
.ss-pg__fund:hover .ss-pg__fund-link{ text-decoration:underline; text-underline-offset:3px; }
.ss-pg__fund:focus-visible{ outline:2px solid var(--p-accent); outline-offset:-2px; }
.ss-pg__emptybox{ padding:40px 24px; text-align:center; background:var(--p-card); border:1px solid var(--p-line); color:var(--p-text); }
.ss-pg__emptybox p{ margin:0; }

@media (max-width:760px){
	.ss-pg__fundgrid{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){ .ss-pg__fund{ transition:none; } }