/* =============================================================
   PCA Media Gallery — gallery.css
   Fase 1: Foundation — tokens + atomi condivisi
   Fase 2: Frontend — header, gallery index, album detail, lightbox
   ============================================================= */

/* ── 1. Font ────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── 2. Design tokens ───────────────────────────────────────── */

:root {
  /* ── Palette Ember (default) */
  --g-bg:         #0e0f12;
  --g-panel:      #15171c;
  --g-panel2:     #1b1e25;
  --g-line:       #262a33;
  --g-text:       #f3f1ec;
  --g-muted:      #8a8f99;
  --g-faint:      #5a5f6a;
  --g-accent:     oklch(72% 0.17 38);
  --g-accent-sub: oklch(72% 0.17 38 / 0.14);

  /* ── Typography */
  --g-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --g-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Border radius */
  --g-r-xs:   6px;
  --g-r-sm:   10px;
  --g-r-md:   12px;
  --g-r-lg:   14px;
  --g-r-xl:   18px;
  --g-r-pill: 999px;

  /* ── Shadows */
  --g-shadow-hover:    0 12px 30px #0006;
  --g-shadow-lightbox: 0 0 0 1px #ffffff10, 0 4px 40px #0007;
  --g-shadow-play:     0 10px 30px #0008;

  /* ── Status palette (token condivisi — usati dal backoffice) */
  --status-ricevuto-fg:  oklch(78% 0.10 240);
  --status-ricevuto-bg:  oklch(78% 0.10 240 / 0.14);
  --status-ricevuto-dot: oklch(72% 0.14 240);

  --status-download-fg:  oklch(82% 0.13 80);
  --status-download-bg:  oklch(82% 0.13 80 / 0.14);
  --status-download-dot: oklch(75% 0.16 75);

  --status-scaricato-fg:  oklch(82% 0.13 150);
  --status-scaricato-bg:  oklch(82% 0.13 150 / 0.14);
  --status-scaricato-dot: oklch(72% 0.16 145);

  --status-galleria-fg:  oklch(74% 0.04 250);
  --status-galleria-bg:  oklch(74% 0.04 250 / 0.10);
  --status-galleria-dot: oklch(60% 0.04 250);

  --status-errore-fg:  oklch(76% 0.16 28);
  --status-errore-bg:  oklch(76% 0.16 28 / 0.14);
  --status-errore-dot: oklch(64% 0.20 28);

  --status-primo-fg:  oklch(82% 0.13 80);
  --status-primo-bg:  oklch(82% 0.13 80 / 0.14);
  --status-primo-dot: oklch(75% 0.16 75);

  --status-attivo-fg:  oklch(82% 0.13 150);
  --status-attivo-bg:  oklch(82% 0.13 150 / 0.14);
  --status-attivo-dot: oklch(72% 0.16 145);

  /* ── KPI card tone colors (sparkline e delta) */
  --kpi-neutral: oklch(72% 0.04 250);
  --kpi-good:    oklch(72% 0.14 145);
  --kpi-warn:    oklch(75% 0.16 75);
}

/* Palette alternativa: Court */
[data-palette="court"] {
  --g-bg:         #0a1410;
  --g-panel:      #11201a;
  --g-panel2:     #172a22;
  --g-line:       #23382e;
  --g-text:       #eef4ee;
  --g-muted:      #85988e;
  --g-faint:      #56685e;
  --g-accent:     oklch(74% 0.15 145);
  --g-accent-sub: oklch(74% 0.15 145 / 0.14);
}

/* Palette alternativa: Ink */
[data-palette="ink"] {
  --g-bg:         #0a0b10;
  --g-panel:      #13141c;
  --g-panel2:     #191b25;
  --g-line:       #252834;
  --g-text:       #eef0f6;
  --g-muted:      #8a8ea0;
  --g-faint:      #555867;
  --g-accent:     oklch(72% 0.17 250);
  --g-accent-sub: oklch(72% 0.17 250 / 0.14);
}

/* Palette alternativa: Paper (light mode) */
[data-palette="paper"] {
  --g-bg:         #f4f1ea;
  --g-panel:      #ffffff;
  --g-panel2:     #ebe6db;
  --g-line:       #d8d2c3;
  --g-text:       #16140f;
  --g-muted:      #6e6759;
  --g-faint:      #a39c8d;
  --g-accent:     oklch(58% 0.18 28);
  --g-accent-sub: oklch(58% 0.18 28 / 0.12);
}

/* ── 3. Page base ───────────────────────────────────────────── */
/* Attivo su .g-page per non toccare le pagine admin esistenti  */

