/* === FILE: assets/css/pages/fleet.css ===
   Page-specific styles for /fleet.
   Inherits the shared internal-page template (page-hero, section,
   section-header, cta-banner, page-info-callout) and the reusable
   media-gallery + lightbox from demo-flight.css + components.css,
   then layers on the alternating aircraft feature rows.
   ============================================================ */

@import url('demo-flight.css');

/* ─── HERO REFRAME ───────────────────────────────────────────
   The fleet hero is a wide air-to-air style shot — bias the focal
   point slightly up so the aircraft reads above the headline. The
   dark fallback keeps the hero legible if the image is still loading
   or hasn't been supplied yet. */
.page-hero { background: var(--color-primary); }
.page-hero-bg { object-position: center 42%; }

/* ─── CATEGORY HEADER ────────────────────────────────────────
   Generous space below the headline so the first (and any active)
   aircraft's highlight backdrop never crowds the title. */
.section-header {
  margin: 0 0 3.5rem;
}

/* ─── FLEET LIST ─────────────────────────────────────────────── */
.fleet-list {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
}

/* ─── FEATURE ROW ────────────────────────────────────────────── */
.fleet-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  /* Offset for the sticky header when jumped to via a #anchor link */
  scroll-margin-top: 130px;
}

/* Persistent highlight backdrop for the targeted aircraft. Sits behind
   the row content (absolute → no layout shift for any row) and extends
   slightly past it for breathing room. */
.fleet-item::before {
  content: '';
  position: absolute;
  inset: -1.5rem -1.75rem;
  z-index: 0;
  border-radius: calc(var(--radius-lg, 10px) + 6px);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-accent) 65%, transparent),
    0 30px 70px -36px rgba(17, 24, 39, .32);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.fleet-item > * { position: relative; z-index: 1; }  /* content above the backdrop */

@media (min-width: 900px) {
  .fleet-item {
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
  }
  /* Alternate the photo to the right on every other row */
  .fleet-item--reverse .fleet-item-media { order: 2; }
}

/* ─── MEDIA (photo + lightbox) ───────────────────────────────
   Reuses the .media-gallery / .media-gallery-trigger hooks so the
   shared lightbox JS works, but reframed as a single wide photo. */
.fleet-item-media.media-gallery {
  display: block;          /* override the gallery grid */
  margin: 0;
  background: transparent;
}

/* Main hero photo */
.fleet-media-main {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--color-bg-soft);
  box-shadow: 0 24px 60px -28px rgba(17, 24, 39, .35);
  transition: box-shadow 350ms ease, transform 350ms ease;
}

/* Thumbnail strip — extra photos that open in the same lightbox */
.fleet-media-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}

.fleet-thumb {
  width: 116px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}

/* Subtle zoom affordance on hover comes from the base component. */
.fleet-item-media .media-gallery-trigger { cursor: zoom-in; }

/* ─── "N in fleet" badge ─────────────────────────────────────── */
.fleet-count-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: .4rem .85rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17, 24, 39, .72);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  pointer-events: none;
}

/* ─── BODY ───────────────────────────────────────────────────── */
.fleet-item-name {
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.125rem);
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0 0 1.5rem;
  transition: color 300ms ease;
}

.fleet-item-name::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  margin-top: .85rem;
  background: var(--color-accent);
  border-radius: 2px;
}

/* ─── SPEC STAT GRID ─────────────────────────────────────────── */
.fleet-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 1.75rem;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

@media (min-width: 560px) {
  .fleet-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fleet-stat {
  margin: 0;
  padding: .9rem 1rem;
  background: var(--color-bg);
}

.fleet-stat dt {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .3rem;
}

.fleet-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.25;
}

/* ─── CAPABILITY CHIPS ───────────────────────────────────────── */
.fleet-caps-label {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
}

.fleet-caps-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-cap {
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-primary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .4rem .85rem;
}

/* ─── ACTIVE ITEM HIGHLIGHT (menu-click + scroll-spy) ────────
   The "active" aircraft is pronounced so the user always knows which
   one they're looking at. Driven two ways:
     • .is-active — set by the scroll-spy in main.js for the row
                    currently in view as you scroll through the list.
     • :target    — the row jumped to from a Fleet menu link; used as a
                    no-JS fallback (html:not(.has-scrollspy)).
   The highlight glides smoothly between rows via transitions: an
   accent border + tinted backdrop, accent name, a lifted + ringed
   photo, and a "Now Viewing" pill with a live dot. */
.fleet-item.is-active::before,
html:not(.has-scrollspy) .fleet-item:target::before {
  opacity: 1;
}
.fleet-item.is-active .fleet-item-name,
html:not(.has-scrollspy) .fleet-item:target .fleet-item-name {
  color: var(--color-accent);
}
.fleet-item.is-active .fleet-media-main,
html:not(.has-scrollspy) .fleet-item:target .fleet-media-main {
  transform: translateY(-3px);
  box-shadow:
    0 34px 74px -30px rgba(17, 24, 39, .42),
    0 0 0 3px color-mix(in srgb, var(--color-accent) 78%, transparent);
}
.fleet-item.is-active .fleet-active-tag,
html:not(.has-scrollspy) .fleet-item:target .fleet-active-tag {
  display: inline-flex;
}

/* "Now Viewing" indicator — a pill with a live, pulsing dot. */
.fleet-active-tag {
  display: none;
  align-items: center;
  gap: .5rem;
  width: max-content;
  margin-bottom: .9rem;
  padding: .38rem .85rem .38rem .7rem;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
  border-radius: 999px;
}
.fleet-active-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: fleet-dot-pulse 1.8s ease-out infinite;
}
@keyframes fleet-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .fleet-item::before,
  .fleet-media-main,
  .fleet-item-name { transition: none; }
  .fleet-active-dot { animation: none; }
}

/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .fleet-list { gap: 3.5rem; }
  .fleet-item { gap: 1.5rem; }
  .fleet-item { scroll-margin-top: 90px; }
  /* Pull the highlight backdrop in so it can't overflow the viewport */
  .fleet-item::before { inset: -1rem -0.85rem; }
  .section-header { margin-bottom: 2.5rem; }
}