/* ==========================================================================
   LÚA — Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-py: 0.95rem;
  --btn-px: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  /* letter-spacing appends a trailing space after the last glyph, so centred
     tracked text drifts left by half the tracking. Give that half back to the
     start padding and take it off the end. */
  padding-block: var(--btn-py);
  padding-inline: calc(var(--btn-px) + var(--tracking-wide) / 2)
                  calc(var(--btn-px) - var(--tracking-wide) / 2);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

/* Solid gold — primary action */
.btn--gold {
  background: var(--gold-grad-soft);
  color: var(--ink-900);
  font-weight: 600;
}
/* Gold shimmer sweep on hover */
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn--gold:hover::after { transform: translateX(420%); }
.btn--gold:hover { color: var(--ink-900); }

/* Outlined — secondary action */
.btn--ghost {
  border-color: var(--hairline-strong);
  color: var(--gold-200);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-100);
  background: rgba(200, 144, 64, 0.08);
}

/* Text-only with an arrow */
.btn--text {
  padding: 0.4rem 0;
  color: var(--gold-300);
  border: 0;
}
.btn--text::before {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-mid) var(--ease-out);
}
.btn--text:hover { color: var(--gold-100); }
.btn--text:hover::before { right: 0; }

.btn--sm { --btn-py: 0.7rem; --btn-px: 1.35rem; font-size: 0.6875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              backdrop-filter var(--dur-mid) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(6, 6, 6, 0.96);
  border-bottom-color: var(--hairline-faint);
}

/* backdrop-filter makes an element a containing block for its position:fixed
   descendants. On mobile the drawer is a fixed child of this header, so
   blurring here would resolve its inset against the 72px bar instead of the
   viewport and collapse it to a sliver. Only blur where no drawer exists. */
@media (min-width: 60em) {
  .site-header.is-scrolled {
    background: rgba(6, 6, 6, 0.88);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  padding-block: 0.5rem;
  /* Logo stays pinned left; this soaks up the free space so the nav
     sits on the right. */
  margin-inline-end: auto;
}
.site-header__brand img {
  height: 36px;
  width: auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-header__brand:hover img { opacity: 0.82; }
.site-header__brand .eyebrow {
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  color: var(--cream-500);
  border-left: 1px solid var(--hairline);
  padding-left: 0.7rem;
  max-width: 8.5rem;
}

/* --- Nav --- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

.site-nav__link {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  font-size: var(--fs-tiny);
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--cream-300);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0.15rem;
  height: 1px;
  background: var(--gold-400);
  transition: right var(--dur-mid) var(--ease-out);
}
.site-nav__link:hover { color: var(--gold-200); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { right: 0; }
.site-nav__link.is-active { color: var(--gold-300); }

/* --- Mobile drawer toggle --- */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--gold-300);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-5px); }
.nav-toggle__bars::after { transform: translateY(5px); }
[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars::before { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-90deg); }

@media (max-width: 59.999em) {
  .nav-toggle { display: grid; position: relative; }

  /* The header itself grows to fill the screen while the drawer is open, and
     the drawer is an ABSOLUTE child of it. Anchoring to the header instead of
     the viewport makes the drawer immune to any ancestor that establishes a
     containing block for fixed positioning — backdrop-filter, transform,
     filter — which is what was collapsing it to a sliver after scrolling.
     dvh, not vh, so it matches the area actually visible on a phone rather
     than running behind the address bar. */
  body.nav-open .site-header {
    height: 100vh;
    height: 100dvh;
    border-bottom-color: transparent;
  }

  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 0 0;
    display: flex;
    flex-direction: column;
    /* "safe" keeps the first item reachable when the list is taller than the
       drawer, instead of centring it out of scroll range. Plain center first
       as a fallback where the safe keyword is unsupported. */
    justify-content: center;
    justify-content: safe center;
    background: rgba(6, 6, 6, 0.97);
    backdrop-filter: blur(18px);
    /* Scales down on short viewports (landscape phones) so five items always
       fit rather than being cut off. */
    padding: clamp(var(--space-sm), 4vh, var(--space-xl)) var(--space-md);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-mid) var(--ease-out),
                transform var(--dur-mid) var(--ease-out),
                visibility var(--dur-mid);
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
  }
  .site-nav__list > li + li { border-top: 1px solid var(--hairline-faint); }

  .site-nav__link {
    padding: clamp(0.5rem, 1.6vh, 1.15rem) 0.25rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3vh, 1.5rem);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: none;
    text-align: center;
    margin-inline-end: -0.06em; /* cancel the trailing letter-space */
  }
  .site-nav__link::after { display: none; }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 26em) {
  .site-header__brand .eyebrow { display: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  /* An explicit constrained column: an auto column would size to the
     max-content of a percentage-width child and overflow narrow screens. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--ink-900);
  overflow: hidden;
}

/* Warm pool of light behind the logo, like a spotlit sign */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 42%,
      rgba(200, 144, 64, 0.13), transparent 70%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__logo {
  width: clamp(230px, 34vw, 400px);
  margin-inline: auto;
  filter: drop-shadow(0 0 40px rgba(200, 144, 64, 0.22));
}

.hero__tagline {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  font-style: italic;
  color: var(--cream-100);
  max-width: 24ch;
  margin-inline: auto;
}

.hero__meta {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--cream-500);
}

.hero .btn-row { margin-top: var(--space-lg); }

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cream-500);
  z-index: 1;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--gold-500), transparent);
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after { animation: none; }
}

