/* ==========================================================================
   07 · Fleet (Our Aircraft)
   Below 1024px the cards sit in a horizontal rail (scroll-snap, touch swipe,
   mouse drag via core.js [data-drag-scroll]); from 1024px a 3×2 grid.
   ========================================================================== */
.fleet {
  padding-block: 80px;
  background: var(--white);
}
@media (min-width: 1024px) {
  .fleet {
    padding-block: 100px;
  }
}

/* ---- Heading row ---- */
.fleet__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fleet__intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fleet__title {
  font-weight: var(--fw-regular);
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--navy);
}
.fleet__text {
  max-width: 460px;
  font-weight: var(--fw-news);
  font-size: 16px;
  line-height: 20px;
  color: var(--muted);
}
@media (min-width: 768px) {
  .fleet__title {
    font-size: 64px;
    line-height: 76px;
  }
}
@media (min-width: 1024px) {
  .fleet__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .fleet__text {
    width: 460px;
  }
}

/* ---- Rail / grid ---- */
.fleet__wrap {
  margin-top: 40px;
}
.fleet__rail {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.fleet__rail:focus-visible {
  outline: 2px solid var(--royal);
  outline-offset: 4px;
}
.fleet__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-bottom: 12px;
}
.fleet__item {
  flex-shrink: 0;
  width: min(82vw, 360px);
  scroll-snap-align: start;
}
@media (max-width: 1023.98px) {
  .fleet__rail {
    cursor: grab;
  }
  .fleet__rail.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
}
@media (min-width: 768px) {
  .fleet__track {
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .fleet__wrap {
    margin-top: 56px;
  }
  .fleet__rail {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .fleet__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
    padding-bottom: 0;
  }
  .fleet__item {
    width: auto;
  }
}

/* ---- Card ---- */
.fleet__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  transition:
    translate 0.5s var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo);
}
.fleet__card:hover {
  translate: 0 -6px;
  box-shadow: 0 24px 48px -24px rgba(32, 73, 137, 0.28);
}

.fleet__media {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: clip;
  border-radius: 12px;
}
.fleet__card--first .fleet__media {
  border-radius: 20px;
}
/* Photo layer zooms slowly on hover */
.fleet__zoom {
  position: absolute;
  inset: 0;
  transition: scale 1.6s var(--ease-out-expo);
}
.fleet__card:hover .fleet__zoom {
  scale: 1.06;
}
.fleet__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fleet__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
/* Figma crop: image box larger than the frame, offset by percentages */
.fleet__photo-crop {
  position: absolute;
  top: var(--crop-y);
  left: var(--crop-x);
  width: var(--crop-w);
  height: var(--crop-h);
}
.fleet__photo-crop img {
  max-width: none;
  object-fit: fill;
}

.fleet__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  color: var(--navy);
}

/* Brand bar: grows and catches a light sweep on hover */
.fleet__bar {
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  overflow: hidden;
  border-radius: 0 0 4px 4px;
  background-image: linear-gradient(90deg, #d3baa1 0%, #d3baa1 21.9%, #31b4e7 22%, #55719d 70%, #891538 100%);
  transform-origin: bottom;
  transition: scale 0.5s var(--ease-out-expo);
}
.fleet__card:hover .fleet__bar {
  scale: 1 1.5;
}
.fleet__sweep {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.333%;
  background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent);
  translate: -100% 0;
  transition: translate 1.1s var(--ease-out-expo);
}
.fleet__card:hover .fleet__sweep {
  translate: 320% 0;
}
@media (prefers-reduced-motion: reduce) {
  .fleet__card:hover .fleet__zoom {
    scale: 1;
  }
  .fleet__sweep {
    display: none;
  }
}

/* ---- Card body ---- */
.fleet__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.fleet__heading {
  display: flex;
  flex-direction: column;
}
.fleet__maker {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--navy-60);
}
.fleet__model {
  font-weight: var(--fw-regular);
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.84px;
  color: var(--navy);
}
.fleet__class {
  font-weight: var(--fw-news);
  font-size: 14px;
  line-height: 18px;
  color: var(--muted);
}
.fleet__specs {
  display: flex;
  column-gap: 12px;
  min-height: 58px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fleet__spec {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fleet__spec dt {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--navy-60);
}
.fleet__spec dd {
  font-size: 14px;
  line-height: 20px;
  color: var(--navy);
}
/* Wide cards fit the specs on one line (design-specific breakpoint) */
@media (min-width: 1400px) {
  .fleet__specs {
    column-gap: 0;
  }
  .fleet__spec dd {
    font-size: 16px;
    white-space: nowrap;
  }
}