/* LAVI v1.40 — hero poster fit + mobile title refinement */

/* Why the poster was being cropped:
   The hero media container has a fixed height, and the image was using object-fit: cover.
   This patch changes poster rendering to contain so the full poster is visible. */

.hero-slider .hero-visual.has-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f2ea;
}

.hero-slider .hero-visual.has-media img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
  background: transparent;
}

/* keep videos cinematic if any hero slide uses video */
.hero-slider .hero-visual.has-media video {
  object-fit: cover;
}

/* Slightly soften desktop heading spacing too */
.hero-copy h1 {
  letter-spacing: -0.025em;
}

@media (max-width: 700px) {
  .hero-slide {
    padding-top: 22px;
    padding-bottom: 60px;
  }

  .hero-slide .hero-grid {
    gap: 16px;
  }

  .hero-visual {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 5;
    padding: 8px;
  }

  .hero-slider .hero-visual.has-media img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }

  .hero-copy h1 {
    font-size: 27px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.015em;
  }

  .hero-copy > p {
    font-size: 14px !important;
    line-height: 1.95 !important;
  }

  .hero-actions {
    margin-top: 14px;
    gap: 10px;
  }

  .hero-actions .button,
  .hero-actions .button-small {
    min-height: 46px;
    padding-inline: 18px;
    font-size: 13px;
  }

  .hero-meta {
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.8;
  }
}