.g-page {
  background:              var(--g-bg);
  color:                   var(--g-text);
  font-family:             var(--g-font-display);
  font-size:               14px;
  line-height:             1.5;
  min-height:              100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.g-page *,
.g-page *::before,
.g-page *::after { box-sizing: border-box; }

.g-page a  { color: inherit; text-decoration: none; }
.g-page h1,
.g-page h2,
.g-page h3 { margin: 0; font-family: var(--g-font-display); }
.g-page p  { margin: 0; }

/* ── 4. Atomo 1 — .g-mono ───────────────────────────────────── */
/* Firma del sistema: sempre uppercase + tracking positivo.     */
/* Usato per date, conteggi, eyebrow, etichette, badge.         */

.g-mono {
  font-family:    var(--g-font-mono);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.06em;
  line-height:    1.2;
  text-transform: uppercase;
  color:          var(--g-muted);
}

.g-mono-xs {
  font-family:    var(--g-font-mono);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.08em;
  line-height:    1.2;
  text-transform: uppercase;
}

.g-mono--accent { color: var(--g-accent); }
.g-mono--faint  { color: var(--g-faint); }
.g-mono--text   { color: var(--g-text); }

/* ── 5. Atomo 2 — .g-btn ────────────────────────────────────── */

.g-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  border:          0;
  border-radius:   var(--g-r-sm);
  cursor:          pointer;
  font-family:     var(--g-font-display);
  font-weight:     600;
  white-space:     nowrap;
  /* size default */
  padding:         10px 16px;
  font-size:       13.5px;
  transition:      opacity 140ms ease, background 140ms ease;
}

.g-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.g-btn--sm { padding: 7px 12px;  font-size: 12.5px; }
.g-btn--xs { padding: 5px 8px;   font-size: 11px; }

.g-btn--primary {
  background: var(--g-text);
  color:      var(--g-bg);
}
.g-btn--primary:hover { opacity: 0.88; }

.g-btn--ghost {
  background:    transparent;
  color:         var(--g-text);
  border:        1px solid var(--g-line);
  font-weight:   500;
}
.g-btn--ghost:hover { background: var(--g-panel); }

.g-btn--glass {
  background:      #ffffff14;
  color:           var(--g-text);
  border:          1px solid #ffffff22;
  backdrop-filter: blur(10px);
  font-weight:     500;
}

.g-btn--danger {
  background:  transparent;
  color:       var(--status-errore-fg);
  border:      1px solid oklch(76% 0.16 28 / 0.4);
  font-weight: 500;
}

.g-btn--block { width: 100%; }

/* ── 6. Atomo 3 — .g-panel ──────────────────────────────────── */
/* Contenitore card standard — usato in ogni schermata admin.   */

.g-panel {
  background:    var(--g-panel);
  border:        1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  overflow:      hidden;
}

.g-panel__header {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       18px 20px 14px;
  border-bottom: 1px solid var(--g-line);
}

.g-panel__title {
  font-size:      19px;
  font-weight:    700;
  letter-spacing: -0.015em;
  line-height:    1.1;
}

.g-panel__subtitle {
  font-size:  12.5px;
  color:      var(--g-muted);
  margin-top: 4px;
}

.g-panel__spacer { flex: 1; }

.g-panel__action {
  color:       var(--g-accent);
  font-size:   13px;
  font-weight: 600;
}

.g-panel__body { padding: 18px 20px; }

/* ── 7. Atomo 4 — .g-field ──────────────────────────────────── */
/* Form field: .g-mono come label + panel2 input.               */

.g-field {
  display: grid;
  gap:     6px;
}

.g-field__input,
.g-field__select,
.g-field__textarea {
  width:         100%;
  padding:       11px 12px;
  border-radius: var(--g-r-sm);
  background:    var(--g-panel2);
  border:        1px solid var(--g-line);
  color:         var(--g-text);
  font-family:   var(--g-font-display);
  font-size:     13.5px;
  line-height:   1.5;
  outline:       0;
  box-sizing:    border-box;
  transition:    border-color 140ms;
}

.g-field__input:focus,
.g-field__select:focus,
.g-field__textarea:focus { border-color: var(--g-accent); }

.g-field__input::placeholder,
.g-field__textarea::placeholder { color: var(--g-faint); }

.g-field__textarea {
  resize:     vertical;
  min-height: 90px;
}

.g-field__hint {
  font-size:  11.5px;
  color:      var(--g-faint);
  margin-top: 2px;
}

/* ── 8. Atomo 5 — .g-status-pill ───────────────────────────── */
/* Pill semantica con dot colorato — varianti via classe BEM.   */

.g-status-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 10px 4px 8px;
  border-radius:  var(--g-r-pill);
  font-family:    var(--g-font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space:    nowrap;
}

.g-status-pill__dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  flex-shrink:   0;
}

.g-status-pill--ricevuto {
  background: var(--status-ricevuto-bg);
  color:      var(--status-ricevuto-fg);
  border:     1px solid oklch(78% 0.10 240 / 0.13);
}
.g-status-pill--ricevuto .g-status-pill__dot { background: var(--status-ricevuto-dot); }

.g-status-pill--download {
  background: var(--status-download-bg);
  color:      var(--status-download-fg);
  border:     1px solid oklch(82% 0.13 80 / 0.13);
}
.g-status-pill--download .g-status-pill__dot { background: var(--status-download-dot); }

