/*
 * Aurelia Luxe — Premium Override Layer v3 "Costa Serena"
 * Loaded AFTER main.css. A full editorial redesign: warm ivory canvas,
 * terracotta/bronze accents, asymmetric left-aligned layouts, oversized
 * serif display, soft organic cards, refined motion.
 * 100% hand-written CSS — no build step, no SaaS, no paid plugins.
 * ────────────────────────────────────────────────────────────────────────── */

/* ══ GLOBAL CANVAS ══════════════════════════════════════════════════════════ */
body {
  background: var(--hl-light);
  color: var(--hl-text-primary);
  letter-spacing: 0.005em;
}
::selection { background: var(--hl-gold-light); color: var(--hl-dark); }

/* Decorative thin top accent line under header */
.hl-main { background: var(--hl-light); }

/* ══ TYPOGRAPHY — oversized editorial serif ════════════════════════════════ */
.hl-heading {
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(2.2rem, 5.5vw, 4.25rem);
}
.hl-hero__title { font-weight: 500; letter-spacing: -0.015em; }
.hl-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: var(--hl-gold-dark);
}
.hl-eyebrow::before {
  content: "";
  width: 2.2rem; height: 1px;
  background: var(--hl-gold);
}

/* Section headers go LEFT-aligned editorial by default (was centered) */
.hl-section-header {
  text-align: left;
  margin-inline: 0;
  max-width: 760px;
}
.hl-section-header__sub,
.hl-section-header__desc { color: var(--hl-text-secondary); font-size: 1.08rem; line-height: 1.8; }

/* ══ BUTTONS — refined, squared with sheen + arrow slide ═══════════════════ */
.hl-btn {
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  padding: 0.95rem 2.1rem;
  transition: var(--hl-transition);
}
.hl-btn--primary,
.hl-btn--gold {
  background: var(--hl-dark);
  color: var(--hl-light);
  box-shadow: var(--hl-shadow);
}
.hl-btn--primary:hover,
.hl-btn--gold:hover {
  background: var(--hl-gold);
  color: var(--hl-white);
  transform: translateY(-3px);
  box-shadow: var(--hl-shadow-gold);
}
.hl-btn--outline {
  background: transparent;
  border: 1px solid var(--hl-gold-dark);
  color: var(--hl-gold-dark);
}
.hl-btn--outline:hover {
  background: var(--hl-gold-dark);
  color: var(--hl-white);
  transform: translateY(-3px);
}
.hl-btn--ghost {
  background: transparent;
  border: 1px solid var(--hl-border);
  color: var(--hl-text-primary);
}
.hl-btn--ghost:hover { border-color: var(--hl-gold); color: var(--hl-gold-dark); }
.hl-btn svg { transition: transform var(--hl-transition); }
.hl-btn:hover svg { transform: translateX(4px); }

/* ══ HEADER — translucent warm glass, left logo, airy ══════════════════════ */
.hl-header {
  background: color-mix(in oklab, var(--hl-light) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid color-mix(in oklab, var(--hl-border) 60%, transparent);
}
.hl-header.scrolled,
.hl-header.is-scrolled {
  background: color-mix(in oklab, var(--hl-light) 94%, transparent);
  box-shadow: var(--hl-shadow-sm);
}
.hl-logo__text {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hl-dark);
}
.hl-nav__menu a { letter-spacing: 0.06em; }
.hl-nav__menu a::after { background: var(--hl-gold); }

/* ══ HERO — left-aligned editorial, framed, with side meta ═════════════════ */
.hl-hero { min-height: 100svh; }
.hl-hero__overlay {
  background: linear-gradient(105deg,
    rgba(36,28,22,.72) 0%,
    rgba(36,28,22,.45) 45%,
    rgba(36,28,22,.15) 100%);
}
.hl-hero__content {
  text-align: left;
  align-items: flex-start;
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hl-pad);
}
.hl-hero__eyebrow { color: var(--hl-gold-light); }
.hl-hero__eyebrow::before { background: var(--hl-gold-light); }
.hl-hero__title { font-size: clamp(2.8rem, 8vw, 6rem); max-width: 16ch; }
.hl-hero__subtitle { max-width: 46ch; margin-inline: 0; }
.hl-hero__scroll-indicator { align-self: flex-start; }

/* ══ HERO SEARCH BAR — floating organic card ══════════════════════════════ */
.hl-search-bar {
  margin-inline: 0;
  max-width: 920px;
}
.hl-search-bar__inner {
  background: color-mix(in oklab, var(--hl-light) 96%, transparent);
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow-xl);
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  gap: 0.5rem;
  border: 1px solid color-mix(in oklab, var(--hl-gold) 18%, transparent);
}
.hl-search-bar__field label {
  color: var(--hl-gold-dark);
  letter-spacing: 0.16em;
  font-size: 0.62rem;
}
.hl-search-bar__field input,
.hl-search-bar__field select { color: var(--hl-text-primary); font-weight: 500; }
.hl-search-bar__btn {
  background: var(--hl-dark);
  border-radius: calc(var(--hl-radius-lg) - 0.45rem);
  letter-spacing: 0.12em;
  transition: var(--hl-transition);
}
.hl-search-bar__btn:hover { background: var(--hl-gold); transform: translateY(-2px); }

/* ══ INTRO STAT STRIP — divided bronze rule, oversized numerals ════════════ */
.hl-intro-strip {
  background: var(--hl-dark);
  color: var(--hl-light);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.hl-intro-strip__item { position: relative; }
.hl-intro-strip__item + .hl-intro-strip__item::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 60%;
  background: color-mix(in oklab, var(--hl-gold) 45%, transparent);
}
.hl-intro-strip__value {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--hl-gold-light);
  font-weight: 500;
}
.hl-intro-strip__label {
  letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.66rem; color: var(--hl-text-light);
}

