/* ==========================================================================
   Likoma Airlines — Homepage
   --------------------------------------------------------------------------
   Only the pieces that exist nowhere else: the hero band and the two
   editorial layouts it sits above. Everything else on the page is built from
   the shared component classes.
   ========================================================================== */

.lk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: min(88vh, 900px);
  padding-block-start: calc(var(--header-height) + var(--topbar-height));
  padding-block-end: var(--space-16);
  background-color: var(--navy-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.lk-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lk-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* A very slow drift keeps the still image from feeling like a flat backdrop
     without ever drawing attention to itself. */
  animation: lk-drift 28s var(--ease-in-out) infinite alternate;
}

/* Two scrims rather than one: a vertical wash for the copy at the bottom, and
   a horizontal one so the text side stays legible on wide screens. */
.lk-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(8 14 32 / 0.94) 0%, rgb(8 14 32 / 0.62) 34%, rgb(8 14 32 / 0.18) 68%, rgb(8 14 32 / 0.35) 100%),
    linear-gradient(to right, rgb(8 14 32 / 0.72) 0%, rgb(8 14 32 / 0.15) 62%, transparent 100%);
}

.lk-hero__body {
  position: relative;
  z-index: 1;
  max-inline-size: 46rem;
}

/* A letterspaced label with a short rule, not a pill. The badge treatment
   made a piece of editorial framing look like a UI control. */
.lk-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}

.lk-hero__eyebrow::before {
  content: "";
  inline-size: var(--space-8);
  block-size: 1px;
  background-color: currentColor;
  opacity: 0.7;
}

/* The status dot belonged to the pill; without it the rule reads better. */
.lk-hero__eyebrow .lk-dot { display: none; }

.lk-hero__title {
  margin-block-start: var(--space-6);
  font-size: var(--text-display-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: #fff;
  text-wrap: balance;
}

.lk-hero__lead {
  margin-block-start: var(--space-5);
  max-inline-size: 46ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.82);
  text-wrap: pretty;
}

.lk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

/* Quick-entry strip anchored to the foot of the hero. The full booking widget
   replaces this in the booking phase; until then it routes to the real
   sections that exist. */
/* A single hairline rule with the links sitting on it, rather than a floating
   capsule. Reads as part of the page instead of hovering over it. */
.lk-hero__quick {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-8);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.22);
  inline-size: 100%;
  max-inline-size: 46rem;
}

.lk-hero__quick-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  transition: var(--transition-colors);
}

.lk-hero__quick-link:hover {
  color: #fff;
}

.lk-hero__quick-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.lk-hero__quick-link svg { inline-size: 18px; block-size: 18px; }

/* Gated by App\Filters\LaunchGate — dimmed rather than truly disabled, since
   the link still goes to the coming-soon notice rather than nowhere. */
.lk-hero__quick-link[aria-disabled="true"] { color: rgb(255 255 255 / 0.45); }

/* --- Stat band -------------------------------------------------------------
   Sits directly under the hero, overlapping it slightly so the two read as
   one unit rather than as two stacked sections.
   ------------------------------------------------------------------------ */

/* Sits flush under the hero on its own rule rather than floating over it on a
   shadow. The overlap was the trick; the rule is the statement. */
.lk-stat-band {
  position: relative;
  z-index: 2;
  padding-block: var(--space-10);
  border-block-end: 1px solid var(--color-divider);
  background-color: var(--color-background);
}

.lk-stat-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.lk-stat-band__item + .lk-stat-band__item {
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--color-divider);
}

/* --- Destination deck --------------------------------------------------------
   The first card is deliberately double-height: a flat grid of eight equal
   tiles reads as a catalogue, not as an invitation.
   ---------------------------------------------------------------------------- */

.lk-dest-deck {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-5);
}

.lk-dest-deck > :first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.lk-dest-deck > :first-child .lk-destination__city {
  font-size: var(--text-4xl);
}

/* --- Cabin band ---------------------------------------------------------------- */

.lk-cabin-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* --- Loyalty ------------------------------------------------------------------- */

.lk-tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
}

.lk-tier__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: #fff;
}

.lk-tier__swatch {
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-full);
}

.lk-tier__threshold {
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.6);
}

.lk-tier__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: auto;
}

.lk-tier__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.76);
}

.lk-tier__benefit svg {
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: 2px;
  color: var(--blue-400);
  flex-shrink: 0;
}

/* --- Responsive ----------------------------------------------------------------- */

@media (max-width: 1023px) {
  .lk-dest-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-dest-deck > :first-child { grid-column: span 2; grid-row: span 1; }
  .lk-dest-deck > :first-child .lk-destination__city { font-size: var(--text-3xl); }
  .lk-stat-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-stat-band__item:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 767px) {
  .lk-hero {
    min-block-size: auto;
    padding-block: calc(var(--header-height-mobile) + var(--space-16)) var(--space-12);
  }

  .lk-hero__quick {
    inline-size: 100%;
    border-radius: var(--radius-xl);
  }

  .lk-hero__quick-link { flex: 1 1 auto; justify-content: center; }

  .lk-hero__actions .lk-btn { inline-size: 100%; }

  .lk-stat-band {
    padding-block: var(--space-8);
  }

  .lk-stat-band__grid { gap: var(--space-5); }

  .lk-stat-band__item + .lk-stat-band__item {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .lk-dest-deck { grid-template-columns: minmax(0, 1fr); }
  .lk-dest-deck > :first-child { grid-column: span 1; }
}