/* ==========================================================================
   Northline Roofing — Responsive Styles
   ========================================================================== */

/* ---------- Laptop (~1280px) ---------- */
@media (max-width: 1280px) {
  :root { --container-pad: 28px; }

  .built-grid,
  .services-grid { gap: 44px; }

  .process-grid {
    grid-template-columns: 0.9fr 1fr;
    grid-template-areas:
      "intro gallery"
      "steps steps";
  }
  .process-steps { margin-top: 16px; }
  .process-media { height: 380px; }
}

/* ---------- Tablet landscape (~1024px) ---------- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .header-phone { display: none; }
  .menu-toggle { display: flex; }

  .header-cta { padding: 9px 16px; }

  .built-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "stack tall"; }
  .built-copy { grid-area: copy; }
  .built-media-stack { grid-area: stack; margin-top: 8px; }
  .media-item--tall { grid-area: tall; margin-top: 8px; }

  .services-grid { grid-template-columns: 1fr; }
  .services-image { order: -1; height: auto; }
  .services-image img { aspect-ratio: 16/9; min-height: 0; max-height: none; }

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

  .process-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro gallery"
      "steps steps";
  }
  .process-media { height: 360px; }
  .process-steps { margin-top: 0; }

  .why-list { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .why-list li:nth-child(3) { padding-left: 0; border-left: none; }

  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy image"
      "editorial editorial";
  }
  .testimonial-copy { grid-area: copy; }
  .testimonial-image { grid-area: image; }
  .testimonial-editorial { grid-area: editorial; text-align: left; margin-top: 24px; }
  .testimonial-editorial .rule-mark { margin-left: 0; }

  .final-cta-grid { grid-template-columns: 1fr; }
  .final-cta-image { order: -1; height: auto; }
  .final-cta-image img { aspect-ratio: 16/9; min-height: 0; max-height: none; }
}

/* ---------- Tablet (~768px) ---------- */
@media (max-width: 800px) {
  :root { --container-pad: 22px; --header-height: 72px; }

  h2 { font-size: clamp(1.9rem, 1.5rem + 2.5vw, 2.8rem); }

  .hero { padding-top: 36px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-editorial { text-align: left; }
  .hero-editorial .rule-mark { margin-left: 0; }
  .hero-image { height: clamp(260px, 55vw, 400px); }

  .built-to-last, .services, .projects, .process, .testimonial, .faq, .final-cta, .contact {
    padding: 72px 0;
  }

  .stat-row { flex-wrap: wrap; row-gap: 20px; }

  .built-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "stack" "tall"; gap: 24px; }
  .built-media-stack, .media-item--tall { margin-top: 0; }

  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .section-heading-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  .process-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "gallery" "steps";
    gap: 32px;
  }
  .process-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
    gap: 10px;
  }
  .process-image { aspect-ratio: 4/3; max-height: 65vh; }

  .why-list { grid-template-columns: 1fr 1fr; }

  .testimonial-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "copy"
      "editorial";
  }
  .testimonial-image img { aspect-ratio: 16/10; min-height: 0; max-height: none; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .footer-brand { grid-column: span 2; margin-bottom: 12px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Mobile (~430px and below) ---------- */
@media (max-width: 480px) {
  :root { --container-pad: 18px; --header-height: 64px; }

  .wordmark { font-size: 0.88rem; }
  .header-cta { padding: 9px 14px; font-size: 0.78rem; }

  .hero-heading { font-size: clamp(2.1rem, 1.5rem + 6vw, 3.2rem); }
  .hero-sub { font-size: 1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .hero-image-caption { right: 16px; bottom: 16px; font-size: 0.68rem; }

  .media-item--tall { height: auto; }
  .media-item--tall img { aspect-ratio: 4/3; }

  .service-toggle { grid-template-columns: 32px 1fr 22px; padding: 18px 0; }
  .service-name { font-size: 1.02rem; }
  .service-panel p { padding-left: 32px; }

  .project-grid { grid-template-columns: 1fr; }

  .process-media { grid-template-columns: 1fr; gap: 10px; }
  .process-image { aspect-ratio: 16/9; max-height: 40vh; }

  .why-list { grid-template-columns: 1fr; row-gap: 28px; }
  .why-list li { border-left: none; padding-left: 0; border-top: 1px solid rgba(247,246,242,0.2); padding-top: 20px; }
  .why-list li:first-child { border-top: none; padding-top: 0; }

  .final-cta-copy p { max-width: none; }
  .final-cta-copy .btn { width: 100%; justify-content: center; }

  .contact-intro .section-lead { max-width: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }

  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- Small mobile (~360px) ---------- */
@media (max-width: 380px) {
  :root { --container-pad: 16px; }

  .hero-heading { font-size: 1.9rem; }
  .stat { padding-right: 16px; margin-right: 16px; }
  .stat-number { font-size: 1.6rem; }

  .project-card-img img { aspect-ratio: 4/3; }
}