/* ==========================================================================
   Likoma Airlines — Layout
   --------------------------------------------------------------------------
   Page shell, containers, section rhythm, grids and the small set of
   structural primitives every page is assembled from.
   ========================================================================== */

/* --- Page shell ---------------------------------------------------------- */

.lk-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  isolation: isolate;
}

.lk-main {
  flex: 1 0 auto;
}

/* Pages whose hero sits under a transparent header opt out of the offset */
.lk-main--offset {
  padding-block-start: var(--header-height);
}

/* --- Container -----------------------------------------------------------
   One container primitive with width modifiers. The gutter is fluid so the
   page breathes on large screens without the content ever touching an edge.
   ------------------------------------------------------------------------ */

.lk-container {
  inline-size: 100%;
  max-inline-size: calc(var(--container-width) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.lk-container--xs   { --container-width: var(--container-xs); }
.lk-container--sm   { --container-width: var(--container-sm); }
.lk-container--md   { --container-width: var(--container-md); }
.lk-container--lg   { --container-width: var(--container-lg); }
.lk-container--xl   { --container-width: var(--container-xl); }
.lk-container--2xl  { --container-width: var(--container-2xl); }

/* Full-bleed band that still aligns its content to the container grid */
.lk-container--flush {
  padding-inline: 0;
}

/* Lets a child escape the container to the viewport edge (image bands,
   horizontal card rails on mobile). */
.lk-bleed {
  margin-inline: calc(var(--container-gutter) * -1);
}

.lk-bleed-full {
  inline-size: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
}

/* --- Section ------------------------------------------------------------- */

.lk-section {
  position: relative;
  padding-block: var(--section-y);
}

.lk-section--tight { padding-block: var(--section-y-tight); }
.lk-section--loose { padding-block: var(--section-y-loose); }
.lk-section--flush-top { padding-block-start: 0; }
.lk-section--flush-bottom { padding-block-end: 0; }

.lk-section--alt {
  background-color: var(--color-background-alt);
}

.lk-section--mist {
  background: var(--gradient-mist);
}

.lk-section--deep {
  background: var(--gradient-sky);
  color: var(--color-text-primary);
}

/* Hairline separator that stops short of the viewport edges */
.lk-section--divided {
  border-block-start: 1px solid var(--color-divider);
}

/* --- Section header ------------------------------------------------------
   Eyebrow → heading → lead → action. The single most repeated block on the
   site, so it gets a dedicated primitive rather than being rebuilt per page.
   ------------------------------------------------------------------------ */

.lk-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
  margin-block-end: var(--space-10);
}

.lk-section-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-inline-size: var(--measure-base);
}

.lk-section-head__title {
  font-size: var(--text-display-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.lk-section-head__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.lk-section-head__aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.lk-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lk-section-head--center .lk-section-head__text {
  align-items: center;
}

/* --- Grid ----------------------------------------------------------------
   A 12-column grid plus the auto-fit patterns that cover most card decks.
   Auto-fit is preferred: it responds to available space, not to breakpoints.
   ------------------------------------------------------------------------ */

.lk-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-6));
}

.lk-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.lk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lk-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lk-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Self-sizing decks — the number that fits is the number you get */
.lk-grid--auto      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.lk-grid--auto-sm   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.lk-grid--auto-lg   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.lk-grid--auto-xl   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }

.lk-grid--gap-sm { --grid-gap: var(--space-4); }
.lk-grid--gap-lg { --grid-gap: var(--space-8); }
.lk-grid--gap-xl { --grid-gap: var(--space-10); }

/* Column spans (desktop-first intent, collapsed in responsive.css) */
.lk-col-1  { grid-column: span 1;  }
.lk-col-2  { grid-column: span 2;  }
.lk-col-3  { grid-column: span 3;  }
.lk-col-4  { grid-column: span 4;  }
.lk-col-5  { grid-column: span 5;  }
.lk-col-6  { grid-column: span 6;  }
.lk-col-7  { grid-column: span 7;  }
.lk-col-8  { grid-column: span 8;  }
.lk-col-9  { grid-column: span 9;  }
.lk-col-10 { grid-column: span 10; }
.lk-col-11 { grid-column: span 11; }
.lk-col-12 { grid-column: span 12; }

.lk-row-2 { grid-row: span 2; }

/* Editorial split: media on one side, copy on the other */
.lk-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}