.g-status-pill--scaricato {
  background: var(--status-scaricato-bg);
  color:      var(--status-scaricato-fg);
  border:     1px solid oklch(82% 0.13 150 / 0.13);
}
.g-status-pill--scaricato .g-status-pill__dot { background: var(--status-scaricato-dot); }

.g-status-pill--galleria {
  background: var(--status-galleria-bg);
  color:      var(--status-galleria-fg);
  border:     1px solid oklch(74% 0.04 250 / 0.13);
}
.g-status-pill--galleria .g-status-pill__dot { background: var(--status-galleria-dot); }

.g-status-pill--errore {
  background: var(--status-errore-bg);
  color:      var(--status-errore-fg);
  border:     1px solid oklch(76% 0.16 28 / 0.13);
}
.g-status-pill--errore .g-status-pill__dot { background: var(--status-errore-dot); }

.g-status-pill--primo {
  background: var(--status-primo-bg);
  color:      var(--status-primo-fg);
  border:     1px solid oklch(82% 0.13 80 / 0.13);
}
.g-status-pill--primo .g-status-pill__dot { background: var(--status-primo-dot); }

.g-status-pill--attivo {
  background: var(--status-attivo-bg);
  color:      var(--status-attivo-fg);
  border:     1px solid oklch(82% 0.13 150 / 0.13);
}
.g-status-pill--attivo .g-status-pill__dot { background: var(--status-attivo-dot); }

/* ── 9. Atomo 6 — .g-service-pill ──────────────────────────── */
/* Pill per servizio esterno — 4px radius, no dot.              */

.g-service-pill {
  display:        inline-flex;
  padding:        3px 8px;
  border-radius:  4px;
  font-family:    var(--g-font-mono);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.04em;
  white-space:    nowrap;
}

.g-service-pill--wetransfer {
  background: oklch(78% 0.13 35 / 0.14);
  color:      oklch(78% 0.13 35);
}

.g-service-pill--dropbox {
  background: oklch(78% 0.13 245 / 0.14);
  color:      oklch(78% 0.13 245);
}

.g-service-pill--gdrive {
  background: oklch(82% 0.13 150 / 0.14);
  color:      oklch(82% 0.13 150);
}

.g-service-pill--onedrive {
  background: oklch(72% 0.13 250 / 0.14);
  color:      oklch(72% 0.13 250);
}

/* ── 10. Atomo 7 — .g-chip / .g-filter-chip / .g-active-chip ─ */

/* Chip pubblico: pill 999px — Gallery index filter strip */
.g-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 14px;
  border-radius: var(--g-r-pill);
  font-family:   var(--g-font-display);
  font-size:     13px;
  font-weight:   500;
  color:         var(--g-muted);
  background:    transparent;
  border:        1px solid var(--g-line);
  cursor:        pointer;
  transition:    color 140ms, background 140ms, border-color 140ms;
}
.g-chip:hover     { color: var(--g-text); }
.g-chip.is-active {
  background:   var(--g-accent-sub);
  color:        var(--g-accent);
  border-color: var(--g-accent);
}

/* FilterChip admin: 10px radius, panel2 bg, mono label + valore */
.g-filter-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 14px;
  border-radius: var(--g-r-sm);
  background:    var(--g-panel2);
  border:        1px solid var(--g-line);
  cursor:        pointer;
  font-family:   var(--g-font-display);
}
.g-filter-chip__value {
  font-size:   13px;
  font-weight: 500;
  color:       var(--g-text);
}
.g-filter-chip__arrow {
  color:     var(--g-muted);
  font-size: 10px;
}

/* ActiveChip: filtro attivo rimovibile */
.g-active-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 6px 5px 11px;
  border-radius: var(--g-r-pill);
  background:    var(--g-accent-sub);
  color:         var(--g-accent);
  font-size:     12px;
  font-weight:   600;
  border:        1px solid oklch(72% 0.17 38 / 0.20);
}
.g-active-chip__remove {
  background:  transparent;
  border:      0;
  color:       inherit;
  cursor:      pointer;
  padding:     0 4px;
  font-size:   14px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   FASE 2 — Frontend surfaces
   Header · Hero · Folder tree · Album cards · Masonry · Lightbox
   ═══════════════════════════════════════════════════════════════ */

/* ── Override Pico/mg-body conflicts inside .g-page ─────────── */

.g-page p            { color: inherit; margin: 0; }
.g-page a            { color: inherit; text-decoration: none; }
.g-page ul           { list-style: none; margin: 0; padding: 0; }
.g-page h1, .g-page h2, .g-page h3,
.g-page h4, .g-page h5, .g-page h6 { letter-spacing: inherit; margin: 0; }
.g-page *,
.g-page *::before,
.g-page *::after { box-sizing: border-box; }

/* Neutralize existing mg-gallery-main padding — layout managed by .g-px */
.g-page .mg-gallery-main {
  padding: 0;
  max-width: none;
}

/* ── Layout helper ───────────────────────────────────────────── */

.g-px {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 24px;
}

/* ── Header / Navigation ─────────────────────────────────────── */

.g-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       oklch(from var(--g-bg) l c h / 0.88);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:    1px solid var(--g-line);
}

