/* Orion Beach Way Resort & Cafe — layout and components.
   Mobile-first. Signature: the 56px lagoon shelf (tint + 3px accent top rule) appears
   exactly three times — under the hero, behind cafe hours, behind the sticky CTA. */

/* ---------- glue ---------- */

*, *::before, *::after { box-sizing: border-box; }
p { margin: 0; }
figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
a, button { touch-action: manipulation; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-16); }
.section-intro h2 { margin-bottom: var(--s-4); }
.section-intro p { max-width: 52ch; color: var(--c-muted); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6);
  background: var(--c-accent); color: var(--c-accent-ink);
  font-family: var(--font-body); font-size: var(--fs-1); line-height: 1.2;
  border: 0; border-radius: var(--r-sm); text-decoration: none; text-align: center;
}
.button:hover { background: var(--c-accent-hover); }
.button:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.button.secondary { background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-ink); }
.button.secondary:hover { background: var(--c-tint); }
.button svg { width: 20px; height: 20px; }

.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.icon-button:hover { background: var(--c-tint); }

.secondary-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-ink); text-decoration: underline;
  text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.secondary-link:hover { background: var(--c-tint); }

/* ---------- the lagoon shelf (signature component) ---------- */

.shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--max-w)) minmax(0, 1fr);
  align-content: center;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--c-tint);
  border-top: 3px solid var(--c-accent);
  min-height: var(--shelf-h);
}
.shelf-inner {
  grid-column: 2;
  width: 100%; padding-inline: var(--gutter);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-2);
  padding-block: var(--s-3);
}
.fact-chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.fact-chips li {
  display: inline-flex; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink);
  padding: var(--s-2) var(--s-3); font-size: var(--fs-0); line-height: 1.4;
}

/* ---------- header ---------- */

.site-header { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; gap: var(--s-3); min-height: 60px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 700; color: var(--c-ink); text-decoration: none; font-size: var(--fs-1); }
.desktop-nav { display: none; }
.header-cta { display: none; }
.lang-switch { display: flex; gap: var(--s-2); margin-left: auto; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--s-2);
  color: var(--c-ink); font-size: var(--fs-0); text-decoration: none;
}
/* The authored active state is an accent underline; the label itself uses the
   darker accent so 14px text clears 4.5:1 on --c-bg (accent itself measures 4.47). */
.lang-switch a[aria-current="true"] { color: var(--c-accent-hover); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.drawer .lang-switch { margin-left: 0; }

/* Mobile header: the three native switcher labels plus the wordmark and menu
   button cannot share one row below 768px without clipping or shrinking a
   target below 44px, so the switcher takes its own row (both rows stay visible;
   nothing is hidden in the drawer). */
@media (max-width: 767px) {
  .header-inner { flex-wrap: wrap; gap: 0; padding-block: var(--s-2); }
  .wordmark { order: 1; }
  .menu-toggle { order: 2; margin-left: auto; }
  .lang-switch { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* ---------- drawer ---------- */

.drawer {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: var(--s-6);
  width: min(86vw, 22rem); max-width: 100%; height: 100%; max-height: 100%;
  background: var(--c-surface); color: var(--c-ink); border: 0;
  box-shadow: var(--shadow-1); border-radius: 0;
  display: flex; flex-direction: column; gap: var(--s-6);
}
.drawer:not([open]) { display: none; }
.drawer::backdrop, .lightbox::backdrop { background: rgb(18 52 58 / .55); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  display: flex; align-items: center; min-height: 48px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink); text-decoration: none;
  font-family: var(--font-display); font-size: var(--fs-2);
}
.drawer-nav a:hover { background: var(--c-tint); }

/* ---------- hero (split-type-left) ---------- */

.hero, .contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--max-w) - 2 * var(--gutter))) minmax(0, 1fr);
  padding-inline: var(--gutter);
}
.hero > *, .contact-section > * { grid-column: 2; }
.hero > .shelf, .contact-section > .shelf { grid-column: 1 / -1; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.hero-copy {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
  min-width: 0; padding-block: var(--s-8) var(--s-6); padding-inline-end: var(--s-4);
}
.kicker { font-size: var(--fs-0); color: var(--c-muted); }
.hero-subline { max-width: 36ch; }
.hero-copy h1 { overflow-wrap: anywhere; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.hero-figure { min-width: 0; min-height: 380px; }
.hero-figure picture { display: block; width: 100%; height: 100%; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

.hero-shelf .shelf-inner { padding-block: var(--s-4); }

/* Small screens: the copy column gets a little more measure so the headline
   wraps into fewer lines and the shelf stays near the first screen. The
   min-height reserves the settled hero height while Noto Sinhala/Tamil swap in,
   so a partial font state cannot pull the shelf (and the page) upward. */
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: minmax(0, 58%) minmax(0, 42%); min-height: 34rem; }
  .hero-copy { padding-block: var(--s-6) var(--s-4); }
}

/* one orchestrated hero entrance only; nothing else animates automatically */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: hero-in-left var(--t-hero) var(--ease) both; }
  .hero-figure { animation: hero-in-right var(--t-hero) var(--ease) both; }
}
@keyframes hero-in-left { from { opacity: 0; transform: translateX(-16px); } }
@keyframes hero-in-right { from { opacity: 0; transform: translateX(16px); } }

