/* Koko Beach Club — mobile-first page styles.
   Tokens live in tokens.css. One signature (the 3 px magenta rule with a 12 px
   glow) appears exactly twice: the wordmark and the sticky CTA's top edge. */

/* 1 — primitives ------------------------------------------------ */

/* Padding and borders are part of the declared size, so a 48 px control with
   12 px padding is 48 px tall and a full-width button cannot overflow its
   sticky bar. */
*, *::before, *::after { box-sizing: border-box; }

.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

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

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3) var(--s-6);
  font: inherit; font-weight: 600; text-align: center; text-decoration: none;
  background: var(--c-accent); color: var(--c-accent-ink);
  border: 1.5px solid var(--c-accent); border-radius: 0;
  transition: filter var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.button:hover { filter: brightness(1.06); }
.button.secondary { background: transparent; color: var(--c-accent); }
.button.secondary:hover { background: rgb(255 45 149 / .12); filter: none; }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: var(--s-2);
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 0; cursor: pointer;
}
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.section { padding-block: var(--s-16); }
.section-intro { display: grid; gap: var(--s-3); margin-bottom: var(--s-8); max-width: 46rem; }
.prose { max-width: 42rem; }
.prose p { margin: 0 0 var(--s-4); color: var(--c-muted); }
.prose p:last-child { margin-bottom: 0; }

/* 2 — header ---------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-bg);
  border-bottom: 1px solid transparent;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--c-line); }

.header-inner { display: flex; align-items: center; gap: var(--s-2); min-height: var(--header-min); }

/* Signature occurrence 1 of 2 — the rule spans the wordmark only, never the page. */
.wordmark {
  position: relative; display: inline-block; padding-bottom: 6px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); letter-spacing: .02em;
  color: var(--c-ink); text-decoration: none; white-space: nowrap;
}
.wordmark::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: var(--rule-h); background: var(--c-accent); box-shadow: var(--rule-glow);
}

.desktop-nav { display: none; }
.lang-switch { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: auto; }
.lang-switch a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: var(--s-2) var(--s-2);
  color: var(--c-muted); font-size: var(--fs-0); text-decoration: none; white-space: nowrap;
}
.lang-switch a[aria-current="true"] { color: var(--c-ink); }
/* docs/03-design-spec.md §5: active language = 2 px magenta underline, no glow. */
.lang-switch a[aria-current="true"]::after {
  content: ""; position: absolute; inset-inline: var(--s-1); bottom: 4px;
  height: 2px; background: var(--c-accent);
}

.header-cta { display: none; }
.menu-toggle { margin-inline-start: var(--s-1); }

/* 3 — drawer ---------------------------------------------------- */

.drawer {
  margin: 0; padding: var(--s-6); width: min(22rem, 88vw); max-height: 100svh;
  background: var(--c-bg); color: var(--c-ink);
  border: 0; border-left: 1px solid var(--c-line); border-radius: 0;
}
.drawer:not([open]) { display: none; }
.drawer::backdrop { background: rgb(18 16 26 / .8); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.drawer-brand { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); }
.drawer-nav { display: grid; gap: var(--s-1); margin-top: var(--s-8); }
.drawer-nav a, .drawer .lang-switch a { min-height: 48px; }
.drawer-nav a {
  display: flex; align-items: center;
  color: var(--c-ink); font-size: var(--fs-2); text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}
.drawer .lang-switch { margin: var(--s-6) 0; }
/* Block-level so the full-width buttons do not inherit a line-box strut. */
.drawer .button { display: flex; width: 100%; }

/* 4 — hero ------------------------------------------------------ */

/* The terrace keeps at least 24 svh and absorbs any slack, while the copy row
   takes exactly what the translated text needs. The hero therefore stays one
   screen tall whenever the copy fits, and only grows past the fold for the
   longest script instead of clipping the last row behind the sticky action. */
/* The minimum height uses the authored --header-min, not the measured
   --header-h: a font swap that changes the header height must not resize the
   hero and shift the whole page. The measured value is still what scroll
   padding uses, which is where accuracy actually matters. */
.hero {
  position: relative; display: grid; grid-template-rows: minmax(24svh, 1fr) auto;
  min-height: calc(100svh - var(--header-min)); background: var(--c-bg);
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center; }