.g-header__inner {
  display:     flex;
  align-items: center;
  gap:         24px;
  height:      60px;
}

.g-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.g-brand__logo {
  width:  36px;
  height: 36px;
  object-fit: contain;
}

.g-brand__name {
  font-size:   15px;
  font-weight: 600;
  color:       var(--g-text);
  line-height: 1.2;
}

.g-brand__sub {
  display:     block;
  font-size:   11px;
  font-weight: 400;
  color:       var(--g-muted);
  font-family: var(--g-font-mono);
}

.g-nav {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-left: auto;
}

.g-nav__link {
  padding:       8px 14px;
  border-radius: var(--g-r-sm);
  font-size:     14px;
  font-weight:   500;
  color:         var(--g-muted);
  transition:    color 140ms, background 140ms;
}

.g-nav__link:hover {
  color:      var(--g-text);
  background: var(--g-panel);
}

.g-nav__link.is-active {
  color: var(--g-accent);
}

.g-nav__cta {
  padding:       8px 16px;
  border-radius: var(--g-r-sm);
  background:    var(--g-panel2);
  border:        1px solid var(--g-line);
  font-size:     14px;
  font-weight:   500;
  color:         var(--g-text);
  cursor:        pointer;
  transition:    border-color 140ms;
}

.g-nav__cta:hover { border-color: var(--g-accent); }

.g-nav__link--staff {
  font-size: 12px;
  opacity:   0.6;
}
.g-nav__link--staff:hover { opacity: 1; }

/* ── Hero block ──────────────────────────────────────────────── */

.g-hero {
  padding: 72px 0 56px;
  text-align: center;
}

.g-hero__kicker {
  font-family:    var(--g-font-mono);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--g-accent);
  margin-bottom:  16px;
}

.g-hero__h1 {
  font-size:   52px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color:       var(--g-text);
  margin-bottom: 16px;
}

.g-hero__sub {
  font-size:   17px;
  font-weight: 400;
  color:       var(--g-muted);
  max-width:   560px;
  margin:      0 auto 36px;
  line-height: 1.6;
}

/* ── Search row + stat chips ─────────────────────────────────── */

.g-search-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  max-width:   620px;
  margin:      0 auto 20px;
}

.g-search {
  position: relative;
  flex:     1;
}

.g-search__input {
  width:         100%;
  height:        44px;
  padding:       0 16px 0 42px;
  border-radius: var(--g-r-pill);
  background:    var(--g-panel);
  border:        1px solid var(--g-line);
  color:         var(--g-text);
  font-family:   var(--g-font-display);
  font-size:     14px;
  outline:       0;
  transition:    border-color 140ms;
}

.g-search__input:focus  { border-color: var(--g-accent); }
.g-search__input::placeholder { color: var(--g-faint); }

.g-search__icon {
  position:   absolute;
  left:       14px;
  top:        50%;
  transform:  translateY(-50%);
  color:      var(--g-muted);
  pointer-events: none;
  font-size:  16px;
}

.g-stat {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 14px;
  border-radius: var(--g-r-pill);
  background:    var(--g-panel);
  border:        1px solid var(--g-line);
  font-family:   var(--g-font-mono);
  font-size:     11px;
  color:         var(--g-muted);
  white-space:   nowrap;
  flex-shrink:   0;
}

.g-stat__val {
  font-weight: 600;
  color:       var(--g-text);
}

/* ── Filter strip ────────────────────────────────────────────── */

.g-filter-strip {
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-wrap:       wrap;
  justify-content: center;
  margin-bottom:   48px;
}

.g-filter-strip__label {
  font-family:    var(--g-font-mono);
  font-size:      11px;
  letter-spacing: 0.08em;
  color:          var(--g-faint);
  margin-right:   4px;
}

/* ── Year section (top-level folder group) ───────────────────── */

.g-year-section {
  margin-bottom: 56px;
}

.g-year-header {
  display:       flex;
  align-items:   baseline;
  gap:           16px;
  padding:       20px 0 16px;
  border-bottom: 1px solid var(--g-line);
  margin-bottom: 24px;
}

.g-year-num {
  font-size:      120px;
  font-weight:    700;
  line-height:    0.85;
  letter-spacing: -0.04em;
  color:          var(--g-text);
  font-variant-numeric: tabular-nums;
}

.g-year-num__sep {
  color: var(--g-faint);
}

.g-year-meta {
  flex: 1;
}

.g-year-label {
  font-size:   13px;
  font-weight: 500;
  color:       var(--g-muted);
  margin-bottom: 4px;
}

.g-year-count {
  font-family: var(--g-font-mono);
  font-size:   11px;
  color:       var(--g-faint);
}