/* ══ ABOUT — asymmetric, offset framed image with bronze frame ═════════════ */
.hl-about-section { background: var(--hl-light); }
.hl-about-section__grid { gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hl-about-section__media { position: relative; }
.hl-about-section__media img,
.hl-about-section__placeholder {
  border-radius: var(--hl-radius-xl) var(--hl-radius-xl) var(--hl-radius-xl) 6rem;
  box-shadow: var(--hl-shadow-lg);
}
.hl-about-section__media::after {
  content: "";
  position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid var(--hl-gold);
  border-radius: var(--hl-radius-xl) var(--hl-radius-xl) var(--hl-radius-xl) 6rem;
  z-index: -1;
}
.hl-about-section__badge {
  background: var(--hl-gold);
  color: var(--hl-white);
  border-radius: 50%;
  box-shadow: var(--hl-shadow-gold);
}
.hl-about-section__badge-num { font-family: var(--font-serif); }

/* ══ ROOM CARDS — tall editorial cards, image-led, price tab ═══════════════ */
.hl-rooms-section.bg-subtle { background: var(--hl-subtle); }
.hl-rooms-grid { gap: clamp(1.5rem, 3vw, 2.5rem); }
.hl-room-card,
.hl-room-result-card {
  border-radius: var(--hl-radius-lg);
  overflow: hidden;
  background: var(--hl-white);
  box-shadow: var(--hl-shadow-sm);
  border: 1px solid var(--hl-border);
  transition: var(--hl-transition);
}
.hl-room-card:hover,
.hl-room-result-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hl-shadow-lg);
  border-color: color-mix(in oklab, var(--hl-gold) 40%, transparent);
}
.hl-room-card img { transition: transform 0.9s cubic-bezier(0.22,1,0.36,1); }
.hl-room-card:hover img { transform: scale(1.07); }
.hl-room-card__price,
.hl-room-result-card__price { color: var(--hl-gold-dark); font-family: var(--font-serif); }

/* ══ EXPERIENCES — taller cinematic tiles, dark gradient reveal ════════════ */
.hl-exp-grid { gap: clamp(1.25rem, 2.5vw, 2rem); }
.hl-exp-card { border-radius: var(--hl-radius-lg); min-height: 30rem; }
.hl-exp-card__image { transition: transform 1s cubic-bezier(0.22,1,0.36,1); }
.hl-exp-card:hover .hl-exp-card__image { transform: scale(1.08); }
.hl-exp-card__overlay {
  background: linear-gradient(to top, rgba(36,28,22,.92) 5%, rgba(36,28,22,.35) 50%, transparent 100%);
}
.hl-exp-card__title { font-family: var(--font-serif); color: var(--hl-light); }
.hl-exp-card__icon {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--hl-gold) 85%, transparent);
  margin-bottom: 0.75rem;
}

/* ══ GALLERY ══════════════════════════════════════════════════════════════
   Tile styling (radius, shadow, hover zoom/overlay) lives in main.css's
   consolidated "GALLERY — IMMERSIVE CAROUSEL" block; only the section
   background stays here. */
.hl-gallery-teaser { background: var(--hl-light); }

/* ══ TESTIMONIALS — warm espresso block, oversized quote ═══════════════════ */
.hl-testimonials.bg-dark { background: var(--hl-gradient-noir); }
.hl-testi-slide,
.hl-testimonials blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--hl-light);
}
.hl-testi-nav {
  border: 1px solid color-mix(in oklab, var(--hl-gold) 50%, transparent);
  color: var(--hl-gold-light);
  border-radius: 50%;
  transition: var(--hl-transition);
}
.hl-testi-nav:hover { background: var(--hl-gold); color: var(--hl-white); }
.hl-testi-dots span.active,
.hl-testi-dots .active { background: var(--hl-gold-light); }

/* ══ FOOTER — warm sand, refined columns ══════════════════════════════════ */
.hl-footer { background: var(--hl-dark); color: var(--hl-text-light); }
.hl-footer a:hover { color: var(--hl-gold-light); }
.hl-footer__title,
.hl-footer h3, .hl-footer h4 { color: var(--hl-light); font-family: var(--font-serif); }

/* ══ FORMS / INPUTS — soft rounded warm fields ════════════════════════════ */
input, select, textarea {
  border-radius: var(--hl-radius);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--hl-gold) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hl-gold) 22%, transparent);
}

/* ══ ANNOUNCEMENT BAR ═════════════════════════════════════════════════════ */
.hl-announce { background: var(--hl-gold); color: var(--hl-white); }
.hl-announce a { text-decoration: underline; }

/* ══ MOTION — refined reveal ══════════════════════════════════════════════ */
.reveal-up, .reveal-left, .reveal-right { transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1); }

/* ══ KEN BURNS HERO ═══════════════════════════════════════════════════════ */
/* v3.16 — Ken Burns removed. A continuously animated transform:scale() on a
   full-viewport image forces the compositor to resample a huge layer on every
   frame; combined with scroll it produced the "page enlarges / shrinks" jerk.
   The hero now holds one stable, static frame (Airbnb-style). */
.hl-hero__bg, .hl-hero__video { animation: none; transform: none; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .hl-section-header { text-align: left; }
  .hl-about-section__media::after { inset: 0.8rem -0.8rem -0.8rem 0.8rem; }
}