/* services-rapid-response.css — Rapid Response detail page */

/* ============================================================
   Afrique Du Sud K9 — Rapid Response service detail
   Page-specific styles for /src/pages/services/rapid-response.html.
   Tokens, base styles, header/footer chrome, .container,
   .slash-mask, [data-reveal], .mono, .skip-link, .btn-*
   utilities all live in main.css — do not redefine here.
   Hero (.page-hero) and related (.related-services) blocks are
   shared and styled in main.css.
   Mobile-first; widen via @media (min-width: 700px / 1100px).
   Section BEM roots:
     .rapid-overview / .rapid-chain /
     .rapid-services / .rapid-fleet
     (hero + related + contact-cta use shared partials)
   ============================================================ */


/* ============================================================
   Hero — uses shared .page-hero from main.css via the
   src/partials/page-hero.html partial. No page-local rules.
   ============================================================ */


/* ============================================================
   #rapid-overview — paper intro band + 3 jump-nav pills
   Intro paragraph followed by a flex row of box-style pills
   linking to #rapid-chain, #rapid-services, #rapid-fleet.
   Padding-block halved to match surveillance-overview /
   tactical-overview (master ref §4). Pill style is the
   Training canonical box pill — display font 700, white bg,
   1px subtle border, orange-border on hover (not the rounded
   mono pill tried on K9 Units and rejected — master ref §8).
   ============================================================ */
#rapid-overview.rapid-overview {
  background: var(--paper);
  padding-block: calc(var(--section-y) / 2);
}

.rapid-overview__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rapid-overview__intro {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2rem;
}

.rapid-overview__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rapid-overview__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  padding: 0.625rem 1.125rem;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease,
              background-color 150ms ease;
}
.rapid-overview__pill:hover,
.rapid-overview__pill:focus-visible {
  border-color: var(--orange);
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
  outline: none;
}
.rapid-overview__pill:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* ============================================================
   #rapid-chain — ink response-chain band
   The distinctive callout — 4-step sequence (Detect / Dispatch /
   Respond / Resolve) on solid --ink, white text. Single-column
   vertical stack at every breakpoint; each step carries a red
   2px rail down the left running from the top of the numeral
   to the bottom of the body paragraph. Display-font numerals
   alternate red/orange (1,3 red; 2,4 orange) — the rail itself
   stays red site-wide as the colour signal for the band.
   Numeral sits inline next to the mono uppercase step label on
   a shared header row (.rapid-chain__header) rather than stacked.
   Body paragraphs at rgba white 0.85; body links are --orange
   with underline. Sibling visual treatment to .vt-recovery__step
   on /services/vehicle-tracking-recovery.html (different divider —
   solid red rail vs gradient slash — but same numeral+label rhythm).
   ============================================================ */
#rapid-chain.rapid-chain {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--section-y);
}

.rapid-chain__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rapid-chain__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-h2);
  color: var(--white);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.rapid-chain__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 72ch;
  margin: 0 0 2.5rem;
}

.rapid-chain__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
}

.rapid-chain__step {
  position: relative;
  border-left: 2px solid var(--red);
  padding-left: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
}

.rapid-chain__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  flex-wrap: wrap;
}

.rapid-chain__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}

/* Odd steps (1, 3) = red (default above); even (2, 4) = orange */
.rapid-chain__step:nth-child(2) .rapid-chain__num,
.rapid-chain__step:nth-child(4) .rapid-chain__num {
  color: var(--orange);
}

.rapid-chain__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
  margin: 0;
}

.rapid-chain__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.rapid-chain__body a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}
.rapid-chain__body a:hover,
.rapid-chain__body a:focus-visible {
  color: var(--white);
  text-decoration: underline;
}


/* ============================================================
   #rapid-services — paper "What we provide" band
   H2 + intro paragraph + 3 alternating image+copy rows (one per
   service: Alarm / Panic / Mobile Patrol). Mirrors the canonical
   .surveillance-systems / .tech-services pattern: single-column
   stack on mobile; 2-col alternating-side grid at >=1100px where
   even-indexed rows flip the media to the right via `order: 2`.
   Trait bullets use the site-wide orange-square pattern.
   Band background swapped from white -> paper to alternate
   against the white #rapid-fleet band below.
   ============================================================ */