/* ---------- about ---------- */

.about-grid { display: grid; gap: var(--s-8); }
.about-copy h2 { margin-bottom: var(--s-4); }
.prose { display: grid; gap: var(--s-4); max-width: 62ch; }
.about-figure picture, .about-figure img { width: 100%; height: auto; }
.highlights { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.highlights > div { border-top: 1px solid var(--c-line); padding-top: var(--s-3); }
.highlights dt { font-size: var(--fs-0); color: var(--c-muted); }
.highlights dd { margin-top: var(--s-1); font-family: var(--font-display); font-size: var(--fs-2); }

/* ---------- services (single-column typographic list) ---------- */

.services-inner { }
#services .section-intro, #services .service-list, #services .services-note { max-width: 40rem; }
.service-list { margin-top: var(--s-8); }
.service-list li {
  display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2);
  align-items: start;
  padding-block: var(--s-6);
}
.service-list li + li { border-top: 1px solid var(--c-line); }
.service-list li::before {
  content: ""; grid-column: 1; grid-row: 1;
  width: 2px; height: 24px; background: var(--c-accent);
}
.service-list h3 { grid-column: 2; }
.service-list p { grid-column: 2; color: var(--c-muted); max-width: 56ch; }
.services-note { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-0); color: var(--c-muted); }

/* ---------- gallery (masonry-3) ---------- */

.gallery-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3); align-items: start; margin-top: var(--s-8);
}
.gallery-grid[data-masonry] { grid-auto-rows: 1px; }
.gallery-link { position: relative; display: block; background: var(--c-tint); }
.gallery-link picture, .gallery-link img { display: block; width: 100%; height: auto; }
.gallery-link:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.sample-badge {
  position: absolute; inset: auto auto var(--s-2) var(--s-2);
  /* authored 55% ink measures ~3.9:1 with 11px white text; darkened to keep the
     same square translucent badge legible on top of any photograph. */
  background: rgb(18 52 58 / .85); color: var(--c-accent-ink);
  font-size: 11px; line-height: 1.6; padding: 2px 6px; pointer-events: none;
}

/* ---------- contact ---------- */

