/* ==========================================================================
   Likoma Airlines — Responsive
   --------------------------------------------------------------------------
   Loaded last so it can adjust anything. Two kinds of rule live here:

     1. Component adaptations — how the header, footer, grids and panels
        re-form at each breakpoint.
     2. Responsive utility variants — `md:flex`, `lg:hidden`, and friends.
        The colon is escaped (`.md\:flex`) so it is a valid selector.

   Breakpoints (min-width unless noted):
     sm  480px   large phones
     md  768px   tablets
     lg  1024px  small laptops — the point at which the desktop nav appears
     xl  1280px  desktops
   ========================================================================== */

/* ==========================================================================
   1. COMPONENT ADAPTATIONS  (max-width — largest first)
   ========================================================================== */

/* --- Below xl ------------------------------------------------------------- */

/* Between lg and xl the desktop nav is still shown but the bar gets tight.
   The optional actions step down in order of how little they are missed, so
   nothing is ever clipped: first the "Sign in" label, then the search icon,
   then the locale switcher. All three remain reachable from the drawer. */
@media (max-width: 1399px) {
  .lk-header__signin-label { display: none; }
}

@media (max-width: 1279px) {
  .lk-nav { gap: 0; margin-inline-start: 0; }
  .lk-nav__link { padding-inline: var(--space-2-5); }
  .lk-header__search { display: none; }
  .lk-footer__main { grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  .lk-locale { display: none; }
}

/* --- Below lg — the desktop → mobile navigation switch -------------------- */

@media (max-width: 1023px) {
  .lk-nav,
  .lk-topbar {
    display: none;
  }

  .lk-burger { display: inline-flex; }

  .lk-header__inner { block-size: var(--header-height-mobile); }
  .lk-header[data-scrolled="true"] .lk-header__inner { block-size: var(--header-height-mobile); }

  /* The mobile CTA bar only exists below lg */
  .lk-mobile-cta { display: block; }

  /* Reclaim the space the CTA bar occupies */
  .lk-page { padding-block-end: 0; }
  body:has(.lk-mobile-cta[data-visible="true"]) .lk-footer__legal {
    padding-block-end: calc(var(--space-6) + 64px);
  }

  .lk-to-top { inset-block-end: calc(var(--space-6) + 64px); }

  .lk-split,
  .lk-split--wide-start,
  .lk-split--wide-end {
    grid-template-columns: minmax(0, 1fr);
  }

  .lk-cabin { grid-template-columns: minmax(0, 1fr); }
  .lk-cabin__media { min-block-size: 16rem; }
  .lk-cabin--reverse .lk-cabin__media { order: 0; }

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

  .lk-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-footer__brand { grid-column: 1 / -1; max-inline-size: 46ch; }
  .lk-footer__newsletter { grid-template-columns: minmax(0, 1fr); }
  .lk-footer__newsletter-form { inline-size: 100%; }

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

/* --- Below md — tablets to phones ----------------------------------------- */

@media (max-width: 767px) {
  :root {
    --section-y: clamp(3rem, 2rem + 5vw, 4.5rem);
    --radius-card: var(--radius-lg);
    --radius-panel: var(--radius-xl);
  }

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

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

  /* All 12-column spans collapse to the full row */
  [class*="lk-col-"] { grid-column: 1 / -1; }

  .lk-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    margin-block-end: var(--space-8);
  }

  .lk-section-head__aside { inline-size: 100%; }
  .lk-section-head__aside .lk-btn { flex: 1 1 auto; }

  .lk-form-grid > .span-6,
  .lk-form-grid > .span-4,
  .lk-form-grid > .span-3,
  .lk-form-grid > .span-8 {
    grid-column: span 12;
  }

  .lk-modal { padding: 0; place-items: end center; }

  /* Modals become bottom sheets on phones */
  .lk-modal__panel,
  .lk-modal__panel--lg,
  .lk-modal__panel--xl {
    inline-size: 100%;
    max-block-size: 92dvh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    transform: translateY(100%);
  }

  .lk-modal[data-open="true"] .lk-modal__panel { transform: translateY(0); }

  .lk-toast-region {
    inset-inline: var(--space-4);
    inset-block-end: calc(var(--space-4) + 64px);
    inline-size: auto;
  }

  .lk-quote { padding: var(--space-6); }
  .lk-quote__text { font-size: var(--text-md); }

  .lk-card__body { --card-pad: var(--space-5); }

  .lk-accordion__content { padding-inline-end: 0; }
  .lk-accordion__trigger { font-size: var(--text-md); }

  .lk-footer__legal { justify-content: flex-start; }

  .lk-tablist--underline { gap: var(--space-5); }

  /* Full-width primary actions read better under the thumb */
  .lk-btn--responsive-block {
    display: flex;
    inline-size: 100%;
  }
}

/* --- Below sm — small phones ----------------------------------------------- */

@media (max-width: 479px) {
  .lk-grid--2, .lk-grid--3, .lk-grid--4,
  .lk-grid--5, .lk-grid--6,
  .lk-grid--auto, .lk-grid--auto-sm {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .lk-stat__value { font-size: var(--text-3xl); }

  .lk-destination { aspect-ratio: var(--ratio-photo); }

  .lk-btn--xl { --btn-height: 52px; --btn-px: var(--space-6); --btn-font: var(--text-md); }

  .lk-modal__header,
  .lk-modal__body,
  .lk-modal__footer { padding-inline: var(--space-5); }
}

/* --- Coarse pointers -------------------------------------------------------
   Touch devices: no hover reveal, larger targets, no lift animations that
   would stick after a tap.
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {
  .lk-destination__fare {
    max-block-size: 3rem;
    opacity: 1;
    margin-block-start: var(--space-2);
  }

  .lk-card--interactive:hover,
  .lk-destination:hover,
  .lk-feature:hover,
  .lk-partner:hover,
  .hover-lift:hover {
    transform: none;
  }

  .lk-card--interactive:hover .lk-card__media img,
  .lk-destination:hover img,
  .hover-zoom:hover img {
    transform: none;
  }

  .lk-partner img { filter: grayscale(0); opacity: 1; }

  .lk-icon-btn { inline-size: var(--tap-target); block-size: var(--tap-target); }
  .lk-menu__item { padding-block: var(--space-3); }
  .lk-footer__link { min-block-size: 32px; }
}

/* --- Landscape phones ------------------------------------------------------ */

@media (max-height: 480px) and (orientation: landscape) {
  .lk-drawer__panel { inline-size: min(20rem, 70vw); }
  .lk-modal__panel { max-block-size: 96dvh; }
}

/* --- Very wide screens ------------------------------------------------------ */

@media (min-width: 1600px) {
  :root {
    --container-xl: 84rem;
    --section-y: clamp(5rem, 3rem + 5vw, 8rem);
  }
}

/* --- High contrast ---------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--navy-400);
    --color-border-subtle: var(--navy-300);
    --color-text-secondary: var(--navy-700);
    --color-text-muted: var(--navy-600);
  }

  .lk-card,
  .lk-panel {
    border: 1px solid var(--color-border-strong);
  }

  .lk-btn--ghost,
  .lk-btn--link {
    text-decoration: underline;
  }
}

/* ==========================================================================
   2. RESPONSIVE UTILITY VARIANTS  (min-width — mobile first)
   ==========================================================================
   Only the utilities that genuinely change between breakpoints are given
   variants. Adding more is a one-line job — keep them alphabetical within
   each block so the file stays scannable.
   ========================================================================== */

@media (min-width: 480px) {
  .sm\:block        { display: block; }
  .sm\:flex         { display: flex; }
  .sm\:grid         { display: grid; }
  .sm\:hidden       { display: none; }
  .sm\:flex-row     { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:w-auto       { inline-size: auto; }
  .sm\:text-start   { text-align: start; }
  .sm\:grid-2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:block        { display: block; }
  .md\:inline-flex  { display: inline-flex; }
  .md\:flex         { display: flex; }
  .md\:grid         { display: grid; }
  .md\:hidden       { display: none; }

  .md\:flex-row     { flex-direction: row; }
  .md\:flex-col     { flex-direction: column; }
  .md\:items-center { align-items: center; }
  .md\:items-end    { align-items: flex-end; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-end  { justify-content: flex-end; }

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

  .md\:col-4  { grid-column: span 4; }
  .md\:col-6  { grid-column: span 6; }
  .md\:col-8  { grid-column: span 8; }

  .md\:gap-4  { gap: var(--space-4); }
  .md\:gap-6  { gap: var(--space-6); }
  .md\:gap-8  { gap: var(--space-8); }
  .md\:gap-10 { gap: var(--space-10); }

  .md\:p-8    { padding: var(--space-8); }
  .md\:px-8   { padding-inline: var(--space-8); }
  .md\:py-12  { padding-block: var(--space-12); }
  .md\:mt-0   { margin-block-start: 0; }

  .md\:w-auto { inline-size: auto; }
  .md\:text-start  { text-align: start; }
  .md\:text-center { text-align: center; }
  .md\:text-lg { font-size: var(--text-lg); }
  .md\:text-xl { font-size: var(--text-xl); }
  .md\:text-3xl { font-size: var(--text-3xl); }

  .md\:order-none { order: 0; }
  .md\:sticky { position: sticky; }
}

@media (min-width: 1024px) {
  .lg\:block        { display: block; }
  .lg\:inline-flex  { display: inline-flex; }
  .lg\:flex         { display: flex; }
  .lg\:grid         { display: grid; }
  .lg\:hidden       { display: none; }

  .lg\:flex-row     { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }

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

  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }

  .lg\:gap-6  { gap: var(--space-6); }
  .lg\:gap-10 { gap: var(--space-10); }
  .lg\:gap-16 { gap: var(--space-16); }

  .lg\:px-0   { padding-inline: 0; }
  .lg\:py-20  { padding-block: var(--space-20); }

  .lg\:text-start  { text-align: start; }
  .lg\:text-4xl { font-size: var(--text-4xl); }
  .lg\:sticky { position: sticky; }

  /* Rails become static grids once there is room for the whole set */
  .lg\:rail-off {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
  }
}

@media (min-width: 1280px) {
  .xl\:block  { display: block; }
  .xl\:flex   { display: flex; }
  .xl\:hidden { display: none; }
  .xl\:grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:col-3  { grid-column: span 3; }
  .xl\:col-8  { grid-column: span 8; }
  .xl\:gap-12 { gap: var(--space-12); }
}

/* --- Print-only / screen-only ------------------------------------------------ */

.print\:hidden { }
@media print {
  .print\:hidden { display: none !important; }
  .print\:block  { display: block !important; }
}