/* ============================================================
   SANGEETHA — Hero Section
   Desktop > 1100px | Large Tablet 901-1100px | Tablet ≤ 900px | Mobile ≤ 767px
============================================================ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shell ─────────────────────────────────────────────── */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    max-height: 960px;
    overflow: hidden;
    background: #C8921A;
}

/* ── Background image ──────────────────────────────────── */
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ── Child / character image — DESKTOP ─────────────────── */
.hero-child {
    position: absolute;
    bottom: 0;
    /* Anchor to the 1440 container's right edge on wide monitors, plain 2%
       at or below 1440 (the max() picks 2% once the calc goes negative). */
    right: max(2%, calc((100% - var(--container-max)) / 2));
    height: 85%;
    width: auto;
    /* Reserve room for the text column so the image can never slide under the
       headline on narrow/tall windows. The min() caps her on wide monitors so
       she stays inside the same 1440 band as the text (see the
       .hero-content .sg-container note below). Reserve/cap relaxed from
       700px/654px once the headline growth was slowed — the space the smaller
       heading no longer needs goes to her instead.
       The 48% floor stops that subtractive reserve from starving her on
       narrow desktops: alone, 94% - 620px leaves her just 284px at a 977px
       viewport (a high-res laptop at 200% Windows scaling, or any window
       that isn't maximised) — a small cut-out beside an oversized headline.
       Not higher than 48%: at 50% her box edge collided with the CTAs by
       5px at a 901px-wide tall window. The reserve wins from ~1330px up, so
       1440 and 1920 render exactly as approved. Short viewports (≤650px
       tall) override this cap entirely — see the SHORT SCREENS block at the
       bottom of this file. */
    max-width: min(max(48%, calc(94% - 620px)), 760px);
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    object-position: bottom right;
}

/* ── Content positioning wrapper ───────────────────────── */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
}

/* The hero BACKGROUND stays full-bleed, but its contents sit in the same
   1440px centred container as the rest of the site, so the headline lines
   up with every section below instead of drifting wider on big monitors.
   The character image is capped to match (see .hero-child above) — both
   must move as one unit, or the text slides into her.
   No effect at or below 1440px: every laptop/tablet/phone is unchanged. */

/* ── Text block ────────────────────────────────────────── */
/* Wide enough for the headline to run into the character image's
   transparent left margin. In the heading's vertical band the girl's
   visible pixels don't begin until ~33% into her box, so that strip is
   free space. Sub and buttons sit lower, where the plate extends further
   left, so they carry their own narrower max-widths below. */
.hero-text {
    max-width: 900px;
}

/* ── Heading ───────────────────────────────────────────── */
.hero-heading {
    font-family: var(--font-heading);
    /* Growth rate slowed from 6.2vw so the headline stops ballooning on large
       monitors and crowding the character image. Still the largest heading on
       the site (83px vs the biggest section heading at 74px @1920). */
    font-size: clamp(3.2rem, 5.6vw, 5.2rem);
    font-weight: 700;
    color: #3D1A08;
    line-height: 1.05;
    margin-bottom: 26px;
    -webkit-text-stroke: 0.6px currentColor;
    animation: fadeUp 0.7s ease-out 0.1s both;
}

/* Heading is set roman in one colour — the line break carries the emphasis.
   (Italic remains the accent device elsewhere on the site.) */

/* ── Decorative divider (hidden on desktop) ─────────────── */
.hero-divider {
    display: none;
    align-items: center;
    gap: 12px;
    margin: 8px auto 14px;
    width: 160px;
}

.hero-div-line {
    flex: 1;
    height: 1.5px;
    background: #3D1A08;
    display: block;
    border-radius: 2px;
}

.hero-div-icon {
    color: #3D1A08;
    font-size: 14px;
    line-height: 1;
}

/* ── Description ───────────────────────────────────────── */
/* Desktop-only forced break, so the two clauses sit on their own lines
   instead of leaving "family." orphaned. Below 901px the text is centred
   and narrower, so it wraps naturally and the break is suppressed. */
.hero-sub-br { display: none; }
@media (min-width: 901px) {
    .hero-sub-br { display: inline; }
}

.hero-sub {
    font-size: 24px;
    font-weight: 600;
    color: #3D1A08;
    line-height: 1.6;
    max-width: 660px;
    margin-bottom: 40px;
    animation: fadeUp 0.7s ease-out 0.3s both;
}