#rapid-services.rapid-services {
  background: var(--paper);
  padding-block: var(--section-y);
}

.rapid-services__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rapid-services__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.rapid-services__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2.5rem;
}

/* Alternating image+copy row container — mirrors surveillance-systems__items */
.rapid-services__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 4.5rem);
}

.rapid-services__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: 0;
}

.rapid-services__media {
  width: 100%;
}
.rapid-services__media picture,
.rapid-services__media picture > img {
  width: 100%;
  display: block;
}
.rapid-services__media picture > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.rapid-services__copy > :first-child {
  margin-top: 0;
}
.rapid-services__copy > :last-child {
  margin-bottom: 0;
}

.rapid-services__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.rapid-services__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0 0 1rem;
}

/* Trait bullets (orange square — matches surveillance-systems__traits) */
.rapid-services__traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rapid-services__traits li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--grey-700);
}
.rapid-services__traits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--orange);
}


/* ============================================================
   #rapid-fleet — white marked-vehicle gallery
   Fleet gallery: 1-col mobile -> 2-col >=700px -> 4-col >=1100px
   (single row at desktop). 3:2 aspect on the item picture wrapper;
   <img> cover-fills. Uses explicit repeat(n, 1fr) column
   declarations, no `1fr 1fr` shorthand (master ref §11).
   Background is --white to alternate from the --paper #rapid-services
   band above (band cadence: hero ink -> overview paper -> chain
   ink -> services paper -> fleet white -> related paper).
   ============================================================ */
#rapid-fleet.rapid-fleet {
  background: var(--white);
  padding-block: var(--section-y);
}

.rapid-fleet__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rapid-fleet__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: var(--fs-h2);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.rapid-fleet__intro {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 72ch;
  margin: 0 0 2rem;
}

.rapid-fleet__gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.rapid-fleet__item {
  width: 100%;
  margin: 0;
}

/* 3:2 aspect lock on fleet item picture wrappers (1200×800 source) */
.rapid-fleet__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.rapid-fleet__media picture,
.rapid-fleet__media picture > img {
  width: 100%;
  height: 100%;
  display: block;
}
.rapid-fleet__media picture > img {
  object-fit: cover;
  object-position: center;
}

/* Optional caption below each fleet image */
.rapid-fleet__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-400);
  margin: 0.625rem 0 0;
}


/* ============================================================
   Related services — uses shared .related-services block
   from main.css via the src/partials/related-services.html
   partial. No page-local rules.
   ============================================================ */


/* ============================================================
   Contact CTA — uses shared .contact-cta block from main.css
   via the src/partials/contact-cta.html partial.
   No page-local rules.
   ============================================================ */


/* ============================================================
   Breakpoint: >=700px
   Tablet shifts:
   - overview pills row out into a horizontal flex row
   - response chain steps stay single-column at every breakpoint
     (round-6: replaced the prior 2x2 grid with a vertical stack
     and red rail per step — sibling layout to .vt-recovery__step)
   - fleet gallery becomes 2-col
   ============================================================ */
@media (min-width: 700px) {
  /* Overview pills row */
  .rapid-overview__pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Fleet gallery 2-col */
  .rapid-fleet__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   Breakpoint: >=1100px
   Desktop:
   - response chain stays single-column vertical stack (no change
     from tablet — the red rail + inline header pattern reads the
     same at every width)
   - services items resolve to 2-col alternating-side rows
     (mirrors .surveillance-systems pattern: even-indexed items
     flip the media to the right)
   - fleet gallery resolves to 4-col single row
   ============================================================ */
@media (min-width: 1100px) {
  /* Services items: 2-col alternating-side rows */
  .rapid-services__item {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  .rapid-services__item:nth-child(even) .rapid-services__media {
    order: 2;
  }

  /* Fleet gallery 4-col */
  .rapid-fleet__gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ============================================================
   Reduced-motion local guards
   (Global guard in main.css already disables transitions/anims
   on everything; these are belt-and-braces guards for the pill
   border-colour swap, the fleet image overlay, and the
   response-chain body-link colour swap on interactive elements.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rapid-overview__pill {
    transition: none !important;
  }
  .rapid-chain__body a {
    transition: none !important;
  }
  .rapid-overview *,
  .rapid-chain *,
  .rapid-services *,
  .rapid-fleet * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}