/* services-vehicle-tracking-recovery.css — Vehicle Tracking & Recovery detail page */

/* ============================================================
   Afrique Du Sud K9 — Vehicle Tracking & Recovery detail
   Page-specific styles for
   /src/pages/services/vehicle-tracking-recovery.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:
     .vt-overview / .vt-features / .vt-recovery
   .vt-recovery elements:
     __inner __title __lead __media __steps __step
     __step-header __step-num __step-title __step-body
   ============================================================ */


/* ============================================================
   #vt-overview — paper intro band
   Single intro paragraph framing the page. Padding-block halved
   (master ref §4). Jump pills were removed in vt-rewrite Phase 4
   alongside the .vt-app section, leaving the band as a copy-only
   intro.
   ============================================================ */
#vt-overview.vt-overview {
  background: var(--paper);
  padding-block: calc(var(--section-y) / 2);
}

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

.vt-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;
}


/* ============================================================
   #vt-features — paper capabilities band, stacked-row tiles
   H2 + lead + 4 full-width tiles stacked vertically at every
   breakpoint (mirrors .ap-capability / .tech-systems pattern —
   master ref §4 "Full-width stacked-row capability tiles").
   Each tile is a white wrapper with a 1px hairline perimeter
   border and an alternating 3px top accent — odd rows red, even
   rows orange (rows 1+3 red, 2+4 orange). Reach for this layout
   when tile bodies are paragraph-length (the previous 3-col grid
   read cramped).
   ============================================================ */
#vt-features.vt-features {
  background: var(--white);
  padding-block: var(--section-y);
}

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

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

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

.vt-features__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Stacked-row tile (mirrors .ap-capability / .tech-systems / .about-vision__tile).
   White wrapper, hairline perimeter border, alternating red/orange top rule —
   odd rows red, even rows orange. Reach for this pattern when card bodies
   are paragraph-length and a side-by-side grid reads cramped. */
.vt-features__card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}
.vt-features__card:nth-child(2n) {
  border-top-color: var(--orange);
}

.vt-features__card-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.vt-features__card-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0;
}


/* ============================================================
   #vt-recovery — dark band; combined "If a vehicle is stolen"
   image-first → title → lead → 4 numbered step blocks.
   Adapted from the .exp-sectors pattern (experience.css):
   block list with a gradient-slash divider between siblings.
   Step header row pairs a large display numeral with the step
   title — the numeral is deliberately larger than the title
   (the user-requested "slightly bigger" cue). Numerals alternate
   red (01, 03) / orange (02, 04) to keep the site-wide chain
   pattern intact.
   ============================================================ */
#vt-recovery.vt-recovery {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-y);
}

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

.vt-recovery__media {
  width: 100%;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.vt-recovery__media picture,
.vt-recovery__media picture > img {
  width: 100%;
  display: block;
}
.vt-recovery__media picture > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
}

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

.vt-recovery__lead {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--white);
  opacity: 0.85;
  max-width: 72ch;
  margin: 0 0 2.5rem;
}

.vt-recovery__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.vt-recovery__step {
  position: relative;
  padding-block: 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  align-items: baseline;
}

/* Gradient slash divider between step blocks (lifted from .exp-sectors__block) */
.vt-recovery__step + .vt-recovery__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-slash);
  display: block;
}

.vt-recovery__step-header {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin: 0;
  flex-wrap: wrap;
}

.vt-recovery__step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}
/* Odd steps (01, 03) = red (default above); even (02, 04) = orange */
.vt-recovery__step:nth-child(2) .vt-recovery__step-num,
.vt-recovery__step:nth-child(4) .vt-recovery__step-num {
  color: var(--orange);
}

.vt-recovery__step-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

.vt-recovery__step-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--white);
  opacity: 0.85;
  max-width: 72ch;
  margin: 0;
}


/* ============================================================
   Breakpoint: >=700px
   Tablet shifts:
   - Feature cards stay 1-col (stacked-row pattern at every breakpoint).
   - Recovery step blocks loosen up slightly (gap + alignment).
   ============================================================ */
@media (min-width: 700px) {
  .vt-recovery__step {
    gap: 0.75rem;
    align-items: start;
  }
}


/* ============================================================
   Reduced-motion local guards
   Belt-and-braces alongside the global guard in main.css.
   Disables the pill border-colour transition and any other
   per-element transitions defined in this file.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .vt-recovery__step {
    transition: none;
    transform: none;
  }

  .vt-overview *,
  .vt-features *,
  .vt-recovery * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}