/* =============================================================
   EVARA BEACH RESORT — STYLESHEET
   Sections: Variables, Reset, Buttons, Header, Hero, About,
             Responsive
============================================================== */

/* ---------- CSS VARIABLES ---------- */
:root {
  --color-maroon: #6b1f2a;
  --color-cream: #f8f4ec;
  --color-white: #ffffff;
  --color-gold: #f8b530;
  --color-text: #130e0e;
  --color-text-light: #141111;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
  --radius: 12px;
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.1);
  --shadow-strong: 0 18px 40px rgba(0, 0, 0, 0.18);
  --transition: 0.4s ease;
}

/* ---------- RESET ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 2.3rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--transition);
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-maroon);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background-color: var(--color-maroon);
  color: var(--color-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

.btn--outline {
  border: 1.5px solid var(--color-maroon);
  color: var(--color-maroon);
}

.btn--outline:hover {
  background-color: var(--color-maroon);
  color: var(--color-white);
  transform: translateY(-3px);
}

/* Compact CTA used in the header ribbon — visible on EVERY screen
   size (mobile, tablet, desktop) and in every header state
   (transparent hero or scrolled/cream). Fixed per-breakpoint sizes
   instead of vw-based clamp() so it renders identically on first
   paint and after scroll on every mobile browser. */
.btn--book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.5rem;
  font-size: 0.75rem;
  margin-left: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- HEADER ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 1000;
  background-color: transparent;
  box-shadow: none;
  transition: background-color var(--transition), box-shadow var(--transition), padding var(--transition);
  padding: 1.3rem 0;
  overflow: visible; /* never let the header clip its own contents */
  /* Forces the browser to composite this element on its own GPU
     layer. This is a well-known fix for position:fixed elements
     flickering / vanishing mid-scroll on Android Chrome & iOS
     Safari. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.header__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.5rem;
  width: 100%;
}

/* Groups nav + Book Now CTA + mobile toggle together on the right */
.header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  transition: color var(--transition);
  min-width: 0; /* allow the logo block to shrink instead of pushing siblings offscreen */
  flex-shrink: 1;
}

/* Single source of truth for the logo mark size — fixed per
   breakpoint (see media queries below) so it's always the same
   size whether the header is transparent (top of Home) or
   scrolled, and never depends on vw quirks on mobile. */
.logo__mark {
  height: 70px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  flex-shrink: 0;
  transition: height var(--transition);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

.logo__text {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 200;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo__text span {
  color: var(--color-gold);
  font-weight: 500;
}

.nav__list {
  display: flex;
  gap: 1.2rem;
}

/* ---------- NAV LINKS ----------
   No hover underline/"stick" animation and no hover color shift —
   links stay plain white on the transparent header, maroon on the
   scrolled/cream header. */
.nav__link {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
  position: relative;
  transition: color var(--transition);
}

/* Sticky / scrolled state — toggled by JavaScript */
.header.header--scrolled {
  background-color: var(--color-cream);
  box-shadow: var(--shadow-soft);
  padding: 0.8rem 0;
}

.header.header--scrolled .logo,
.header.header--scrolled .nav__link {
  color: var(--color-maroon);
}

/* Mobile nav toggle (hamburger) — always visible on mobile/tablet,
   in both the transparent hero state and the scrolled state.
   Fixed size (not vw-based) so it never shrinks or disappears. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: background-color var(--transition), transform var(--transition), opacity var(--transition);
  transform-origin: center;
  /* Keeps the white hamburger lines visible even when the hero
     photo behind them is light/bright (sky, clouds, sand) — without
     this, white-on-white makes the icon disappear until the header
     turns solid/cream after scrolling. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}

.header--scrolled .nav-toggle span {
  background-color: var(--color-maroon);
}

/* Hamburger -> X animation, toggled via "nav-toggle--active" in script.js */
.nav-toggle--active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle--active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle--active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Keep the X mark visible (dark) even once the menu panel
   (cream background) is open, regardless of header scroll state */
.nav-toggle--active span {
  background-color: var(--color-maroon);
}

/* ---------- HERO SECTION ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* avoids the mobile browser address-bar show/hide jump */
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background photo — a real <img>, not a CSS background, so it's
   easy to swap the src attribute in index.html to replace it later. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 10, 10, 0.48);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: 0 3rem;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1s ease forwards 0.3s;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.hero__subtitle {
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 2rem;
  color: var(--color-cream);
}

/* =============================================================
   NAV DROPDOWN — Rooms / Nearby Experience
============================================================== */

.nav__item--dropdown {
  position: relative;
}

.nav__link--dropdown {
  display: inline-flex;
  align-items: center;
}

/* Desktop dropdown panel — no fade/slide animation, appears instantly */
.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background-color: var(--color-maroon);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  padding: 0.6rem;
  z-index: 50;
}

