/* ==========================================================================
   Shri Sai Interior — responsive layer
   Mobile-first. Breakpoints in rem so they respect the user's text size.
     36rem  576px   large phone
     48rem  768px   tablet portrait
     62rem  992px   tablet landscape / small laptop
     75rem  1200px  desktop
     90rem  1440px  large desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   Small phones (down to 320px)
   -------------------------------------------------------------------------- */

@media (max-width: 22.5rem) {
  :root { --gutter: 1rem; }
  .strip__inner { min-block-size: 38px; }
  .btn { padding-inline: 1.15rem; font-size: 0.72rem; }
  .brand__name { font-size: 1.02rem; }
  .brand__symbol { inline-size: 32px; block-size: 32px; }
  .brand__tagline { display: none; }
}

/* --------------------------------------------------------------------------
   Announcement strip: drop the least important item first, never wrap to two rows
   -------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  .strip__item--address { display: none; }
}
@media (max-width: 30rem) {
  /* Only the phone number survives this far down, so centre it rather than
     leaving it hanging off the left edge. */
  .strip__inner { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

@media (max-width: 61.99rem) {
  .hero__figure { max-inline-size: 26rem; }
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
  }
  .hero__body { display: grid; gap: var(--space-m); }
  .hero__figure { justify-self: end; inline-size: 100%; max-inline-size: 30rem; }
}

@media (min-width: 90rem) {
  .hero__inner { gap: var(--space-3xl); }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .nav { display: block; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }
}

@media (min-width: 75rem) {
  .header__cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Section heads and prose
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .page-hero__inner { gap: var(--space-l); }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .service-feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
  /* Alternate which side the image sits on, so the page reads as an essay. */
  .service-feature:nth-child(even) .service-feature__media { order: 2; }
  .service-feature--reverse .service-feature__media { order: 2; }
}

@media (max-width: 47.99rem) {
  .service-row { grid-template-columns: auto 1fr; gap: var(--space-s); }
  .service-row__go { display: none; }
  .service-row:hover { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Premium services page — svc-* responsive
   -------------------------------------------------------------------------- */

@media (min-width: 36rem) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .svc-feature {
    grid-template-columns: 55fr 45fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .svc-feature--flip .svc-feature__media { order: 2; }
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Project grids
   -------------------------------------------------------------------------- */

.project-grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Tiles
   -------------------------------------------------------------------------- */

@media (min-width: 36rem) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Process
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .process-step {
    grid-template-columns: 5rem minmax(0, 1fr);
    column-gap: var(--space-l);
    align-items: start;
  }
  .process-step__num { grid-row: 1 / span 2; }
}
@media (min-width: 62rem) {
  .process-step { grid-template-columns: 6rem 18rem minmax(0, 1fr); align-items: baseline; }
  .process-step__num { grid-row: 1; }
  .process-step__body { grid-column: 3; }
}

/* --------------------------------------------------------------------------
   Manufacturing / craft clips
   -------------------------------------------------------------------------- */

.craft-grid { display: grid; gap: var(--space-m); }
@media (min-width: 48rem) {
  .craft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .craft-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   Video panel
   -------------------------------------------------------------------------- */

.video-layout { display: grid; gap: var(--space-l); }
@media (min-width: 62rem) {
  .video-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); align-items: center; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
  }
  .cta-band__actions { justify-self: end; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.form-grid { display: grid; gap: var(--space-m); }
@media (min-width: 36rem) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid__full { grid-column: 1 / -1; }
}

.contact-layout { display: grid; gap: var(--space-xl); }
@media (min-width: 62rem) {
  .contact-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }

  /* The rail follows you down a long form, so the phone number stays reachable
     while you are still filling in field six. Only where there is room: sticky
     on a short viewport would trap content off-screen, hence the height query. */
  @media (min-height: 44rem) {
    .contact-rail {
      position: sticky;
      inset-block-start: calc(var(--header-h) + var(--space-m));
    }
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

@media (min-width: 36rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-l);
  }
}

/* --------------------------------------------------------------------------
   Mobile action bar — phones only. On tablet and up the header CTA covers it.
   -------------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .action-bar { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile landscape — short viewports need the hero to stop hogging height
   -------------------------------------------------------------------------- */

@media (max-height: 30rem) and (orientation: landscape) {
  .hero { padding-block: var(--space-l); }
  .hero__figure { display: none; }
  .mobile-nav { padding-block: var(--space-m); }
  .mobile-nav__link { font-size: var(--step-1); padding-block: var(--space-2xs); }
  .mobile-nav__head { margin-block-end: var(--space-m); }
}

/* --------------------------------------------------------------------------
   Two-column prose for long legal pages on wide screens
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .legal-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .legal-toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-m)); }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .strip, .action-bar, .cta-band, .footer__legal, .to-top, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-hero, .on-dark { background: #fff !important; color: #000 !important; }
  .hero::before, .page-hero::before { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}