/* Page banner for interior pages */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-xl);
  text-align: center;
  background: var(--ink-900);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-faint);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%,
      rgba(200, 144, 64, 0.1), transparent 65%);
}
.page-hero__inner { position: relative; }
.page-hero h1 { margin-top: var(--space-2xs); }
.page-hero .divider { margin-inline: auto; }
.page-hero .lead { max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.card:hover {
  border-color: var(--hairline);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.card__body { padding: var(--space-md); }
.card__title { font-size: var(--fs-h3); }
.card__title + p { margin-top: var(--space-2xs); }
.card__price {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gold-300);
  letter-spacing: 0.04em;
}

/* Feature row: media beside prose, alternating */
.feature {
  display: grid;
  gap: clamp(var(--space-md), 4vw, var(--space-xl));
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: 2; }
}
.feature__media {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-md);
  background: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Hours
   -------------------------------------------------------------------------- */

.hours { font-size: var(--fs-small); }
.hours__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline-faint);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { color: var(--cream-300); letter-spacing: 0.04em; }
.hours__time { color: var(--cream-100); font-variant-numeric: tabular-nums; text-align: right; }
.hours__time.is-closed { color: var(--cream-700); }
.hours__row.is-today .hours__day { color: var(--gold-300); font-weight: 500; }
.hours__row.is-today .hours__time { color: var(--gold-200); }

.hours__pending {
  padding: var(--space-sm) 0;
  color: var(--text-muted);
  font-style: italic;
}

.open-state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--cream-500);
  margin-inline-end: calc(-1 * var(--tracking-nav)); /* trailing track */
}
.open-state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.open-state.is-open { color: #7fbf7f; }
.open-state.is-shut { color: var(--cream-500); }

/* --------------------------------------------------------------------------
   Info blocks (address, contact)
   -------------------------------------------------------------------------- */

.info-list { display: grid; gap: var(--space-md); }
.info-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.info-item__label {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.35rem;
  margin-inline-end: calc(-1 * var(--tracking-eyebrow)); /* trailing track */
}
.info-item address { font-style: normal; }

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

.map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-900);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.35) contrast(1.05); }

.map-fallback {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-md);
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ink-900);
  border-top: 1px solid var(--hairline-faint);
  padding-block: var(--space-2xl) var(--space-lg);
  font-size: var(--fs-small);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer__logo { width: 170px; margin-bottom: var(--space-sm); }
.site-footer h2 {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-sm);
  margin-inline-end: calc(-1 * var(--tracking-eyebrow)); /* trailing track */
}
.site-footer address { font-style: normal; color: var(--cream-300); }
.footer-links { display: grid; gap: 0.55rem; }
.footer-links a { color: var(--cream-300); transition: color var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: var(--gold-200); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-faint);
  color: var(--cream-700);
  font-size: var(--fs-tiny);
}

.social-row { display: flex; gap: var(--space-2xs); }
.social-row a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline-faint);
  border-radius: 50%;
  color: var(--cream-300);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.social-row a:hover {
  color: var(--gold-200);
  border-color: var(--hairline-strong);
  background: rgba(200, 144, 64, 0.07);
}
.social-row svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Placeholder imagery
   -------------------------------------------------------------------------- */

.is-placeholder { object-fit: cover; }

/* --------------------------------------------------------------------------
   ?debug=todo inspector
   -------------------------------------------------------------------------- */

.debug-todo [data-todo-path] {
  outline: 2px dashed #ff3ea5 !important;
  outline-offset: 2px;
  position: relative;
  min-height: 1.5rem;
  min-width: 2rem;
}
.debug-todo [data-todo-path]::after {
  content: "TBD: " attr(data-todo-path);
  position: absolute;
  top: 0; left: 0;
  z-index: 500;
  padding: 1px 5px;
  background: #ff3ea5;
  color: #fff;
  font: 500 10px/1.5 var(--font-ui);
  letter-spacing: 0.02em;
  text-transform: none;
  pointer-events: none;
  white-space: nowrap;
}

.todo-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 999;
  max-width: min(23rem, calc(100vw - 24px));
  max-height: 60vh;
  overflow: auto;
  padding: 1rem 1.1rem;
  background: #14060e;
  border: 1px solid #ff3ea5;
  border-radius: 6px;
  color: #ffd9ec;
  font-size: 12px;
  line-height: 1.6;
}
.todo-panel strong { display: block; margin-bottom: 0.5rem; color: #ff8ac6; }
.todo-panel ol { margin: 0 0 0.75rem; padding-left: 1.2rem; list-style: decimal; }
.todo-panel code { color: #fff; font-size: 11px; }
.todo-panel p { color: #c79ab3; font-size: 11px; }