.nav__dropdown-link {
  display: block;
  padding: 0.65rem 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--color-white);
  border-radius: calc(var(--radius) - 6px);
  white-space: nowrap;
}

.nav__dropdown-link:hover {
  background-color: var(--color-gold);
  color: var(--color-maroon);
}

@media (min-width: 769px) {
  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown.nav__item--open .nav__dropdown {
    display: block;
  }
}

/* Mobile: dropdown becomes an inline panel inside the slide-open
   nav, toggled by tapping the parent link (see script.js). */
@media (max-width: 768px) {
  .nav__item--dropdown {
    width: 100%;
    text-align: center;
  }

  .nav__link--dropdown {
    justify-content: center;
  }

  .nav__dropdown {
    display: none;
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border-radius: var(--radius);
    margin-top: 0.5rem;
    padding: 0.4rem;
  }

  .nav__item--dropdown.nav__item--open .nav__dropdown {
    display: block;
  }

  .nav__dropdown-link {
    color: var(--color-white);
    text-align: center;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
  }

  .nav__dropdown-link:hover {
    background-color: var(--color-gold);
    color: var(--color-maroon);
  }
}

/* ---------- ABOUT SECTION ---------- */
.about {
  padding: 7rem 3rem;
  background-color: var(--color-cream);
}

.about__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Overlapping image layout */
.about__images {
  position: relative;
  min-height: 460px;
}

.about__image {
  border-radius: var(--radius);
  object-fit: cover;
  transition: transform 0.6s ease;
}

.about__image--main {
  width: 100%;
  height: 440px;
  box-shadow: var(--shadow-strong);
}

.about__image--small {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 55%;
  height: 220px;
  border: 6px solid var(--color-cream);
  box-shadow: var(--shadow-strong);
}

.about__image--main:hover,
.about__image--small:hover {
  transform: scale(1.04);
}

.about__label {
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 500;
}

.about__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-maroon);
  margin: 1rem 0 1.2rem;
}

.about__desc {
  color: var(--color-text-light);
  margin-bottom: 1.2rem;
  max-width: 500px;
}

.about__text .btn {
  margin-top: 0.8rem;
}

