/* Image slideshow (home hero, About and Contact frames) */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.hero-slide.on { opacity: 1; }
.hero-slide.s1 { background-image: url("../images/hero-slides/cacao-pods.webp"); }
.hero-slide.s2 { background-image: url("../images/hero-slides/cacao-beans.webp"); }

/* phones: portrait crops that keep the subject in view (full-screen home hero only) */
@media (max-width: 768px) {
  .hero > .hero-slide.s1 { background-image: url("../images/hero-slides/cacao-pods-m.webp"); }
  .hero > .hero-slide.s2 { background-image: url("../images/hero-slides/cacao-beans-m.webp"); }
}

/* framed slideshow (About / Contact): whole photo always visible, scales with the screen */
.slide-frame {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: var(--frame-ratio, 3 / 2);
  border-radius: 14px;
  overflow: hidden;
  background: #e9e2d9;
}
.slide-frame > picture,
.slide-frame > img { display: block; width: 100%; height: 100%; }
.slide-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }