/*
 * Trevalli · Header80 (blocco desktop, da 768px)
 * Conversione 1:1 delle classi Tailwind di relume-test/src/components/Header80.tsx.
 * Le variabili --tv-* sono in tokens.css.
 * Soglie come in relume-test: 480px (sm), 768px (md), 992px (lg).
 * Attenzione: nessun contenitore padre deve avere overflow: hidden/auto, altrimenti position: sticky non funziona,
 * e il contenitore deve lasciar passare il margine negativo in fondo (-25vh).
 */

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

/* section: pointer-events-none relative -mb-[25vh] h-[150vh] px-[5%] md:h-[300vh] */
.tv-h80 {
  position: relative;
  height: 150vh;
  margin: 0 0 -25vh; /* anticipa il blocco successivo di 25vh a fine animazione */
  padding-left: 5%;
  padding-right: 5%;
  padding-left: 4%;
  padding-right: 4%;
  pointer-events: none; /* con il margine negativo la sezione copre il blocco successivo: non deve bloccarne i clic */
  font-family: var(--tv-font-family);
  color: var(--tv-color-text);
}

/* pannello: sticky top-0 h-screen overflow-hidden */
.tv-h80__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* colonna 1: absolute top-0 right-auto bottom-0 left-0 z-10 */
.tv-h80__col1-wrap {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  z-index: 10;
}

/* colonna 2: absolute top-0 right-0 bottom-0 left-auto z-0 (questo elemento si sposta) */
.tv-h80__col2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 0;
  will-change: transform;
}

/* flex flex-col gap-[26vw] pt-[70vh] (la colonna 1 si sposta) */
.tv-h80__col1,
.tv-h80__col2-inner {
  display: flex;
  flex-direction: column;
  gap: 26vw;
  padding-top: 70vh;
}
.tv-h80__col1 {
  will-change: transform;
}

/* riquadro immagine: relative h-[35vw] pt-[120%] sm:h-auto (rapporto 5:6) */
.tv-h80__item {
  position: relative;
  height: 35vw;
  padding-top: 120%;
}
.tv-h80__item--5,
.tv-h80__item--6 {
  opacity: 0.75;
}

.tv-h80__item--1 { width: 30vw; }
.tv-h80__item--2 { left: 52vw; margin-top: -46vw; width: 30vw; }
.tv-h80__item--3 { left: 4vw; margin-top: -5vw; width: 28vw; }
.tv-h80__item--4 { left: 64vw; margin-top: -45vw; width: 26vw; }
.tv-h80__item--5 { width: 28vw; }
.tv-h80__item--6 { right: 50vw; margin-top: -44vw; width: 26vw; }

/* img: absolute inset-0 size-full rounded-image object-cover */
.tv-h80 .tv-h80__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: var(--tv-radius-image);
  object-fit: cover;
}
/* slot senza immagine: non mostrare l'icona di immagine mancante */
.tv-h80 .tv-h80__img[src=""],
.tv-h80 .tv-h80__img:not([src]) {
  visibility: hidden;
}

/* testo: relative container flex h-full max-w-lg items-center pt-16 pb-24 text-center */
.tv-h80__text {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 96px;
  text-align: center;
}

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

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

/* sm (da 480px) */
@media (min-width: 480px) {
  .tv-h80__item { height: auto; }
}

/* md (da 768px) */
@media (min-width: 768px) {
  .tv-h80 { height: 300vh; }
  .tv-h80__text { padding-top: 96px; }
  .tv-h80 .tv-h80__title { margin-bottom: 24px; }
  .tv-h80__item--1 { width: 28vw; }
  .tv-h80__item--2 { width: 28vw; }
  .tv-h80__item--3 { width: 26vw; }
  .tv-h80__item--4 { width: 24vw; }
  .tv-h80__item--5 { width: 26vw; }
  .tv-h80__item--6 { width: 24vw; }
}

/* lg (da 992px) */
@media (min-width: 992px) {
  .tv-h80__text { padding-top: 112px; padding-bottom: 112px; }
  .tv-h80__item--1 { width: 22vw; }
  .tv-h80__item--2 { left: 58vw; width: 22vw; }
  .tv-h80__item--3 { width: 20vw; }
  .tv-h80__item--4 { width: 18vw; }
  .tv-h80__item--5 { width: 20vw; }
  .tv-h80__item--6 { right: 54vw; width: 18vw; }
}