/* Scroll-reveal states — toggled via IntersectionObserver in script.js */
[data-animate] {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

[data-animate="slide-left"] {
  transform: translateX(-60px);
}

[data-animate="slide-right"] {
  transform: translateX(60px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- RESPONSIVE (HEADER + ABOUT) ---------- */

/* Tablet */
@media (max-width: 992px) {
  .about__container {
    gap: 3rem;
  }

  .about__image--main {
    height: 380px;
  }

  .logo__mark {
    height: 64px;
  }
}

/* Mobile — this is the breakpoint that matches your screenshots.
   Book Now + hamburger are guaranteed visible here, matched in
   size/weight to how the About page renders. */
@media (max-width: 768px) {
  .header {
    padding: 1rem 0;
  }

  .header.header--scrolled {
    padding: 0.75rem 0;
  }

  .header__container {
    padding: 0 1rem;
    gap: 0.4rem;
  }

  .logo__mark {
    height: 62px;
    max-width: 165px;
  }

  .logo__text {
    display: none; /* frees up space for Book Now + hamburger on phones */
  }

  .btn--book {
    padding: 0.55rem 1.1rem;
    font-size: 0.68rem;
    margin-left: 0.5rem;
  }

  .nav-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .nav-toggle span {
    width: 24px;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-cream);
    box-shadow: var(--shadow-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .nav.nav--open {
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem 0;
  }

  .nav__link {
    color: var(--color-maroon);
  }

  .nav-toggle {
    display: flex;
  }

  .hero__content {
    padding: 0 1.5rem;
    text-align: left;
  }

  .about {
    padding: 4.5rem 1.5rem;
  }

  .about__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about__images {
    min-height: 340px;
    margin-bottom: 2rem;
  }

  .about__image--main {
    height: 300px;
  }

  .about__image--small {
    width: 60%;
    height: 160px;
    right: 0;
    left: 50%;
    transform: translateX(-15%);
  }

  .about__image--small:hover {
    transform: translateX(-15%) scale(1.04);
  }

  .about__desc {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .about__image--main {
    height: 240px;
  }

  .btn {
    padding: 0.8rem 1.7rem;
    font-size: 0.78rem;
  }

  .logo__mark {
    height: 56px;
    max-width: 135px;
  }

  .btn--book {
    padding: 0.5rem 0.9rem;
    font-size: 0.63rem;
    margin-left: 0.4rem;
  }

  .nav-toggle {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .nav-toggle span {
    width: 21px;
  }
}

@media (max-width: 360px) {
  .header__container {
    padding: 0 0.7rem;
    gap: 0.3rem;
  }

  .logo__mark {
    height: 50px;
    max-width: 118px;
  }

  .btn--book {
    padding: 0.45rem 0.75rem;
    font-size: 0.6rem;
    margin-left: 0.3rem;
  }
}


/* =============================================================
   ROOMS SECTION — style
============================================================== */

/* ---------- ROOMS SECTION ---------- */
.rooms {
  padding: 7rem 3rem;
  background-color: var(--color-white);
}

.rooms__header {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.rooms__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-maroon);
  margin: 1rem 0 1rem;
}

.rooms__subtitle {
  color: var(--color-text-light);
}

/* Three room cards side by side (parallel) on desktop */
.rooms__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/* Staggered entrance timing — card 2 and 3 animate slightly after card 1 */
.rooms__grid .room-card:nth-child(1) { transition-delay: 0s; }
.rooms__grid .room-card:nth-child(2) { transition-delay: 0.15s; }
.rooms__grid .room-card:nth-child(3) { transition-delay: 0.3s; }

.room-card {
  background-color: var(--color-cream);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Premium lift + glow effect on hover */
.room-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

.room-card__image-wrap {
  position: relative;
  overflow: hidden;
  height: 240px;
}

.room-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.room-card:hover .room-card__image {
  transform: scale(1.1);
}

.room-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background-color: var(--color-gold);
  color: var(--color-maroon);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
}

.room-card__body {
  padding: 1.8rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.room-card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-maroon);
  margin-bottom: 0.6rem;
  position: relative;
  padding-bottom: 0.7rem;
}

/* Small gold underline accent that widens on hover */
.room-card__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--color-gold);
  transition: width 0.4s ease;
}

.room-card:hover .room-card__title::after {
  width: 60px;
}

.room-card__desc {
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
}

/* ---------- ROOM AMENITIES (4 per room, 2x2 grid) ---------- */
.room-card__amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  border-top: 1px solid rgba(107, 31, 42, 0.12);
  padding-top: 1rem;
  flex-grow: 1;
}

.room-card__amenities li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--color-text);
}

.amenity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.85rem;
  color: var(--color-gold);
  flex-shrink: 0;
}

.room-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
}

.room-card__price {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-maroon);
  font-size: 1.05rem;
  white-space: nowrap;
}

