/* ═══════════════════════════════════════════════════════
   LA VALETTE BOUTIQUE: the glass set
   ───────────────────────────────────────────────────────
   One family of frosted controls, used the same way on every page that has a hero:

     .lv-dock         a row of up to three quick actions, each one tapped or swiped to the side (assets/glass.js): the
                      one you hold is the only one lit (the light pill); the others sit quiet in the glass. The first one (.lv-dock-main) is the main
                      action: it is the pill at rest, with the swipe hint; the others are icon + label.
     .lv-glass-btn    a round icon button (Ask La Valette in the header).

   Two tones, same shape: --photo sits on a photograph (light type on a dark glass, homepage hero); --light sits on the
   pale content-page hero (ink type on a cream glass). Colours come from the shared tokens; the few glass values below
   are tokens too, defined once here.

   While a dock is in view, the round Ask and Reserve buttons at the bottom right step aside (the dock is the booking
   and planning entry, the header icon is the Ask entry). Scrolled past the dock (assets/glass.js sets .is-away on it),
   they come back and the header icon goes.
   ═══════════════════════════════════════════════════════ */

:root {
  --glass-blur: 18px;
  --glass-photo-tint: rgba(37, 31, 28, 0.30);
  --glass-photo-edge: rgba(251, 247, 236, 0.30);
  --glass-photo-ink: rgba(251, 247, 236, 0.92);
  --glass-light-tint: rgba(251, 247, 236, 0.62);
  --glass-light-edge: var(--border-md);
  --dock-h: 78px;
  --dock-pad: 5px;
  --dock-r: calc(var(--r-lg) * 2);
  --dock-r-in: calc(var(--r-lg) * 1.5);
}

/* ─── DOCK ─────────────────────────────────────────────── */
.lv-dock {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  box-sizing: border-box;
  width: min(100%, 440px);
  min-height: var(--dock-h);
  padding: var(--dock-pad);
  border-radius: var(--dock-r);
  border: 1px solid var(--glass-photo-edge);
  background: var(--glass-photo-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  color: var(--white);
  font-family: var(--font);
  text-align: center;
}
.lv-dock--light {
  border-color: var(--glass-light-edge);
  background: var(--glass-light-tint);
  color: var(--ink);
}
.lv-dock a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.lv-dock .lv-dock-i { color: inherit; }

.lv-dock-main,
.lv-dock-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0 4px;
  border-radius: var(--dock-r-in);
}
.lv-dock-i {
  transition: opacity var(--t-base) var(--ez-alt), background var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt), box-shadow var(--t-base) var(--ez-alt);
}
.lv-dock-i:hover { background: var(--glass-photo-edge); }
.lv-dock--light .lv-dock-i:hover { background: var(--ink-08); }

/* every action can be swiped; the others fade while one is held (--p is how far it has gone) */
.lv-dock > a {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  will-change: transform;
  opacity: calc(1 - var(--p) * 0.5);
}
.lv-dock > a.is-held { opacity: 1; position: relative; z-index: 2; cursor: grabbing; }
.lv-dock > a.lv-dock-i.is-held { background: var(--glass-photo-ink); color: var(--ink); box-shadow: 0 10px 26px var(--ink-25); }
.lv-dock.lv-dock--light > a.lv-dock-i.is-held { background: var(--sage-dk); color: var(--white); box-shadow: 0 10px 26px var(--sage-20); }
.lv-dock > a.is-snap { transition: transform 420ms var(--ez); }
/* only the held action is lit: while another one is held the main action gives up its pill and sits quiet in the glass */
.lv-dock-main { transition: background var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt), box-shadow var(--t-base) var(--ez-alt); }
.lv-dock.is-drag > a.lv-dock-main:not(.is-held) { background: transparent; color: inherit; box-shadow: none; }

