/* immagine-testo: CSS delle composizioni, portato dallo <style> dei componenti Astro (src/sezioni/immagine-testo/) e limitato alla classe della sezione. */

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

/* immagine-testo/Storia.astro → .b-immagine-testo-storia */
  .storia.b-immagine-testo-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;
  }
  .b-immagine-testo-storia .storia-testo { position: sticky; top: calc(var(--testata) + clamp(24px, 9vh, 104px)); }
  .storia.b-immagine-testo-storia h2 { font-size: clamp(2.1rem, 4.6vw, 4.2rem); color: var(--titoli); text-wrap: balance; margin-bottom: .55em; }
  .b-immagine-testo-storia h2 .intera { white-space: nowrap; }
  .b-immagine-testo-storia .storia-corpo p { font-size: clamp(1.15rem, 1.65vw, var(--scala-1)); line-height: 1.45; max-width: 34ch; }
  .b-immagine-testo-storia .storia-corpo p + p { margin-top: .8em; }
  .b-immagine-testo-storia .storia-testo > a { display: inline-block; margin-top: 1.4em; }

  .b-immagine-testo-storia .storia-figura { margin: 0; justify-self: end; width: min(100%, 30rem); }
  .b-immagine-testo-storia .storia-figura .foto { aspect-ratio: 9 / 16; border-radius: var(--raggio); }
  .b-immagine-testo-storia .storia-figura .foto img { object-position: 50% 30%; }
  .b-immagine-testo-storia figcaption { display: grid; gap: 10px; margin-top: 20px; }
  .b-immagine-testo-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.b-immagine-testo-storia { grid-template-columns: 1fr; gap: 48px; }
    .b-immagine-testo-storia .storia-testo { position: static; }
    .b-immagine-testo-storia .storia-figura { width: 82%; }
  }

/* immagine-testo/Resoconto.astro → .b-immagine-testo-resoconto */
  .resoconto.b-immagine-testo-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)).b-immagine-testo-resoconto { grid-template-columns: minmax(0, 1fr); }
  .b-immagine-testo-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); }
  .b-immagine-testo-resoconto .riquadro h2 { font-size: clamp(2rem, 4vw, var(--scala-4)); color: var(--titoli); max-width: 15ch; }
  .b-immagine-testo-resoconto .frase { margin-top: 18px; max-width: 46ch; }
  .b-immagine-testo-resoconto .righe { margin: 0; padding: 0; list-style: none; }
  .b-immagine-testo-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); }
  .b-immagine-testo-resoconto .rec-testo { font: 600 clamp(1.15rem, 1.7vw, 1.5rem)/1.2 var(--font-titoli); letter-spacing: -0.015em; }
  .b-immagine-testo-resoconto .rec-fonte { color: var(--testo-secondario); text-align: right; }
  .b-immagine-testo-resoconto .rec-fonte a { color: inherit; text-underline-offset: 3px; }
  .b-immagine-testo-resoconto .rec-fonte a:hover { color: var(--testo); }
  .b-immagine-testo-resoconto .spunta { position: relative; top: .2em; width: 24px; height: 24px; border-radius: 50%; background: var(--fondo-scuro); align-self: start; }
  .b-immagine-testo-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;
  }
  .b-immagine-testo-resoconto .riquadro-link { align-self: flex-start; margin-top: -16px; }
  .resoconto.b-immagine-testo-resoconto .foto { aspect-ratio: 4 / 5; border-radius: var(--raggio); }
  .resoconto.b-immagine-testo-resoconto .foto img { object-position: 60% 40%; }
  @media (max-width: 860px) {
    .resoconto.b-immagine-testo-resoconto { grid-template-columns: minmax(0, 1fr); }
    .b-immagine-testo-resoconto .rec { grid-template-columns: 24px minmax(0, 1fr); }
    .b-immagine-testo-resoconto .rec-fonte { grid-column: 2; text-align: left; }
  }