.room-card__price span {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.btn--sm {
  padding: 0.6rem 1.3rem;
  font-size: 0.75rem;
}

/* ---------- SCROLL-REVEAL (fade-up) ---------- */
[data-animate="fade-up"] {
  transform: translateY(50px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .rooms {
    padding: 5rem 1.5rem;
  }

  .rooms__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rooms__grid .room-card:last-child {
    grid-column: span 2;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .rooms {
    padding: 4.5rem 1.5rem;
  }

  .rooms__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .rooms__grid .room-card:last-child {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
}

/* =============================================================
   AMENITIES SECTION
============================================================== */

.amenities {
  padding: 7rem 3rem;
  background-color: var(--color-cream);
}

.amenities__header {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.amenities__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-maroon);
  margin: 1rem 0 1rem;
}

.amenities__subtitle {
  color: var(--color-text-light);
}

.amenities__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

/* Staggered entrance timing across the grid */
.amenities__grid .amenity-card:nth-child(1) { transition-delay: 0s; }
.amenities__grid .amenity-card:nth-child(2) { transition-delay: 0.08s; }
.amenities__grid .amenity-card:nth-child(3) { transition-delay: 0.16s; }
.amenities__grid .amenity-card:nth-child(4) { transition-delay: 0.24s; }
.amenities__grid .amenity-card:nth-child(5) { transition-delay: 0.08s; }
.amenities__grid .amenity-card:nth-child(6) { transition-delay: 0.16s; }
.amenities__grid .amenity-card:nth-child(7) { transition-delay: 0.24s; }
.amenities__grid .amenity-card:nth-child(8) { transition-delay: 0.32s; }

.amenity-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-maroon);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 2.4rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Soft radial spotlight that follows the cursor — set via
   --mx / --my custom properties in script.js */
.amenity-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.12),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.amenity-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-strong);
}

.amenity-card:hover::before {
  opacity: 1;
}

.amenity-card__icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  transition: transform 0.5s ease, background-color 0.4s ease;
}

.amenity-card:hover .amenity-card__icon-wrap {
  background-color: var(--color-gold);
  transform: rotate(-8deg) scale(1.08);
}

.amenity-card__icon {
  width: 28px;
  height: 28px;
  color: var(--color-gold);
  transition: color 0.4s ease, transform 0.5s ease;
}

.amenity-card:hover .amenity-card__icon {
  color: var(--color-maroon);
  transform: scale(1.1);
}

.amenity-card__title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.amenity-card__desc {
  position: relative;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .amenities {
    padding: 5rem 1.5rem;
  }

  .amenities__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .amenities__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   NEARBY PLACES SECTION — 3D flip cards
============================================================== */

.nearby {
  padding: 7rem 3rem;
  background-color: var(--color-white);
}

.nearby__header {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.nearby__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-maroon);
  margin: 1rem 0 1rem;
}

.nearby__subtitle {
  color: var(--color-text-light);
}

.nearby__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}

/* Staggered entrance across the grid */
.nearby__grid .flip-card:nth-child(1) { transition-delay: 0s; }
.nearby__grid .flip-card:nth-child(2) { transition-delay: 0.1s; }
.nearby__grid .flip-card:nth-child(3) { transition-delay: 0.2s; }
.nearby__grid .flip-card:nth-child(4) { transition-delay: 0.1s; }
.nearby__grid .flip-card:nth-child(5) { transition-delay: 0.2s; }
.nearby__grid .flip-card:nth-child(6) { transition-delay: 0.3s; }

/* Card shell — establishes 3D perspective. IMPORTANT: this
   perspective/transform-style lives on elements inside <main>,
   which is a sibling of <header> — not an ancestor — so it can
   never break the header's position:fixed behavior. */
.flip-card {
  perspective: 1400px;
  height: 340px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.5s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
  transform: rotateY(180deg);
  box-shadow: var(--shadow-strong);
}

