/* ============================================================
   LOV'INN — FOUNDATION REVIEW · SHARED COMPONENT IMPLEMENTATIONS
   (DRAFT · UNPUBLISHED · not part of the compiled bundle)
   Requires ../styles.css (GLOBAL tokens) + foundation-scopes.css.
   Reused unchanged from the published system (React, _ds_bundle.js):
   Button · Eyebrow · Tag (Status Tag usage) · Divider.
   ============================================================ */

/* ---------- Shared focus + scroll lock ---------------------------- */
.web-shell :focus-visible,
.web-foot-cols a:focus-visible,
.web-tlink:focus-visible,
.web-crumb a:focus-visible,
.web-wcard:focus-visible {
  outline: 2px solid var(--shell-gold, #C7A86B);
  outline-offset: 3px;
  border-radius: 2px;
}
html.web-scroll-lock { overflow: hidden; }

/* ---------- 01 · HEADER A  /  02 · MOBILE HEADER A ---------------- */
.web-hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--shell-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--shell-pad);
  color: var(--shell-cream);
  font-family: var(--font-sans);
  transition: height var(--dur-slow) var(--ease-quiet),
              background-color var(--dur-slow) var(--ease-quiet);
}
.web-hdr::before {                              /* scrim over imagery */
  content: ""; position: absolute; inset: 0 0 -36px 0; z-index: -1;
  background: var(--shell-scrim); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-quiet);
}
.web-hdr[data-scrolled="true"] { height: var(--shell-h-scrolled); background: var(--shell-scrolled-bg); }
.web-hdr[data-scrolled="true"]::before { opacity: 0; }
.web-hdr[data-tone="light"] { color: var(--shell-forest); }
.web-hdr[data-tone="light"]::before { display: none; }
.web-hdr[data-tone="light"][data-scrolled="true"] { background: var(--shell-scrolled-bg-light); box-shadow: 0 1px 0 var(--border-hair); }

.web-brand {
  display: flex; align-items: center; gap: var(--shell-gap);
  min-height: var(--hit); flex: none;
  color: inherit; text-decoration: none;
}
.web-brand__emblem {
  display: block; width: var(--shell-emblem); height: var(--shell-emblem); object-fit: contain;
  transition: width var(--dur-slow) var(--ease-quiet), height var(--dur-slow) var(--ease-quiet);
}
.web-brand__text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.web-brand__word {
  display: block; height: var(--shell-word); width: auto;
  transition: height var(--dur-slow) var(--ease-quiet);
}
.web-brand__sub {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 9px; line-height: 1; letter-spacing: 0.34em;
  color: inherit; opacity: 0.82; padding-left: 0.12em; white-space: nowrap;
}
.web-hdr[data-scrolled="true"] .web-brand__emblem { width: var(--shell-emblem-scrolled); height: var(--shell-emblem-scrolled); }
.web-hdr[data-scrolled="true"] .web-brand__word { height: var(--shell-word-scrolled); }

.web-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); margin-left: auto; }
.web-nav a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--hit); padding: 0 2px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.web-nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 10px; height: 1px;
  background: var(--shell-gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-quiet);
}
.web-nav a:hover::after, .web-nav a[aria-current="page"]::after { transform: scaleX(1); }
.web-nav__status { font-weight: 400; font-size: 10px; letter-spacing: 0.18em; opacity: 0.72; }

.web-hdr__cta { flex: none; display: flex; align-items: center; }
.web-hdr[data-world="vadi"] .web-hdr__cta { display: none; }   /* Vadi has no own booking */

.web-burger {
  flex: none; width: var(--hit); height: var(--hit); margin-right: -10px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.web-burger span { display: block; width: 22px; height: 1.25px; background: currentColor; }
.web-burger span:last-child { width: 14px; margin-left: 8px; background: var(--shell-gold); }

@media (max-width: 768px) { .web-nav, .web-hdr__cta { display: none; } .web-hdr { gap: 12px; } .web-burger { margin-left: auto; } }
@media (max-width: 768px) { .web-brand__sub { font-size: 8px; letter-spacing: 0.3em; } }

/* ---------- 03 · HAMBURGER / MENU (native <dialog>) --------------- */
.web-menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto;
  background: var(--shell-forest); color: var(--shell-cream);
  font-family: var(--font-sans);
}
.web-menu::backdrop { background: rgba(10, 16, 12, 0.5); }
.web-menu__bar {
  height: var(--shell-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--shell-pad);
  padding-top: env(safe-area-inset-top);
}
.web-menu__close {
  min-width: var(--hit); min-height: var(--hit); margin-right: -10px; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; color: rgba(244, 241, 235, 0.72);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
}
.web-menu__close span { font-size: 18px; line-height: 1; color: var(--shell-gold); letter-spacing: 0; }
.web-menu__inner {
  max-width: 560px; margin: 0 auto;
  padding: clamp(24px, 6vh, 64px) 24px max(40px, env(safe-area-inset-bottom));
}
/* transform-only entrance: opacity never animates, content cannot strand invisible */
.web-menu[open] .web-menu__inner { animation: web-menu-rise var(--dur-slow) var(--ease-quiet); }
@keyframes web-menu-rise { from { transform: translateY(12px); } to { transform: none; } }