/* ── Buttons ───────────────────────────────────────────── */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    animation: fadeUp 0.7s ease-out 0.48s both;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--maroon);
    color: var(--cream);
    border: 2px solid var(--maroon);
    border-radius: var(--radius-pill);
    padding: 10px 28px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.btn-hero-primary:hover {
    background: var(--deep-maroon);
    border-color: var(--deep-maroon);
    color: var(--cream);
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--maroon);
    border: 2px solid var(--maroon);
    border-radius: var(--radius-pill);
    padding: 10px 28px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-hero-outline:hover {
    background: var(--maroon);
    border-color: var(--maroon);
    color: var(--cream);
}

/* Desktop: show Order Online, hide Reserve */
.btn-hero-reserve { display: none; }
/* Mobile/Tablet (≤900px): hide Order Online (in sticky bar), show Reserve */
@media (max-width: 900px) {
    .btn-hero-order  { display: none; }
    .btn-hero-reserve { display: inline-flex; }
}

/* ══════════════════════════════════════════════════════════
   LARGE TABLET — iPad Pro  901px – 1100px  (PORTRAIT ONLY)
   Landscape screens in this range (e.g. high-DPI laptops that
   resolve to ~1024 CSS px) keep the desktop side-by-side layout.
══════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1100px) and (orientation: portrait) {

    .hero {
        max-height: none;
        overflow: hidden;
    }

    .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: var(--nav-height);
        padding-inline: 1.5rem;
        z-index: 3;
    }

    .hero-text {
        width: 100%;
        max-width: 780px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-inline: auto;
    }

    .hero-heading {
        font-size: clamp(3.2rem, 5.5vw, 4.2rem);
        text-align: center;
        margin-bottom: 10px;
    }

    .hero-divider {
        display: flex;
    }

    .hero-sub {
        font-size: 19px;
        text-align: center;
        max-width: 680px;
        margin-inline: auto;
        margin-bottom: 20px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-child {
        position: absolute;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        height: auto;
        max-height: 48%;
        width: 90%;
        max-width: none;
        object-fit: contain;
        object-position: bottom center;
        z-index: 2;
    }
}

/* ══════════════════════════════════════════════════════════
   NARROW LANDSCAPE DESKTOP  901px – 1220px
   High-DPI laptops (~1024 CSS px) and small laptops. Keep the
   side-by-side layout but tighten the text column so the
   character image keeps its presence without overlapping.
══════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1220px) and (orientation: landscape) {

    /* Laptops / scaled displays land here (e.g. a 1366px or 1920px screen
       at 125-200% Windows scaling, or any un-maximised window). */
    .hero-text {
        max-width: 720px;
    }

    /* No .hero-heading override here on purpose. This band used to run at
       6.4vw, which is steeper than the base rule — so the headline grew
       FASTER on a small laptop than on a 1920 monitor and jumped ~10px at
       the 1220/1221 boundary. Inheriting the base clamp keeps the scale
       continuous across the whole desktop range. */

    .hero-sub {
        font-size: 20px;
        max-width: 500px;
        margin-bottom: 34px;
    }

    /* No .hero-child override here either — the base rule's 46% floor now
       covers this band, so she scales on one continuous curve from 901px
       all the way to 1920px. The old override reserved 560px of text room
       flat, which left her at 344px (35% of the screen) on a 977px laptop. */
}

