/* ─────────────────────────────────────────────────────────────────────────────
   Nikalas Foundation homepage hero — Components/Shared/FoundationHero.razor.
   Light sky stage with photo cards around the brand, closed by a dark-blue band
   carrying the four focus areas. Everything is scoped under .nf-hero.

   Specificity notes (responsive-normalize.css loads last):
   - images use .nf-hero … img[width] to beat img[width][height] { height:auto }
   - the tagline uses p.nf-hero__tagline to beat .rioc-app p { font-size }
   ───────────────────────────────────────────────────────────────────────────── */

.nf-hero {
    /* Mapped onto the site-wide tokens in nikalas-theme.css. */
    --nf-navy: var(--nfd-navy);
    --nf-ink: var(--nfd-navy);
    --nf-orange: var(--nfd-orange);
    --nf-orange-deep: #E8640A;
    --nf-highlight: var(--nfd-orange-text);
    --nf-text: var(--nfd-text);
    --nf-curve-h: clamp(22px, 2.6vw, 44px);   /* curve from the blue band into the next section */
    --nf-gap: clamp(12px, 1.4vw, 20px);
    --nf-band-overlap: 64px;      /* how far the bottom photos sit over the blue band */

    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--nf-text);
    background:
        radial-gradient(ellipse 40% 58% at 50% 36%, #ffffff 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, 0) 76%),
        linear-gradient(180deg, #f5faff 0%, #e6f1ff 50%, #d3e6fc 100%);
}

/* The blue band ends in a gentle curve of the page background, so the next section
   flows on instead of starting at a hard edge. */
.nf-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: var(--nf-curve-h);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L0 22 C360 2 1080 2 1440 22 L1440 40Z' fill='%23F5F8FD'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.nf-hero__deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.nf-hero__deco svg { display: block; width: 100%; height: 100%; }

.nf-hero__inner {
    position: relative;
    z-index: 1;                   /* photos sit above the blue band */
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(22px, 2.4vw, 36px) 24px 0;
    display: grid;
    gap: var(--nf-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "brand brand brand"
        "wide  wide  wide"
        "l1    l2    l3"
        "r1    r2    r3";
}

/* ── Branding ──────────────────────────────────────────────────────────────── */

.nf-hero__brand {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    min-width: 0;
    animation: nf-fade .8s ease-out backwards;
}

.nf-hero__mark-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(70px, 5.8vw, 96px);
    aspect-ratio: 1;
    margin-bottom: clamp(6px, .8vw, 12px);
}
/* Soft sun glow behind the lotus. */
.nf-hero__mark-wrap::before {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 179, 71, .3) 0%, rgba(255, 179, 71, .08) 45%, rgba(255, 179, 71, 0) 70%);
}
.nf-hero .nf-hero__mark-wrap img.nf-hero__mark {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(232, 89, 12, .2));
}

.nf-hero__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: var(--nf-navy);
}

.nf-hero .nf-hero__name {
    font-size: var(--nfd-fs-hero);
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--nf-ink);
    background: linear-gradient(180deg, #123f8a 0%, #071f4f 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* "— F O U N D A T I O N —" with orange rules. */
.nf-hero__sub {
    display: flex;
    align-items: center;
    gap: .9em;
    margin-top: .45em;
    font-size: clamp(13px, 1.15vw, 18px);
    font-weight: 600;
    letter-spacing: .55em;
    text-transform: uppercase;
    color: var(--nf-ink);
    margin-right: -.55em;         /* cancel the trailing letter-spacing so the rules balance */
}
.nf-hero__sub::before,
.nf-hero__sub::after {
    content: "";
    width: clamp(28px, 4.4vw, 64px);
    height: 3px;
    border-radius: 2px;
    background: var(--nf-orange);
}
.nf-hero__sub::after { margin-left: -.55em; }

.nf-hero p.nf-hero__tagline {
    margin: clamp(12px, 1.4vw, 20px) 0 0;
    max-width: 30em;
    font-size: clamp(17px, 1.45vw, 22px);
    font-weight: 600;
    line-height: 1.32;
    color: var(--nf-ink);
    text-transform: none;         /* a site-wide rule capitalises paragraph text */
    text-wrap: balance;
}
.nf-hero__hl { color: var(--nf-highlight); font-weight: 700; }

.nf-hero__swoosh {
    display: block;
    width: clamp(180px, 22vw, 340px);
    height: clamp(12px, 1.3vw, 20px);
    margin-top: clamp(4px, .6vw, 10px);
}

/* ── Photo cards ───────────────────────────────────────────────────────────── */

.nf-hero__card {
    --tilt: 0deg;
    --delay: 0ms;
    position: relative;
    margin: 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 22px;
    border: 6px solid #fff;
    background: #dfe9f8;
    transform: rotate(var(--tilt));
    box-shadow:
        0 22px 40px -18px rgba(6, 40, 96, .55),
        0 3px 10px rgba(6, 40, 96, .14);
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    animation: nf-rise .7s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: var(--delay);
}
/* Absolutely positioned so the photo's intrinsic height never sizes the grid row. */
.nf-hero .nf-hero__card img[width] {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .5s ease-out;
}
.nf-hero__card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02);
    box-shadow:
        0 30px 50px -18px rgba(6, 40, 96, .6),
        0 6px 14px rgba(6, 40, 96, .18);
}
.nf-hero .nf-hero__card:hover img { transform: scale(1.06); }

