/* KSSK component layer.

   Written entirely against the token layer. No literal colour, type or spacing
   value belongs in this file: if a value is missing, add it to tokens/ first.

   Structural and breakpoint rules for .kssk-header, .kssk-searchpanel__row,
   .kssk-grid, .kssk-split and friends ship in tokens/responsive.css, ported
   verbatim from the design system. This file adds the visual styling those
   class names carry, and nothing that duplicates them. */

/* Page scaffolding */

.kssk-main { display: block; }

.kssk-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: content-box;
}

.kssk-band { padding-block: var(--space-104); }

.kssk-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-12) var(--space-24);
  background: var(--kssk-orange);
  color: var(--text-on-brand);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
}

.kssk-skip-link:focus { left: 0; color: var(--text-on-brand); }

/* Button */

.kssk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  box-sizing: border-box;
  /* 44px is the accessibility floor; the design's own sizes all clear it. */
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}

.kssk-button--sm { height: 44px; padding: var(--space-8) 18px; font-size: var(--text-sm); line-height: var(--leading-24); }
.kssk-button--md { height: 48px; padding: var(--space-12) var(--space-24); font-size: var(--text-base); line-height: var(--leading-24); }
.kssk-button--lg { height: 56px; padding: var(--space-16) var(--space-32); font-size: var(--text-base); line-height: var(--leading-24); }

.kssk-button--block { display: flex; width: 100%; }

.kssk-button--primary   { background: var(--kssk-orange); color: var(--text-on-brand); }
.kssk-button--secondary { background: var(--neutral-400); color: var(--text-on-brand); }
.kssk-button--light     { background: var(--neutral-0); color: var(--kssk-orange); }
.kssk-button--dark      { background: var(--kssk-navy); color: var(--text-inverse); }
.kssk-button--outline   { background: transparent; color: var(--kssk-orange); border: 1px solid var(--kssk-orange); }
.kssk-button--ghost     { background: transparent; color: var(--kssk-orange); }

/* Hover darkens one step on the orange ladder. Never a colour change and a
   size change at once, so nothing scales here. */
.kssk-button--primary:hover { background: var(--orange-600); color: var(--text-on-brand); }
.kssk-button--outline:hover,
.kssk-button--ghost:hover   { color: var(--orange-600); }
.kssk-button--light:hover   { color: var(--orange-600); }

/* Press is scale only, no colour change. */
.kssk-button:active { transform: var(--press-scale); }

.kssk-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kssk-button[disabled] { opacity: 0.45; cursor: not-allowed; }
.kssk-button[disabled]:hover { background: var(--kssk-orange); }
.kssk-button[disabled]:active { transform: none; }

.kssk-button__arrow { flex-shrink: 0; }

/* Icon */

.kssk-icon { flex-shrink: 0; }

/* The nine raster glyphs are masked bitmaps from the source. They are black and
   cannot be recoloured; do not filter them into a tint, it only approximates
   the glyph. Vector exports are outstanding with the client. */
.kssk-icon--raster { object-fit: contain; }

/* Logo */

.kssk-logo { display: inline-flex; align-items: center; }
.kssk-logo__art { display: block; width: auto; object-fit: contain; }
.kssk-logo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Header */

/* Header and booking summary bar travel as ONE sticky unit, so the bar's offset
   cannot drift from the header's height at any breakpoint. */
.kssk-header-wrap.is-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-page);
}

/* No border and no shadow on the header: the hero photograph below it does the
   separating. */
.kssk-header { border: none; box-shadow: none; }

.kssk-header__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-24);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-primary);
  transition: color var(--duration-fast) var(--ease-standard);
}

/* Orange as a text colour on white is allowed in exactly two places. This is
   one of them; the Pending Payment badge is the other. */
.kssk-header__link:hover,
.kssk-header__link.is-active { color: var(--kssk-orange); }

.kssk-header__link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.kssk-header__group { position: relative; }

.kssk-header__caret { flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-standard); }
.kssk-header__group[data-open="true"] .kssk-header__caret { transform: rotate(180deg); }

.kssk-header__toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.kssk-header__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kssk-header__toggle-close { display: none; }
.kssk-header__toggle[aria-expanded="true"] .kssk-header__toggle-open { display: none; }
.kssk-header__toggle[aria-expanded="true"] .kssk-header__toggle-close { display: block; }

.kssk-header__cta { min-width: 142px; flex-shrink: 0; }

/* Media placeholders */

/* Shown until the client fills the slot. Deliberately plain and labelled: a
   placeholder that mimics a real surface is harder to notice than one that says
   what is missing. On-palette so an unfilled page still reads as KSSK, and it
   reserves the slot's exact aspect ratio so filling it shifts nothing. */
.kssk-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--kssk-placeholder-ratio, 1.7778);
  box-sizing: border-box;
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  text-align: center;
}