.g-year-toggle {
  margin-left: auto;
  background:  transparent;
  border:      1px solid var(--g-line);
  color:       var(--g-muted);
  border-radius: var(--g-r-pill);
  padding:     6px 14px;
  font-family: var(--g-font-display);
  font-size:   13px;
  cursor:      pointer;
  transition:  color 140ms, border-color 140ms;
}

.g-year-toggle:hover { color: var(--g-text); border-color: var(--g-muted); }

/* ── Folder (competition / category) ────────────────────────── */

.g-folder {
  margin-bottom: 32px;
}

.g-folder__head {
  display:         flex;
  align-items:     center;
  gap:             12px;
  cursor:          pointer;
  padding:         12px 0;
  border-bottom:   1px solid var(--g-line);
  margin-bottom:   20px;
  user-select:     none;
}

.g-folder__chevron {
  width:        20px;
  height:       20px;
  border-radius: 50%;
  background:   var(--g-panel);
  border:       1px solid var(--g-line);
  color:        var(--g-muted);
  font-size:    11px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  flex-shrink:  0;
  transition:   transform 180ms;
}

.g-folder.is-open .g-folder__chevron { transform: rotate(90deg); }

.g-folder__name {
  font-size:   16px;
  font-weight: 600;
  color:       var(--g-text);
  flex:        1;
}

.g-folder__count {
  font-family: var(--g-font-mono);
  font-size:   11px;
  color:       var(--g-faint);
}

.g-folder--inner {
  margin-left:   24px;
  padding-left:  16px;
  border-left:   1px solid var(--g-line);
  margin-bottom: 20px;
}

.g-folder--inner .g-folder__head {
  padding:   8px 0;
  border:    0;
  margin:    0 0 12px;
}

.g-folder--inner .g-folder__name {
  font-size:   14px;
  font-weight: 500;
  color:       var(--g-muted);
}

/* ── Accordion body (animata con JS) ─────────────────────────── */

.g-accordion__body {
  display:            grid;
  grid-template-rows: 1fr;
  overflow:           hidden;
  transition:         grid-template-rows 240ms ease;
}

.g-accordion__body.is-collapsed {
  grid-template-rows: 0fr;
}

.g-accordion__inner {
  min-height: 0;
}

/* ── Album card grid ─────────────────────────────────────────── */

.g-album-row {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   16px;
  margin-bottom:         8px;
}

/* ── Album card ──────────────────────────────────────────────── */

.g-album-card {
  display:        flex;
  flex-direction: column;
  border-radius:  var(--g-r-lg);
  background:     var(--g-panel);
  border:         1px solid var(--g-line);
  overflow:       hidden;
  transition:     transform 200ms, box-shadow 200ms, border-color 200ms;
  cursor:         pointer;
  text-decoration: none;
  color:          inherit;
}

.g-album-card:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--g-shadow-hover);
  border-color: oklch(from var(--g-line) l c h / 0.8);
}

.g-album-card__cover {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  flex-shrink:  0;
  background:   var(--g-panel2);
}

.g-album-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

/* Div sostitutivo di <img> quando è impostato un crop rettangolare sulla copertina */
.g-cover-crop-bg {
  width:               100%;
  height:              100%;
  background-repeat:   no-repeat;
  transition:          background-position 300ms ease, background-size 300ms ease;
}

.g-album-card:hover .g-album-card__img { transform: scale(1.04); }

