/* ==========================================================================
   Crown of Caribbean — theme v2
   Supersedes theme-v1. Same fonts and palette; adds the editorial layer:
   taller cinematic hero, photo-mosaic band, section kickers, richer cards.

   Loaded after Base.css. Remove this link and the v15 base renders untouched.
   Palette is unchanged: teal --sea, sand --sand, terracotta --sun.
   ========================================================================== */

/* --- 1. Fonts (unchanged from v1) ---------------------------------------- */

:root {
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Helvetica, Arial, sans-serif;
}

body {
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

h3, h4 {
  letter-spacing: -0.01em;
}

/* --- 2. Type scale — one step past v1 ------------------------------------ */

h1 {
  /* v15 capped 49.6px, v1 capped 64px. References run 60/66/72. */
  font-size: clamp(2.5rem, 5.8vw, 4.35rem); /* caps ~69.6px */
}

h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.5rem); /* caps 40px */
}

/* --- 3. Hero — taller, more cinematic ------------------------------------ */

.vhero {
  /* v15: clamp(26rem, 68vh, 40rem) */
  min-height: clamp(28rem, 86vh, 50rem);
}

.vhero::after {
  /* deepen the base of the scrim so bigger type stays legible */
  background: linear-gradient(
    #06201e5c 0%,
    #06201e1f 34%,
    #06201e42 62%,
    #06201ee3 100%
  );
}

.vhero h1 {
  /* 4rem cap wraps the headline as two clean lines:
     "An ocean-view villa" / "on St. Croix's east end".
     The global 4.35rem cap forced an ugly 3-line break here. */
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  max-width: 18ch;
  margin-bottom: 0.5rem;
}

.vhero__sub {
  font-size: clamp(1.02rem, 2vw, 1.28rem);
  max-width: 44ch;
}

.vhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  letter-spacing: 0.18em;
}

.vhero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: #a7d8d2;
  opacity: 0.85;
}

.vhero__in {
  padding: 3.5rem 0 3rem;
}

/* --- 4. CTAs — terracotta on every booking action (from v1) -------------- */

.vhero .btn,
.bookbar .btn,
.sticky-book .btn,
.site-nav a.btn {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--white);
}

.vhero .btn:hover,
.bookbar .btn:hover,
.sticky-book .btn:hover,
.site-nav a.btn:hover {
  background: #a95f2c;
  border-color: #a95f2c;
  color: var(--white);
}

.bookbar .btn,
.vhero .btn {
  padding: 0.88rem 1.75rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.btn {
  transition: background 0.15s, border-color 0.15s, transform 0.15s,
    box-shadow 0.15s;
}

.btn:not(.btn--ghost):hover {
  box-shadow: 0 8px 22px #10231f2e;
}

/* --- 5. Wordmark (from v1) ------------------------------------------------ */

.brand {
  font-size: 1.34rem;
  letter-spacing: -0.005em;
}

.brand small {
  letter-spacing: 0.12em;
  font-size: 0.66rem;
}

@media (width <= 46rem) {
  .brand {
    font-size: 1.15rem;
  }
}

.site-head__in {
  padding: 1.05rem 0;
}

/* --- 6. Section rhythm + editorial kickers -------------------------------- */

.section {
  padding: clamp(3.25rem, 7.5vw, 5.75rem) 0;
}

.section__head {
  max-width: 52ch;
  margin-bottom: 2.5rem;
}

/* injected overline above section h2s */
.kick {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sun);
  font-size: 0.74rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kick::after {
  content: "";
  flex: 0 0 2.25rem;
  height: 1px;
  background: var(--line);
}

/* --- 7. Villa cards — photo-forward -------------------------------------- */

.mcard__media {
  aspect-ratio: 3 / 2;
}

.mcard__media img {
  transition: transform 0.45s ease;
}

.mcard:hover .mcard__media img {
  transform: scale(1.035);
}

.mcard:hover {
  box-shadow: 0 18px 44px #10231f2b;
}

.mcard__body {
  padding: 1.25rem 1.35rem 1.45rem;
}

.mcard__title {
  font-size: 1.32rem;
}

.mcard__badge,
.pill {
  font-weight: 600;
}

.price {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price small {
  font-family: var(--sans);
  font-weight: 500;
}

/* --- 8. Photo mosaic band (homepage) -------------------------------------- */

.gallery--band {
  grid-auto-rows: clamp(9rem, 16vw, 13.5rem);
  gap: 0.6rem;
  margin: 0;
}

.gallery--band .gallery__item {
  display: block;
  cursor: pointer;
  position: relative;
}

.gallery--band .gallery__item:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* gentle photo lift on hover, matching the cards */
.gallery--band .gallery__item img {
  transition: transform 0.45s ease;
}

.gallery--band .gallery__item:hover img {
  transform: scale(1.04);
}

@media (width <= 46rem) {
  .gallery--band {
    grid-auto-rows: 7.5rem;
  }
}

/* --- 9. Guide cards — quieter, with affordance ---------------------------- */

.card {
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #10231f1c;
  border-color: #cfc6b2;
}

.card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.card h3 a:hover {
  color: var(--sea);
}

/* --- 10. Footer — label polish -------------------------------------------- */

.site-foot h2 {
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  color: #8fa5a0;
}

.site-foot {
  padding: 3.5rem 0 2.25rem;
}

/* --- 11. Trust bar -------------------------------------------------------- */

.trust {
  padding: 1.55rem 0;
}

.trust__item {
  font-size: 0.94rem;
}