/* Responsive scaling.
   The design system's components style themselves with inline style objects,
   which cannot carry media queries - so responsiveness is driven from the
   tokens they already reference. Redefining --page-gutter, the band padding
   and the display type sizes here adapts every surface at once, with no
   per-component overrides.

   Breakpoints (readme.md > VISUAL FOUNDATIONS > Layout):
     1440  design canvas
     1280  laptop - gutters tighten, canvas still 3-up
     1024  small laptop / landscape tablet - 2-up grids
      768  tablet - 2-up, display type steps down
      480  phone - 1-up, single column everywhere

   The 1440px values live in spacing.css / typography.css; this file only
   overrides below that. */

@media (max-width: 1439px) {
  :root {
    --page-gutter: 64px;
    --container-max: 100%;
  }
}

@media (max-width: 1279px) {
  :root {
    --page-gutter: 48px;
    --space-104: 80px;
    --text-9xl: 52px;   /* display */
    --leading-69: 58px;
    --text-8xl: 40px;   /* heading */
    --leading-54: 46px;
    --text-7xl: 36px;
    --col-366: 100%;
    --col-368: 100%;
  }
}

@media (max-width: 1023px) {
  :root {
    --page-gutter: 32px;
    --space-104: 64px;
    --space-56: 40px;
    --text-9xl: 44px;
    --leading-69: 50px;
    --text-8xl: 34px;
    --leading-54: 40px;
    --text-7xl: 30px;
    --text-6xl: 30px;
    --text-4xl: 24px;
    --leading-37: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 20px;
    --space-104: 48px;
    --space-72: 40px;
    --space-74: 32px;
    --space-56: 32px;
    --text-9xl: 36px;
    --leading-69: 42px;
    --text-8xl: 30px;
    --leading-54: 36px;
    --text-7xl: 26px;
    --text-6xl: 26px;
    --leading-48: 32px;
    --text-5xl: 26px;
    --text-3xl: 21px;
    --leading-33: 29px;
    --text-2xl: 20px;
    --text-xl: 18px;
    --leading-35: 28px;
    --leading-30: 26px;
    --header-height: 64px;
    --hero-height: 560px;
  }
}

@media (max-width: 479px) {
  :root {
    --page-gutter: 16px;
    --space-104: 40px;
    --text-9xl: 30px;
    --leading-69: 36px;
    --text-8xl: 26px;
    --leading-54: 32px;
    --hero-height: 520px;
  }
}

/* Layout utilities.
   The few things tokens cannot express: grid column counts and the row/column
   flip. */

/* Card grid: 3-up > 2-up > 1-up. */
.kssk-grid { display: grid; gap: var(--space-24); align-items: stretch; grid-template-columns: repeat(var(--kssk-grid-cols, 3), minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .kssk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Children authored with an explicit span (e.g. the 6-track testimonial grid)
     cannot honour it once the grid is 2 tracks - the span would spill into an
     implicit 0px track and leave mismatched card widths. Reset to auto. */
  .kssk-grid > * { grid-column: auto !important; }
}
@media (max-width: 767px) { .kssk-grid { grid-template-columns: 1fr; } }

/* Two-column content split > stacks below 1024. */
.kssk-split { display: grid; gap: var(--space-56); align-items: start; grid-template-columns: var(--kssk-split-cols, 1fr 1fr); }
@media (max-width: 1023px) { .kssk-split { grid-template-columns: 1fr; } }

/* Field pairs inside a panel > single column on phones. */
.kssk-fields { display: grid; gap: var(--space-16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .kssk-fields { grid-template-columns: 1fr; } .kssk-fields > * { grid-column: auto !important; } }

/* The orange promo pair - two up with a gutter, then stacked. It sits inside
   the page gutter rather than running full-bleed, so the two cards read as a
   pair. */
.kssk-promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: stretch; padding: var(--space-104) var(--page-gutter); background: var(--surface-page); }

/* A row of buttons or chips that must wrap rather than overflow. */
.kssk-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }
@media (max-width: 479px) { .kssk-actions > * { flex: 1 1 100%; } }