.g-album-card__badge {
  position:      absolute;
  top:           10px;
  left:          10px;
  padding:       3px 8px;
  border-radius: var(--g-r-pill);
  background:    var(--g-accent);
  color:         #0e0f12;
  font-family:   var(--g-font-mono);
  font-size:     9px;
  font-weight:   700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.g-album-card__meta {
  display:         grid;
  gap:             6px;
  align-items:     start;
  padding:         12px 14px;
  border-top:      1px solid var(--g-line);
  background:      var(--g-panel);
  flex-shrink:     0;
}

.g-album-card__name {
  display:             -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  2;
  overflow:            hidden;
  font-size:           13px;
  font-weight:         600;
  color:               var(--g-text);
  line-height:         1.35;
  white-space:         normal;
  text-wrap:           balance;
  min-height:          calc(1.35em * 2);
}

.g-album-card__counts {
  font-family: var(--g-font-mono);
  font-size:   10px;
  color:       var(--g-faint);
  white-space: nowrap;
}

/* Compact variant: no cover, just text row */
.g-album-card--compact {
  flex-direction: row;
  align-items:    center;
  border-radius:  var(--g-r-sm);
  height:         44px;
  padding:        0 14px;
}

.g-album-card--compact .g-album-card__cover { display: none; }

.g-album-card--compact .g-album-card__meta {
  flex:       1;
  padding:    0;
  border:     0;
  background: transparent;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */

.g-breadcrumb {
  display:     flex;
  align-items: center;
  flex-wrap:   nowrap;
  gap:         8px;
  font-family: var(--g-font-mono);
  font-size:   12px;
  color:       var(--g-faint);
  padding:     20px 0 8px;
  min-width:   0;
}

.g-breadcrumb__sep { color: var(--g-faint); flex-shrink: 0; }

.g-breadcrumb__link {
  color:       var(--g-muted);
  flex-shrink: 0;
  transition:  color 140ms;
}

.g-breadcrumb__link:hover { color: var(--g-text); }

.g-breadcrumb__item {
  display:     flex;
  align-items: center;
  gap:         8px;
  min-width:   0;
  overflow:    hidden;
  flex-shrink: 3;
}

.g-breadcrumb__item--current {
  flex-shrink: 1;
}

.g-breadcrumb__folder {
  color:         var(--g-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.g-breadcrumb__current {
  color:         var(--g-text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.g-breadcrumb__ellipsis {
  display:     none;
  flex-shrink: 0;
  color:       var(--g-faint);
}

/* ── Album detail: title block + info card ───────────────────── */

.g-title-block {
  display:       grid;
  grid-template-columns: 1fr auto;
  gap:           24px;
  align-items:   start;
  padding:       32px 0 28px;
  border-bottom: 1px solid var(--g-line);
  margin-bottom: 32px;
}

.g-title-block__h1 {
  font-size:      40px;
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.1;
  color:          var(--g-text);
  margin-bottom:  8px;
}

.g-title-block__date {
  font-family: var(--g-font-mono);
  font-size:   12px;
  color:       var(--g-muted);
  margin-bottom: 12px;
}

.g-title-block__desc {
  font-size:   15px;
  color:       var(--g-muted);
  line-height: 1.65;
  max-width:   680px;
}
.g-title-block__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  margin-top: 14px;
}
.g-title-block__actions a.g-btn--cronaca,
.g-title-block__actions a.g-btn--cronaca:link,
.g-title-block__actions a.g-btn--cronaca:visited {
  border:          1px solid #0f766e !important;
  background:      #0f766e !important;
  color:           #ffffff !important;
  text-decoration: none !important;
}
.g-title-block__actions a.g-btn--cronaca:hover,
.g-title-block__actions a.g-btn--cronaca:focus-visible {
  border-color: #0b5f58 !important;
  background:   #0b5f58 !important;
  color:        #ffffff !important;
}

.g-info-card {
  padding:       20px 22px;
  border-radius: var(--g-r-md);
  background:    var(--g-panel);
  border:        1px solid var(--g-line);
  min-width:     180px;
  flex-shrink:   0;
}

.g-info-card__row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             16px;
  padding:         6px 0;
  border-bottom:   1px solid var(--g-line);
}

.g-info-card__row:last-child { border-bottom: 0; }

.g-info-card__label {
  font-family: var(--g-font-mono);
  font-size:   10px;
  letter-spacing: 0.08em;
  color:       var(--g-faint);
}

.g-info-card__val {
  font-family: var(--g-font-mono);
  font-size:   13px;
  font-weight: 600;
  color:       var(--g-text);
}

/* ── Section header ──────────────────────────────────────────── */

.g-section-h {
  display:     flex;
  align-items: baseline;
  gap:         12px;
  margin-bottom: 20px;
}

.g-section-h__title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--g-text);
  letter-spacing: -0.01em;
}

.g-section-h__count {
  font-family: var(--g-font-mono);
  font-size:   11px;
  color:       var(--g-faint);
}

.g-media-pager {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin: -6px 0 18px;
}

.g-media-pager__status {
  color: var(--g-muted);
  font-family: var(--g-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g-media-pager__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.g-media-pager__link {
  align-items: center;
  background: var(--g-panel);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-pill);
  color: var(--g-text);
  display: inline-flex;
  font-family: var(--g-font-mono);
  font-size: 11px;
  justify-content: center;
  min-width: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.g-media-pager__link:hover {
  border-color: var(--g-accent);
}

.g-media-pager__link.is-current {
  background: var(--g-accent-sub);
  border-color: var(--g-accent);
  color: var(--g-text);
}

/* ── Video section ───────────────────────────────────────────── */

.g-video-section { margin-bottom: 52px; }

.g-video-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
}

.g-video-card {
  position:      relative;
  border-radius: var(--g-r-md);
  overflow:      hidden;
  background:    var(--g-panel);
  border:        1px solid var(--g-line);
  cursor:        pointer;
  transition:    transform 200ms, box-shadow 200ms;
}

.g-video-card:hover {
  transform:  translateY(-2px);
  box-shadow: var(--g-shadow-hover);
}

.g-video-card__thumb {
  width:       100%;
  aspect-ratio: 16/9;
  object-fit:  cover;
  display:     block;
  background:  var(--g-panel2);
}

.g-video-card__play {
  position:      absolute;
  inset:         0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    oklch(0% 0 0 / 0.40);
  transition:    background 200ms;
}

.g-video-card:hover .g-video-card__play {
  background: oklch(0% 0 0 / 0.20);
}

.g-video-card__play-icon {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    oklch(0% 0 0 / 0.60);
  backdrop-filter: blur(6px);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #fff;
  font-size:     22px;
  box-shadow:    var(--g-shadow-play);
  transition:    transform 200ms, background 200ms;
}

.g-video-card:hover .g-video-card__play-icon {
  transform:  scale(1.08);
  background: oklch(0% 0 0 / 0.72);
}

/* ── Photo section + masonry ─────────────────────────────────── */

.g-photo-section { margin-bottom: 52px; }

.g-masonry {
  column-count: 4;
  column-gap:   8px;
}

.g-photo-cell {
  break-inside:  avoid;
  margin-bottom: 8px;
  overflow:      hidden;
  border-radius: var(--g-r-sm);
  cursor:        pointer;
  position:      relative;
  background:    var(--g-panel2);
}

.g-photo-cell__img {
  display:    block;
  width:      100%;
  height:     auto;
  transition: transform 300ms ease, opacity 200ms;
}

.g-photo-cell:hover .g-photo-cell__img {
  transform: scale(1.03);
}

.g-photo-cell__overlay {
  position:   absolute;
  inset:      0;
  background: oklch(0% 0 0 / 0);
  transition: background 200ms;
}

.g-photo-cell:hover .g-photo-cell__overlay {
  background: oklch(0% 0 0 / 0.12);
}

.g-cover-vote {
  position:        absolute;
  right:           8px;
  bottom:          8px;
  z-index:         2;
  min-width:       74px;
  min-height:      34px;
  padding:         0 10px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             7px;
  border-radius:   999px;
  border:          1px solid oklch(100% 0 0 / 0.18);
  background:      oklch(0% 0 0 / 0.62);
  color:           #fff;
  font-family:     var(--g-font-mono);
  font-size:       11px;
  line-height:     1;
  cursor:          pointer;
  backdrop-filter: blur(10px);
  opacity:         0;
  transform:       translateY(4px);
  transition:      opacity 160ms, transform 160ms, background 160ms, border-color 160ms;
}

.g-photo-cell:hover .g-cover-vote,
.g-cover-vote:focus-visible,
.g-cover-vote.is-selected {
  opacity:   1;
  transform: translateY(0);
}

.g-cover-vote:hover {
  background:   oklch(0% 0 0 / 0.78);
  border-color: oklch(100% 0 0 / 0.32);
}

.g-cover-vote.is-selected {
  background:   oklch(69% 0.16 174 / 0.92);
  border-color: oklch(82% 0.14 174 / 0.72);
  color:        oklch(12% 0.03 230);
}

.g-cover-vote__count {
  min-width:       20px;
  min-height:      20px;
  border-radius:   999px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      oklch(100% 0 0 / 0.16);
}

.g-cover-vote:disabled,
.g-lb-cover-vote:disabled {
  cursor:  wait;
  opacity: 0.65;
}

@media (hover: none), (max-width: 680px) {
  .g-cover-vote {
    opacity:   1;
    transform: translateY(0);
  }
}

/* ── Lightbox ────────────────────────────────────────────────── */

.g-lightbox {
  position:   fixed;
  inset:      0;
  z-index:    999;
  background: #08090b;
  display:    flex;
  flex-direction: column;
  opacity:    0;
  pointer-events: none;
  transition: opacity 200ms;
}

.g-lightbox.is-open {
  opacity:        1;
  pointer-events: auto;
}

.g-lb-chrome {
  position:        absolute;
  top:             0;
  left:            0;
  right:           0;
  height:          80px;
  padding:         0 20px;
  display:         flex;
  align-items:     center;
  gap:             16px;
  background:      linear-gradient(to bottom, oklch(0% 0 0 / 0.80) 0%, transparent 100%);
  z-index:         2;
}

.g-lb-counter {
  font-family:    var(--g-font-mono);
  font-size:      12px;
  color:          oklch(78% 0 0);
  letter-spacing: 0.06em;
}

.g-lb-actions {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: auto;
}

.g-lb-action {
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background:       oklch(0% 0 0 / 0.55);
  backdrop-filter:  blur(8px);
  border:           1px solid oklch(100% 0 0 / 0.12);
  color:            #fff;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        16px;
  transition:       background 140ms, border-color 140ms;
}

.g-lb-action:hover {
  background:   oklch(0% 0 0 / 0.80);
  border-color: oklch(100% 0 0 / 0.24);
}

.g-lb-cover-vote {
  width:         auto;
  min-width:     88px;
  padding:       0 12px;
  gap:           8px;
  font-family:   var(--g-font-mono);
  font-size:     11px;
}

.g-lb-cover-vote.is-selected {
  background:   oklch(69% 0.16 174 / 0.92);
  border-color: oklch(82% 0.14 174 / 0.72);
  color:        oklch(12% 0.03 230);
}

.g-lb-close {
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background:       oklch(0% 0 0 / 0.55);
  backdrop-filter:  blur(8px);
  border:           1px solid oklch(100% 0 0 / 0.12);
  color:            #fff;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        20px;
  transition:       background 140ms;
}

.g-lb-close:hover { background: oklch(0% 0 0 / 0.80); }

.g-lb-frame {
  flex:            1;
  min-height:      0;           /* allow shrinking below content size */
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* padding-top clears the absolutely-positioned chrome (80px);
     no bottom padding — strip is a normal flex child below this */
  padding:         80px 72px 16px;
  position:        relative;
  overflow:        hidden;      /* clip the shadow so it never bleeds onto the strip */
}

.g-lb-photo {
  /* clamp to 1040px wide, never overflow the frame's padded content area */
  max-width:     min(1040px, calc(100vw - 144px));
  /* 100dvh minus: chrome(80) + frame padding top(80) + frame padding bottom(16) + strip(88) */
  max-height:    calc(100dvh - 264px);
  width:         auto;
  height:        auto;
  object-fit:    contain;
  border-radius: 4px;
  box-shadow:    var(--g-shadow-lightbox);
  transition:    opacity 180ms;
}

.g-lb-arrow {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  width:            48px;
  height:           48px;
  border-radius:    50%;
  background:       oklch(0% 0 0 / 0.55);
  backdrop-filter:  blur(10px);
  border:           1px solid oklch(100% 0 0 / 0.14);
  color:            #fff;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        22px;
  transition:       background 140ms, border-color 140ms, opacity 140ms;
  z-index:          2;
}

.g-lb-arrow:hover {
  background:   oklch(0% 0 0 / 0.80);
  border-color: oklch(100% 0 0 / 0.28);
}

.g-lb-arrow--prev { left:  16px; }
.g-lb-arrow--next { right: 16px; }

/* Thumbnail filmstrip — flex child so it never overlaps the photo */
.g-lb-strip {
  flex-shrink:  0;
  height:       88px;
  background:   oklch(0% 0 0 / 0.55);
  border-top:   1px solid oklch(100% 0 0 / 0.06);
  display:      flex;
  align-items:  center;
  padding:      0 20px;
  gap:          6px;
  overflow-x:   auto;
  scrollbar-width: none;
}

.g-lb-strip::-webkit-scrollbar { display: none; }

.g-lb-thumb {
  width:         60px;
  height:        60px;
  border-radius: var(--g-r-xs);
  object-fit:    cover;
  flex-shrink:   0;
  opacity:       0.45;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    opacity 160ms, border-color 160ms;
}

.g-lb-thumb:hover  { opacity: 0.75; }
.g-lb-thumb.is-active {
  opacity:      1;
  border-color: var(--g-accent);
}

/* ── Footer ──────────────────────────────────────────────────── */

.g-footer {
  padding:      28px 0;
  border-top:   1px solid var(--g-line);
  text-align:   center;
  font-family:  var(--g-font-mono);
  font-size:    11px;
  color:        var(--g-faint);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  .g-hero__h1  { font-size: 40px; }
  .g-year-num  { font-size: 80px; }
  .g-masonry   { column-count: 3; }
  .g-title-block {
    grid-template-columns: 1fr;
  }
  .g-title-block__h1 { font-size: 30px; }
}

@media (max-width: 680px) {
  .g-hero         { padding: 48px 0 36px; }
  .g-hero__h1     { font-size: 30px; }
  .g-year-num     { font-size: 56px; }
  .g-masonry      { column-count: 2; }
  .g-album-row    { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .g-search-row   { flex-direction: column; align-items: stretch; }
  .g-lb-frame     { padding: 70px 8px 12px; }
  .g-lb-arrow--prev { left: 4px; }
  .g-lb-arrow--next { right: 4px; }
  .g-lb-strip     { height: 72px; padding: 0 8px; }
  .g-lb-thumb     { width: 46px; height: 46px; }
  .g-nav__link                  { display: none; }
  .g-nav__link--staff           { display: block; font-size: 11px; padding: 6px 10px; }
  .g-breadcrumb__item--folder   { display: none; }
  .g-breadcrumb__ellipsis       { display: flex; align-items: center; }
  .g-media-pager                { align-items: stretch; flex-direction: column; }
  .g-media-pager__links         { width: 100%; }
  .g-media-pager__link          { flex: 1 1 42px; }
}

@media (max-width: 420px) {
  .g-masonry  { column-count: 1; }
  .g-px       { padding: 0 16px; }
}

/* Smartphone landscape: vertical space is tiny — tighten frame + thumbnails */
@media (max-height: 500px) and (orientation: landscape) {
  .g-lb-frame  { padding: 52px 40px 8px; }
  .g-lb-photo  {
    max-width:  min(1040px, calc(100vw - 80px));
    /* 100dvh minus: chrome(52) + frame padding top(52) + bottom(8) + strip(56) */
    max-height: calc(100dvh - 168px);
  }
  .g-lb-chrome { height: 52px; }
  .g-lb-strip  { height: 56px; padding: 0 12px; }
  .g-lb-thumb  { width: 40px; height: 40px; }
  .g-lb-arrow  { width: 36px; height: 36px; font-size: 18px; }
  .g-lb-arrow--prev { left: 4px; }
  .g-lb-arrow--next { right: 4px; }
}