/* Shared face styling */
.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- FRONT FACE ---------- */
.flip-card__front {
  display: flex;
  align-items: flex-end;
}

.flip-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.flip-card:hover .flip-card__image {
  transform: scale(1.12);
}

.flip-card__front-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 8, 10, 0.82) 0%, rgba(20, 8, 10, 0.1) 55%, transparent 100%);
}

.flip-card__front-title {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.4rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-white);
}

/* ---------- BACK FACE ---------- */
.flip-card__back {
  background-color: var(--color-maroon);
  color: var(--color-white);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.8rem 1.6rem;
}

.flip-card__back::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 169, 106, 0.25), transparent 70%);
  pointer-events: none;
}

.flip-card__back-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: 0.8rem;
  position: relative;
}

.flip-card__back-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.4rem;
  position: relative;
}

/* Explore button — white outline that fills gold on hover */
.btn--explore {
  position: relative;
  padding: 0.7rem 1.8rem;
  font-size: 0.75rem;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  background-color: transparent;
}

.btn--explore:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-maroon);
  transform: translateY(-3px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .nearby {
    padding: 5rem 1.5rem;
  }

  .nearby__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .nearby__grid {
    grid-template-columns: 1fr;
  }

  /* Touch devices can't hover — tap toggles flip via .is-flipped,
     handled in script.js */
  .flip-card.is-flipped .flip-card__inner {
    transform: rotateY(180deg);
  }
}

/* =============================================================
   TESTIMONIALS / FEEDBACK SECTION — coverflow auto-carousel
============================================================== */

.testimonials {
  padding: 7rem 0;
  background-color: var(--color-maroon);
  overflow: hidden;
}

.testimonials__header {
  max-width: 640px;
  margin: 0 auto 3.5rem;
  padding: 0 3rem;
  text-align: center;
}

.testimonials__header .about__label {
  color: var(--color-gold);
}

.testimonials__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-white);
  margin: 1rem 0 1rem;
}

.testimonials__subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.testimonials__carousel {
  position: relative;
  width: 100%;
}

.testimonials__track {
  position: relative;
  height: 460px;
  max-width: 1300px;
  margin: 0 auto;
}

/* Each card is absolutely centered; JS moves it via --offset */
.testimonial-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  padding: 2.6rem 2.2rem 2.2rem;
  background-color: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  text-align: center;
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--offset, 0) * 260px))
    scale(calc(1 - var(--abs-offset, 0) * 0.16))
    rotateY(calc(var(--offset, 0) * -22deg));
  opacity: calc(1 - var(--abs-offset, 0) * 0.4);
  z-index: calc(10 - var(--abs-offset, 0));
  transition: transform 0.8s cubic-bezier(0.4, 0.1, 0.2, 1), opacity 0.8s ease;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Only the active (center) card is interactive/fully visible */
.testimonial-card.is-active {
  pointer-events: auto;
}

.testimonial-card__quote-mark {
  position: absolute;
  top: 4px;
  left: 22px;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.35;
}

.testimonial-card__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--color-gold);
}

.testimonial-card__stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.testimonial-card__text {
  position: relative;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 1.4rem;
  min-height: 110px;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-maroon);
  margin-bottom: 0.2rem;
}

.testimonial-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---------- DOTS ---------- */
.testimonials__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
}

.testimonials__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.4s ease, transform 0.4s ease;
}

.testimonials__dot.is-active {
  background-color: var(--color-gold);
  transform: scale(1.3);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .testimonials__track {
    height: 420px;
  }

  .testimonial-card {
    width: 280px;
    padding: 2.2rem 1.7rem 1.8rem;
  }

  .testimonial-card__text {
    font-size: 0.86rem;
    min-height: 130px;
  }
}

@media (max-width: 600px) {
  .testimonials {
    padding: 5rem 0;
  }

  .testimonials__header {
    padding: 0 1.5rem;
  }

  .testimonials__track {
    height: 400px;
  }

  .testimonial-card {
    width: 240px;
    padding: 2rem 1.4rem 1.6rem;
  }

  .testimonial-card__text {
    min-height: 150px;
  }
}

