/* ==================================================================
   MADHAV FLOWER DECOR — RESPONSIVE
   Mobile-first base lives in the other sheets; these are the
   progressive adjustments, written largest-down for readability.

   Breakpoints
     1200px  laptop
     1024px  tablet landscape  → burger menu appears
      768px  tablet portrait
      560px  phone
   ================================================================== */

/* ------------------------------------------------------------------
   ≤ 1200px — LAPTOP
   ------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .categories__grid { grid-template-columns: repeat(3, 1fr); }
    .features__grid   { grid-template-columns: repeat(3, 1fr); }

    .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; }
    .footer__brand { grid-column: 1 / -1; }

    .process__step p { font-size: 0.78rem; }
}

/* ------------------------------------------------------------------
   ≤ 1024px — TABLET LANDSCAPE
   The desktop nav collapses into the slide-in menu here.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    :root { --header-h: 80px; }

    .nav,
    .header__actions .btn--quote { display: none; }
    .burger { display: grid; }

    /* Intro stacks; the offset frame and badge would overflow. */
    .intro__grid { grid-template-columns: 1fr; }
    .intro__media { order: -1; max-width: 560px; margin-inline: auto; }
    .intro__media::after { inset: 1.25rem -1.25rem -1.25rem 1.25rem; }
    .intro__badge { left: -0.75rem; bottom: 1.5rem; padding: 1.15rem 1.4rem; }
    .intro__badge strong { font-size: 2.25rem; }

    /* Featured: two columns. `wide` and `full` both become full-bleed;
       `tall` keeps its double height in a single column. */
    .featured__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
    .featured-card { grid-column: span 1; grid-row: span 1; }
    .featured-card.is-wide,
    .featured-card.is-full { grid-column: 1 / -1; }
    .featured-card.is-tall { grid-column: span 1; grid-row: span 2; }

    /* Timeline turns vertical — six columns never fit legibly.
       No left padding: the markers start at x=0, so their centres sit
       at half of the 54px marker, and the rail runs from the first
       centre to the last. */
    .process__track {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .process__track::before,
    .process__progress {
        top: 27px;
        bottom: 27px;
        left: 27px;
        right: auto;
        width: 1px;
        height: auto;
    }
    .process__progress {
        transform: scaleY(0);
        transform-origin: top center;
    }
    .process.is-visible .process__progress { transform: scaleY(1); }

    .process__step {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 0 1.5rem;
        text-align: left;
    }
    .process__marker { margin: 0; grid-row: span 2; }
    .process__step h3 { align-self: center; margin-bottom: 0.35rem; }

    .gallery__grid { grid-auto-rows: 165px; }

    /* Testimonials: two per view. */
    .slider__slide { flex-basis: 50%; }

    .section-head--split {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* ------------------------------------------------------------------
   ≤ 768px — TABLET PORTRAIT
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    :root { --header-h: 72px; }

    .categories__grid { grid-template-columns: repeat(2, 1fr); }
    .features__grid   { grid-template-columns: repeat(2, 1fr); }
    .gallery__grid    { grid-template-columns: repeat(2, 1fr); }

    /* Counters: 2×2, with dividers redrawn for the new geometry. */
    .counters__grid { grid-template-columns: repeat(2, 1fr); }
    .counter::before { display: none; }
    .counter { border-bottom: 1px solid var(--c-grey-line); }
    .counter:nth-child(odd) { border-right: 1px solid var(--c-grey-line); }
    .counter:nth-last-child(-n + 2) { border-bottom: 0; }

    .hero__occasions { gap: 0.4rem 1.15rem; }
    .hero__occasions li { font-size: 0.7rem; }
    .hero__scroll { display: none; }

    /* Full-width CTAs read better than two half pills. */
    .hero__actions,
    .cta__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn,
    .cta__actions .btn { width: 100%; }

    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .footer__bottom nav { justify-content: center; }
}

/* ------------------------------------------------------------------
   ≤ 560px — PHONE
   ------------------------------------------------------------------ */
@media (max-width: 560px) {
    .categories__grid,
    .features__grid { grid-template-columns: 1fr; }

    .featured__grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .featured-card.is-tall { grid-column: 1 / -1; grid-row: span 1; }

    .gallery__grid { grid-auto-rows: 150px; }

    /* One testimonial at a time. */
    .slider__slide { flex-basis: 100%; }

    .hero__inner { padding-bottom: 4rem; }
    .hero__title { line-height: 1.12; }

    .intro__media::after { display: none; }
    .intro__badge {
        position: static;
        margin-top: 1.25rem;
        justify-items: center;
        text-align: center;
    }

    .testimonial__quote { font-size: 1.1rem; }
    .testimonial__mark  { width: 34px; height: 34px; }

    .marquee__item { width: 200px; }

    .footer__grid { grid-template-columns: 1fr; }
    .footer__about { max-width: none; }

    .btn { width: 100%; }
    .header__actions .btn-whatsapp { width: 42px; }
    .header__actions .btn { width: auto; }
    .mobile-menu__foot .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Landscape phones — the 100svh hero would swallow the whole screen.
   ------------------------------------------------------------------ */
@media (max-height: 560px) and (orientation: landscape) {
    .hero { min-height: 620px; }
    .hero__scroll { display: none; }
}

/* ------------------------------------------------------------------
   Fine-pointer only: hover affordances that would stick on touch.
   ------------------------------------------------------------------ */
@media (hover: none) {
    .featured-card__cta,
    .gallery__zoom { opacity: 1; transform: none; }
    .gallery__zoom { transform: translate(-50%, -50%); }
}

/* ------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------ */
@media print {
    .site-header,
    .petals,
    .hero__scroll,
    .marquee,
    .btn-whatsapp { display: none !important; }

    body { background: #fff; color: #000; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}