.kssk-placeholder__label {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kssk-placeholder--warm { background: var(--surface-cream); }
.kssk-placeholder--warm .kssk-placeholder__label { color: var(--text-secondary); }

.kssk-placeholder--navy { background: var(--surface-dark); }
.kssk-placeholder--navy .kssk-placeholder__label { color: var(--text-inverse); }

.kssk-placeholder--orange { background: var(--kssk-orange); }
.kssk-placeholder--orange .kssk-placeholder__label { color: var(--text-on-brand); }

/* Overlays and cutouts sit on top of something else, so their placeholder must
   not paint a ground. It reserves space and stays out of the way. */
.kssk-placeholder--transparent { background: transparent; }
.kssk-placeholder--transparent .kssk-placeholder__label { display: none; }

/* Hero */

.kssk-hero {
  position: relative;
  height: var(--hero-height);
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.kssk-hero__photo,
.kssk-hero__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kssk-hero__arc { pointer-events: none; }

/* One of the system's two blurred surfaces, both over photography and never
   over a solid fill. A hard-edged rectangle, not a pill. No scrim underneath:
   the design has none. */
.kssk-hero__stat {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) 19px var(--space-16) var(--space-24);
  margin-bottom: 68px;
  border-radius: var(--radius-sm);
  background: var(--surface-glass);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.kssk-hero__stat-mark {
  width: 14px;
  height: 14px;
  padding: 2px;
  box-sizing: border-box;
  background: var(--neutral-0);
}

.kssk-hero__stat-mark > span {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--kssk-orange);
}

.kssk-hero__stat-value,
.kssk-hero__stat-label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-inverse);
}

/* BookingSearchPanel */

/* The homepage's defining move: half on the image, half on white. 243px tall,
   pulled 60px below the hero's bottom edge. */
.kssk-searchpanel {
  position: relative;
  background: var(--surface-panel);
  border-radius: var(--radius-sm);
  padding: var(--space-32);
  box-sizing: border-box;
  margin-bottom: -60px;
}

/* The one animation in the system: a single deliberate entrance, then nothing.
   Collapses to 0ms under prefers-reduced-motion via the duration token. */
.kssk-searchpanel--entrance {
  animation: kssk-slide-in-up var(--duration-reveal) var(--ease-out) both;
}

.kssk-searchpanel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-37);
  color: var(--text-primary);
}

.kssk-searchpanel__row {
  display: flex;
  gap: var(--space-24);
  align-items: flex-start;
  margin-top: var(--space-24);
}

.kssk-searchpanel__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--kssk-searchpanel-cols, 2), minmax(0, 1fr));
  gap: var(--space-16) var(--space-24);
}

.kssk-searchpanel__cta { height: 49px; min-width: 266px; }

.kssk-searchpanel__note {
  margin: var(--space-16) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

/* Field */

.kssk-field { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }

.kssk-field__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

/* No border: the input reads as a recess in the page, not a boxed control. */
.kssk-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-inline: var(--space-16);
  box-sizing: border-box;
  background: var(--surface-input);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.kssk-field--sm .kssk-field__control { height: 49px; }
.kssk-field--md .kssk-field__control { height: 56px; }

.kssk-field__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-primary);
}

.kssk-field__input::placeholder { color: var(--text-muted); }
.kssk-field__input:focus { outline: none; }

.kssk-field__control:focus-within { box-shadow: var(--focus-ring); }

.kssk-field.is-invalid .kssk-field__control { border-color: var(--status-danger); }
.kssk-field.is-disabled .kssk-field__control { background: var(--neutral-200); opacity: 0.45; }

.kssk-field__hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-22);
  color: var(--text-secondary);
}

/* Footer */

.kssk-footer {
  background: var(--surface-dark);
  color: var(--text-inverse);
  padding: var(--space-56) var(--page-gutter) var(--space-32);
  box-sizing: border-box;
}

.kssk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-56);
  align-items: start;
}

.kssk-footer__brand { display: flex; flex-direction: column; gap: var(--space-24); }

.kssk-footer__tagline {
  margin: 0;
  max-width: 300px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
}

.kssk-footer__contact { display: flex; flex-direction: column; gap: var(--space-12); }

.kssk-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
  color: var(--text-inverse);
  text-decoration: none;
}

a.kssk-footer__contact-item:hover { color: var(--text-inverse); text-decoration: underline; }
.kssk-footer__contact-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.kssk-footer__contact-item .kssk-icon { margin-top: 5px; }
.kssk-footer__contact-label { opacity: 0.65; }

.kssk-footer__column {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-30);
  color: var(--text-inverse);
  text-decoration: none;
}

.kssk-footer__column:hover { color: var(--text-inverse); text-decoration: underline; }
.kssk-footer__column:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* The footer hairline: white at 12%, one of the few borders in the system. */
.kssk-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: var(--space-40);
  padding-top: var(--space-24);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.kssk-footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-24);
}

.kssk-footer__social { display: flex; gap: var(--space-16); }

.kssk-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-inverse);
}

.kssk-footer__social-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

@media (max-width: 1023px) {
  .kssk-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Below 1024 the hero's fixed height would crop the panel, so it releases. */
  .kssk-hero { height: auto; padding-top: var(--space-104); }
  .kssk-hero__stat { margin-bottom: var(--space-56); }
}

@media (max-width: 767px) {
  .kssk-footer__grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .kssk-footer__bottom { flex-direction: column; align-items: flex-start; }
  .kssk-searchpanel__cta { min-width: 0; width: 100%; }
}

/* Logo typographic fallback.

   Used only while the brand-kit lockup has not been supplied. It sets the name
   in the display face rather than drawing a substitute mark, which is the
   design system's stated rule for a missing logo. Amatry carries it once the
   face lands; until then the display stack's fallback does. */

.kssk-logo__type {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.kssk-logo__type--dark { color: var(--kssk-orange); }
.kssk-logo__type--light { color: var(--text-inverse); }