/* ==========================================================================
   Elite Transfer Brussels — standalone pages
   Our Story and Full Fleet.

   These two pages were not drawn as Figma frames, so nothing here invents a
   new visual language: every value is taken from the approved system already
   in base.css and sections.css — the same grounds, type scale, hairline,
   button, card and motion behaviour. This file only arranges them.

   Loaded by our-story.html and full-fleet.html. The approved pages do not
   link it, so nothing here can reach them.
   ========================================================================== */


/* --------------------------------------------------------------------------
   A page without a hero
   The navbar has no film behind it, so it carries its settled panel from the
   start — otherwise cream links would sit on a cream ground.
   -------------------------------------------------------------------------- */
.page-sub .nav,
.page-sub .nav.is-scrolled {
  background: rgba(var(--night-deep-rgb), 0.72);
  border-bottom-color: rgba(var(--cream-light-rgb), 0.10);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* the first section clears the fixed navbar */
.page-sub .section--first {
  padding-top: calc(var(--section-y) + clamp(4rem, 6vw, 4.5rem));
}


/* ==========================================================================
   Our Story
   ========================================================================== */

.story__head {
  max-width: 52rem;
}

.story__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* the opening paragraph, set a step above the rest of the reading */
.story__lede {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t-body-lg);
  line-height: 1.65;
  max-width: 46rem;
}

/* the band: the reading on the left, the photograph on the right, in the
   same proportion the mission section uses */
.story__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 10vw, 9.125rem);
  align-items: center;
}

.story__copy p {
  font-size: var(--t-body);
  line-height: 1.75;
}
.story__copy p + p {
  margin-top: clamp(1.25rem, 2.4vw, 1.875rem);
}

.story__figure img {
  width: 100%;
  /* the height attribute would otherwise win and lock the crop */
  height: auto;
  aspect-ratio: 625 / 545;
  object-fit: cover;
  border-radius: 2px;
}

/* the closing belief, centred and given room */
.story__close {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.story__close p {
  font-size: var(--t-body-lg);
  line-height: 1.6;
}
.story__close p + p {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.story__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  min-width: 245px;
  width: min(100%, 340px);
}

@media (max-width: 860px) {
  .story__band {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .story__figure { order: -1; }
}


/* ==========================================================================
   Full Fleet
   The card behaves exactly as the fleet cards on the homepage: a very small
   forward movement, a slow image zoom, a cue that arrives on hover or focus.
   The information itself stays visible — this is the page one comes to in
   order to read it.
   ========================================================================== */

.vehicles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 5.5vw, 5rem);
  width: min(100%, 1240px);
  margin: clamp(2.5rem, 6vw, 5.5rem) auto 0;
}

.vehicle {
  transition:
    translate var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}
.has-js [data-reveal].vehicle {
  transition:
    opacity var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    transform var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    translate var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}

.vehicle {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream-light);
}

.vehicle__frame {
  position: relative;
  aspect-ratio: 320 / 420;
  overflow: hidden;
  background: var(--night);
}
.vehicle__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-soft);
}

.vehicle__body {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.vehicle__name {
  font-size: var(--t-body-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.vehicle__specs {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
}
.vehicle__specs div { min-width: 0; }
.vehicle__specs dt {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(var(--night-rgb), 0.62);
}
.vehicle__specs dd {
  margin: 0.25rem 0 0;
  font-size: var(--t-body-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.vehicle__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* the visible position is unchanged; the padding only grows the hit area
     to a comfortable 44px for a thumb, and the margins take it back again */
  margin-top: calc(clamp(0.875rem, 1.6vw, 1.25rem) - 0.5rem);
  margin-bottom: -0.5rem;
  padding: 0.75rem 0;
  font-family: var(--font-ui);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(var(--night-rgb), 0.62);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

/* the information itself — the lines already established for these vehicles */
.vehicle__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
}
.vehicle__detail > div { overflow: hidden; }

.vehicle.is-open .vehicle__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease),
    visibility 0s;
}

.vehicle__amenity {
  padding-top: 0.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(var(--night-rgb), 0.78);
}
.vehicle.is-open .vehicle__toggle { color: var(--night); }

.vehicle:hover,
.vehicle:focus-within {
  translate: 0 -5px;
  box-shadow: 0 20px 44px rgba(var(--night-deep-rgb), 0.16);
}
.vehicle:hover .vehicle__img,
.vehicle:focus-within .vehicle__img { transform: scale(1.05); }
.vehicle:hover .vehicle__toggle,
.vehicle:focus-within .vehicle__toggle { color: var(--night); }
.vehicle:hover .btn__arrow,
.vehicle:focus-within .btn__arrow { transform: translateX(4px); }

.fleet-page__cta {
  display: block;
  margin: clamp(2.5rem, 6vw, 5.5rem) auto 0;
  width: min(100%, 338px);
  min-height: 56px;
}

/* tablet and phone — the three classes stack, as they do on the homepage */
@media (max-width: 860px) {
  .vehicles {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 420px;
  }
  .vehicle__frame { aspect-ratio: 3 / 2; }
}