/* =============================================================
   CONTACT SECTION
============================================================== */

.contact {
  padding: 7rem 3rem;
  background-color: var(--color-white);
}

.contact__container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.contact__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--color-maroon);
  margin: 1rem 0 1.2rem;
}

.contact__desc {
  color: var(--color-text-light);
  margin-bottom: 1.2rem;
  max-width: 460px;
}

/* ---------- WHATSAPP BUTTON (self-contained, always visible) ---------- */
.whatsapp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 1rem 2.2rem;
  background-color: #6b1f2a;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(107, 31, 42, 0.35);
  transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  z-index: 1;
}

.whatsapp-btn:hover {
  background-color: #4e1520;
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(107, 31, 42, 0.45);
}

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

.whatsapp-btn__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: #c8a96a;
}

.whatsapp-btn span {
  color: #ffffff;
}

/* Gentle pulse ring to draw the eye, doesn't affect layout */
.whatsapp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid rgba(200, 169, 106, 0.6);
  opacity: 0;
  animation: whatsappPulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* ---------- MAP (wider + taller, responsive) ---------- */
.contact__map {
  position: relative;
  width: 100%;
  height: 560px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  border: 5px solid var(--color-cream);
}

.contact__map-frame {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .contact__map {
    height: 500px;
  }
}

@media (max-width: 992px) {
  .contact {
    padding: 5rem 1.5rem;
  }

  .contact__container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact__map {
    height: 440px;
  }
}

@media (max-width: 768px) {
  .contact__container {
    text-align: center;
  }

  .contact__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .whatsapp-btn {
    margin-left: auto;
    margin-right: auto;
  }

  .contact__map {
    height: 380px;
  }
}

@media (max-width: 480px) {
  .contact__map {
    height: 320px;
  }
}

/* =============================================================
   FOOTER
============================================================== */

.footer {
  background-color: var(--color-maroon);
  color: rgba(255, 255, 255, 0.85);
  padding: 5rem 3rem 0;
}

.footer__container {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* ---------- COLUMN 1: BRAND ---------- */
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
  margin-bottom: 1.2rem;
}

.footer__logo-mark {
  width: 120px;
  height: 82px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.footer__logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.footer__logo-text span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.footer__desc {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 320px;
  margin-bottom: 1.6rem;
}

.footer__socials {
  display: flex;
  gap: 0.8rem;
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, color 0.35s ease;
}

.footer__social-icon svg {
  width: 18px;
  height: 18px;
}

.footer__social-icon:hover {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-maroon);
  transform: translateY(-3px);
}

/* ---------- COLUMN TITLES (shared) ---------- */
.footer__col-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: 0.7rem;
}

.footer__col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--color-gold);
}

.footer__col--links {
  justify-self: center;
}

/* ---------- COLUMN 2: QUICK LINKS ---------- */
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer__links a {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer__links a:hover {
  color: var(--color-gold);
  padding-left: 4px;
}

/* ---------- COLUMN 3: CONTACT INFO ---------- */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.footer__contact svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-gold);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

.footer__contact a:hover {
  color: var(--color-gold);
}

/* ---------- BOTTOM BAR ---------- */
.footer__bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.6rem 0;
  text-align: center;
}

.footer__bottom p {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
  .footer {
    padding: 4rem 1.5rem 0;
  }

  .footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer__col--brand {
    grid-column: span 2;
  }

  .footer__col--links {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .footer__container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__col--brand {
    grid-column: auto;
  }

  .footer__logo,
  .footer__desc {
    margin-left: auto;
    margin-right: auto;
  }

  .footer__socials {
    justify-content: center;
  }

  .footer__col--links {
    justify-self: center;
  }

  .footer__col-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer__contact li {
    justify-content: center;
    text-align: left;
  }
}