/* Row 2 keeps a 40 % share and grows only when translated copy needs more room. */
.hero-copy {
  grid-row: 2; align-self: end; position: relative;
  display: grid; gap: var(--s-3); align-content: end;
  padding: var(--s-6) var(--gutter) var(--s-8);
  background: var(--hero-band-mobile);
}
.kicker { margin: 0; color: var(--c-muted); font-size: var(--fs-0); letter-spacing: .01em; }
.hero-copy h1 { margin: 0; }
.hero-subline { margin: 0; color: var(--c-ink); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.fact-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.fact-chips li {
  padding: var(--s-1) var(--s-3);
  background: var(--c-tint); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 0;
  font-size: var(--fs-0);
}

/* 5 — about ----------------------------------------------------- */

.about-grid { display: grid; gap: var(--s-8); }
.about-figure { margin: 0; position: relative; }
.about-figure img { width: 100%; height: auto; background: var(--c-surface); }
.image-note {
  position: absolute; inset-inline-start: 0; bottom: 0;
  padding: var(--s-1) var(--s-2);
  background: rgb(18 16 26 / .7); color: var(--c-ink); font-size: var(--fs-0);
}

.highlights {
  display: grid; gap: var(--s-4); margin: var(--s-8) 0 0; padding: var(--s-6) 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}
.highlights dt { color: var(--c-muted); font-size: var(--fs-0); }
.highlights dd { margin: var(--s-1) 0 0; color: var(--c-ink); }

/* 6 — services -------------------------------------------------- */

.service-grid { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; }
.service-card {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-6);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0;
}
.service-icon { width: 40px; height: 40px; fill: none; stroke: var(--c-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: var(--fs-2); }
.service-card p { margin: 0; color: var(--c-muted); }
.services-note { margin-top: var(--s-6); color: var(--c-muted); font-size: var(--fs-0); }

/* 7 — gallery --------------------------------------------------- */

.gallery-grid {
  --gal-gap: var(--s-3);
  display: grid; gap: var(--gal-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; align-items: start;
}
.gallery-tile { align-self: start; }

.gallery-link {
  display: block; position: relative;
  aspect-ratio: var(--tile-ratio);
  overflow: hidden; background: var(--c-surface); color: inherit;
  text-decoration: none;
}
.gallery-link img { width: 100%; height: 100%; object-fit: cover; }

.gallery-link:focus-visible { outline-offset: -3px; }

/* Measured masonry: 1 px row units and an exact span keep every authored ratio
   while packing the mixed heights without holes. The vertical rhythm moves to
   the tile's own padding so the span arithmetic stays exact. */
.gallery-grid[data-masonry="true"] { row-gap: 0; grid-auto-rows: 1px; }
.gallery-grid[data-masonry="true"] .gallery-tile { padding-bottom: var(--gal-gap); }

.sample-badge {
  position: absolute; inset-inline-start: 0; bottom: 0;
  padding: var(--s-1) var(--s-2);
  background: rgb(18 16 26 / .7); color: var(--c-ink);
  font-size: var(--fs-0); border-radius: 0;
}

/* 8 — contact --------------------------------------------------- */

.contact-grid { display: grid; gap: var(--s-12); }
.contact-intro { color: var(--c-muted); margin: var(--s-3) 0 var(--s-8); }
.contact-details { display: grid; gap: var(--s-4); margin: 0; }
.contact-details dt { color: var(--c-muted); font-size: var(--fs-0); }
.contact-details dd { margin: var(--s-1) 0 0; color: var(--c-ink); }
.contact-details a { color: var(--c-accent); }
.hours-heading { margin-top: var(--s-8); font-size: var(--fs-2); }
.hours-note { margin: var(--s-3) 0 0; color: var(--c-muted); }

.map-column h3 { font-size: var(--fs-2); }
.map-card {
  display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  margin-top: var(--s-4); padding: var(--s-8) var(--s-6);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 0;
}
.map-pin { width: 44px; height: 44px; fill: none; stroke: var(--c-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.map-address { margin: 0; color: var(--c-ink); }
.maps-link { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); min-height: 44px; color: var(--c-accent); font-weight: 600; }

/* 9 — footer ---------------------------------------------------- */

.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-line); padding-block: var(--s-12); }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: flex-start; justify-content: space-between; }
.footer-brand { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); }
.footer-brand-column p { margin: var(--s-2) 0 0; color: var(--c-muted); }
.footer-socials { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.footer-socials a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-muted); }
.back-top { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); justify-content: space-between;
  margin-top: var(--s-8); padding-top: var(--s-6);
  border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-0);
}
.footer-bottom p { margin: 0; }
.preview-notice {
  display: grid; gap: var(--s-3); justify-items: start;
  margin-top: var(--s-8); padding: var(--s-4);
  border: 1px solid var(--c-line); border-radius: 0;
  color: var(--c-muted); font-size: var(--fs-0);
}
.preview-notice p { margin: 0; }
.offer-link { color: var(--c-accent); font-weight: 600; }
.offer-link[hidden] { display: none; }

