/* ==========================================================================
   GRAIN & STEEL — responsive.css
   Layouts are rebuilt per breakpoint rather than scaled down.
   ========================================================================== */

@media (max-width: 1180px) {
  .calc-options--services { grid-template-columns: minmax(0, 1fr); }
  .calc-options--services .option { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  .calc-options--services .option-top,
  .calc-options--services .option-desc { grid-column: 1; }
  .calc-options--services .option-foot { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; justify-content: center; border-top: 0; padding-top: 0; }
}

@media (max-width: 1024px) {
  :root { --header-h: 72px; }

  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { gap: 40px; }
  .hero-media .m-main { aspect-ratio: 4 / 4.6; }

  .philosophy-head { grid-column: 1 / -1; }
  .philosophy-body { grid-column: 1 / -1; padding-top: 0; }
  .philosophy-media { grid-column: 1 / 7; }
  .philosophy-points { grid-column: 7 / 13; }

  .calculator { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }

  .compare-layout { grid-template-columns: minmax(0, 1fr); }
  .compare { max-height: none; max-width: 640px; }

  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-head .lead { justify-self: start; }

  .service-cards { grid-template-columns: minmax(0, 1fr); }
  .service-card, .service-card + .service-card { padding: 32px 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
  .service-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 32px; align-items: start; }
  .service-card .media { grid-row: 1 / 6; margin-bottom: 0; }

  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero .lead { justify-self: start; }

  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step, .process-step + .process-step { padding: 28px 24px 32px 0; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .process-step:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--color-border); }

  .booking-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-aside { position: static; }

  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .g-1 { grid-column: 1 / -1; }
  .g-2 { grid-column: 1 / 4; grid-row: auto; aspect-ratio: 3 / 4; }
  .g-3 { grid-column: 4 / 7; aspect-ratio: 3 / 4; }
  .g-4 { grid-column: 1 / 4; }
  .g-5 { grid-column: 4 / 7; }
  .g-6 { grid-column: 1 / -1; }

  .about-split .about-media,
  .about-split--reverse .about-media { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3.4; }
  .about-split .about-copy,
  .about-split--reverse .about-copy { grid-column: 1 / -1; grid-row: auto; }

  .details-grid { grid-template-columns: minmax(0, 1fr); }
  .detail, .detail + .detail { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --section-space: 80px; }

  .header-inner { gap: 12px; }
  .header-actions .btn--book { display: none; }

  .hero { padding-top: 32px; }
  .hero-title .serif { font-size: 0.9em; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-media { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hero-media .m-main { grid-column: 1 / 4; aspect-ratio: 3 / 4.4; }
  .hero-media .m-side { grid-column: 4 / 6; margin-top: 22%; }
  .hero-media .m-detail { grid-column: 4 / 6; }
  .hero-caption { flex-direction: column; gap: 4px; }

  .philosophy-media, .philosophy-points { grid-column: 1 / -1; }
  .point { grid-template-columns: 40px minmax(0, 1fr); }

  .calc-options--levels { grid-template-columns: minmax(0, 1fr); }
  .calc-options--services .option { grid-template-columns: minmax(0, 1fr); }
  .calc-options--services .option-foot { grid-column: 1; grid-row: auto; flex-direction: row; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--color-border); padding-top: 14px; }

  .service-card { grid-template-columns: minmax(0, 1fr); }
  .service-card .media { grid-row: auto; margin-bottom: 4px; }

  .gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .g-1, .g-2, .g-3, .g-4, .g-5, .g-6 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

  .process { grid-template-columns: minmax(0, 1fr); }
  .process-step:nth-child(even) { padding-left: 0; border-left: 0; }
  .process-step .h3 { margin-top: 20px; }

  .form-row { grid-template-columns: minmax(0, 1fr); }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modal { padding: 8px; align-items: flex-end; }
  .modal-panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .compare-tag { top: 10px; }
  .compare-tag--before { left: 10px; }
  .compare-tag--after { right: 10px; }
}

@media (max-width: 380px) {
  .brand-name { font-size: 0.9375rem; letter-spacing: 0.1em; }
  .brand-sub { letter-spacing: 0.24em; }
  .btn { padding: 0 18px; letter-spacing: 0.12em; }
  .summary-row { flex-direction: column; gap: 2px; }
  .summary-row dd { text-align: left; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .reveal-armed .reveal { opacity: 1; transform: none; }
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
}