/* VINX / Foto e gerarchia editoriale discreta / 2026-10-25
 * Universale per le PAGINE SINGOLE, non per liste/landing.
 * Conserva semantica H1/H2/H3, immagini originali e layout responsive.
 * Da caricare ULTIMO, dopo ux-v2, density, embedded-media ecc.
 */
:root {
  --vinx-photo-width: 560px;
  --vinx-photo-height: 460px;
  --vinx-gallery-width: 760px;
}

/* H1 con un ruolo preciso: importante, ma non oversize. */
main article > section.pagehead h1,
main article .pagehead h1 {
  font-size: clamp(1.85rem, 2.45vw, 2.55rem) !important;
  line-height: 1.09 !important;
  letter-spacing: -.043em !important;
  margin-block: .18em .30em !important;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* H2/H3 semanticamente distinti, ma visivamente molto meno invadenti. */
main article h2,
main article section.prose h2,
main article .vinx-body-it h2,
main article .vinx-body-en h2 {
  font-size: clamp(1.16rem, 1.42vw, 1.38rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.018em !important;
  font-weight: 700;
}
main article h3,
main article section.prose h3,
main article .vinx-body-it h3,
main article .vinx-body-en h3 {
  font-size: clamp(1.07rem, 1.28vw, 1.2rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -.012em !important;
}
main article section.prose :is(h2, h3, h4) {
  margin-block: 1.0em .4em !important;
}
main article section.prose :is(p, ul, ol, blockquote) {
  margin-block: 0 .7em !important;
}
main article section.prose :is(p, ul, ol, blockquote):last-child {
  margin-bottom: 0 !important;
}
main article > section.prose {
  padding-block: clamp(.9rem, 1.8vw, 1.55rem) !important;
}
main article > section.credit-section {
  padding-block: clamp(.8rem, 1.5vw, 1.25rem) !important;
}

/* Regola trasversale: QUALSIASI foto all'interno dell'articolo non
 * deve superare le misure editoriali; nessun object-fit:cover che tagli
 * la fotografia, e nessun width:100% che la stiracchi a piena pagina. */
main article img:not(.card-image img),
main article picture img {
  max-inline-size: 100% !important;
  max-block-size: var(--vinx-photo-height) !important;
  object-fit: contain !important;
}

/* Foto principale: limite applicato SIA al figure che al suo <img>.
 * L'originale aveva media-hero img {width:100%;max-height:82vh;object-fit:cover}. */
main article .media-hero,
main article .wide-media .media-hero {
  inline-size: min(100%, var(--vinx-photo-width)) !important;
  max-inline-size: min(100%, var(--vinx-photo-width)) !important;
  block-size: auto !important;
  margin: clamp(.45rem, 1vw, .8rem) auto clamp(.9rem, 1.8vw, 1.35rem) !important;
}
main article .media-hero img,
main article .wide-media .media-hero img {
  display: block;
  inline-size: auto !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: var(--vinx-photo-height) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-inline: auto;
}

/* Gallerie: limite al contenitore e alle singole immagini. */
main article .gallery,
main article .wide-media .gallery {
  inline-size: min(100%, var(--vinx-gallery-width)) !important;
  max-inline-size: min(100%, var(--vinx-gallery-width)) !important;
  margin: clamp(.85rem, 1.8vw, 1.4rem) auto !important;
  gap: clamp(.6rem, 1.35vw, 1rem) !important;
}
main article .gallery figure {
  min-inline-size: 0;
  max-inline-size: 100%;
}
main article .gallery img,
main article .wide-media .gallery img {
  display: block;
  inline-size: auto !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: 380px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Immagini inserite direttamente nel testo Markdown/HTML, anche senza figure.
 * Non cambiare le miniature o gli elementi della navigazione. */
main article section.prose :is(img, picture img),
main article .vinx-body-it :is(img, picture img),
main article .vinx-body-en :is(img, picture img) {
  display: block;
  inline-size: auto !important;
  max-inline-size: min(100%, var(--vinx-photo-width)) !important;
  block-size: auto !important;
  max-block-size: var(--vinx-photo-height) !important;
  object-fit: contain !important;
  margin-block: .65rem 1rem;
}
main article figure figcaption { line-height: 1.4; }

/* Il contenitore generale può rimanere largo per i video e altri componenti;
 * le immagini, invece, hanno ora larghezze autonome. */
@media (max-width: 768px) {
  :root {
    --vinx-photo-width: 560px;
    --vinx-gallery-width: 760px;
    --vinx-photo-height: min(56svh, 460px);
  }
  main article > section.pagehead h1,
  main article .pagehead h1 {
    font-size: clamp(1.6rem, 6.6vw, 2rem) !important;
    line-height: 1.13 !important;
    letter-spacing: -.033em !important;
  }
  main article h2, main article section.prose h2,
  main article .vinx-body-it h2, main article .vinx-body-en h2 { font-size: clamp(1.11rem, 4.2vw, 1.27rem) !important; }
  main article h3, main article section.prose h3,
  main article .vinx-body-it h3, main article .vinx-body-en h3 { font-size: clamp(1.03rem, 3.8vw, 1.15rem) !important; }
  main article .media-hero img,
  main article .gallery img,
  main article section.prose img {
    max-inline-size: 100% !important;
    max-block-size: var(--vinx-photo-height) !important;
  }
  main article .gallery,
  main article .wide-media .gallery { grid-template-columns: 1fr !important; }
}