/* ==========================================================================
   MMA PRO PAINTING — RESPONSIVE STYLESHEET
   Tablet + mobile breakpoint overrides. Mobile-first adjustments layered
   on top of style.css. Keep desktop styles untouched here.
   ========================================================================== */

/* Prevent any accidental horizontal scroll on small viewports */
html, body { max-width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   LARGE TABLET / SMALL DESKTOP (<= 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-track { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}

/* --------------------------------------------------------------------------
   NAV SWITCHOVER (<= 1180px)
   A dedicated breakpoint for the header nav, kept separate from the general
   tablet breakpoint below. The full desktop nav links + CTA start feeling
   cramped a little before 991px, so the hamburger takes over earlier —
   avoiding a squeezed, overlapping nav in the ~992-1180px zone.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-main {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    padding: 7.5rem 2.25rem 3rem;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(212, 175, 120, 0.16) 0%, rgba(212, 175, 120, 0) 55%),
      linear-gradient(165deg, var(--color-charcoal-dark) 0%, #101315 100%);
    gap: 0.35rem;
    z-index: 1100;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.55s var(--ease-premium), opacity 0.4s var(--ease-premium), visibility 0.55s var(--ease-premium);
  }

  .nav-toggle { display: flex; }

  /* The header CTA is dropped in favour of a full-width "Get a Free Quote"
     CTA inside the opened mobile menu (below) — a shrunken CTA squeezed
     next to the hamburger was cramped and easy to mis-tap. */
  .nav-actions .btn.nav-cta { display: none; }

  .nav-main.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* Each stacked item slides/fades in with a short stagger once the panel
     is open, rather than the whole menu appearing as one flat block. */
  .nav-main > a,
  .nav-main .nav-dropdown-trigger {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.45s var(--ease-premium), transform 0.45s var(--ease-premium);
  }

  .nav-main.is-open > a,
  .nav-main.is-open .nav-dropdown-trigger {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-main > a:nth-child(1) { transition-delay: 0.05s; }
  .nav-main > a:nth-child(2) { transition-delay: 0.1s; }
  .nav-main > .nav-item-dropdown:nth-child(3) .nav-dropdown-trigger { transition-delay: 0.15s; }
  .nav-main > a:nth-child(4) { transition-delay: 0.2s; }
  .nav-main > a:nth-child(5) { transition-delay: 0.25s; }
  .nav-main > a:nth-child(6) { transition-delay: 0.3s; }
  .nav-main > a.nav-mobile-cta { transition-delay: 0.35s; }

  .nav-main a,
  .nav-main .nav-dropdown-trigger {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-white);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Editorial index numbers, matching the numbered-list treatment used
     elsewhere on the site (service features, process steps). Only the
     core destinations are numbered — the location line and the CTA
     button already carry their own icon/style and don't need one. */
  .nav-main { counter-reset: navitem; }

  .nav-main > a:nth-child(1),
  .nav-main > a:nth-child(2),
  .nav-main > .nav-item-dropdown:nth-child(3) .nav-dropdown-trigger,
  .nav-main > a:nth-child(4),
  .nav-main > a:nth-child(6) {
    counter-increment: navitem;
  }

  .nav-main > a:nth-child(1)::before,
  .nav-main > a:nth-child(2)::before,
  .nav-main > .nav-item-dropdown:nth-child(3) .nav-dropdown-trigger::before,
  .nav-main > a:nth-child(4)::before,
  .nav-main > a:nth-child(6)::before {
    content: counter(navitem, decimal-leading-zero);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-right: 0.9rem;
    letter-spacing: 0.04em;
  }

  .nav-main a:active,
  .nav-main .nav-dropdown-trigger:active { color: var(--color-gold-light); }

  /* Prominent quote CTA inside the mobile menu (brief section 9) */
  .nav-main.is-open .nav-mobile-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
    border-bottom: none;
    padding: 1.05rem 1.9rem;
  }

  /* The dropdown is a desktop hover affordance only. On the full-screen
     mobile menu, display:contents removes the wrapper from the box model
     so the "Services" link behaves like every other stacked item (tap
     navigates straight to services.html) and the hover panel never
     renders. */
  .nav-item-dropdown { display: contents; }
  .nav-dropdown-panel { display: none !important; }

  .nav-location { opacity: 1; }

  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   TABLET (<= 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root {
    --section-pad-y: clamp(3.5rem, 7vw, 6rem);
    --section-pad-y-sm: clamp(2.5rem, 5vw, 4rem);
  }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-media { max-width: 480px; margin-inline: auto; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Craftsmanship */
  .craft-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .craft-media,
  .craft-section--white .craft-media { order: -1; }

  /* Panels */
  .panels-grid { grid-template-columns: 1fr; }
  .panel { min-height: 420px; }

  /* Wallpaper */
  .wallpaper-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .wallpaper-media { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }

  /* Why choose */
  .why-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Process — vertical timeline (reuses .process-line / .process-line-fill,
     re-oriented from a horizontal top bar to a vertical left rail) */
  .process-track {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0.1rem;
  }

  .process-line {
    top: 0; bottom: 0; left: 11px; right: auto;
    width: 1px; height: auto;
  }

  .process-line-fill {
    width: 100%;
    height: 0%;
  }

  .process-step {
    padding: 0 0 2.5rem 2.75rem;
    position: relative;
  }

  .process-step .process-dot { top: 0; left: 0; }

  .gallery-grid { columns: 2 220px; }

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { order: -1; }

  /* About — narrative */
  .narrative-layout { grid-template-columns: 1fr; }
  .narrative-media { position: static; order: -1; flex-direction: row; }
  .narrative-media figure { flex: 1 1 0; }

  /* About — values */
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* About — commitment */
  .commitment-inner { grid-template-columns: 1fr; }

  /* Services — compare */
  .compare-grid { grid-template-columns: 1fr; }

  /* Services — feature list */
  .service-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .service-feature.is-reversed .service-feature-media,
  .service-feature .service-feature-media { order: -1; }
  .service-feature.is-reversed .service-feature-body,
  .service-feature .service-feature-body { order: 2; }
}

/* --------------------------------------------------------------------------
   MOBILE (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --gutter: 1.25rem; }

  .site-header { padding: 1.1rem 0; }
  .brand img { height: 58px; width: 58px; }

  .inner-banner { min-height: clamp(360px, 84vw, 460px); }
  .inner-banner-content { padding: 7rem var(--gutter) 2.5rem; max-width: 100%; }
  .inner-banner h1 { max-width: 100%; font-size: clamp(2.1rem, 7vw, 2.75rem); }
  .inner-banner-sub { max-width: 100%; }
  .contact-form-grid-2 { grid-template-columns: 1fr; }

  .hero { min-height: 100svh; align-items: flex-end; }
  .hero-inner { padding-block: 6.5rem 3rem; }
  .hero-title { max-width: 100%; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .hero-call { padding-top: 0.25rem; }
  .hero-scroll { display: none; }

  .trust-bar ul { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .trust-bar li { justify-content: flex-start; width: 100%; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { aspect-ratio: 4/3.2; }

  .ba-slider { aspect-ratio: 3/4; }

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

  .wallpaper-services { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; gap: 2.25rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

  .gallery-grid { columns: 1; }

  .final-cta-actions { flex-direction: column; width: 100%; }
  .final-cta-actions .btn { width: 100%; justify-content: center; }

  .testimonial-quote-mark { font-size: 3rem; }

  .why-item { grid-template-columns: auto 1fr; gap: 1rem; }

  /* About — narrative */
  .narrative-media { flex-direction: column; }
  .narrative-copy p:first-of-type::first-letter { font-size: 2.3rem; }

  /* About — values */
  .values-grid { grid-template-columns: 1fr; }

  /* Services — service list rows */
  .service-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .service-row-num { display: none; }
  .service-row-action { justify-self: start; }

  /* Services — wallpaper strip */
  .wallpaper-strip-inner { flex-direction: column; align-items: flex-start; }

  /* Services — mini process */
  .mini-process-item { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--color-border); }
  .mini-process-item:last-child { border-bottom: none; }

  /* Contact — quick answers */
  .qa-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE (<= 420px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .hero-title { letter-spacing: -0.01em; }
  .btn { padding: 0.95rem 1.5rem; }
  .gallery-filters button { padding: 0.55rem 1rem; }
}