/* ============================================================
   JOINERY LIMITED — responsive.css
   Mobile-first breakpoints
   ============================================================ */

/* ── TABLET (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2) { border-right: none; }
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .portfolio-grid .col-span-8 { grid-column: span 12; }
  .portfolio-grid .col-span-4 { grid-column: span 6; }
  .portfolio-grid .col-span-6 { grid-column: span 6; }
  .portfolio-grid .col-span-3 { grid-column: span 6; }
  .portfolio-grid .col-span-5 { grid-column: span 6; }
  .portfolio-grid .col-span-7 { grid-column: span 6; }
}

/* ── MOBILE (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  .nav__links { display: none; }
  .nav__burger { display: flex; }

  .nav__links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--green-dark);
    padding: 2rem;
    gap: 1.5rem;
    border-top: 1px solid rgba(184,150,62,0.2);
  }

  .nav__links.open .nav__cta {
    display: inline-block;
    text-align: center;
    padding: 0.8rem 1.5rem;
  }

  .hero__content { padding-bottom: 3rem; }

  .card-grid--3 { grid-template-columns: 1fr; }
  .card-grid--2 { grid-template-columns: 1fr; }
  .card-grid--4 { grid-template-columns: 1fr; }

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

  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-grid [class*="col-span"] {
    grid-column: span 1;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonial blockquote { font-size: 1.1rem; }

  .about-grid {
    grid-template-columns: 1fr !important;
  }

  .portrait-wrap::after { display: none; }

  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Testimonial 3-col on home becomes single column on mobile */
  .testimonial-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Inner staggered image pairs (those with margin-top:3rem on the second img)
     have an art-directed offset on desktop. On mobile that offset looks awkward
     when the parent collapses to full width. Reset the stagger. */
  img[style*="margin-top:3rem"],
  img[style*="margin-top: 3rem"] {
    margin-top: 0 !important;
  }

  /* Generic 3-col image strip (used on a couple of service pages) becomes
     a single column stack on mobile so each image gets full width. */
  .image-strip-3 {
    grid-template-columns: 1fr !important;
  }

  /* Heritage timeline: 4 across is unreadable below 768px. Stack vertically
     so each milestone has full width and the copy can breathe. */
  .heritage-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5px !important;
  }

  /* Defensive override for any inline grid that lacks a class hook.
     Catches `grid-template-columns:repeat(3,1fr)` and `1fr 1fr 1fr`
     plus inline 2-col grids, so a forgotten responsive rule can never
     cause horizontal scroll on phones. Also stabilises the iOS Safari
     orientation-change reflow (landscape track widths were being cached
     and reused when rotating back to portrait). */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* When 3-col cards stack on mobile, cumulative gold top borders look
     like duplicated section rules ("line bleed" under the H2). Hide
     the top border on the first stacked card so only inter-card
     borders remain. */
  [style*="grid-template-columns:repeat(3"] > div:first-child[style*="border-top"],
  [style*="grid-template-columns: repeat(3"] > div:first-child[style*="border-top"] {
    border-top: none !important;
  }
}

/* At >768px we leave inline 3-col grids alone so iPhone landscape
   (~844px) keeps 3 cards side-by-side. iPad portrait (768px) gets
   single column via the mobile rule above which is fine for readability. */

/* Tablet: 4 columns squeeze too tight, go to 2x2 */
@media (max-width: 1024px) and (min-width: 769px) {
  .heritage-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── SMALL MOBILE (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .stat { padding: 1.5rem 1rem; }
  .service-card__body { padding: 1.5rem; }
}