.web-menu__primary a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 0; border-bottom: 1px solid rgba(244, 241, 235, 0.1);
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.1;
  color: var(--shell-cream); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-quiet);
}
.web-menu__primary a:first-child { border-top: 1px solid rgba(244, 241, 235, 0.1); }
.web-menu__primary a:hover { color: var(--shell-gold); }
.web-menu__primary small {
  font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 241, 235, 0.55); white-space: nowrap;
}
.web-menu__label { margin: 40px 0 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--shell-gold); }
.web-menu__secondary { display: flex; flex-wrap: wrap; gap: 0 26px; }
.web-menu__secondary a {
  display: inline-flex; align-items: center; min-height: var(--hit);
  font-size: 14px; color: rgba(244, 241, 235, 0.8); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-quiet);
}
.web-menu__secondary a:hover { color: var(--shell-gold); }
.web-menu__cta { margin-top: 36px; }
.web-menu[data-world="vadi"] .web-menu__cta { display: none; }
.web-menu__meta { margin: 28px 0 0; font-size: 11px; letter-spacing: 0.06em; color: rgba(244, 241, 235, 0.45); }

/* ---------- 04 · APPROVED FOOTER — responsive rules for accepted source
   (source keeps its inline six-column grid; these only collapse it) */
@media (max-width: 1100px) { .web-foot-cols { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px)  { .web-foot-cols { grid-template-columns: 1fr !important; } }
.web-foot-cols a { transition: color var(--dur-hover) var(--ease-quiet); }
.web-foot-cols a:hover { color: var(--gold-400) !important; }

/* ---------- 06 · TEXT LINK (inline, inside prose) -----------------
   Standalone CTA links keep using the existing Button variant="link". */
.web-tlink {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--border-strong); padding-bottom: 1px;
  transition: border-color var(--dur-hover) var(--ease-quiet), color var(--dur-hover) var(--ease-quiet);
}
.web-tlink:hover { border-bottom-color: var(--gold-500); }
[data-world="suites"] .web-tlink, [data-world="aether"] .web-tlink, .web-on-dark .web-tlink { border-bottom-color: var(--border-on-forest); }

/* ---------- 10 · EDITORIAL SECTION HEADER ------------------------- */
.web-sechead { display: grid; gap: var(--space-4); max-width: var(--container-text); }
.web-sechead--center { justify-items: center; text-align: center; margin-inline: auto; }
.web-sechead__title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--text-h1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--world-ink, var(--text-primary)); text-wrap: balance;
}
.web-sechead__title em { font-style: italic; color: var(--world-mark, var(--gold-500)); }
.web-sechead__lead {
  margin: 0; max-width: var(--measure-narrow);
  font-size: var(--text-lead); line-height: var(--leading-normal);
  color: var(--world-ink-soft, var(--ink-700)); text-wrap: pretty;
}

/* ---------- 11 · BREADCRUMB --------------------------------------- */
.web-crumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted);
}
.web-crumb li { display: inline-flex; align-items: center; gap: 10px; }
.web-crumb li + li::before { content: "·"; color: var(--text-muted); }
.web-crumb a { display: inline-flex; align-items: center; min-height: var(--hit); color: inherit; text-decoration: none; }
.web-crumb a:hover { color: var(--text-primary); }
.web-crumb [aria-current="page"] { color: var(--world-ink, var(--text-primary)); }

/* ---------- 12 · IMAGE / MEDIA FRAME ------------------------------ */
.web-media {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-standard);
  aspect-ratio: var(--web-ratio, 4 / 5);
  background: var(--stone-300);
}
.web-media--landscape { --web-ratio: 3 / 2; }
.web-media--square    { --web-ratio: 1 / 1; }
.web-media--wide      { --web-ratio: 21 / 9; }
.web-media img, .web-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.web-media__scrim { position: absolute; inset: 0; background: var(--scrim-soft); pointer-events: none; }
.web-media[data-slot]::after {                       /* placeholder label until real photography */
  content: attr(data-slot); position: absolute; top: 14px; left: 14px;
  font-family: var(--font-sans); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--taupe-600);
}
.web-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  font-size: var(--text-eyebrow); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--cream-100);
}

