/* ==========================================================================
   Custom Door & Mirror — responsive.css
   Mobile-first breakpoint overrides, grouped by breakpoint, then component.
     sm  ≥ 480px   large phones
     md  ≥ 768px   tablets
     lg  ≥ 1024px  small laptops / landscape tablets
     xl  ≥ 1280px  desktop (full navigation)
   Reference: docs/DESIGN-SYSTEM.md → Breakpoints
   ========================================================================== */

/* ---------- sm ≥ 480px ---------- */
@media (min-width: 480px) {
  .swatch-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resource-list__link {
    gap: var(--space-5);
  }
}

/* ---------- md ≥ 768px ---------- */
@media (min-width: 768px) {
  :root {
    --header-h: 84px;
  }

  .site-header__actions .site-header__cta {
    display: inline-flex;
  }

  .fact-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero__badges {
    display: grid;
  }

  .hero__media .slider__viewport {
    --ratio: 4 / 3;
  }

  .rail__track {
    grid-auto-columns: calc((100% - var(--grid-gap)) / 2.2);
  }

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

  .feature-list__item {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: baseline;
    gap: var(--grid-gap);
  }

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

  .ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

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

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

  .field--full {
    grid-column: 1 / -1;
  }

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

  .categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .categories > :nth-child(2) {
    margin-top: var(--space-9);
  }

  .categories__more {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

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

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

  .style-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parts-list {
    columns: 2;
  }

  .contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-list__item--full {
    grid-column: 1 / -1;
  }

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

/* ---------- lg ≥ 1024px ---------- */
@media (min-width: 1024px) {
  /* Hero */
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "intro media" "controls media";
    min-height: min(calc(100svh - var(--header-h)), 960px);
  }

  .hero__intro {
    align-self: center;
    padding: var(--space-8) clamp(2rem, 4vw, 5rem) var(--space-6) var(--hero-inset);
  }

  .hero__grid > .slider__controls {
    padding: 0 clamp(2rem, 4vw, 5rem) var(--space-7) var(--hero-inset);
  }

  .hero__media {
    padding: var(--space-4) var(--hero-inset) var(--space-6) 0;
  }

  .hero__media .slider__viewport {
    height: 100%;
    min-height: 560px;
    aspect-ratio: auto;
  }

  .page-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }

  .page-hero__content {
    grid-column: 1 / 7;
  }

  .page-hero__media {
    grid-column: 8 / 13;
  }

  .page-hero--text .page-hero__content {
    grid-column: 1 / 10;
  }

  /* Section head */
  .section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--grid-gap);
  }

  .section-head__intro {
    justify-self: end;
  }

  /* Split */
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .split__media {
    grid-column: 1 / 8;
  }

  .split__content {
    grid-column: 9 / 13;
  }

  .split--reverse .split__media {
    grid-column: 6 / 13;
    grid-row: 1;
  }

  .split--reverse .split__content {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  .split--even .split__media {
    grid-column: 1 / 7;
  }

  .split--even .split__content {
    grid-column: 8 / 13;
  }

  .split--even.split--reverse .split__media {
    grid-column: 7 / 13;
  }

  .split--even.split--reverse .split__content {
    grid-column: 1 / 6;
  }

  /* Home: story */
  .story {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .story__media {
    grid-column: 1 / 7;
  }

  .story__content {
    grid-column: 8 / 13;
  }

  /* Home: installation story */
  .install__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .install__stage {
    grid-column: 1 / 7;
    top: calc(var(--header-h) + var(--space-7));
    padding: var(--space-7);
  }

  .install__svg {
    max-height: calc(100vh - var(--header-h) - 12rem);
  }

  .install__steps-wrap {
    grid-column: 8 / 13;
    padding-left: 2.5rem;
  }

  .install__steps {
    gap: 8vh;
    padding-block: 4vh 10vh;
  }

  .install__progress {
    position: absolute;
    left: 0;
    top: 4vh;
    bottom: 10vh;
    display: block;
    width: 2px;
    background: var(--line);
  }

  .install__progress-bar {
    position: absolute;
    inset: 0;
    background: var(--color-bronze-light);
    transform-origin: center top;
  }

  /* Home: why */
  .why {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .why__aside {
    grid-column: 1 / 5;
    position: sticky;
    top: calc(var(--header-h) + var(--space-7));
  }

  .why__list {
    grid-column: 6 / 13;
  }

  /* Steps */
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

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

  .resource-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Products */
  .product-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-grid--4.product-grid--stagger > :nth-child(even) {
    margin-top: var(--space-9);
  }

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

  .style-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .parts-list {
    columns: 3;
  }

  /* Finishes */
  .swatch-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Resources band */
  .resources-band {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .resources-band__media {
    grid-column: 1 / 7;
  }

  .resources-band__list {
    grid-column: 8 / 13;
  }

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

  /* Paniflex */
  .paniflex {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .paniflex__content {
    grid-column: 1 / 6;
  }

  .paniflex__projects {
    grid-column: 7 / 13;
  }

  .rail__track {
    grid-auto-columns: calc((100% - var(--grid-gap) * 3) / 3.4);
  }

  .cta-ticket__card {
    grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
  }

  .cta-ticket__media {
    aspect-ratio: 4 / 3;
  }

  .cta-ticket__content,
  .cta-ticket__actions {
    padding: 0;
  }

  .cta-ticket__actions {
    flex-direction: column;
    align-items: flex-start;
    padding-right: var(--space-6);
  }

  /* CTA band */
  .cta-band__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }

  .cta-band__content {
    grid-column: 1 / 8;
  }

  .cta-band__actions {
    grid-column: 9 / 13;
    justify-content: flex-end;
  }

  /* Product detail */
  .pdp {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  /* Gallery + live summary stack on the left; options run alongside on the right */
  .pdp__gallery {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .pdp__summary {
    grid-column: 1 / 7;
    grid-row: 2;
  }

  .pdp__panel {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
  }

  .check-list--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Assistant feature & reviews */
  .ai-feature {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ai-feature__content {
    grid-column: 1 / 6;
  }

  .ai-feature__preview {
    grid-column: 7 / 13;
  }

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

  /* Footer */
  .site-footer__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .contact-aside {
    grid-column: 1 / 6;
  }

  .contact-form {
    grid-column: 7 / 13;
  }

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

/* ---------- xl ≥ 1280px: full navigation ---------- */
@media (min-width: 1280px) {
  .nav {
    display: block;
  }

  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }
}