/* =========================================================
   La Favorita · /il-locale: lookbook in capitoli
   Righe editoriali: piena · coppia · terzina · mista (orizzontale + verticale) · coppia-v
   ========================================================= */
.lb-nav { background: var(--bianco); border-bottom: 3px solid var(--navy); }
.lb-indice { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-block: .7rem; }
.lb-indice::-webkit-scrollbar { display: none; }
.lb-indice a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; white-space: nowrap;
  text-decoration: none; font-family: var(--font-titoli); font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--lavanda); transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) { .lb-indice a:hover { background: var(--navy); color: var(--bianco); } }

.lb-capitolo { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); scroll-margin-top: 0; }
.lb-capitolo__head { display: grid; gap: .75rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.lb-capitolo__head h2 { font-size: clamp(3.2rem, 1.6rem + 7vw, 9rem); line-height: .85; }
.lb-capitolo__intro { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); /* ≥ 24px: il rosa vivo regge 3:1 */ line-height: 1.15; color: var(--rosa-vivo); max-width: 28ch; }
.blocco-navy .lb-capitolo__intro { color: var(--rosa); }
@media (min-width: 900px) { .lb-capitolo__head { grid-template-columns: auto 1fr; align-items: end; gap: 2.5rem; } }

.lb-riga { display: grid; gap: 14px; }
.lb-riga + .lb-riga { margin-top: clamp(14px, 2vw, 28px); }
.lb-foto a { display: block; overflow: hidden; border-radius: 12px; background: var(--navy-900); }
.lb-foto picture, .lb-foto img { width: 100%; height: 100%; }
.lb-foto img { object-fit: cover; transition: transform 1s var(--ease-out); }
.lb-foto a:focus-visible img { transform: scale(1.04); }
@media (hover: hover) { .lb-foto a:hover img { transform: scale(1.04); } }

.lb-riga--piena img { aspect-ratio: 3 / 2; }
.lb-riga--coppia img { aspect-ratio: 3 / 2; }
.lb-riga--terzina, .lb-riga--coppia-v { grid-template-columns: 1fr 1fr; }
.lb-riga--terzina img, .lb-riga--coppia-v img { aspect-ratio: 2 / 3; }
.lb-riga--mista img { aspect-ratio: 3 / 2; }
.lb-riga--mista .lb-foto:nth-child(2) img { aspect-ratio: 2 / 3; }
@media (max-width: 899px) {
  .lb-riga--terzina .lb-foto:nth-child(3) { grid-column: 1 / -1; }
  .lb-riga--terzina .lb-foto:nth-child(3) img { aspect-ratio: 3 / 2; }
  .lb-riga--mista .lb-foto:nth-child(2) { width: 70%; justify-self: end; }
}
@media (min-width: 900px) {
  .lb-riga--piena img { aspect-ratio: 2.1 / 1; }
  .lb-riga--coppia { grid-template-columns: 1fr 1fr; }
  .lb-riga--terzina { grid-template-columns: repeat(3, 1fr); }
  /* orizzontale (2 parti) + verticale (1 parte) alte uguali: l'orizzontale si ritaglia in 4:3 */
  .lb-riga--mista { grid-template-columns: 2fr 1fr; }
  .lb-riga--mista img { aspect-ratio: 4 / 3; }
  .lb-riga--coppia-v { max-width: 860px; margin-inline: auto; }
}

/* comparsa leggera (solo con JS e movimento attivo) */
.lb-anima .lb-foto { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1s var(--ease-out); }
.lb-anima .lb-foto.is-visible { opacity: 1; transform: none; }
.lb-anima .lb-riga .lb-foto:nth-child(2) { transition-delay: .08s; }
.lb-anima .lb-riga .lb-foto:nth-child(3) { transition-delay: .16s; }