.nf-hero__card--wide { grid-area: wide; aspect-ratio: 21 / 8; --delay: 380ms; }
.nf-hero .nf-hero__card--wide img[width] { object-position: 50% 45%; }
.nf-hero__card--l1 { grid-area: l1; --tilt: -2.4deg; --delay: 100ms; }
.nf-hero__card--r1 { grid-area: r1; --tilt:  2.4deg; --delay: 160ms; }
.nf-hero__card--l2 { grid-area: l2; --tilt:  1.6deg; --delay: 220ms; }
.nf-hero__card--r2 { grid-area: r2; --tilt: -1.6deg; --delay: 280ms; }
.nf-hero__card--l3 { grid-area: l3; --tilt: -1.8deg; --delay: 340ms; }
.nf-hero__card--r3 { grid-area: r3; --tilt:  1.8deg; --delay: 400ms; }

@keyframes nf-rise {
    from { opacity: 0; transform: translateY(26px) rotate(var(--tilt)) scale(.96); }
    to   { opacity: 1; transform: rotate(var(--tilt)); }
}
@keyframes nf-fade {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ── Blue focus band ───────────────────────────────────────────────────────── */

.nf-hero__features {
    position: relative;
    z-index: 0;
    list-style: none;
    margin: calc(var(--nf-band-overlap) * -1) 0 0;
    padding: calc(var(--nf-band-overlap) + clamp(18px, 2vw, 28px)) max(24px, calc((100% - 1180px) / 2)) calc(var(--nf-curve-h) + clamp(16px, 1.8vw, 26px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    color: #fff;
    background: linear-gradient(180deg, #0F55B5 0%, #0A4590 40%, var(--nf-navy) 100%);
    /* gentle dome along the top edge */
    border-radius: 50% 50% 0 0 / 56px 56px 0 0;
    overflow: hidden;
    animation: nf-fade .8s ease-out .45s backwards;
}
/* Orange arcs in the bottom corners. */
.nf-hero__features::before,
.nf-hero__features::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: clamp(160px, 22vw, 340px);
    height: clamp(60px, 7vw, 110px);
    pointer-events: none;
}
.nf-hero__features::after {
    right: 0;
    background: radial-gradient(ellipse 100% 100% at 100% 100%, rgba(255, 133, 0, 0) 54%, #FF8500 55%, #FFA43D 66%, rgba(255, 164, 61, 0) 67%);
}
.nf-hero__features::before {
    left: 0;
    background: radial-gradient(ellipse 100% 100% at 0 100%, rgba(255, 133, 0, 0) 62%, rgba(255, 133, 0, .85) 63%, rgba(255, 133, 0, .85) 68%, rgba(255, 133, 0, 0) 69%);
}

.nf-hero__feature {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px clamp(10px, 1.4vw, 22px);
}
.nf-hero__feature + .nf-hero__feature { border-left: 2px dotted rgba(255, 255, 255, .45); }

.nf-hero__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(150deg, #FFA23A 0%, var(--nf-orange) 45%, var(--nf-orange-deep) 100%);
    box-shadow: 0 0 0 5px rgba(255, 133, 0, .18), 0 10px 20px -8px rgba(0, 0, 0, .45);
    transition: transform .2s ease-out;
}
.nf-hero__icon svg { width: 24px; height: 24px; }
.nf-hero__feature:hover .nf-hero__icon { transform: translateY(-2px); }

.nf-hero__feature-text {
    max-width: 8em;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.25;
}

/* ── Desktop: photos frame the brand; whole hero fits the first screen ─────── */

@media (min-width: 1100px) {
    .nf-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
        /* Row height tracks width, capped so header + hero + band fit the viewport;
           rows may still grow if the brand needs more room. */
        grid-template-rows: repeat(3, minmax(clamp(140px, min(13vw, calc((100vh - 340px) / 3)), 220px), auto));
        grid-template-areas:
            "l1 brand r1"
            "l2 brand r2"
            "l3 wide  r3";
        column-gap: clamp(24px, 2.4vw, 40px);
    }
    .nf-hero__card,
    .nf-hero__card--wide { aspect-ratio: auto; height: 100%; }
}

/* ── Tablet ────────────────────────────────────────────────────────────────── */

@media (max-width: 1099.98px) {
    .nf-hero { --nf-band-overlap: 48px; }
    /* The ribbon/wave artwork is drawn for a wide hero; stretched over a tall one it distorts. */
    .nf-hero__deco { display: none; }
    .nf-hero__brand { padding-bottom: 8px; }
    .nf-hero__card { aspect-ratio: 3 / 2; border-width: 5px; }
    .nf-hero__card--wide { aspect-ratio: 3 / 1; }
    .nf-hero__card--l1, .nf-hero__card--r2, .nf-hero__card--l3 { --tilt: -1deg; }
    .nf-hero__card--r1, .nf-hero__card--l2, .nf-hero__card--r3 { --tilt: 1deg; }
    .nf-hero__features { border-radius: 50% 50% 0 0 / 36px 36px 0 0; }
    .nf-hero__feature-text { font-size: 16px; max-width: 7.5em; }
    .nf-hero__icon { width: 52px; height: 52px; }
    .nf-hero__icon svg { width: 24px; height: 24px; }
}

@media (max-width: 899.98px) {
    /* Four items no longer fit in a row: two-by-two, no dividers. */
    .nf-hero__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
    }
    .nf-hero__feature { justify-content: flex-start; padding: 0; }
    .nf-hero__feature + .nf-hero__feature { border-left: 0; }
    .nf-hero__feature-text { max-width: none; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 699.98px) {
    .nf-hero { --nf-band-overlap: 36px; }
    .nf-hero__inner {
        padding-inline: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "brand brand"
            "wide  wide"
            "l1    r1"
            "l2    r2";
    }
    .nf-hero__card--l3,
    .nf-hero__card--r3 { display: none; }
    .nf-hero__card { border-width: 3px; border-radius: 14px; }
    .nf-hero__card--wide { aspect-ratio: 16 / 7; }
    .nf-hero__sub { letter-spacing: .42em; margin-right: -.42em; }
    .nf-hero__sub::after { margin-left: -.42em; }

    .nf-hero__features { padding-inline: 16px; border-radius: 50% 50% 0 0 / 24px 24px 0 0; }
    .nf-hero__icon { width: 42px; height: 42px; box-shadow: 0 0 0 4px rgba(255, 133, 0, .18), 0 8px 14px -6px rgba(0, 0, 0, .4); }
    .nf-hero__icon svg { width: 20px; height: 20px; }
    .nf-hero__feature { gap: 10px; }
    .nf-hero__feature-text { font-size: 14.5px; }
}

@media (max-width: 379.98px) {
    .nf-hero__features { gap: 14px 8px; padding-inline: 12px; }
    .nf-hero__icon { width: 36px; height: 36px; }
    .nf-hero__icon svg { width: 18px; height: 18px; }
    .nf-hero__feature { gap: 8px; }
    .nf-hero__feature-text { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .nf-hero__brand,
    .nf-hero__card,
    .nf-hero__features { animation: none; }
    .nf-hero__card,
    .nf-hero .nf-hero__card img[width],
    .nf-hero__icon { transition: none; }
    .nf-hero__card:hover { transform: rotate(var(--tilt)); }
    .nf-hero .nf-hero__card:hover img,
    .nf-hero__feature:hover .nf-hero__icon { transform: none; }
}