/**
 * Responsive overrides for /services/<slug>/ (body.is-service-detail).
 *
 * Same specificity bug as the devis page: desktop rules are scoped under
 * `.is-service-detail X` (0,2,0) while the responsive breakpoint rules
 * use bare `X` (0,1,0), so the 2-column article+sidebar layout never
 * collapses and the article column is squeezed to 0px on narrow
 * viewports. Re-assert everything at matching specificity.
 */

/* ── Layout: article + sidebar → single column ──────────── */
@media (max-width: 1024px) {
  body.is-service-detail .nav-links {
    display: none;
  }
  body.is-service-detail .nav {
    padding: 16px 22px;
  }
  body.is-service-detail .nav.scrolled {
    padding: 12px 22px;
  }
  body.is-service-detail .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding: 0 22px;
  }
  body.is-service-detail .sidebar {
    position: static;
    top: auto;
    padding-top: 0;
  }
  body.is-service-detail .article-col {
    padding-top: 64px;
  }
  body.is-service-detail .peek-card {
    display: none;
  }
  body.is-service-detail .crumb-bar {
    padding: 100px 22px 0;
  }
}

/* ── Interior grids that fail to collapse at <=900px ─────
   (specificity bug: `.is-service-detail .X` wins over `.X{...}`
   inside the media query) */
@media (max-width: 900px) {
  body.is-service-detail .fb-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  body.is-service-detail .process-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* The "current phase" hero (big number + name) is designed to sit
     sticky in a left column on desktop. When the grid collapses to one
     column, sticky makes it hover over the phase list below and overlap
     each item as the user scrolls. Lock it in place above the list. */
  body.is-service-detail .process-sticky {
    position: static;
    top: auto;
  }
  body.is-service-detail .proj-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.is-service-detail .related-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  body.is-service-detail .cta-dark-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ── Small-phone tightening ─────────────────────────────── */
@media (max-width: 720px) {
  body.is-service-detail .hero {
    padding-bottom: 32px;
  }
  body.is-service-detail .hero-kicker {
    margin-bottom: 28px;
    gap: 10px;
  }
  body.is-service-detail .hero-title {
    margin-bottom: 28px;
  }
  body.is-service-detail .hero-title .ht-lead {
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    line-height: 1.18;
    margin-bottom: 4px;
  }
  body.is-service-detail .hero-title .ht-main {
    font-size: clamp(2.5rem, 12vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  body.is-service-detail .hero-title .ht-tail {
    font-size: clamp(1.125rem, 4.6vw, 1.5rem);
    line-height: 1.18;
  }
  body.is-service-detail .hero-divider {
    margin: 40px 0 32px;
  }
  body.is-service-detail .crumb-bar {
    padding: 86px 20px 0;
  }
  body.is-service-detail .crumb-inner {
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 10px;
  }
  body.is-service-detail .breadcrumb {
    font-size: 10.5px;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  body.is-service-detail .crumb-index {
    font-size: 10.5px;
  }
  body.is-service-detail .layout {
    padding: 0 20px;
    gap: 44px;
  }
  body.is-service-detail .article-col {
    padding-top: 48px;
  }
}

/* ── Alt inner-page templates (rd2, rd) — hero/main paddings ── */
/* These already have @media(max-width:720px) rules but they use bare
   `.rd2-X` selectors that lose to `.is-service-detail .rd2-X`. */
@media (max-width: 720px) {
  body.is-service-detail .rd2-crumb,
  body.is-service-detail .rd-crumb {
    padding: 84px 22px 12px;
  }
  body.is-service-detail .rd2-main,
  body.is-service-detail .rd-main {
    padding: 48px 20px 64px;
  }
  body.is-service-detail .rd2-article,
  body.is-service-detail .rd-article {
    padding: 24px 20px;
    border-radius: 14px;
  }
  body.is-service-detail .rd2-hero {
    min-height: 420px;
    padding: 96px 22px 56px;
  }
  body.is-service-detail .rd2-metrics {
    gap: 22px;
    margin: 26px 0;
    padding: 20px 0;
  }
}

/* ── Bottom-bar breathing room ──────────────────────────── */
@media (max-width: 900px) {
  body.is-service-detail {
    /* Room at page end so the last CTA isn't covered by the floating bar */
    min-height: calc(100vh);
  }
  body.is-service-detail .article-col {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 24px);
  }
  body.is-service-detail .rd2-main,
  body.is-service-detail .rd-main {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 64px);
  }
}

/* ── Safety: prevent horizontal overflow ────────────────── */
@media (max-width: 900px) {
  body.is-service-detail {
    overflow-x: hidden;
  }
  body.is-service-detail .layout,
  body.is-service-detail .article-col,
  body.is-service-detail .sidebar,
  body.is-service-detail .hero,
  body.is-service-detail .hero-title,
  body.is-service-detail .rd2-hero-inner,
  body.is-service-detail .rd-head-inner {
    max-width: 100%;
    min-width: 0;
  }
  /* Stray white 1px bar under the title on narrow viewports — the
     hero-divider reads as a visual artifact on mobile where the title
     already sits tight above the meta line. Hide it. */
  body.is-service-detail .hero-divider {
    display: none !important;
  }
}