/* 10 — sticky CTA ---------------------------------------------- */

.sticky-cta {
  display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: var(--s-2) var(--gutter);
  padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg);
}
/* Signature occurrence 2 of 2 — the rule is the top edge of the sticky action. */
.sticky-cta::before {
  content: ""; position: absolute; inset-inline: 0; top: 0;
  height: var(--rule-h); background: var(--c-accent); box-shadow: var(--rule-glow);
}
/* min-height 52 px and normal wrapping so a two-line SI/TA label is never clipped. */
.sticky-cta .button { display: flex; width: 100%; min-height: 52px; white-space: normal; }

/* 11 — image viewer -------------------------------------------- */

.lightbox {
  margin: auto; padding: 0; width: min(100%, 64rem); max-width: 100%; max-height: 100svh;
  background: var(--c-bg); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-1);
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgb(18 16 26 / .88); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-0); }
.viewer-image { display: grid; place-items: center; background: var(--c-tint); }
.viewer-image img { max-height: 62svh; width: auto; max-width: 100%; height: auto; }
.viewer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.viewer-bottom p { margin: 0; color: var(--c-muted); font-size: var(--fs-0); }
.viewer-controls { display: flex; align-items: center; gap: var(--s-2); }
.viewer-count { color: var(--c-muted); font-size: var(--fs-0); font-variant-numeric: tabular-nums; }

/* 12 — image failure state ------------------------------------- */

picture.image-unavailable { position: relative; }
picture.image-unavailable img { display: none; }
picture.image-unavailable::after {
  content: attr(data-fallback-label);
  display: grid; place-items: center; width: 100%; height: 100%;
  min-height: 8rem; padding: var(--s-4); text-align: center;
  background: var(--c-tint); color: var(--c-muted); font-size: var(--fs-0);
}
picture.image-unavailable::after { position: absolute; inset: 0; }

/* 13 — breakpoints --------------------------------------------- */

@media (min-width: 480px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .hero { min-height: 80vh; }
  .hero-copy { background: var(--hero-band); padding: var(--s-8) var(--gutter); justify-items: start; }
  .hero-copy > * { max-width: var(--hero-copy-w); }
  .about-grid { grid-template-columns: 7fr 5fr; align-items: start; }
  .contact-grid { grid-template-columns: 7fr 5fr; }
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lightbox { width: min(100%, 64rem); }
}

@media (min-width: 1024px) {
  .desktop-nav { display: flex; align-items: center; gap: var(--s-6); margin-inline-start: var(--s-8); }
  .desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; }
  .desktop-nav a:hover { color: var(--c-accent); }
  .lang-switch { margin-inline-start: auto; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
  .drawer { display: none; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); --gal-gap: var(--s-4); }
}

@media (max-width: 1023px) {
  /* Reserve the measured action bar plus its vertical padding so the final
     footer controls can scroll above the fixed CTA before receiving focus. */
  body { padding-bottom: calc(var(--sticky-cta-h) + var(--s-4)); }
  .sticky-cta { display: block; }
  /* The band's own padding keeps the whole hero copy — including the second
     CTA — clear of the fixed sticky action, while the band colour still runs
     to the bottom of the viewport behind it. */
  .hero-copy { padding-bottom: calc(var(--s-6) + var(--sticky-cta-h)); }
}

/* Narrow phones: the three native switcher labels, the wordmark and the menu
   button all have to fit on one line at 320 px without clipping. */
@media (max-width: 379px) {
  .lang-switch a { padding-inline: var(--s-1); font-size: .8125rem; }
  .wordmark { font-size: 1.2rem; }
}

/* 14 — motion: one hero entrance only -------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .site-header .wordmark::after { transform-origin: left center; animation: koko-rule-draw var(--t-rule) var(--ease) both; }
  .hero-copy { animation: koko-hero-entrance var(--t-entrance) var(--ease) both; }
  @keyframes koko-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes koko-hero-entrance { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .wordmark::after, .hero-copy { animation: none; }
}