/* ════════════════════════════════════════════════════════════════
   AIRPORT ARRIVALS — STYLES
   STATUS: skeleton. Shares .lpwd-hub__hero / __filters / __badge with
   the webcams template (same tokens, same DOM patterns).
   TODO: build .lpwd-flight (row layout) + .lpwd-flight__status states.
   ════════════════════════════════════════════════════════════════ */

/* Baseline hero/filter styles live in hub-base.css (loaded by the page). */

/* ── HERO — Canaryfly ATR 72 (d28px / Pexels) ─────────────────── */
[data-hub-module="airport-arrivals"] .lpwd-hub__hero {
  position: relative;
  isolation: isolate;
  min-height: var(--lpwd-hub-hero-h);
  background-image:
    linear-gradient(180deg, rgb(8 18 35 / 0.55) 0%, rgb(8 18 35 / 0.25) 35%, rgb(8 18 35 / 0.80) 100%),
    url('../images/hub-flights-hero-mobile.jpg');
  background-size: cover;
  background-position: center;
  color: #f3f5f8;
}
@media (min-width: 768px) {
  [data-hub-module="airport-arrivals"] .lpwd-hub__hero {
    min-height: var(--lpwd-hub-hero-h-md);
    background-image:
      linear-gradient(180deg, rgb(8 18 35 / 0.55) 0%, rgb(8 18 35 / 0.20) 35%, rgb(8 18 35 / 0.80) 100%),
      url('../images/hub-flights-hero.jpg');
  }
}
[data-hub-module="airport-arrivals"] .lpwd-hub__hero-inner { position: relative; z-index: 1; }
[data-hub-module="airport-arrivals"] .lpwd-hub__title,
[data-hub-module="airport-arrivals"] .lpwd-hub__eyebrow,
[data-hub-module="airport-arrivals"] .lpwd-hub__lede {
  color: #f3f5f8;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.55);
}
[data-hub-module="airport-arrivals"] .lpwd-hub__lede { text-shadow: 0 1px 6px rgb(0 0 0 / 0.65); }
[data-hub-module="airport-arrivals"] .lpwd-hub__badge {
  background: rgb(15 20 25 / 0.55);
  border-color: rgb(255 255 255 / 0.18);
  backdrop-filter: blur(6px);
  color: #f3f5f8;
}
[data-hub-module="airport-arrivals"] .lpwd-hub__hero::after {
  content: 'Photo · d28px / Pexels';
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  z-index: 2;
  font-family: var(--lpwd-hub-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 0.55);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  pointer-events: none;
}

/* ── FLIGHT BOARD ─────────────────────────────────────────────── */
.lpwd-hub__flights {
  max-width: var(--lpwd-hub-maxw);
  margin: 0 auto;
  padding: var(--lpwd-hub-gap-lg) var(--lpwd-hub-section-px) var(--lpwd-hub-section-py);
}

.lpwd-flight {
  display: grid;
  grid-template-columns: 140px 1fr 110px 100px;
  gap: var(--lpwd-hub-gap-md);
  align-items: center;
  padding: var(--lpwd-hub-gap-md) var(--lpwd-hub-card-pad);
  border-bottom: 1px solid var(--lpwd-hub-border);
  font-family: var(--lpwd-hub-font-mono);
  font-size: var(--lpwd-hub-size-small);
}
.lpwd-flight:first-child { border-top: 1px solid var(--lpwd-hub-border); }

.lpwd-flight__brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
}
.lpwd-flight__logo {
  width: 70px; height: 25px;
  object-fit: contain;
  flex-shrink: 0;
}
.lpwd-flight__logo--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px; height: 25px;
  background: var(--lpwd-hub-surface-2);
  border: 1px solid var(--lpwd-hub-border);
  border-radius: var(--lpwd-hub-radius-sm);
  font-size: var(--lpwd-hub-size-micro);
  font-weight: 700;
  color: var(--lpwd-hub-ink-soft);
  letter-spacing: 0.1em;
}
.lpwd-flight__no {
  font-weight: 700;
  color: var(--lpwd-hub-ink);
  letter-spacing: 0.05em;
}
.lpwd-flight__route {
  color: var(--lpwd-hub-ink-soft);
  font-family: var(--lpwd-hub-font-body);
}
.lpwd-flight__time {
  text-align: right;
  color: var(--lpwd-hub-ink);
}
.lpwd-flight__time del {
  display: block;
  color: var(--lpwd-hub-ink-mute);
  text-decoration: line-through;
  font-size: var(--lpwd-hub-size-micro);
}
.lpwd-flight__status {
  text-align: right;
  font-size: var(--lpwd-hub-size-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lpwd-flight[data-status="on-time"]  .lpwd-flight__status { color: var(--lpwd-hub-success); }
.lpwd-flight[data-status="delayed"]  .lpwd-flight__status { color: var(--lpwd-hub-warn); }
.lpwd-flight[data-status="cancelled"].lpwd-flight__status { color: var(--lpwd-hub-danger); }
.lpwd-flight[data-status="landed"]   .lpwd-flight__status { color: var(--lpwd-hub-ink-mute); }
.lpwd-flight[data-status="departed"] .lpwd-flight__status { color: var(--lpwd-hub-ink-mute); }

@media (max-width: 600px) {
  .lpwd-flight {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand  status"
      "route  route"
      "time   time";
    gap: var(--lpwd-hub-gap-sm);
  }
  .lpwd-flight__brand  { grid-area: brand; }
  .lpwd-flight__route  { grid-area: route; }
  .lpwd-flight__time   { grid-area: time; text-align: left; }
  .lpwd-flight__status { grid-area: status; }
}