/* ══════════════════════════════════════════════════════════
   TABLET  768px – 900px  (iPad portrait)
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) {

    .hero-heading {
        font-size: clamp(2.6rem, 5.5vw, 3.6rem);
    }

    .hero-sub {
        font-size: 17px;
        max-width: 500px;
    }

    .hero-content {
        top: 6%;
        bottom: 52%;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET  ≤ 900px
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .hero {
        height: 100svh;
        min-height: 600px;
        max-height: none;
        overflow: hidden;
    }

    .hero-content {
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        bottom: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: var(--nav-height);
        padding-inline: 1.5rem;
        z-index: 3;
    }

    .hero-text {
        width: 100%;
        max-width: 650px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-inline: auto;
    }

    .hero-heading {
        font-size: clamp(2.2rem, 6vw, 3.2rem);
        text-align: center;
        margin-bottom: 10px;
    }

    .hero-divider {
        display: flex;
    }

    .hero-sub {
        font-size: 16px;
        text-align: center;
        max-width: 540px;
        margin-inline: auto;
        margin-bottom: 18px;
        line-height: 1.6;
    }

    .hero-actions {
        justify-content: center;
        gap: 12px;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        font-size: 13px;
        padding: 9px 22px;
    }

    .hero-child {
        position: absolute;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        height: auto;
        max-height: 48%;
        width: 90%;
        max-width: none;
        object-fit: contain;
        object-position: bottom center;
        z-index: 2;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  < 768px — flex-column layout
   Content and image stack vertically so they never overlap
   regardless of screen height, font scale, or heading wrap.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Hero becomes a flex column — content on top, image below */
    .hero {
        display: flex;
        flex-direction: column;
        height: 100svh;
        min-height: 580px;
        max-height: none;
        overflow: hidden;
    }

    /* Content: natural height, always at top, never clips into image */
    .hero-content {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: calc(var(--nav-height) + 14px);
        padding-inline: 1.5rem;
        padding-bottom: 18px;
        z-index: 3;
    }

    /* Image: fills remaining space below content, anchored to bottom */
    .hero-child {
        position: relative;
        bottom: auto; left: auto; right: auto;
        transform: none;
        flex: 1;
        min-height: 0;
        width: 90%;
        height: 100%;
        max-height: 46svh;
        object-fit: contain;
        object-position: bottom center;
        /* Top margin auto, bottom 0: when the 46svh cap leaves the flex
           column with spare height (tall phones like 412x915), the spare
           becomes space ABOVE her, not a gap under her feet — she stays
           planted on the hero's bottom edge instead of floating mid-air. */
        margin: auto auto 0;
        display: block;
        align-self: flex-end;
        z-index: 2;
    }

    /* Sticky bar handles Order Online on mobile */
    .btn-hero-uber { display: none; }
}

/* ══════════════════════════════════════════════════════════
   SMALL PHONES  < 480px
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .hero {
        overflow-x: hidden;
    }

    .hero-content {
        padding-inline: 1.5rem;
        padding-bottom: 14px;
    }

    .hero-heading {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        margin-bottom: 8px;
    }

    .hero-divider {
        margin: 6px auto 10px;
        width: 130px;
    }

    .hero-sub {
        font-size: 13px;
        margin-bottom: 10px;
        max-width: 270px;
        line-height: 1.55;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 9px 20px;
    }

    .hero-child {
        width: 100%;
        max-height: 44svh;
    }
}

/* ══════════════════════════════════════════════════════════
   LARGE PHONES  390–480px  (S24 Ultra, iPhone Pro Max, Pixel 9 Pro)
   Overrides the small-phone defaults above for wide-tall screens
══════════════════════════════════════════════════════════ */
@media (min-width: 390px) and (max-width: 480px) {

    .hero-content {
        padding-inline: 1.75rem;
        padding-bottom: 18px;
    }

    .hero-heading {
        font-size: clamp(2.1rem, 9vw, 2.7rem);
        margin-bottom: 10px;
    }

    .hero-divider {
        width: 150px;
        margin: 8px auto 12px;
    }

    .hero-sub {
        font-size: 14.5px;
        max-width: 340px;
        margin-bottom: 16px;
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        justify-content: center;
        gap: 10px;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        width: auto;
        justify-content: center;
        font-size: 12px;
        padding: 9px 14px;
        letter-spacing: 0.02em;
    }

    .hero-child {
        width: 90%;
        max-height: 46svh;
    }
}

/* ══════════════════════════════════════════════════════════
   SHORT SCREENS  max-height 650px + min-width 768px
   Catches short landscape screens AND ordinary laptops whose
   usable viewport height is under 650px (very common at 125-150%
   Windows scaling). Keep the headline large — only the vertical
   RHYTHM is compressed (tighter margins), not the type size.
══════════════════════════════════════════════════════════ */
@media (max-height: 650px) and (min-width: 768px) {

    .hero-heading {
        font-size: clamp(2.7rem, 5.7vw, 4.4rem);
        line-height: 1.05;
        margin-bottom: 12px;
    }

    .hero-divider {
        display: none;
    }

    .hero-sub {
        font-size: 19px;
        margin-bottom: 18px;
        line-height: 1.55;
        max-width: 520px;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        padding: 9px 24px;
        font-size: 13px;
    }

    /* On short viewports her height (85% of a short hero) is small, so the
       base width cap bites through the aspect ratio and shrinks the picture
       INSIDE its box: at 1024x600 the base cap rendered her 464x365 — only
       61% of the hero's height — beside near-full-size text. Text is smaller
       on short screens anyway (see .hero-heading above), so give her the
       width the text isn't using. Measured at 1024x600: 73% of hero height
       with 38px to the headline and 31px to the CTAs; 1366x650 reaches the
       full 85%. */
    .hero-child {
        max-width: min(60%, calc(96% - 415px));
    }
}