/* =====================================================
   WALLZA — Media Component Styles
   Scoped exclusively to .wz-img-*, .wz-gallery-*,
   .wz-video-*
   Zero overlap with existing CSS.
   ===================================================== */

/* ─── Shared: prevent CLS ────────────────────────────────── */

/* All wz-managed pictures fill their container */
.wz-img-picture {
  display: contents; /* transparent: lets <img> inherit container sizing */
}

/* All wz images fill their picture element */
.wz-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No transition — this is an infrastructure file, not a design file */
}

/* Missing image placeholder */
.wz-img--missing {
  background: var(--green-soft, #E9F0EC);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wz-img--empty {
  background: var(--green-soft, #E9F0EC);
}

/* ─── Gallery Item ───────────────────────────────────────── */

.wz-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wz-gallery-item__picture {
  display: block;
  overflow: hidden;
  width: 100%;
}

.wz-gallery-item__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wz-gallery-item__link {
  display: block;
  overflow: hidden;
}

.wz-gallery-item__link:focus-visible {
  outline: 3px solid var(--gold-l, #E7C878);
  outline-offset: 2px;
}

.wz-gallery-item__cap {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #586759);
  padding: 0.55rem 0 0;
  line-height: 1.4;
}

/* ─── Gallery Grid ───────────────────────────────────────── */

.wz-gallery-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 0.85rem);
}

@media (min-width: 640px) {
  .wz-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* First item full-width bleed */
  .wz-gallery-grid .wz-gallery-item:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .wz-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wz-gallery-grid .wz-gallery-item:first-child {
    grid-column: 1 / -1;
  }
}

/* ─── Video ──────────────────────────────────────────────── */

.wz-video {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--green-d, #0E2018);
  /* aspect-ratio set by context (hero, section, gallery) */
}

.wz-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* no transition — structural file */
}

/* Poster — visible until video loads/plays */
.wz-video__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.wz-video__poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Once video plays, browser hides poster natively.
   We reinforce this by hiding the poster element
   via a class toggled by JS. */
.wz-video.is-playing .wz-video__poster {
  display: none;
}

/* ─── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wz-img,
  .wz-gallery-item__img,
  .wz-video__el {
    transition: none !important;
    animation: none !important;
  }
}