/* ==========================================================================
   Centro Anna Rita Buonincontro — pagina COMUNICAZIONI CON L'UTENZA
   (sottomenu "Centro trasparente")
   --------------------------------------------------------------------------
   Ordine di caricamento:
     css/base.css → css/inner.css → css/servizio.css → css/comunicazioni.css
   Riutilizza da base.css: token, bottoni (.btn, .btn--white, .btn--teal),
   header/menu, .hero__bg / .hero__bg-img, .split__text, .splits /
   .splits__decor (onde di sfondo), .booking, .maps, footer, back-to-top.
   Riutilizza da inner.css: .cs-container, .cs-title, .cs-eyebrow, .page-hero,
   .sr-only. Da servizio.css: .sv-head, .sv-cta.
   Riferimento: artboard 1728px, stessi valori delle altre pagine interne.

   Struttura della pagina:
     .page-hero.cu-hero        → Hero (eyebrow + titolo + sottotitolo + CTA .page-hero__cta)
     .cu-flow > .cu-docs       → "Documenti & Trasparenza": introduzione,
                                 griglia di card PDF (.cu-doc), CTA
     .booking, .maps           → identici alla Home

   Indice
   01. Hero (variante con CTA)
   02. Documenti: contenitore e introduzione
   03. Card documento (.cu-doc)
   04. Responsive
   ========================================================================== */

/* 01. Hero --------------------------------------------------------------- */
/* Foto sempre in B/N come gli Hero delle altre pagine */
.cu-hero .hero__bg-img { background-position: 50% 62%; filter: grayscale(100%); }
.cu-hero .page-hero__text { max-width: 760px; }

/* 02. Documenti ---------------------------------------------------------- */
/* Onde di sfondo (waves-2) nella stessa posizione delle altre pagine: y = 5425.2px
   dall'inizio della pagina, la sezione inizia a y ≈ 604px → 4821.2px */
.cu-flow .splits__waves { transform: matrix(.706, -.709, .709, .706, -4238, 4821.2); }
.cu-docs { padding: 131px 0 137px; }
.cu-docs:focus { outline: none; }                              /* focus programmatico dalla CTA dell'Hero */
.cu-docs__eyebrow { color: var(--teal); }
.cu-docs__head .cs-title { margin-top: 18px; }
.cu-docs__head .split__text { max-width: 980px; margin: 27px auto 0; text-wrap: pretty; }

/* Griglia: 3 colonne nel container da 1210px (2 righe da 3 documenti) */
.cu-docs__grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 22px;
}
.cu-docs__cta { width: 507px; margin-top: 64px; }

/* 03. Card documento ----------------------------------------------------- */
/* Stessa famiglia delle card del sito: bordo ardesia + barra teal di 8px in basso */
.cu-doc {
  position: relative; display: flex; flex-direction: column; min-height: 318px;
  padding: 32px 32px 0 34px;
  background: var(--white); border: 1px solid rgba(79, 117, 139, .45);
  box-shadow: inset 0 -8px 0 var(--teal), 0 4px 20px rgba(0, 0, 0, .12);
  /* "translate" (e non "transform") per l'hover: non interferisce con il reveal GSAP */
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.cu-doc:hover, .cu-doc:focus-within {
  translate: 0 -6px;
  box-shadow: inset 0 -12px 0 var(--teal), 0 18px 34px -12px rgba(1, 100, 106, .35);
}
.cu-doc__type {
  padding: 5px 9px 4px; background: var(--mist); color: var(--teal);
  font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: .18em;
}
/* Anteprima del documento: a tutta larghezza in cima alla card, 16:10 come le card dei comunicati
   stampa; mostra la parte alta dell'immagine (prima pagina) e ha il tipo di file sopra. Se il
   documento non ha un'anteprima si usa quella predefinita (campo della sezione o immagine del tema). */
.cu-doc__media {
  position: relative; display: block; margin: -32px -32px 0 -34px;
  aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef0;
}
.cu-doc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: scale .9s var(--ease); }
.cu-doc:hover .cu-doc__media img { scale: 1.06; }
.cu-doc__media .cu-doc__type { position: absolute; top: 16px; right: 16px; background: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.cu-doc__tag {
  margin-top: 26px;
  font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1.3;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
}
.cu-doc__title { margin-top: 10px; font-family: var(--ff-head); font-weight: 700; font-size: 24px; line-height: 28px; color: var(--slate); }
.cu-doc__text { margin-bottom: 24px; margin-top: 12px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }

/* Azioni: ancorate in basso, stessa riga in tutte le card */
.cu-doc__actions {
  margin: auto -32px 0 -34px; padding: 18px 32px 26px 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(79, 117, 139, .2);
}
.cu-doc__link {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px; line-height: 20px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--teal);
  transition: color .3s var(--ease);
}
.cu-doc__link:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.cu-doc__arrow { display: inline-block; transition: transform .35s var(--ease); }
.cu-doc__link:hover .cu-doc__arrow { transform: translateX(4px); }

/* 04. Responsive --------------------------------------------------------- */
/* Hero: nel design delle pagine interne il testo parte 5px oltre il bordo del container */
@media (min-width: 1024px) {
  .cu-hero .page-hero__content { padding-left: 5px; }
}

/* ≤1199 — documenti su 2 colonne */
@media (max-width: 1199.98px) {
  .cu-docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ≤1023 — tablet */
@media (max-width: 1023.98px) {
  .cu-docs { padding: 80px 0 88px; }
  .cu-docs__grid { margin-top: 48px; }
  .cu-doc { min-height: 0; padding: 28px 26px 0 28px; }
  .cu-doc__media { margin: -28px -26px 0 -28px; }
  .cu-doc__actions { margin-inline: -28px -26px; padding: 16px 26px 24px 28px; }
  .cu-docs__cta { margin-top: 48px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {

  .cu-docs { padding: 56px 0 64px; }
  .cu-docs__head .split__text { margin-top: 18px; text-align: left; }
  .cu-docs__grid { margin-top: 32px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cu-doc { padding: 24px 22px 0; }
  .cu-doc__media { margin: -24px -22px 0; }
  .cu-doc__tag { margin-top: 22px; }
  .cu-doc__title { font-size: 22px; line-height: 26px; }
  .cu-doc__actions { margin-inline: -22px; padding: 14px 22px 22px; }
  .cu-docs__cta { width: 100%; margin-top: 32px; white-space: normal; line-height: 1.15; }
}