/* ---------- 13 · ACCOMMODATION WORLD CARD ------------------------- */
.web-wcard { display: grid; gap: var(--space-4); align-content: start; color: inherit; text-decoration: none; }
.web-wcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-secondary);                       /* AA on light surfaces */
}
.web-wcard__meta::before { content: ""; width: 18px; height: 1px; background: var(--world-accent, var(--olive-500)); }
.web-wcard__title {
  margin: 0; font-family: var(--font-serif); font-weight: 300;
  font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.web-wcard__desc { margin: 0; max-width: 40ch; font-size: var(--text-small); line-height: var(--leading-normal); color: var(--ink-700); }
.web-wcard:hover .web-media img { transform: scale(1.04); }

/* ---------- 14 · EDITORIAL FEATURE BLOCK -------------------------- */
.web-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.web-feature__media { grid-column: 1 / span 7; }
.web-feature__body  { grid-column: 9 / span 4; display: grid; gap: var(--space-4); align-content: start; }
.web-feature--reverse .web-feature__media { grid-column: 6 / span 7; order: 2; }
.web-feature--reverse .web-feature__body  { grid-column: 1 / span 4; order: 1; }
.web-feature__title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--world-ink, var(--text-primary));
}
.web-feature__text { margin: 0; font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--world-ink-soft, var(--ink-700)); text-wrap: pretty; }
@media (max-width: 768px) {
  .web-feature { grid-template-columns: 1fr; }
  .web-feature__media, .web-feature__body,
  .web-feature--reverse .web-feature__media, .web-feature--reverse .web-feature__body { grid-column: auto; order: 0; }
}

/* ---------- 15 · CTA CONTEXT BLOCK -------------------------------- */
.web-ctx {
  display: grid; gap: var(--space-5); justify-items: start;
  padding: var(--space-8) 0; border-top: 1px solid var(--border-hair);
}
.web-ctx__title {
  margin: 0; max-width: 24ch; font-family: var(--font-serif); font-weight: 300;
  font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--world-ink, var(--text-primary));
}
.web-ctx__note { margin: 0; max-width: 46ch; font-size: var(--text-small); line-height: var(--leading-normal); color: var(--world-ink-soft, var(--text-secondary)); }
.web-ctx--dark { padding: var(--space-8); border-top: 0; border-radius: var(--radius-standard); background: var(--world-dark, var(--surface-forest)); }
.web-ctx--dark .web-ctx__title { color: var(--cream-50); }
.web-ctx--dark .web-ctx__note  { color: var(--text-on-forest-muted); }

/* ---------- Reduced motion ---------------------------------------- */
/* ---------- 16 · SCOPED SEMANTIC TEXT (accessibility, review scope only) ----
   Label: WORLD-SCOPED usage rule, not a new palette. Root tokens and the
   original Eyebrow / Tag components are unchanged.
   • Light backgrounds: gold TEXT inside reused Eyebrow / Tag → existing --ink-900.
     Gold stays as decoration / border (Eyebrow rules, Tag outline).
   • Dark surfaces: approved --gold-500 text retained (≥4.5:1 on forest-700/900).
   • vadi-review candidate: small text uses deep moss (--vadi-forest-mid);
     Moss #7A8A5C stays decoration only. */
:is([data-ds="Eyebrow"],[data-ds="Tag"]) [style*="color: var(--gold-500)"] { color: var(--ink-900) !important; }
:is(.web-on-dark,.web-ctx--dark,.web-shell,[data-world="suites"],[data-world="aether"]) :is([data-ds="Eyebrow"],[data-ds="Tag"]) [style*="color: var(--gold-500)"] { color: var(--gold-500) !important; }
[data-world="vadi"][data-palette="vadi-review"] :is([data-ds="Eyebrow"],[data-ds="Tag"]) [style*="color: var(--gold-500)"] { color: var(--vadi-forest-mid) !important; }

@media (prefers-reduced-motion: reduce) {
  .web-hdr, .web-hdr::before, .web-brand__emblem, .web-brand__word, .web-nav a::after,
  .web-menu__primary a, .web-media img, .web-tlink { transition: none !important; }
  .web-menu[open] .web-menu__inner { animation: none !important; }
}