/* Fleet: four vehicles parked on a floor, each in front of a short cut-corner card on the wall that
   carries the vehicle's number, name and one line; the truck overlaps the card's lower part. The section fills the screen on desktop: heading at the
   top, the fleet standing on the floor at the bottom.

   Images: tools/fleet_prepare.py frames every truck so the bodies come out the same width and the
   tyres sit the same distance above the image bottom; the page never resizes them unevenly
   (width set, height auto).

   Spacing: one 8px rhythm. 8 inside a text block, 16 between a label and its heading, 24 between
   cards, 48-64 between the heading and the fleet, gutters 24px to 96px with the viewport.

   Motion: each card is a link to that vehicle's web order. On hover (fine pointers only) the panel
   turns H10 yellow (200ms ease), the truck rolls 10px forward the way its cab faces (300ms strong
   ease-out) and the arrow chip turns ink. Press scales the card to .985. No entrance animation on
   scroll: the design system rules those out. */

.fleet {
  --gutter: clamp(24px, 5vw, 96px);
  --pad-top: clamp(112px, 12vh, 144px);           /* clears the fixed nav */
  --pad-bottom: clamp(48px, 7vh, 80px);
  --floor-drop: clamp(36px, 3vw, 56px);           /* horizon height above the image bottoms (behind the wheels) */
  --wall: var(--surface-mute);
  --floor: #D6D9DE;
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  /* wall above the panels' base, floor below it, with a soft falloff so the floor has depth */
  background:
    linear-gradient(to top,
      var(--floor) 0,
      #DDE0E4 calc(var(--pad-bottom) + var(--floor-drop) - 24px),
      #CFD3D8 calc(var(--pad-bottom) + var(--floor-drop) - 1px),
      var(--wall) calc(var(--pad-bottom) + var(--floor-drop)));
  color: var(--h10-ink);
}
.fleet__inner {
  width: 100%; max-width: 1760px; margin-inline: auto;
  display: grid; grid-template-rows: auto 1fr; gap: clamp(48px, 6vh, 64px);
}

/* header: .section-head / .section-eyebrow / .section-title / .section-chevrons (base.css) */

.fleet__grid {
  align-self: end;                                 /* the fleet stands on the floor at the bottom */
  display: grid; grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr));   /* one column per card (four or five) */
  gap: clamp(24px, calc(160px / var(--cards, 4)), 40px);
  margin: 0; padding: 0; list-style: none;
}
.fleet__grid > li { display: flex; }            /* equal-height cards: the floor line stays level */

.fleet-card {
  /* sizes in cqi (% of the card's width) so the truck/panel overlap holds at every card width */
  container-type: inline-size;
  --overlap: 40cqi;                                /* how far the stage reaches up over the panel: with the
                                                      60cqi stage, the card's bottom edge lands 20cqi above the
                                                      tyres, about halfway up a flatbed, hidden by the truck */
  position: relative; flex: 1; display: flex; flex-direction: column;
  color: var(--h10-ink); text-decoration: none;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* the panel: a short cut-corner card on the wall, carrying the text; its lower part is left free
   for the truck parked in front of it */
.fleet-card__panel {
  position: relative; flex: 1;                     /* absorbs a two-line description; the stage stays put */
  margin-inline: 9%;
  padding-bottom: 54cqi;                           /* the tallest truck (68cqi) reaches 48cqi up into the panel */
  background: #FFFFFF;
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);   /* the cut corner */
  transition: background-color 200ms ease;
}
.fleet-card__text { display: grid; gap: 8px; padding: 24px 20px 0; }
.fleet-card__num { font: 600 13px/20px var(--font-sf); letter-spacing: 0.02em; color: var(--ink-muted); direction: ltr; justify-self: start; min-height: 32px; display: flex; align-items: center; transition: color 200ms ease; }   /* shares its row with the chip */
.fleet-card h3 { margin: 0; font-size: clamp(20px, 1.5vw, 24px); line-height: 1.4; font-weight: 700; }
.fleet-card p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); transition: color 200ms ease; }
.fleet-card__go {
  position: absolute; top: 24px; inset-inline-end: 16px;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-alt); color: var(--h10-ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.fleet-card__go svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 300ms var(--ease-out);
}
.fleet-card__go:dir(rtl) svg { transform: scaleX(-1); }

/* stage: the floor strip the truck stands on. Same height on every card so the tyres line up;
   it reaches up over the panel's free lower part by --overlap */
.fleet-card__stage { position: relative; height: 60cqi; margin-top: calc(var(--overlap) * -1); }
.fleet-card__img {
  position: absolute; z-index: 1; bottom: 0; left: 50%;
  width: 108%; max-width: none; height: auto;       /* never stretched: height follows the width */
  translate: -50% 0;                                /* a little wider than its column, centred */
  transition: transform 300ms var(--ease-out);
  pointer-events: none;
}

.fleet-card:active { transform: scale(0.985); }
.fleet-card:focus-visible { outline: 3px solid var(--h10-ink); outline-offset: 6px; border-radius: 4px; }
.fleet-card:focus-visible .fleet-card__panel { background: var(--h10-yellow); }
.fleet-card:focus-visible .fleet-card__go { background: var(--h10-ink); color: var(--h10-yellow); }
.fleet-card:focus-visible .fleet-card__num, .fleet-card:focus-visible p { color: #3A2E07; }

@media (hover: hover) and (pointer: fine) {
  .fleet-card:hover .fleet-card__panel { background: var(--h10-yellow); }
  .fleet-card:hover .fleet-card__img { transform: translateX(-10px); }   /* every cab faces left */
  .fleet-card:hover .fleet-card__go { background: var(--h10-ink); color: var(--h10-yellow); }
  .fleet-card:hover .fleet-card__num, .fleet-card:hover p { color: #3A2E07; }   /* muted text re-tuned for the yellow ground */
  .fleet-card:hover .fleet-card__go:dir(rtl) svg { transform: scaleX(-1) translateX(2px); }
  .fleet-card:hover .fleet-card__go:dir(ltr) svg { transform: translateX(2px); }
}

/* three cards (services page): same cards, one per service, wider columns so the vehicles stand larger */
.fleet__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); max-width: 1480px; width: 100%; margin-inline: auto; }

/* Phones and small tablets: a swipe row, one and a bit cards visible */
@media (max-width: 900px) {
  .fleet { --gutter: 16px; --pad-top: 72px; --pad-bottom: 56px; --floor-drop: 32px; min-height: 0; padding-inline: 0; }
  .fleet__inner { gap: 32px; }
  .fleet .section-head { padding-inline: 16px; }
  .fleet__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 340px);
    gap: 20px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    padding-inline: 16px;
    scrollbar-width: none;
  }
  .fleet__grid::-webkit-scrollbar { display: none; }
  .fleet__grid > li { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-card, .fleet-card__img, .fleet-card__go svg { transition: none; }
}