.lk-split--wide-start { grid-template-columns: 1.35fr 1fr; }
.lk-split--wide-end   { grid-template-columns: 1fr 1.35fr; }
.lk-split--top        { align-items: start; }

/* --- Stack & cluster -----------------------------------------------------
   Owl-free spacing primitives. `--stack-gap` and `--cluster-gap` can be
   overridden inline for one-off rhythm without a new class.
   ------------------------------------------------------------------------ */

.lk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.lk-stack--xs { --stack-gap: var(--space-2); }
.lk-stack--sm { --stack-gap: var(--space-3); }
.lk-stack--lg { --stack-gap: var(--space-6); }
.lk-stack--xl { --stack-gap: var(--space-8); }

.lk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

.lk-cluster--sm { --cluster-gap: var(--space-2); }
.lk-cluster--lg { --cluster-gap: var(--space-5); }
.lk-cluster--between { justify-content: space-between; }
.lk-cluster--center { justify-content: center; }
.lk-cluster--end { justify-content: flex-end; }

/* Sits a row of items apart, vertically centred — toolbars, card footers */
.lk-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

/* --- Rail ----------------------------------------------------------------
   Horizontal scroll-snap track used for card decks on narrow screens and for
   deliberately horizontal galleries on wide ones.
   ------------------------------------------------------------------------ */

.lk-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-item, 17rem);
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-gutter);
  padding-inline: var(--container-gutter);
  padding-block-end: var(--space-2);
  margin-inline: calc(var(--container-gutter) * -1);
  scrollbar-width: none;
}

.lk-rail::-webkit-scrollbar { display: none; }

.lk-rail > * {
  scroll-snap-align: start;
}

.lk-rail--lg { --rail-item: 22rem; }
.lk-rail--sm { --rail-item: 13rem; }

/* --- Aspect & media ------------------------------------------------------ */

.lk-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--navy-100);
  isolation: isolate;
}

.lk-media > img,
.lk-media > video,
.lk-media > picture > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lk-ratio-square   { aspect-ratio: var(--ratio-square); }
.lk-ratio-photo    { aspect-ratio: var(--ratio-photo); }
.lk-ratio-video    { aspect-ratio: var(--ratio-video); }
.lk-ratio-wide     { aspect-ratio: var(--ratio-wide); }
.lk-ratio-portrait { aspect-ratio: var(--ratio-portrait); }
.lk-ratio-tall     { aspect-ratio: var(--ratio-tall); }

/* Scrim for text laid over imagery — tuned so 16px copy clears AA */
.lk-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(11 18 38 / 0.88) 0%,
    rgb(11 18 38 / 0.55) 32%,
    rgb(11 18 38 / 0.12) 62%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.lk-scrim--soft::after {
  background: linear-gradient(to top, rgb(11 18 38 / 0.7), transparent 70%);
}

.lk-scrim--full::after {
  background: rgb(11 18 38 / 0.45);
}

/* --- Sticky & positioning ------------------------------------------------ */

.lk-sticky {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-4));
}

.lk-relative { position: relative; }
.lk-absolute { position: absolute; }
.lk-fixed { position: fixed; }
.lk-inset-0 { inset: 0; }

/* --- Dividers ------------------------------------------------------------ */

.lk-divider {
  block-size: 1px;
  inline-size: 100%;
  border: 0;
  background-color: var(--color-divider);
}

/* Fades out at both ends — softer than a hard rule */
.lk-divider--fade {
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 15%,
    var(--color-border) 85%,
    transparent
  );
}

.lk-divider--vertical {
  inline-size: 1px;
  block-size: auto;
  align-self: stretch;
}

/* --- Decorative --------------------------------------------------------- */

/* Soft brand glow behind hero and feature panels */
.lk-glow {
  position: absolute;
  border-radius: var(--radius-full);
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
  z-index: var(--z-below);
}

.lk-glow--primary { background: radial-gradient(circle, var(--blue-700), transparent 70%); }
.lk-glow--accent  { background: radial-gradient(circle, var(--red-500), transparent 70%); }

/* Faint grid used behind dark sections to add depth without imagery */
.lk-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-below);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}

/* --- Accessibility helpers ----------------------------------------------- */

.lk-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Becomes visible on keyboard focus — used by the skip link */
.lk-sr-only--focusable:focus-visible {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  inline-size: auto;
  block-size: auto;
  padding: var(--space-3) var(--space-5);
  margin: 0;
  overflow: visible;
  clip-path: none;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-max);
}