/* ================================================================
   Photogallery Congressi (verbatim Figma node 1886:4, canvas 1883:152)
   Scopato sotto .pg-page per non collidere col CSS del tema.
   Header e footer arrivano dal tema (get_header / get_footer).
================================================================ */
.pg-page{
  --primary:#1a5276;--secondary:#2e86c1;--dark:#1c2833;--gray:#7f8c8d;
  --bg-light:#f4f6f8;--chip-bg:#eaf4fb;--card-border:#d9dee3;--green:#80bd1b;
  --edge:max(0px,(100% - 1440px) / 2);
  width:100%;overflow-x:hidden;font-family:'Asap Condensed',sans-serif;color:var(--dark);
}
.pg-page *{box-sizing:border-box}

/* ===== Header (1886:83) ===== */
.pg-page .pg-header{background:var(--chip-bg);display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px calc(var(--edge) + 120px) 48px}

.pg-page .pg-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;line-height:normal;white-space:nowrap}
.pg-page .pg-breadcrumb a{color:var(--primary);text-decoration:none}
.pg-page .pg-breadcrumb a:hover{text-decoration:underline}
.pg-page .pg-breadcrumb__sep{color:var(--gray)}
.pg-page .pg-breadcrumb__current{color:var(--dark);font-weight:600}

.pg-page .pg-header__titles{display:flex;flex-direction:column;align-items:center;gap:12px;width:1080px;max-width:100%;text-align:center}
.pg-page .pg-kicker{color:var(--green);font-size:12px;font-weight:800;letter-spacing:1.92px;line-height:normal}
.pg-page .pg-header__title{margin:0;font-size:52px;font-weight:700;line-height:1.05;color:var(--primary)}
.pg-page .pg-header__sub{margin:0;max-width:720px;font-size:15px;font-weight:400;line-height:1.55;color:var(--gray)}

/* ===== Gallery (1887:4) ===== */
.pg-page .pg-gallery{background:#fff;padding:64px calc(var(--edge) + 120px) 80px}
.pg-page .pg-layout{display:flex;align-items:flex-start;gap:40px;width:1200px;max-width:100%;margin:0 auto}
.pg-page .pg-main{flex:1 1 auto;min-width:0}
.pg-page .pg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;width:100%}

/* ---- card (1887:7) ---- */
.pg-page .pg-card{width:100%;flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;background:#fff;box-shadow:inset 0 0 0 1px var(--card-border);border-radius:12px;overflow:hidden}

.pg-page .pg-card__banner{background:var(--bg-light)}
.pg-page .pg-card__banner img{display:block;width:100%;height:auto}

.pg-page .pg-card__info{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;height:68px;padding:20px 24px;line-height:normal;white-space:nowrap;overflow:hidden}
.pg-page .pg-card__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-page .pg-card__edizione{font-size:16px;font-weight:700;color:var(--primary)}
.pg-page .pg-card__date{font-size:13px;font-weight:400;color:var(--gray)}


/* ===== Sotto i 1440px: la griglia si adatta senza comprimere le card ===== */
@media (max-width:1439px){
  .pg-page .pg-gallery{padding-left:max(24px,calc((100% - 1200px) / 2));padding-right:max(24px,calc((100% - 1200px) / 2))}
  .pg-page .pg-layout{width:100%}
}
@media (max-width:1120px){
  .pg-page .pg-header{padding-left:24px;padding-right:24px}
  .pg-page .pg-card{width:100%}
}
@media (max-width:640px){
  .pg-page .pg-header__title{font-size:40px}
  .pg-page .pg-card__info{white-space:normal;height:auto}
}

/* ---- Nota sul bordo (revisione pixel del 2026-08-14) ----
   In Figma lo stroke di card e bottone e' disegnato DENTRO il frame: non
   aggiunge dimensione. Con `border` in CSS i 2px si sommavano all'altezza
   auto (card 330 invece di 328, bottone 38 invece di 36) e riducevano il
   content box a 518px, spostando di 1px tutto quello che sta dentro.
   Reso con box-shadow inset: stesso segno grafico, zero contributo al layout. */

/* ---- Sotto i 1120 la colonna scende sotto ----
   In fondo al file apposta: le regole qui sopra hanno la stessa
   specificità e, a parità, vince l'ultima scritta. */
@media (max-width:1120px){
  .pg-page .pg-layout{flex-direction:column}
  .pg-page .pg-main,
  .pg-page .anma-side{width:100%}
}

/* ---- Sotto i 640 una card per riga ----
   A quella larghezza due card affiancate starebbero sotto i 160px:
   la locandina non si leggerebbe più. */
@media (max-width:640px){
  .pg-page .pg-grid{grid-template-columns:1fr}
}