/* ==========================================================================
   Fleet — 3D ring carousel, scoped to .fleet, .fleet-carousel-stage
   Canvas + interaction logic lives in assets/js/fleet-carousel.js
   ========================================================================== */

.fleet {
  background: var(--prism-band);
  position: relative;
  padding-top: clamp(80px, 10vw, 128px);
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
  scroll-margin-top: 90px; /* clears the fixed header when jumped to via #aircraft */
}

.fleet-head {
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* matches the hero's title treatment, per the client's ask */
.fleet-head .section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--subtag-size);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.fleet-body {
  color: var(--prism-band-text-body);
  line-height: 1.7;
  max-width: 66ch;
  margin: 0 auto 8px;
}

.fleet-swipe-hint {
  display: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--prism-teal);
}

.fleet-carousel-stage {
  position: relative;
  z-index: 1;
  width: 98%;
  margin: 0 auto -32px;
  height: clamp(420px, 62vh, 720px);
  cursor: grab;
  touch-action: pan-y;
}
.fleet-carousel-stage.is-dragging { cursor: grabbing; }
.fleet-carousel-stage.is-hovering-card { cursor: pointer; }

.fleet-carousel-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* DOM captions overlaid on the canvas, positioned per-frame by fleet-carousel.js */
.fleet-caption-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fleet-caption {
  position: absolute;
  transform: translate(-50%, 0);
  text-align: center;
  white-space: nowrap;
}

.fleet-caption-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prism-teal);
  margin: 0 0 4px;
}

.fleet-caption-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--prism-band-text);
  margin: 0;
}

.fleet-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--prism-band-text-secondary);
  text-align: center;
}

@media (max-width: 720px) {
  .fleet-swipe-hint { display: block; }
  .fleet-carousel-stage { touch-action: pan-y; }
}