/**
 * Villa Features section — 4-up feature grid over a slow ken-burns photo
 * background with a dark gradient scrim. Depends on villa-home.css.
 *
 * @package Villa_Addon
 */

.vo-features {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  padding-block: var(--sp-100);
  padding-inline: var(--pad-x);
}
/* The grid content sits in a .vo-container which already supplies --pad-x, so the
   section's own padding-inline must not double it up (keeps content full-bleed
   like live). */
.vo-features .vo-container { padding-inline: 0; }

/* ---- Ken-burns background ---- */
.vo-features__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.vo-features__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 53, 54, .45) 0%, rgba(18, 53, 54, .1) 58%, rgba(18, 53, 54, 0) 100%),
    linear-gradient(180deg, rgba(18, 53, 54, .2) 0%, rgba(18, 53, 54, .3) 34%, rgba(18, 53, 54, .66) 52%, rgba(18, 53, 54, .9) 78%, rgba(18, 53, 54, .96) 100%);
}

.vo-kb__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: brightness(.52) saturate(.92);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s;
}

/* Beat Elementor's global `.elementor img { height: auto }` (0-1-1), which sizes
   the ken-burns photo to its natural ratio and leaves tall (mobile) sections
   half-covered instead of filling the whole section. */
.vo-features__bg .vo-kb__frame { height: 100%; }

.vo-kb__frame.is-on { opacity: 1; animation: voKbZoom 9s linear forwards; }
.vo-kb.is-off .vo-kb__frame { animation: none; transform: none; opacity: 1; }
.vo-kb.is-off .vo-kb__frame:not(:first-child) { opacity: 0; }

@keyframes voKbZoom { 0% { transform: scale(1.06); } 100% { transform: scale(1.18); } }

/* ---- Content ---- */
.vo-features__inner { position: relative; z-index: 2; width: 100%; margin-inline: auto; }

.vo-features__title {
  max-width: 697px;
  margin: 0 0 clamp(56px, 7.64vw, 200px);
  font-family: var(--display);
  font-weight: 600;
  color: var(--cream);
  font-size: clamp(2.1rem, 1.2rem + 3.1vw, 60px);
  line-height: 1.1;
}

.vo-features__grid { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; gap: 40px; }

.vo-frule { display: block; background: rgba(255, 255, 255, .18); width: 1px; height: 100%; }

.vo-feature__ic { width: 40px; height: 40px; color: var(--e-global-color-secondary, var(--teal)); margin-bottom: 30px; display: block; }

.vo-feature h3 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 600;
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 34px);
  line-height: 1.1;
}

.vo-feature p { color: rgba(255, 255, 255, .66); font-size: 18px; line-height: 1.4; margin: 0; }

@media (max-width: 900px) {
  .vo-features__grid { grid-template-columns: 1fr !important; gap: 40px; }
  .vo-frule { display: none; }
}

/* ---- Text-only "prose" mode (no feature cards) ---- */
/* A centred dark band — eyebrow, serif heading and one paragraph — for the
   "Named after Okeanos" style section. Reuses .vo-features' dark background. */
.vo-features--prose { text-align: center; }
.vo-features__prose { max-width: 760px; margin-inline: auto; position: relative; z-index: 2; }
.vo-features--prose .eyebrow { color: var(--teal); display: inline-block; margin-bottom: .8rem; }
.vo-features--prose .vo-features__title { max-width: none; margin: 0 auto 1.4rem; }
.vo-features__lede { color: rgba(255, 255, 255, .78); font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); line-height: 1.55; margin: 0 auto; max-width: 680px; }