/* ==========================================================================
   MITHLA — मिथला · Responsive overrides
   Breakpoints:  xl:1280  lg:1024  md:768  sm:600  xs:480  2xs:360
   ========================================================================== */

/* ── xl 1280 ──────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .hero__grid { column-gap: clamp(16px, 3vw, 48px); }
    .medallion { --size: min(48vw, 520px); }
    .intro__grid { column-gap: clamp(20px, 4vw, 60px); }
}

/* ── lg 1024 ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --header-h: 80px; }

    /* Header: hide desktop nav + CTA; show hamburger */
    .site-nav,
    .site-header__cta { display: none; }
    .menu-toggle { display: grid; }
    .site-header__inner { grid-template-columns: 1fr auto; }

    /* Hero: stack vertically */
    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "visual"
            "body";
        row-gap: 0;
        justify-items: center;
        text-align: center;
    }
    .hero__head { text-align: center; }
    .hero__label { justify-content: center; }
    .hero__title { text-align: center; }
    .hero__visual { width: 100%; margin: clamp(24px, 4vw, 40px) 0; }
    .medallion {
        --size: min(72vw, 400px);
        margin-inline: auto;
    }
    .hero__body { text-align: center; width: 100%; }
    .hero__actions { justify-content: center; }
    .hero__tagline { font-size: clamp(1.55rem, 3.4vw, 2.4rem); }

    /* Intro */
    .intro__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "hi"
            "text";
        row-gap: 10px;
    }
    .intro__hi { justify-self: center; font-size: clamp(4.5rem, 18vw, 12rem); }
    .intro__title { text-align: center; }

    /* Story */
    .story__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(24px, 4vw, 48px); }
    .story__steps { max-width: 500px; width: 100%; }

    /* Cards: 2 columns */
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Vision */
    .vision__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 5vw, 64px); }
    .vision__visual { order: -1; max-width: 480px; width: 80%; margin-inline: auto; }
    .globe { width: 100%; }

    /* Building */
    .building__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "visual" "list";
        justify-items: center;
    }
    .building__visual { max-width: 280px; }
    .building__visual > .brand-box-scene { position: static; }

    /* Swad */
    .swad__panel { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .swad__copy { display: grid; justify-items: center; }
    .swad__text { text-align: left; }

    /* Contact */
    .contact__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); }

    /* Footer */
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 40px); }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* ── md 768 ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --section-y: clamp(72px, 10vw, 120px);
    }

    .hero__title { font-size: clamp(3.6rem, 16.5vw, 7rem); }
    .hero__tagline { font-size: clamp(1.35rem, 4.4vw, 2.2rem); }

    .medallion { --size: min(80vw, 340px); }

    .cards { grid-template-columns: minmax(0, 1fr); }
    .card__inner { min-height: 280px; }

    .contact-form { padding: clamp(22px, 4vw, 36px); }
    .contact-form__grid { grid-template-columns: minmax(0, 1fr); }

    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }

    /* Story visual width */
    .story__stage { width: min(100%, 80vw); }
    .story__title { font-size: clamp(1.7rem, 5.5vw, 3rem); }

    /* Building box smaller */
    .brand-box-scene { --w: 190px; --h: 260px; --d: 72px; }
}

/* ── sm 600 ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hero__label { font-size: 1rem; }
    .hero__label-line { width: 28px; }
    .hero__hi { font-size: 1rem; }
    .intro__title { font-size: clamp(2.1rem, 9.5vw, 3.8rem); }

    .swad__panel { padding: clamp(32px, 6vw, 56px) clamp(18px, 4vw, 36px); }
    .swad__title { font-size: clamp(2.2rem, 9.2vw, 3.6rem); }
    .swad__tagline { font-size: clamp(1.1rem, 4.5vw, 1.7rem); }

    .pillar { grid-template-columns: 44px 1fr; }
    .pillar__icon { width: 44px; height: 44px; }
    .pillar__tag { display: none; }

    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ── xs 480 ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --gutter: 18px; }

    .btn { min-height: 52px; padding: 0 22px; gap: 12px; font-size: .73rem; }
    .btn--link { min-height: 48px; }

    .hero__title { font-size: clamp(3.2rem, 17vw, 5.5rem); }
    .hero__tagline { font-size: clamp(1.2rem, 5vw, 2rem); }
    .hero { padding-bottom: 68px; }
    .hero__scroll { bottom: 10px; }

    .story__step { grid-template-columns: 38px 1fr; }
    .story__name { font-size: clamp(1.4rem, 5.8vw, 2.2rem); }

    .contact-form { padding: 20px 16px; }

    .mobile-menu__label { font-size: clamp(1.85rem, 10vw, 2.8rem); }

    .brand-box-scene { --w: 170px; --h: 230px; --d: 64px; }
    .brand-box__word { font-size: 2rem; }
}

/* ── 2xs 360 ──────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .hero__title { font-size: clamp(2.8rem, 17vw, 5rem); }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { justify-content: center; }

    .cards { gap: 12px; }

    .site-footer__inner { gap: clamp(18px, 5vw, 28px); }
    .vision__title { font-size: clamp(2.6rem, 13vw, 5rem); }
}

/* ── xl-only 1921+ ────────────────────────────────────────────────── */
@media (min-width: 1921px) {
    :root { --container: 1600px; }
    .hero__title { font-size: clamp(10rem, 8.5vw, 13rem); }
    .medallion { --size: min(720px, 40vw); }
}

/* ── hover-capable devices only ────────────────────────────────────── */
@media (hover: none) {
    .card__rule { transform: scaleX(1) translateZ(10px); }
    .btn:hover .icon--arrow { transform: none; }
    .site-header__cta:hover .icon--arrow { transform: none; }
}

/* ── high-contrast mode ─────────────────────────────────────────────── */
@media (forced-colors: active) {
    .site-header { background: Canvas; }
    .btn--primary { background: ButtonText; color: ButtonFace; }
    .site-footer { background: Canvas; color: CanvasText; border-top: 1px solid ButtonText; }
    .social__link { border: 1px solid ButtonText; }
    .card__inner { border: 1px solid ButtonText; }
}