/* ===== Hero Section – Amorismo ===== */

.am-hero {
  padding: var(--am-sp-4) var(--am-sp-6) var(--am-sp-8);
  text-align: center;
}

.am-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--am-sp-8);
  align-items: center;
  max-width: var(--am-max-w);
  margin: 0 auto;
  padding: var(--am-sp-8) var(--am-sp-6);
}

.am-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.am-hero__image {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(var(--am-shadow-hero));
}

.am-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--am-sp-6);
  text-align: left;
}

.am-hero__copy {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--am-home-text);
  margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Landing Hero – Home page only
   Cinema-poster hero with triptych silhouettes.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.am-landing-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--am-nav-h) clamp(var(--am-sp-6), 6vw, 8rem) clamp(var(--am-sp-6), 6vh, 5rem);
  overflow: hidden;
}

/* ── Photo triptych background ── */
.am-landing-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.am-landing-hero__photo {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
}

/* Vol I — dark burdeos atmosphere */
.am-landing-hero__photo--vol1 {
  left: 23%;
  width: 42%;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 68%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 68%, transparent 100%);
}

/* Vol II — brushstroke, center, layered */
.am-landing-hero__photo--vol2 {
  left: 45%;
  width: 48%;
  object-position: center;
  opacity: 0.45;
  mix-blend-mode: lighten;
}

/* Vol III — dark green atmosphere */
.am-landing-hero__photo--vol3 {
  right: -15%;
  left: auto;
  width: 62%;
  object-position: center;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%);
}

/* ── Gradient overlay — vignette only (bottom fade handled by __bg mask) ── */
.am-landing-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 85% 75% at 55% 40%,
      transparent 0%,
      var(--am-hero-vignette-mid) 55%,
      var(--am-hero-vignette-edge) 100%
    );
  pointer-events: none;
}


/* ── Content cluster — logo → tagline → CTA ── */
/* Two visual masses: [logo + tagline] grouped tight, [CTA] floats below with air. */
.am-landing-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-width: 520px;
}

.am-landing-hero__logo {
  display: block;
  /* Portrait ratio (654×990) — width controls height proportionally */
  width: clamp(150px, 18vw, 240px);
  height: auto;
  /* New logo is already white — no invert filter needed, only depth shadow */
  filter: drop-shadow(var(--am-shadow-landing-logo));
}

/* ── Hero form — reuses .am-contact__form system, only adds spacing ── */
.am-landing-hero__form {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}