.lv-dock-ic { width: 22px; height: 22px; flex: none; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lv-dock-l {
  display: block;
  max-width: 100%;
  font-size: var(--fs-nano);
  font-weight: var(--w-med);
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: manual;
}

/* the main action: a light pill that can be tapped or swiped to the side */
.lv-dock .lv-dock-main {
  position: relative;
  z-index: 1;
  background: var(--glass-photo-ink);
  color: var(--ink);
  box-shadow: 0 6px 18px var(--ink-15);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
/* the same olive as the site's buttons (.btn hover, Reserve), dark enough for 10px type (4.7:1) */
.lv-dock.lv-dock--light .lv-dock-main { background: var(--sage-dk); color: var(--white); box-shadow: 0 6px 18px var(--sage-20); }
.lv-dock-main .lv-dock-l { font-weight: var(--w-semi); }
.lv-dock.is-drag .lv-dock-main.is-held { box-shadow: 0 10px 26px var(--ink-25); }

/* the swipe hint: small chevrons beside the icon of the main action */
.lv-dock-top { display: flex; align-items: center; gap: 7px; }
.lv-dock-chev {
  width: 10px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.lv-dock-main.is-nudge { animation: lv-dock-nudge 1100ms var(--ez-alt) 1; }
@keyframes lv-dock-nudge {
  0%, 100% { transform: translateX(0); }
  38% { transform: translateX(16px); }
  62% { transform: translateX(16px); }
}
.lv-dock-sep { align-self: stretch; margin: 14px 0; background: var(--glass-photo-edge); }
.lv-dock--light .lv-dock-sep { background: var(--border-md); }

.lv-dock a:focus-visible { outline: 2px solid var(--sage-lt); outline-offset: 2px; }
.lv-dock--light a:focus-visible { outline-color: var(--sage-dk); }

/* three equal actions (the guest guides): nothing is lit at rest and a thin line sits between them; the one you press lights up, like the guide's tiles */
.lv-dock--even { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); }
.lv-dock--even > a.lv-dock-i:active,
.lv-dock--even > a.lv-dock-i:focus-visible { background: var(--glass-photo-ink); color: var(--ink); box-shadow: 0 10px 26px var(--ink-25); outline: none; }

/* a dock with two actions instead of three */
.lv-dock--two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.lv-dock--two .lv-dock-sep { display: none; }

@media (max-width: 380px) {
  .lv-dock-l { letter-spacing: 0.06em; }
  .lv-dock-main, .lv-dock-i { padding: 0 3px; }
}
@media (max-width: 340px) {
  .lv-dock-l { font-size: 0.5625rem; letter-spacing: 0.04em; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-dock-main.is-nudge { animation: none; }
  .lv-dock > a.is-snap, .lv-dock-i { transition: none; }
}

/* ─── ROUND GLASS ICON BUTTON ──────────────────────────── */
.lv-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-photo-edge);
  background: var(--glass-photo-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--t-base) var(--ez-alt), visibility 0s linear 0s,
              background var(--t-base) var(--ez-alt), border-color var(--t-base) var(--ez-alt), color var(--t-base) var(--ez-alt);
}
.lv-glass-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lv-glass-btn:hover { background: var(--glass-photo-edge); }
.lv-glass-btn:focus-visible { outline: 2px solid var(--sage-lt); outline-offset: 2px; }
/* on a light header (content pages, and the homepage once it has scrolled) */
.lv-glass-btn--light,
.nav.scrolled .lv-glass-btn {
  border-color: var(--glass-light-edge);
  background: var(--glass-light-tint);
  color: var(--ink);
}
.lv-glass-btn--light:hover,
.nav.scrolled .lv-glass-btn:hover { background: var(--ink-08); }
.lv-glass-btn--light:focus-visible, .nav.scrolled .lv-glass-btn:focus-visible { outline-color: var(--sage-dk); }

/* the header icon only exists while the dock is in view (then the round Ask button at the bottom right takes over) */
html:has(.lv-dock.is-away) .lv-glass-btn[data-lv-ask] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ez-alt), visibility 0s linear var(--t-base);
}

/* ─── THE ROUND BUTTONS STEP ASIDE WHILE THE DOCK IS IN VIEW ─── */
html:has(.lv-dock:not(.is-away)) .ask-fab,
html:has(.lv-dock:not(.is-away)) .sticky-cta {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity var(--t-base) var(--ez-alt), transform var(--t-base) var(--ez-alt), visibility 0s linear var(--t-base);
}
@media (prefers-reduced-motion: reduce) {
  .lv-glass-btn, html:has(.lv-dock:not(.is-away)) .ask-fab, html:has(.lv-dock:not(.is-away)) .sticky-cta { transition: none; }
}

/* ─── CONTENT PAGES ────────────────────────────────────── */
/* the dock closes the pale hero, centred under the intro and the byline */
.hero > .lv-dock { margin: var(--s4) auto 0; }
/* the Ask icon sits next to the menu button, not in the middle of the header */
nav#nav .nav-r { margin-left: auto; }
nav#nav .nav-r + .ham { margin-left: var(--s1); }