/* immagine-testo: il CSS delle composizioni, una parte per composizione (<variante>.php). Portato dagli <style> del sito Astro. */

/* resoconto */
.resoconto { padding: clamp(40px, 8vh, 96px) var(--margine) clamp(72px, 14vh, 140px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.resoconto:not(:has(.foto)) { grid-template-columns: minmax(0, 1fr); }
.resoconto .riquadro { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 56px); border-radius: var(--raggio); background: var(--fondo-alt); color: var(--testo); }
.resoconto .riquadro h2 { font-size: clamp(2rem, 4vw, var(--scala-4)); color: var(--titoli); max-width: 15ch; }
.resoconto .frase { margin-top: 18px; max-width: 46ch; }
.resoconto .righe { margin: 0; padding: 0; list-style: none; }
.resoconto .rec { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 13rem); align-items: baseline; gap: 6px 16px; padding: 18px 0; border-top: 1.5px solid rgb(36 60 60 / .35); }
.resoconto .rec-testo { font: 600 clamp(1.15rem, 1.7vw, 1.5rem)/1.2 var(--font-titoli); letter-spacing: -0.015em; }
.resoconto .rec-fonte { color: var(--testo-secondario); text-align: right; }
.resoconto .rec-fonte a { color: inherit; text-underline-offset: 3px; }
.resoconto .rec-fonte a:hover { color: var(--testo); }
.resoconto .spunta { position: relative; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo-scuro); align-self: start; }
.resoconto .spunta::after {
  content: ""; position: absolute; inset: 5px; background: var(--testo-su-scuro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.resoconto .riquadro-link { align-self: flex-start; margin-top: -16px; }
.resoconto .foto { aspect-ratio: 4 / 5; border-radius: var(--raggio); }
.resoconto .foto img { object-position: 60% 40%; }
@media (max-width: 860px) {
  .resoconto { grid-template-columns: minmax(0, 1fr); }
  .resoconto .rec { grid-template-columns: 24px minmax(0, 1fr); }
  .resoconto .rec-fonte { grid-column: 2; text-align: left; }
}

/* roberta */
.immagine-testo-roberta { position: relative; min-height: 100svh; background: var(--fondo-alt); display: grid; grid-template-columns: auto 1fr; overflow: hidden; }
.immagine-testo-roberta .foto { height: 100svh; aspect-ratio: 9 / 19; background: transparent; }
.immagine-testo-roberta .foto img { object-position: 50% 30%; }
.immagine-testo-roberta .roberta-testo { align-self: center; padding: 48px var(--margine) 48px clamp(24px, 7vw, 120px); max-width: 52rem; }
.immagine-testo-roberta .roberta-testo h2 { font-size: clamp(2.6rem, 6vw, var(--scala-6)); margin-bottom: .35em; color: var(--titoli); }
.immagine-testo-roberta .roberta-corpo p { font-size: clamp(1.3rem, 2.2vw, var(--scala-2)); line-height: 1.3; max-width: 24ch; }
.immagine-testo-roberta .roberta-corpo p + p { margin-top: .6em; }
.immagine-testo-roberta .roberta-testo > a { display: inline-block; margin-top: 1.4em; }
.immagine-testo-roberta .roberta-testo > .link-freccia { font-size: var(--scala-0); }
.immagine-testo-roberta .velo { position: absolute; inset: 0; z-index: 4; background: var(--fondo-scuro); pointer-events: none; display: none; }
html.motore-pronto .immagine-testo-roberta .velo { display: block; }
@media (max-width: 700px) {
  .immagine-testo-roberta { grid-template-columns: 1fr; }
  .immagine-testo-roberta .foto { height: 70svh; width: 100%; aspect-ratio: auto; }
  .immagine-testo-roberta .foto img { object-position: 50% 12%; }
}

/* storia */
.storia {
  padding: clamp(96px, 18vh, 200px) var(--margine) clamp(80px, 14vh, 160px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: start;
}
.storia .storia-testo { position: sticky; top: calc(var(--testata) + clamp(24px, 9vh, 104px)); }
.storia h2 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); color: var(--titoli); text-wrap: balance; margin-bottom: .55em; }
.storia h2 .intera { white-space: nowrap; }
.storia .storia-corpo p { font-size: clamp(1.15rem, 1.65vw, var(--scala-1)); line-height: 1.45; max-width: 34ch; }
.storia .storia-corpo p + p { margin-top: .8em; }
.storia .storia-testo > a { display: inline-block; margin-top: 1.4em; }

.storia .storia-figura { margin: 0; justify-self: end; width: min(100%, 30rem); }
.storia .storia-figura .foto { aspect-ratio: 9 / 16; border-radius: var(--raggio); }
.storia .storia-figura .foto img { object-position: 50% 30%; }
.storia figcaption { display: grid; gap: 10px; margin-top: 20px; }
.storia .storia-frase { font: var(--peso-titoli) clamp(1.5rem, 2.3vw, var(--scala-2))/1.08 var(--font-titoli); letter-spacing: -0.02em; color: var(--titoli); }

@media (max-width: 700px) {
  .storia { grid-template-columns: 1fr; gap: 48px; }
  .storia .storia-testo { position: static; }
  .storia .storia-figura { width: 82%; }
}