/* ============================================================
   RESPONSIVE.CSS — Breakpoint Overrides
   KD Excavating v2 | Noir Studio

   All media queries live here. Nothing else does.

   This file only overrides layout structure — grids collapsing
   to single columns, paddings tightening, elements hiding or
   reordering. Colors, fonts, and component styles are never
   changed here; the components handle their own dark/light
   variants via modifier classes.

   Breakpoints:
     --bp-md: 900px  (tablet — grid collapses to 1 column)
     --bp-sm: 768px  (mobile — full responsive treatment)
     --bp-lg: 1024px (tablet landscape — minor adjustments)
   ============================================================ */


/* ── TABLET: max-width 900px ───────────────────────────────── */

@media (max-width: 900px) {

  /* Hero */
  .hero__main    { grid-template-columns: 1fr; }
  .hero__left    { border-bottom: 1px solid var(--color-border); }
  .hero__stats   { display: none; }

  /* Services */
  .services__head      { grid-template-columns: 1fr; }
  .services__head-left { border-right: none; border-bottom: 1px solid var(--color-border); }

  /* Why */
  .why                { grid-template-columns: 1fr; }
  .why__left          { border-right: none; border-bottom: 1px solid var(--color-border); }
  .why__right         { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact            { grid-template-columns: 1fr; }
  .contact__left      { border-right: none; border-bottom: 1px solid var(--color-border); }

  /* Footer */
  .footer             { grid-template-columns: 1fr; }
  .footer__col        { border-right: none; border-bottom: 1px solid var(--color-border); }
  .footer__col:last-child { border-bottom: none; }

  /* Service pages */
  .two-col            { grid-template-columns: 1fr; }
  .two-col__left      { border-right: none; border-bottom: 1px solid var(--color-border); }
  .svc-why-grid       { grid-template-columns: 1fr; }
  .svc-why-grid__left { border-right: none; border-bottom: 1px solid var(--color-border-dark); }
  .media-strip        { height: auto; }
  .media-strip__box   { height: 220px; border-right: none; border-bottom: 1px solid var(--color-border); }

  /* Other services — 2 columns on tablet */
  .other-services__grid         { grid-template-columns: 1fr 1fr; }
  .other-link:nth-child(3n)     { border-right: 1px solid var(--color-border); }
  .other-link:nth-child(2n)     { border-right: none; }

  /* CTA bar */
  .cta-bar { flex-direction: column; align-items: flex-start; }

}


/* ── MOBILE: max-width 768px ───────────────────────────────── */

@media (max-width: 768px) {

  /* Nav */
  .nav { padding: 16px 20px; }

  .nav__toggle { display: flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-4);
    border-top: 1px solid var(--color-border);
    z-index: 999;
  }

  .nav__links.is-open { display: flex; }

  .nav__links a {
    font-size: var(--text-base);
    padding: var(--space-2) 0;
    display: block;
  }

  /* Show mobile-only nav items (service sub-links) */
  .nav__mobile-only { display: block; }

  /* Hide desktop CTA button — it lives in the mobile menu instead */
  .nav > .btn { display: none; }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: 0;
    background: var(--color-bg-dark);
  }

  .hero__main { margin-top: var(--nav-height); }

  .hero__left {
    padding: 20px 20px 32px;
    min-height: auto;
    border-bottom: none;
    justify-content: center;
  }

  .hero__title     { font-size: clamp(2.55rem, 11.5vw, 3.83rem); }
  .hero__title .big { font-size: clamp(2.8rem, 12.75vw, 4.08rem); }
  .hero__logo      { max-width: 130px; }

  .hero__right {
    min-height: 280px;
    padding: 32px 20px;
  }

  .hero__sub { font-size: 15px; max-width: 100%; }

  /* Services */
  .services__head-left  { padding: 40px 20px; }
  .services__head-right { padding: 40px 20px; }

  .service-row {
    grid-template-columns: 40px 1fr 80px;
    padding: 0 20px;
  }

  /* Hide the description column — too cramped on mobile */
  .service-row__desc  { display: none; }
  .service-row__name  { font-size: clamp(20px, 5vw, 32px); padding: 24px 16px; }
  .service-row__num   { padding: 24px 0; }
  .service-row__arrow { opacity: 1; } /* always visible on mobile — no hover */

  .services__banner { padding: 40px 20px; flex-direction: column; align-items: flex-start; }

  /* Why */
  .why__left  { padding: 60px 20px; }
  .why__right { grid-template-columns: 1fr 1fr; }

  .metric-cell { padding: 48px 20px; }

  /* Remove individual borders — re-apply manually to inner edges only */
  .why__right .metric-cell { border: none; }
  .why__right .metric-cell:nth-child(odd)            { border-right: 1px solid var(--color-border-dark); }
  .why__right .metric-cell:nth-child(1),
  .why__right .metric-cell:nth-child(2)              { border-bottom: 1px solid var(--color-border-dark); }

  /* Contact */
  .contact__left  { padding: 40px 20px; text-align: center; }
  .contact__right { padding: 40px 20px; }
  .contact__title { text-align: left; } /* keep title left-aligned even when panel is centred */
  .contact-item   { align-items: center; }

  /* Footer */
  .footer__col { padding: 40px 20px; }

  /* Service pages */
  .svc-hero {
    padding: 90px 20px 40px;
    min-height: auto;
  }

  .svc-hero__breadcrumb { display: none; } /* not enough room on mobile */

  .svc-hero__title {
    font-size: clamp(2.5rem, 12vw, 5rem);
    word-break: break-word;
    hyphens: auto;
  }

  .two-col__left,
  .two-col__right       { padding: 40px 20px; }

  .svc-why-grid__left,
  .svc-why-grid__right  { padding: 40px 20px; }

  .other-services       { padding: 60px 20px; }

  .cta-bar { padding: 60px 20px; }

  /* Inputs — force 16px to prevent iOS zoom on focus */
  input, textarea, select { font-size: 16px; }

}


/* ── TABLET LANDSCAPE: 769px–1024px ───────────────────────── */

@media (min-width: 769px) and (max-width: 1024px) {

  .hero__title     { font-size: clamp(3rem, 6vw, 5rem); }
  .svc-hero__title { font-size: clamp(3rem, 6vw, 5rem); }

}