/* ASA home page sections — builds on theme.css tokens (var(--asa-*)). */

/* ---------- Hero (video) ---------- */
.asa-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: min(88svh, 780px);
    margin-top: calc(-1 * var(--asa-header-h, 76px));
    padding: calc(var(--asa-header-h, 76px) + 40px) 0 150px;
    color: #fff; background: var(--asa-navy-900);
}
.asa-hero__media { position: absolute; inset: 0; z-index: -2; }
.asa-hero__video, .asa-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asa-hero__poster { z-index: -1; display: none; }
@media (prefers-reduced-motion: reduce) {
    .asa-hero__video { display: none; }
    .asa-hero__poster { display: block; }
}
.asa-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14, 24, 41, .6) 0%, rgba(var(--asa-navy-rgb), .65) 50%, rgba(14, 24, 41, .88) 100%);
}
.asa-hero .asa-hero__title {
    margin: 0 auto; max-width: 16ch; color: #fff; text-transform: none;
    font-family: var(--asa-font-display); font-weight: 700;
    font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); line-height: 1.08; letter-spacing: -.02em;
}
.asa-hero__lead { margin: 20px auto 0; max-width: 46ch; color: rgba(255, 255, 255, .88); font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.6; }
.asa-hero__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 32px; }
.asa-hero .asa-hero__btn-primary,
html.dark .asa-hero .asa-hero__btn-primary { background: var(--asa-mint); color: var(--asa-navy); }
.asa-hero .asa-hero__btn-primary:hover,
html.dark .asa-hero .asa-hero__btn-primary:hover { background: #C4EBE6; color: var(--asa-navy); }
.asa-hero .asa-hero__btn-ghost,
html.dark .asa-hero .asa-hero__btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
.asa-hero .asa-hero__btn-ghost:hover,
html.dark .asa-hero .asa-hero__btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
@media (min-width: 576px) {
    .asa-hero__actions { flex-direction: row; justify-content: center; }
}

/* ---------- Category cards (overlap hero) ---------- */
.asa-cats { position: relative; z-index: 2; margin-top: -110px; }
.asa-cats__grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asa-cat {
    --cat: var(--asa-navy);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 20px 12px 18px;
    overflow: hidden; text-decoration: none;
    background: var(--asa-surface); color: var(--asa-text);
    border: 1px solid var(--asa-border); border-bottom: 4px solid var(--cat);
    border-radius: var(--asa-radius); box-shadow: var(--asa-shadow);
    transition: transform .25s var(--asa-ease), box-shadow .25s var(--asa-ease), border-color .25s var(--asa-ease);
}
/* One accent for all cards; it lights up only on hover/focus. */
.asa-cat:hover, .asa-cat:focus-visible { --cat: var(--asa-teal); transform: translateY(-4px); color: var(--asa-text); }
html.dark .asa-cat { --cat: var(--asa-mint); }
html.dark .asa-cat:hover, html.dark .asa-cat:focus-visible { --cat: var(--asa-teal); }
html.dark .asa-cat {
    background: var(--asa-glass-bg); border-color: var(--asa-glass-border);
    border-bottom-color: var(--cat);
    -webkit-backdrop-filter: blur(var(--asa-glass-blur)); backdrop-filter: blur(var(--asa-glass-blur));
}
.asa-cat__icon { width: 56px; height: 56px; object-fit: contain; transition: transform .3s var(--asa-ease); }
.asa-cat:hover .asa-cat__icon { transform: translateY(-3px) scale(1.04); }
.asa-cat__title { font-family: var(--asa-font-display); font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: center; }
@media (min-width: 768px) { .asa-cats__grid { gap: 20px; } .asa-cat { padding: 28px 20px 24px; gap: 14px; } .asa-cat__icon { width: 72px; height: 72px; } .asa-cat__title { font-size: 1.2rem; } }
@media (min-width: 1200px) { .asa-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .asa-cat__icon { width: 88px; height: 88px; } }

/* ---------- Intro (split) ---------- */
.asa-home-intro { padding: 64px 0 40px; }
.asa-home-intro__grid { display: grid; gap: 28px; align-items: center; }
.asa-home-intro__title {
    margin: 0; color: var(--asa-text); text-transform: none;
    font-family: var(--asa-font-display); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.25rem); line-height: 1.15;
}
.asa-home-intro__copy { padding-left: 22px; border-left: 3px solid var(--asa-teal); }
html.dark .asa-home-intro__copy { border-left-color: var(--asa-mint); }
.asa-home-intro__copy p { margin: 0 0 16px; color: var(--asa-text-muted); font-size: 17px; line-height: 1.7; max-width: 58ch; }
.asa-home-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.asa-home-intro__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--asa-link); font-weight: 600; text-decoration: none; }
.asa-home-intro__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 992px) {
    .asa-home-intro { padding: 96px 0 56px; }
    .asa-home-intro__grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* ---------- Impact ---------- */
.asa-impact { padding: 24px 0 56px; }
.asa-impact__box {
    padding: 32px 20px; text-align: center;
    border: 1px solid var(--asa-border); border-radius: var(--asa-radius-lg); background: var(--asa-surface);
}
.asa-impact__eyebrow { margin: 0 0 28px; color: var(--asa-teal); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
html.dark .asa-impact__eyebrow { color: var(--asa-mint); }
.asa-impact__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin: 0; padding: 0; list-style: none; }
.asa-impact__item { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; padding: 0; }
.asa-impact__circle {
    display: flex; align-items: center; justify-content: center;
    width: min(128px, 36vw); aspect-ratio: 1; border-radius: 50%;
    border: 3px solid var(--asa-teal); box-shadow: 0 0 0 6px rgba(var(--asa-teal-rgb), .12);
}
html.dark .asa-impact__circle { border-color: var(--asa-mint); box-shadow: 0 0 0 6px rgba(var(--asa-mint-rgb), .12); }
.asa-impact__value { color: var(--asa-text); font-family: var(--asa-font-display); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 700; line-height: 1; }
.asa-impact__label { max-width: 16ch; color: var(--asa-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
@media (min-width: 768px) {
    .asa-impact__box { padding: 48px 32px; }
    .asa-impact__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .asa-impact__circle { width: 156px; }
}

/* ---------- Shared bits ---------- */
.asa-home-more { margin: 40px 0 0; text-align: center; }

/* ---------- Partners ---------- */
.asa-partners__row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 20px 40px; margin: 0; padding: 0; list-style: none;
}
.asa-partners__row li { margin: 0; padding: 0; }
.asa-partners__row img {
    display: block; width: auto; max-width: 160px; height: 56px; object-fit: contain;
    opacity: .85; transition: opacity .2s var(--asa-ease);
}
.asa-partners__row img:hover { opacity: 1; }
html.dark .asa-partners__row li { padding: 10px 16px; border-radius: var(--asa-radius-sm); background: rgba(255, 255, 255, .92); }
/* Partners with a white logo variant: no light pill on dark mode, swap the image instead. */
.asa-logo-dark { display: none !important; }
html.dark .has-dark-logo .asa-logo-light { display: none !important; }
html.dark .has-dark-logo .asa-logo-dark { display: block !important; }
html.dark .asa-partners__row li.has-dark-logo { padding: 0; background: none; }