/* =============================================================================
   Sky House BSD — responsive.css
   Breakpoint refinements for the foundation layer. Loaded AFTER main.css.
   Bootstrap breakpoints are the foundation (PRD §29); values come from the
   reference audit at 390px and 1440px.

     sm  ≥576px    md  ≥768px    lg  ≥992px    xl  ≥1200px    xxl ≥1400px

   Priority viewports: 390 (mobile) → 1440 (desktop) → 768 → 1024 → 1920.
   ========================================================================== */

/* --- sm ≥640: specifications go two-up (Tailwind's sm, not Bootstrap's 576) --- */
@media (min-width: 640px) {
  .sh-specs { grid-template-columns: repeat(2, 1fr); }
  .sh-closing__actions { flex-direction: row; }

  /* identity card: label column beside the value */
  .sh-idcard__row { flex-direction: row; align-items: flex-start; gap: 1rem; }
  .sh-idcard__label { width: 10rem; }                 /* 160px */
}

/* --- md and up: wider gutters, taller header, larger section rhythm --------- */
@media (min-width: 768px) {
  :root {
    --header-height: var(--header-height-md);
  }

  html { scroll-padding-top: var(--header-height-md); }

  .sh-container { padding-inline: var(--container-pad-md); }

  .sh-section { padding-bottom: var(--section-gap-md); }
}

/* =============================================================================
   MILESTONE 2 — Header, Hero, Features, Official Film
   ========================================================================== */

/* --- md ≥768: larger type, wider gutters ---------------------------------- */
@media (min-width: 768px) {
  .sh-header__bar { padding: 20px var(--container-pad-md); }

  .sh-hero__inner { padding: 2.5rem var(--container-pad-md); }
  .sh-hero__foot { margin-top: 1.5rem; }

  .sh-features { padding-bottom: 10rem; }            /* 160px */
  .sh-features__copy { gap: 2rem; padding-inline: var(--container-pad-md);
    padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad-md))); }
  .sh-features__title { font-size: 3rem; }            /* 48px */
  .sh-features__actions { gap: 1rem; }                /* reference gap-3 -> md:gap-4 */
  .sh-btn--compact { padding: 12px 24px; }            /* reference px-5 -> md:px-6 */

  .sh-about { margin-top: -14rem; padding-bottom: 4rem; }   /* -224px */
  .sh-about__copy { gap: 3.5rem; padding-left: var(--container-pad-md); }  /* space-y-14 */
  .sh-about__title { font-size: 3rem; }               /* 48px */

  .sh-catalog { padding-bottom: 7rem; }               /* 112px */
  .sh-catalog__head { padding-inline: var(--container-pad-md); }
  .sh-catalog__title { font-size: 3rem; }             /* 48px */
  .sh-catalog__nav--prev { left: 2rem; }              /* reference md:left-8 */
  .sh-catalog__nav--next { right: 2rem; }

  .sh-gallery { padding-bottom: 7rem; }
  .sh-gallery__head { padding-inline: var(--container-pad-md); }
  .sh-gallery__title { font-size: 3rem; }
  .sh-gallery__hint { display: flex; }
  .sh-rail__end { width: 2.5rem; }

  .sh-surround { margin-top: 6rem; padding-inline: var(--container-pad-md); }
  .sh-surround__title { font-size: 2.25rem; }         /* text-3xl -> md:text-4xl */

  /* arrows move beside the viewport; dots take their own full-width row */
  .sh-surround__slider { column-gap: 1.5rem; }
  .sh-surround__nav--prev { order: 1; }
  .sh-surround__viewport { order: 2; flex: 1 1 0; }
  .sh-surround__nav--next { order: 3; }
  .sh-surround__dots { order: 4; flex: 0 0 100%; }
  .sh-surround__nav { width: 48px; height: 48px; }
  .sh-surround__nav svg { width: 16px; height: 16px; }
  .sh-surround__track { --surround-slide: 90%; --surround-lead: 5%; }

  .sh-location { padding-top: 2rem; padding-bottom: 7rem; }
  .sh-location__block { padding-left: var(--container-pad-md); }
  .sh-location__title { font-size: 3rem; }

  .sh-lightbox { padding: 2rem; }

  .sh-testimonials { margin-top: -4rem; padding-bottom: 7rem; }
  .sh-testimonials__copy { padding-right: var(--container-pad-md); }
  .sh-testimonials__title { font-size: 3rem; }
  .sh-quote__text { font-size: 1.5rem; }              /* 24px */

  .sh-contact { padding-top: 1rem; padding-bottom: 7rem; }
  .sh-contact__title { font-size: 3rem; }
  .sh-form { padding: 2rem; }

  /* the closing band becomes a fixed-height photographic strip */
  .sh-closing { height: 360px; padding-block: 0; }
  .sh-closing__title { font-size: 3rem; }
  .sh-closing__copy { padding-right: 3.5rem; }

  .sh-footer__inner { padding-inline: var(--container-pad-md); }
  .sh-footer__grid { grid-template-columns: repeat(2, 1fr); padding-block: 5rem; }

  .sh-page__head { margin-bottom: 3.5rem; }           /* 56px */
  .sh-page__title { font-size: 3rem; }
  .sh-page__lead { font-size: 1rem; }                 /* 16px */
  .sh-page__rule { margin-bottom: 3rem; }             /* 48px */
  .sh-idcard, .sh-notice { padding: 1.75rem; }        /* 28px */
}



