/* ================================================================
   VILLA MANATIS — Overrides on villa-moana.css base
   Loaded AFTER villa-moana.css
   ================================================================ */

/* Hero: Manatis uses a warm mid overlay — the modern architecture
   and pool read best without too much darkening */
#vm-hero .villa-hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 22, 40, 0.40) 0%,
    rgba(10, 22, 40, 0.18) 45%,
    rgba(10, 22, 40, 0.65) 100%
  );
}

/* Arrival: aerial geometry of the pool — clean, dramatic at low opacity */
.vm-arrival__bg {
  background-image: url('/assets/images/villa-manatis/villa-manatis-aerial-pool.webp');
  background-position: center 50%;
  opacity: 0.18;
}

/* Story image: Manatis story is landscape pool/view shot */
.vm-story__image img {
  object-position: center 40%;
}

/* Pause §A — position to show pool + Vrbnik skyline */
#vm-pause-a-bg {
  background-position: center 60% !important;
}

/* Sand court card in triptych — keep warm sandy tone visible */
.vm-amenities-hl__card:nth-child(3) .vm-amenities-hl__card-overlay {
  background: linear-gradient(to top, rgba(10,22,40,0.82) 0%, rgba(10,22,40,0.25) 55%, transparent 100%);
}

/* ================================================================
   MOBILE — swap all background images to 1200px versions
   ================================================================ */
@media (max-width: 900px) {
  #vm-hero-bg {
    background-image: url('/assets/images/villa-manatis/villa-manatis-architecture.webp') !important;
    background-position: center 40% !important;
  }
  #vm-pause-a-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-pool-aperol.webp') !important;
  }
  #vm-pause-b-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-vrbnik-night.webp') !important;
  }
  #vm-pause-c-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-kitchen.webp') !important;
  }
  .vm-day__scene[data-scene="0"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-morning-terrace.webp') !important;
  }
  .vm-day__scene[data-scene="1"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-pool-midday.webp') !important;
  }
  .vm-day__scene[data-scene="2"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-sand-court.webp') !important;
  }
  .vm-day__scene[data-scene="3"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-evening.webp') !important;
    background-position: center 30% !important;
  }
  .vm-day__scene[data-scene="4"] .vm-day__scene-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-night-left.webp') !important;
  }
  #vm-close-bg {
    background-image: url('/assets/images/villa-manatis/mobile/villa-manatis-dusk-lit.webp') !important;
  }

  /* vm-reasons: taller cards so text doesn't swamp the image */
  .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;
  }
}