/* ==========================================================================
   KATARI JYOTHSNA - responsive.css
   Load LAST. Everything above is written mobile-first; this file holds the
   breakpoint overrides that belong to more than one component, plus the
   device-capability guards (hover, touch, tall phones, wide desktops).
   ========================================================================== */

/* ==========================================================================
   SMALL PHONES  (<= 400px)
   ========================================================================== */
@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  .btn { padding: .9em 1.45em; font-size: .74rem; }
  .hero__badge { display: none; }
  .logo__sub { letter-spacing: .26em; font-size: .5rem; }
  .mobile-bar a { font-size: .62rem; letter-spacing: .04em; }
  .stat__num { font-size: var(--step-5); }
}

/* ==========================================================================
   PHONES  (<= 639px)
   ========================================================================== */
@media (max-width: 639px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }

  .split,
  .split--wide-media,
  .split--wide-text { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }

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

  /* Bento collapses to a simple two-up stack */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); }
  .b-1, .b-6 { grid-column: span 1; grid-row: span 2; }
  .b-2, .b-3, .b-5 { grid-column: span 2; grid-row: span 2; }
  .b-4 { grid-column: span 1; grid-row: span 2; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat--bordered { padding-left: .9rem; }

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

  .footer-cta__line { font-size: clamp(2.2rem, 12vw, 3.4rem); }
  .footer-legal { justify-content: flex-start; }

  .cta-band { padding: 2.25rem 1.35rem; }
  .cta-actions .btn { width: 100%; }

  .marquee__item { font-size: var(--step-3); }

  .h-scroll { grid-auto-columns: 82vw; }

  .plate::after { transform: translate(.55rem, .55rem); }

  .acc-trigger { font-size: var(--step-0); }
  .acc-trigger__icon { width: 2.1rem; height: 2.1rem; }

  .timeline::before { left: 1rem; }
  .tl-item { padding-left: 3.1rem; }

  .lightbox__nav { width: 2.5rem; height: 2.5rem; }
  .lightbox__nav--prev { left: .4rem; }
  .lightbox__nav--next { right: .4rem; }
}

/* ==========================================================================
   TABLET  (640px - 999px)
   ========================================================================== */
@media (min-width: 640px) and (max-width: 999px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-1 { grid-column: span 2; grid-row: span 2; }
  .b-2 { grid-column: span 2; grid-row: span 2; }
  .b-3 { grid-column: span 2; grid-row: span 2; }
  .b-4 { grid-column: span 2; grid-row: span 2; }
  .b-5 { grid-column: span 4; grid-row: span 2; }
  .b-6 { grid-column: span 2; grid-row: span 2; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .split--wide-media,
  .split--wide-text { grid-template-columns: minmax(0, 1fr); }
}

/* Hero stacks until there is genuinely room for two columns */
@media (max-width: 859px) {
  .hero { min-height: auto; padding-top: clamp(2rem, 8vw, 3.5rem); }
  .hero__media { max-width: 32rem; margin-inline: auto; width: 100%; }
  .hero__title { font-size: clamp(2.8rem, 12vw, 4.6rem); }
  .hero__ring { display: none; }
  .page-hero__inner { max-width: 100%; }
  .sticky-col { position: static; }
  .svc-row__index { display: none; }
  .story__visual { position: static; }
}

/* ==========================================================================
   DESKTOP  (>= 1000px)
   ========================================================================== */
@media (min-width: 1000px) {
  .section-head { margin-bottom: clamp(3rem, 5vw, 5rem); }
  .footer-cta__meta { gap: .75rem 3rem; }
}

/* ==========================================================================
   LARGE DESKTOP  (>= 1440px)
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --gutter: clamp(2rem, 4vw, 4rem); }
  .hero { min-height: min(92svh, 58rem); }
  .h-scroll { grid-auto-columns: 26rem; }
}

/* ==========================================================================
   ULTRA-WIDE  (>= 1800px) - stop the line length from exploding
   ========================================================================== */
@media (min-width: 1800px) {
  :root { --container: 1440px; --container-wide: 1760px; }
}

/* ==========================================================================
   SHORT VIEWPORTS - landscape phones
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 3rem; }
  .hero__cue { display: none; }
  .drawer { padding-top: calc(var(--header-h) + .75rem); }
  .drawer__link { font-size: 1.5rem; padding: .5rem 0; }
  .preloader__mark { width: 3.5rem; }
}

/* ==========================================================================
   INPUT CAPABILITY GUARDS
   ========================================================================== */

/* Devices with no true hover: make hover-revealed content always visible */
@media (hover: none) {
  .work-card__sub { max-height: 6rem; opacity: 1; }
  .work-card__meta { transform: translateY(0); }
  .ceremony__desc { max-height: 8rem; opacity: 1; }
  .gal-item__cap { opacity: 1; transform: none; }
  .card:hover,
  .feature:hover,
  .testimonial:hover,
  .step:hover,
  .pkg:hover { transform: none; }
  .marquee__track { animation-play-state: running !important; }
}

/* Coarse pointers deserve larger tap targets */
@media (pointer: coarse) {
  .nav__link,
  .footer-col a,
  .breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { padding: .78em 1.35em; }
  .icon-btn, .social { width: 3rem; height: 3rem; }
}

/* ==========================================================================
   CONTAINER QUERIES - cards adapt to their own box, not the viewport
   ========================================================================== */
@supports (container-type: inline-size) {
  .card,
  .testimonial,
  .pkg,
  .feature { container-type: inline-size; }

  @container (max-width: 19rem) {
    .card__body { padding: 1.15rem; }
    .card__title { font-size: var(--step-1); }
    .testimonial__text { font-size: var(--step-1); }
    .pkg__price { font-size: var(--step-3); }
  }
}

/* ==========================================================================
   HIGH CONTRAST / FORCED COLORS
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .chip, .card, .feature, .pkg, .testimonial { border: 1px solid CanvasText; }
  .grain, .mesh, .petals { display: none; }
  .work-card__scrim, .ceremony::after { background: none; }
}