/* --- lg ≥1024: nav appears, layout goes two-column -------------------------
   NOTE: this is Tailwind's `lg` (1024px), not Bootstrap's (992px). The reference
   switches here, so matching it keeps 992–1023px identical to the reference
   instead of showing a desktop nav 32px early. --------------------------- */
@media (min-width: 1024px) {
  .sh-nav { display: flex; align-items: center; gap: 2rem; }
  .sh-header__cta { display: inline-flex; }
  .sh-header__toggle { display: none; }
  .sh-drawer { display: none; }

  .sh-features { padding-bottom: 13rem; }             /* 208px */
  .sh-features__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .sh-features__copy { padding-right: 4rem; }
  .sh-features__title { font-size: 3.75rem; }         /* 60px */
  .sh-features__visual { padding-left: 0; }

  .sh-about { margin-top: -18rem; }                   /* -288px */
  .sh-about__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  /* the film card holds its position while the About copy scrolls past it */
  .sh-film { position: sticky; top: 6rem; }
  .sh-about__copy { padding-left: 4rem; }             /* reference lg:pl-16 */
  .sh-about__title { font-size: 3.75rem; }            /* 60px */

  .sh-specs { grid-template-columns: repeat(3, 1fr); }
  .sh-catalog__title { font-size: 3.75rem; }          /* 60px */

  .sh-gallery__title { font-size: 3.75rem; }

  .sh-location__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  /* the map holds still while the categories scroll past it */
  .sh-location__map { position: sticky; top: 6rem; }
  .sh-location__block { padding-left: 4rem; }
  .sh-location__title { font-size: 3.75rem; }

  .sh-testimonials__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .sh-testimonials__copy { order: 1; padding-right: 4rem; }
  .sh-video { order: 2; position: sticky; top: 6rem; }
  .sh-testimonials__title { font-size: 3.75rem; }

  .sh-contact__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .sh-contact__title { font-size: 3.75rem; }

  .sh-closing__title { font-size: 3.75rem; }
  .sh-closing__copy { padding-right: 5rem; }

  .sh-footer__grid { grid-template-columns: repeat(4, 1fr); }

  .sh-page__title { font-size: 3.75rem; }
}

/* --- xl ≥1200: reference widens nav spacing at 1280 ------------------------ */
@media (min-width: 1280px) {
  .sh-nav { gap: 2.5rem; }
}

/* --- Short viewports: keep the hero wordmark from crowding the header ------ */
@media (max-height: 600px) and (min-width: 768px) {
  .sh-hero__wordmark { font-size: clamp(40px, 9vh, 96px); }
}

/* --- Large desktop: the container hits its 1600px ceiling ------------------- */
@media (min-width: 1680px) {
  /* Reference keeps a minimum 40px gutter even once max-width is reached, so
     nothing extra is needed here yet. Kept as an explicit anchor point for the
     Milestone 7 parity pass at 1920px. */
}