/*
 * Trevalli · Layout421 (blocco mobile, fino a 767px)
 * Conversione 1:1 delle classi Tailwind di relume-test/src/components/Layout421.tsx.
 * Le variabili --tv-* sono in tokens.css.
 * Attenzione: nessun contenitore padre deve avere overflow: hidden/auto, altrimenti position: sticky non funziona.
 */

.tv-l421,
.tv-l421 *,
.tv-l421 *::before,
.tv-l421 *::after {
  box-sizing: border-box;
}

/* section: relative flex min-h-[140vh] flex-col overflow-x-clip pb-12 */
.tv-l421 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 140vh; /* durata dell'animazione ≈ 40vh di scroll, indipendente dal testo */
  overflow-x: clip; /* taglia solo in orizzontale: hidden romperebbe lo sticky */
  padding-bottom: 48px; /* tiene l'immagine più bassa dentro la sezione */
  margin: 0;
  font-family: var(--tv-font-family);
  color: var(--tv-color-text);
}

/* blocco testo: sticky top-0 z-0 mx-auto flex min-h-0 items-center justify-center */
.tv-l421__text {
  position: sticky;
  top: 0;
  z-index: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
}

/* pt-[140px] pb-4 text-center */
.tv-l421__text-inner {
  padding-top: 140px;
  padding-bottom: 16px;

padding-top: 100px;
  padding-bottom: 56px;

  text-align: center;
}

/* mx-auto w-full max-w-lg px-[5%] */
.tv-l421__content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 768px;
  padding-left: 5%;
  padding-right: 5%;
}

/* h1: mb-5 text-h2 font-bold */
.tv-l421 .tv-l421__title {
  margin: 0 0 20px;
  padding: 0;
  font-family: inherit;
  font-size: var(--tv-fs-h2);
  line-height: var(--tv-lh-h2);
  letter-spacing: var(--tv-ls-heading);
  font-weight: var(--tv-fw-heading);
  color: inherit;
  text-transform: none;
}

/* p: relative z-20 text-medium */
.tv-l421 .tv-l421__description {
  position: relative;
  z-index: 20;
  margin: 0;
  padding: 0;
  font-size: var(--tv-fs-medium);
  line-height: var(--tv-lh-medium);
  color: inherit;
}

/* contenitore immagini: sticky top-[212px] z-10 -mt-20 flex h-[60svh] flex-col justify-center */
.tv-l421__media {
  position: sticky;
  top: 212px;
  z-index: 10;
  margin-top: -80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60vh; /* fallback per browser senza svh */
  height: 60svh;
}

/* da 480px: sm:top-[110px] sm:h-[80svh] */
@media (min-width: 480px) {
  .tv-l421__media {
    top: 110px;
    height: 80vh;
    height: 80svh;
  }
}

/* relative flex size-full items-center justify-center */
.tv-l421__stage {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* singola immagine: absolute w-full max-w-[55vw] */
.tv-l421__item {
  position: absolute;
  width: 100%;
  max-width: 55vw;
  will-change: transform;
}

/* img: size-full rounded-image (immagini 1:1) */
.tv-l421 .tv-l421__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: var(--tv-radius-image);
  vertical-align: middle;
}