/* Pagine interne del sito pubblico (tutto tranne la home). Si carica dopo comune.css e ne usa
   colori, caratteri, spazi e angoli. Le pagine non hanno un .wrap: qui lo fanno .page-hero > div
   e .page-body > .prose. Testi, griglie, gallerie e tabelle prendono tutta la larghezza del contenuto,
   allineati agli stessi bordi; solo le foto singole restano larghe al massimo 720px. */

.page-hero > div,
.page-body > .prose {
  width: min(100% - 2 * var(--gut), var(--maxw));
  margin-inline: auto
}

/* ---------------------------------------------------------------- testata della pagina */
.page-hero { padding: var(--s-9) 0 var(--s-8) }

.page-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  align-items: start
}

.page-hero-grid > div:first-child { grid-column: 1 / span 6 }

.page-hero h1 { margin-bottom: 0 }

.page-hero .lead {
  margin: var(--s-5) 0 0;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted)
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font: 500 var(--t-small)/1.4 var(--font-text);
  color: var(--muted)
}

.crumbs a {
  color: var(--muted);
  transition: color var(--dur) var(--ease)
}

.crumbs a:hover { color: var(--ink) }
.crumbs span { color: var(--line-strong) }

.page-hero-media {
  grid-column: 7 / span 6;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface)
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* Loghi e icone dei service (PNG): interi, centrati sul fondo chiaro */
.page-hero-media img[src$=".png"] {
  object-fit: contain;
  padding: var(--s-7)
}

/* ---------------------------------------------------------------- testo */
.page-body { padding: 0 0 var(--s-10) }

.prose > :first-child { margin-top: 0 }

.prose h2 {
  margin: var(--s-8) 0 var(--s-4);
  font-size: clamp(26px, 1vw + 22px, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em
}

.prose h3 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em
}

.prose p,
.prose li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink)
}

.prose p { margin-bottom: var(--s-4) }

.prose ul,
.prose ol {
  margin: 0 0 var(--s-5);
  padding-left: 1.2em
}

.prose li { margin-bottom: var(--s-2) }
.prose li::marker { color: var(--muted) }

.callout {
  margin: var(--s-7) 0;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--surface)
}

.prose .callout h2,
.prose .callout h3 {
  margin: 0 0 var(--s-3);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em
}

.callout p:last-child { margin-bottom: 0 }

/* numeri in evidenza (Leo e Lions nel mondo, LCIF) */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-5) var(--s-6);
  margin: var(--s-6) 0 var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line)
}

.facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-1) }
.facts dt { font: 500 var(--t-label)/1.3 var(--font-text); color: var(--muted) }
.facts dd { margin: 0; font: var(--display-weight) 32px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink) }

.caption-only {
  font-size: var(--t-small) !important;
  color: var(--muted) !important
}

/* ---------------------------------------------------------------- schede di collegamento */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-7)
}

.link-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  min-height: 148px;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease)
}

.link-card:hover {
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--ink) 6%, var(--surface))
}

.link-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: var(--s-2)
}

.link-card img.icon {
  width: 64px;
  height: 66px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 4px
}

.link-card strong {
  font: 500 var(--t-card)/1.3 var(--font-text);
  letter-spacing: -0.01em
}

.link-card span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted)
}

.link-card b {
  margin-top: auto;
  padding-top: var(--s-2);
  font: 500 var(--t-small)/1 var(--font-text);
  color: var(--ink);
  transition: transform var(--dur) var(--ease)
}

.link-card:hover b { transform: translateX(3px) }

/* ---------------------------------------------------------------- persone e Club */
.person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: var(--s-5);
  margin: var(--s-5) 0 var(--s-7)
}

.person-card {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden
}

.person-card > :not(.person-photo) { padding-inline: var(--s-5) }

.person-card > :first-child:not(.person-photo) { padding-top: var(--s-5) }

.person-photo { margin-bottom: var(--s-4) }

.person-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%
}

.person-card .role {
  margin: 0 0 var(--s-1);
  font: 500 var(--t-label)/1.4 var(--font-text);
  color: var(--muted)
}

.person-card h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-card);
  font-weight: 500;
  letter-spacing: -0.01em
}

.person-card p {
  margin: 0 0 var(--s-1);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted)
}

.person-card a {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  color: var(--ink);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease)
}

.person-card a:hover { text-decoration-color: currentColor }

/* I loghi dei Club: interi, su fondo bianco */
.club-card .person-photo {
  margin: var(--s-4) var(--s-4) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg)
}

.club-card .person-photo img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--s-5)
}