.contact-section { padding-block: var(--s-16) 0; row-gap: var(--s-8); }
.contact-intro { margin-top: var(--s-4); max-width: 45ch; color: var(--c-muted); }
.contact-details { display: grid; gap: var(--s-4); margin-top: var(--s-8); }
.contact-details dt { font-size: var(--fs-0); color: var(--c-muted); }
.contact-details dd { margin-top: var(--s-1); }
.contact-details a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px;
}
.hours-inner { grid-column: 2; width: 100%; padding-inline: var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding-block: var(--s-4); }
.hours-heading { font-size: var(--fs-0); color: var(--c-muted); font-family: var(--font-body); font-weight: 600; }
.hours { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); }
.hours > div { display: grid; gap: var(--s-1); }
.hours dt { font-size: var(--fs-0); color: var(--c-muted); }
.hours dd { font-family: var(--font-display); font-size: var(--fs-2); }
.map-column h3 { margin-bottom: var(--s-4); font-size: var(--fs-2); }
.map-card { width: 100%; aspect-ratio: 4 / 3; min-height: 240px; background: var(--c-tint); display: grid; }
.map-card iframe { width: 100%; height: 100%; border: 0; }
.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-6); text-align: center; }
.map-placeholder > p { max-width: 26ch; font-size: var(--fs-0); color: var(--c-muted); }
.map-pin { width: 48px; height: 48px; color: var(--c-accent); }
.maps-link {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-top: var(--s-4);
  color: var(--c-ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px;
}

/* ---------- footer ---------- */

.site-footer { padding-block: var(--s-12) calc(var(--sticky-cta-h) + var(--s-8)); }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: var(--s-6); }
.footer-top p { color: var(--c-muted); margin-top: var(--s-2); }
.back-top { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--c-ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-0); color: var(--c-muted); }
.preview-notice { margin-top: var(--s-8); padding: var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); font-size: var(--fs-0); color: var(--c-muted); }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); color: var(--c-accent); }

/* ---------- sticky mobile CTA (signature occurrence 3) ---------- */

.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40; margin-inline: 0;
  display: flex; align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-inner { display: flex; width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.sticky-inner .button { width: 100%; }

/* ---------- image viewer ---------- */

.lightbox {
  width: min(96vw, 68rem); max-width: 96vw; padding: 0; border: 0; border-radius: 0;
  background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-1);
}
.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); font-size: var(--fs-0); color: var(--c-muted); }
.viewer-image { display: grid; place-items: center; background: var(--c-tint); padding: var(--s-3); }
.viewer-image img { max-height: min(68vh, 42rem); width: auto; max-width: 100%; height: auto; }
.viewer-bottom { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); }
.viewer-bottom > p { color: var(--c-muted); font-size: var(--fs-0); }
.viewer-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.viewer-count { font-variant-numeric: tabular-nums; font-size: var(--fs-0); color: var(--c-muted); }

/* ---------- settled image-failure state ---------- */

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

/* ---------- tablet ---------- */

@media (min-width: 768px) {
  .hero-figure { min-height: 480px; }
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .section { padding-block: var(--s-24); }
  .contact-section { padding-block: var(--s-24) 0; }
}

/* ---------- desktop ---------- */

@media (min-width: 1024px) {
  :root { --header-h: 64px; }
  .header-inner { min-height: 64px; }
  .desktop-nav { display: flex; gap: var(--s-4); margin-left: var(--s-8); }
  .desktop-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--c-ink); text-decoration: none; }
  .desktop-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .header-cta { display: inline-flex; padding-inline: var(--s-4); font-size: var(--fs-0); }
  .menu-toggle { display: none; }

  .hero-grid { grid-template-columns: minmax(0, 42%) minmax(0, 58%); }
  .hero-copy { max-width: 28rem; padding-block: var(--s-16); padding-inline-end: var(--s-8); }
  .hero-figure { min-height: 78vh; }
  .hero-shelf .shelf-inner { flex-direction: row; align-items: center; justify-content: flex-start; }

  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .viewer-image img { max-height: min(74vh, 46rem); }

  .contact-section {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, calc((var(--max-w) - 2 * var(--gutter) - var(--s-12)) / 2))
      minmax(0, calc((var(--max-w) - 2 * var(--gutter) - var(--s-12)) / 2))
      minmax(0, 1fr);
    column-gap: var(--s-12);
  }
  .contact-section > .contact-main { grid-column: 2; grid-row: 1; }
  .contact-section > .map-column { grid-column: 3; grid-row: 1; }
  .contact-section > .hours-shelf { grid-column: 1 / -1; grid-row: 2; }

  .sticky-cta { display: none; }
  .site-footer { padding-bottom: var(--s-8); }
}

/* ---------- motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}