/* ================================================================
   VILLA MARIM — Overrides on villa-moana.css base
   This file is loaded AFTER villa-moana.css
   All vm- class names are shared; only property-specific
   accent values are changed here.
   ================================================================ */

/* Marim accent: slightly warmer teal / Adriatic blue
   (Moana uses the same teal — no change needed, intentionally minimal) */

/* Hero: Marim uses a darker, more dramatic overlay to let the
   sea-rock photography breathe at the bottom thirds */
#vm-hero .villa-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 22, 40, 0.50) 0%,
    rgba(10, 22, 40, 0.25) 40%,
    rgba(10, 22, 40, 0.65) 100%
  );
}

/* Story image: Marim story image is portrait-oriented (beach access shot)
   Prevent it from being too tall on desktop */
.vm-story__image img {
  object-position: center 30%;
}

/* Amenities triptych: beach access card gets a lighter overlay
   so the water colour shows through */
.vm-amenities-hl__card:nth-child(2) .vm-amenities-hl__card-overlay {
  background: linear-gradient(to top, rgba(10,22,40,0.80) 0%, rgba(10,22,40,0.20) 60%, transparent 100%);
}

/* Marim pool is 30m² (not 12m length) — keep number readable at 3 chars */
.vm-amenities-hl__card-num {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.01em;
}

/* Pause §A — sea rock: position image to show the water below the villa */
#vm-pause-a-bg {
  background-position: center 55% !important;
}

/* Arrival: override Moana's olive grove background with Marim's sea view */
.vm-arrival__bg {
  background-image: url('/assets/images/villa-marim/villa-marim_property-aerial.webp');
  background-position: center 50%;
  opacity: 0.15;
}


/* ══════════════════════════════════════════════════════
   MOBILE IMAGE OVERRIDES
   villa-moana.css (shared base) forces Moana mobile images
   with !important. These must be countered here for Marim.
   Loaded after villa-moana.css → same specificity wins.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero */
  #vm-hero-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_hero.webp') !important;
    background-position: center 50% !important;
  }
  /* Pause §A — the cove / beach access */
  #vm-pause-a-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_cove.webp') !important;
    background-position: center 55% !important;
  }
  /* Pause §B — night */
  #vm-pause-b-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_night.webp') !important;
    background-position: center 50% !important;
  }
  /* Pause §C — exterior */
  #vm-pause-c-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_exterior.webp') !important;
    background-position: center 45% !important;
  }
  /* Day scene 0 — Morning (bedroom) */
  .villa-marim-page [data-scene="0"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_bedroom-1.webp') !important;
    background-position: center 40% !important;
  }
  /* Day scene 1 — Midday (shore) */
  .villa-marim-page [data-scene="1"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_shore-aerial.webp') !important;
    background-position: center 50% !important;
  }
  /* Day scene 2 — Afternoon (pool aerial) */
  .villa-marim-page [data-scene="2"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_pool-aerial.webp') !important;
    background-position: center 45% !important;
  }
  /* Day scene 3 — Evening (night view) */
  .villa-marim-page [data-scene="3"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_night.webp') !important;
    background-position: center 50% !important;
  }
  /* Day scene 4 — After Dark (sauna) */
  .villa-marim-page [data-scene="4"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_sauna.webp') !important;
    background-position: center 40% !important;
  }
  /* Final CTA */
  #vm-close-bg {
    background-image: url('/assets/images/villa-marim/mobile/villa-marim_footer.webp') !important;
  }

  /* Reasons — taller image cards, clamped text */
  .vm-reasons__grid {
    grid-template-rows: 90vw 70vw 70vw;
  }
  .vm-reasons__card--large { grid-row: auto; }
  .vm-reasons__card-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}