/* ---------------------------------------------------------------- foto e gallerie */
.photo-section { margin-top: var(--s-9) }

.photo-section > h2 { margin-top: 0 }

.photo-section > p {
  margin: var(--s-5) 0 var(--s-3);
  font: 500 15px/1.5 var(--font-text);
  color: var(--muted)
}

.photo-section > p:has(.button) { margin: 0 0 var(--s-6) }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-5)
}

.gallery figure { margin: 0 }

.gallery img,
.prose > .figure img,
.photo-section > .figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface)
}

.figure { margin: 0 0 var(--s-5) }
.prose > .figure,
.photo-section > .figure { max-width: 720px }

.figure figcaption,
.map-figure figcaption {
  margin-top: var(--s-2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted)
}

.figure > a { display: block; overflow: hidden; border-radius: var(--r-md) }
.figure > a img { transition: transform 400ms var(--ease) }
.figure > a:hover img { transform: scale(1.03) }

/* Progetti con logo (TOD): schede quadrate */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-5);
  margin: var(--s-5) 0 var(--s-7)
}

.project-grid .figure { margin: 0; transition: transform var(--dur) var(--ease) }
.project-grid .figure:hover { transform: translateY(-2px) }
.project-grid .figure > a { background: var(--surface) }

.project-grid .figure img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--s-6);
  border-radius: 0;
  background: none
}

.project-grid .figure figcaption {
  margin-top: var(--s-3);
  font: 500 17px/1.35 var(--font-text);
  color: var(--ink)
}

.project-grid .figure figcaption span {
  display: block;
  margin-top: 2px;
  font: 400 var(--t-small)/1.4 var(--font-text);
  color: var(--muted)
}

/* Loghi dei temi nazionali */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin: var(--s-5) 0 var(--s-7)
}

.logo-row .figure { width: 220px; margin: 0 }

.logo-row .figure img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface)
}

/* Mappe */
.map-figure { margin: var(--s-5) 0 var(--s-7) }

.map-figure img {
  width: 100%;
  max-height: 640px;
  object-fit: contain;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface)
}

.map-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5)
}

.map-pair .map-figure { margin: var(--s-5) 0 var(--s-5) }
.map-pair .map-figure img { aspect-ratio: 1 }

.video-portrait {
  display: block;
  width: min(100%, 360px);
  margin: var(--s-5) 0;
  border-radius: var(--r-lg);
  background: var(--surface)
}

/* ---------------------------------------------------------------- moduli, mappe e calendari incorporati */
.embed {
  margin: var(--s-5) 0 var(--s-7);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg)
}

.embed iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0
}

.embed-tall iframe { height: 1000px }
.embed-map iframe { height: 380px }

/* ---------------------------------------------------------------- Albo d'oro */
.albo {
  width: 100%;
  margin: var(--s-5) 0 var(--s-7);
  border-collapse: collapse;
  font-size: 16px
}

.albo th {
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line-strong);
  font: 500 var(--t-label)/1.3 var(--font-text);
  color: var(--muted);
  text-align: left
}

.albo td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top
}

.albo td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted)
}

.albo td:nth-child(2) { font-weight: 500 }
.albo td:nth-child(3) { color: var(--muted) }

/* ---------------------------------------------------------------- larghezze */
@media (max-width: 1023px) {
  .page-hero { padding: var(--s-8) 0 var(--s-7) }
  .page-hero-grid > div:first-child,
  .page-hero-media { grid-column: 1 / -1 }
  .page-hero-media { margin-top: var(--s-6) }
}

@media (max-width: 639px) {
  .page-hero { padding: var(--s-7) 0 var(--s-6) }
  .page-body { padding-bottom: var(--s-9) }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) }
  .card-grid,
  .person-grid { grid-template-columns: 1fr }
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) }
  .person-card > :not(.person-photo) { padding-inline: var(--s-3) }
  .person-card > :first-child:not(.person-photo) { padding-top: var(--s-4) }
  .person-card h3 { font-size: 17px }
  .person-card p { font-size: 14px }
  .club-card .person-photo { margin: var(--s-3) }
  .club-card .person-photo img { padding: var(--s-3) }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) }
  .logo-row .figure { width: calc(50% - var(--s-3)) }
  .map-pair { grid-template-columns: 1fr; gap: 0 }
  .embed iframe { height: 460px }
  .embed-tall iframe { height: 1100px }
  .embed-map iframe { height: 300px }
  .albo { font-size: 15px }
  .albo td, .albo th { padding-right: var(--s-3) }
  .callout { padding: var(--s-5) }
  .facts dd { font-size: 24px }
}