/* Hide below tablet - for decorative columns that add nothing on a phone. */
@media (max-width: 767px) { .kssk-hide-sm { display: none !important; } }

/* Component responsive behaviour.
   Rules for the specific components whose structure has to change, not just
   scale. Each component applies the class itself; these are its breakpoints. */

/* SiteHeader - a slim utility strip pins the language switcher to the top-right
   corner above the bar. The nav does not fit below 1024, so it collapses to a
   disclosure that drops the links below the bar; BOOKING's submenu flattens
   into that stack rather than staying a floating panel. */
.kssk-header__utility { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-12); padding: var(--space-4) var(--page-gutter); border-bottom: 1px solid var(--border-subtle); box-sizing: border-box; }
.kssk-header { display: flex; align-items: center; gap: var(--space-16); min-height: var(--header-height); padding: 0 var(--page-gutter); box-sizing: border-box; background: var(--surface-page); }
.kssk-header__nav { display: flex; justify-content: center; gap: var(--space-4); flex: 1; }
.kssk-header__toggle { display: none; }
.kssk-header__submenu { position: absolute; top: 100%; left: 0; min-width: 100%; display: flex; flex-direction: column; padding: var(--space-4) 0; background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: var(--shadow-md, 0 12px 28px rgb(17 17 17 / 0.12)); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast); }
.kssk-header__submenu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1023px) {
  .kssk-header { flex-wrap: wrap; height: auto !important; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .kssk-header__nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
  .kssk-header__nav[data-open="false"] { display: none; }
  .kssk-header__nav a { padding: var(--space-12) !important; }
  .kssk-header__group { position: static !important; }
  .kssk-header__caret { display: none; }
  .kssk-header__submenu { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 var(--space-16); border: 0; border-radius: 0; box-shadow: none; }
  .kssk-header__toggle { display: inline-flex; }
  .kssk-header__spacer { flex: 1; }
}

/* BookingSearchPanel - the field grid and its CTA stack below 1024; seven
   controls cannot sit in one row on a phone. */
@media (max-width: 1023px) {
  .kssk-searchpanel__row { flex-direction: column; align-items: stretch !important; }
  .kssk-searchpanel__row > button, .kssk-searchpanel__row > a { width: 100%; min-width: 0 !important; }
}
@media (max-width: 767px) {
  .kssk-searchpanel__grid { grid-template-columns: 1fr !important; }
}

/* BookingSummaryBar - the summary line truncates first, then drops, leaving the
   label and the View / Edit control. The expanded panel goes single column. */
@media (max-width: 1023px) {
  .kssk-summarybar__fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .kssk-summarybar__detail { display: none !important; }
  .kssk-summarybar__spacer { flex: 1; }
  .kssk-summarybar__fields { grid-template-columns: 1fr !important; }
}

/* SiteFooter - 4 columns > 2 > 1. */
@media (max-width: 1023px) { .kssk-footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-32) !important; } }
@media (max-width: 767px) { .kssk-footer__grid { grid-template-columns: 1fr !important; } .kssk-footer__bottom { flex-direction: column; align-items: flex-start !important; gap: var(--space-16) !important; } }

/* CompareTable - scrolls horizontally rather than crushing its columns, with
   the attribute labels staying legible. */
@media (max-width: 1023px) {
  .kssk-compare { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kssk-compare > div { min-width: 640px; }
}

/* QuotationCalculator - inputs above the estimate on narrow screens. */
@media (max-width: 1023px) { .kssk-quote { grid-template-columns: 1fr !important; } }
@media (max-width: 767px) { .kssk-quote__fields { grid-template-columns: 1fr !important; } .kssk-quote__fields > * { grid-column: auto !important; } }

/* PromoCard pair - side by side, then stacked. */
@media (max-width: 767px) { .kssk-promo-pair { grid-template-columns: 1fr; } }