/* =========================
   galleria.css (CLEAN + COMPLIANT)
   Soros-like + TOPNAV mobile stile biografia2
   ========================= */

/* ✅ variabili usate anche fuori da .gal-page (topnav è fuori!) */
:root{
  --gal-max: 1180px;
  --gal-pad: clamp(1.25rem, 4vw, 3rem);
  --brand: var(--color-accent, #922A5E);
  --text: var(--color-text, #111);

  /* JS aggiorna --header-h e --gal-topnav-h */
  --header-h: 72px;
  --gal-topnav-h: 0px;

  /* scala tipografica (coerente con style.css / biografia2) */
  --gal-h1: clamp(2.1rem, 3.2vw, 3.1rem);
  --gal-year: clamp(3rem, 5.5vw, 3.5rem);

  --gal-kicker: .72rem;     /* nav / chip / titoli piccoli */
  --gal-body: 20.5px;       /* testo descrizioni */
  --gal-cap: .92rem;        /* caption immagini */

  --gal-track: .12em;       /* tracking “brand” */
  --gal-track-tight: .10em;
}

/* evita che sticky/fixed si “rompano” e micro overflow */
html, body{ overflow-x: hidden; }
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* =========================
   PAGE
   ========================= */
.gal-page{
  background:#fff;

  /* desktop: header fixed */
  padding-top: var(--header-h, 72px);

  /* offset per anchor */
  scroll-padding-top: calc(var(--header-h, 72px) + var(--gal-topnav-h, 0px) + 18px);
}
.gal-page section[id]{
  scroll-margin-top: calc(var(--header-h, 72px) + var(--gal-topnav-h, 0px) + 18px);
}

/* evita che sticky/fixed si “rompano” */
.gal-page,
.gal-layout,
.gal-content{
  overflow: visible;
}

/* wrap */
.gal-wrap{
  max-width: var(--gal-max, 1100px);
  margin: 0 auto;
  padding-inline: var(--page-pad);
  min-width: 0;
}

/* =========================
   TOP (solo titolo)
   ========================= */
.gal-top{
  border-bottom: 1px solid #e9e9e9;
  background:#fff;
  padding: 2.55rem 0 1.05rem;
}

.gal-title{
  margin: 0;
  font-size: clamp(2.05rem, 3.2vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  line-height: 1.02;
}

/* =========================
   TOPNAV mobile (FIXED come biografia2)
   ========================= */
.gal-topnav{ display:none; }

@media (max-width: 900px){
  .gal-topnav{
    display:block;
    position: fixed; /* ✅ non sticky */
    top: calc(var(--header-h, 72px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 2000;
    background:#fff;
    border-bottom: 1px solid #e9e9e9;
  }

  /* spazio ai contenuti sotto header + topnav */
  .gal-page{
    padding-top: calc(var(--header-h, 72px) + var(--gal-topnav-h, 56px) + 16px);
  }

  .gal-topnav__inner{
    padding-inline: var(--gal-pad, 1.25rem);
    padding-block: 0.45rem 0.35rem;
    min-width: 0;
  }

  .gal-topnav__scroller{
    display:flex;
    gap: 0.85rem;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:none;
    white-space:nowrap;
    padding-bottom: 0.25rem;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--gal-pad, 1.25rem);
  }
  .gal-topnav__scroller::-webkit-scrollbar{ display:none; }

  .gal-chip{
    position: relative;
    display:inline-block;
    padding: 0.18rem 0 0.55rem;
    background: transparent;
    color: #777;
    text-decoration:none;
    font-weight: 700;
    font-size: var(--gal-kicker);
    letter-spacing: var(--gal-track);
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .gal-chip:hover{ color: var(--text); }

  .gal-chip::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom: 0;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }

  .gal-chip.is-active{ color: var(--brand); }
  .gal-chip.is-active::after{ transform: scaleX(1); }

  .gal-chip:focus,
  .gal-chip:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  @media (max-width: 700px){
    .gal-topnav__inner{ padding-block: 0.4rem 0.3rem; }
    .gal-topnav__scroller{ gap: 0.75rem; }
    .gal-chip{
      font-size: 0.68rem;
      letter-spacing: var(--gal-track-tight);
    }
  }
}

/* =========================
   LAYOUT
   ========================= */
.gal-layout{
  max-width: var(--gal-max);
  margin-inline: auto;
  padding-inline: var(--gal-pad);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 901px){
  .gal-layout{
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
  }
}

/* content wrap non deve ricentrare */
.gal-content .gal-wrap{
  max-width: none;
  margin: 0;
  padding: 0;
}

/* =========================
   SIDEBAR desktop
   ========================= */
.gal-side{ display:none; }

@media (min-width: 901px){
  .gal-side{
    display:block;
    padding-top: 1.25rem;
    min-width: 0;
    position: relative;
  }

  .gal-nav{
    position: relative;
    top: auto;
    max-height: calc(100dvh - var(--header-h, 72px) - 16px);
    overflow: auto;
    padding-right: 1rem;
  }

  .gal-nav__list{
    list-style:none;
    margin:0;
    padding:0;
    border-right: 1px solid #e9e9e9;
  }

  .gal-nav__link{
    display:block;
    padding: 0.55rem 0.75rem 0.55rem 0.9rem;
    text-decoration:none;
    border-left: 3px solid transparent;

    font-weight: 700;
    font-size: var(--gal-kicker);
    letter-spacing: var(--gal-track);
    text-transform: uppercase;
    color:#777;
  }

  .gal-nav__link span{
    display:block;
    margin-top: 4px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    line-height: 1.25;
    color:#111;
    opacity: .82;
  }

  .gal-nav__link:hover{ color: var(--text); }

  .gal-nav__link.is-active{
    color: var(--brand);
    border-left-color: var(--brand);
    background: transparent;
  }
  .gal-nav__link.is-active span{
    opacity: 1;
    font-weight: 600;
  }
}

/* =========================
   CONTENT
   ========================= */
.gal-content{
  min-width: 0;
  padding: 1.25rem 0 4rem;
}

/* =========================
   PERIODI
   ========================= */
.gal-period{
  padding: 2.25rem 0;
  border-top: 2px solid #111;
}
.gal-period:first-child{
  border-top:none;
  padding-top: 1rem;
}

.gal-period__head{
  display:grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  align-items:start;
  margin-bottom: 1.25rem;
}
@media (min-width: 901px){
  .gal-period__head{
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.gal-period__year{
  font-weight: 600;
  letter-spacing: -0.02em;
  color:#111;
  font-size: 30px;
  line-height: .95;
}

.gal-period__title{
  margin:0;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: var(--gal-track);
  text-transform: uppercase;
  color:#111;
}

.gal-period__lead{
  margin: .3rem 0 0;
  font-size: var(--gal-body);
  line-height: 1.75;
  color:#444;
  max-width: 80ch;
}

/* ✅ linea brand sul periodo attivo (sempre) */
.gal-period.is-active .gal-period__head{
  border-left: 3px solid var(--brand);
  padding-left: .85rem;
}
@media (max-width: 900px){
  .gal-period.is-active .gal-period__head{
    padding-left: .75rem;
  }
  :root{
    --gal-body: 15px;
    --gal-cap: .9rem;
  }
  .gal-period__title{
    font-size: .88rem;
    letter-spacing: var(--gal-track-tight);
  }
}

/* =========================
   GRID immagini
   ========================= */
.gal-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 680px){
  .gal-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .gal-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gal-item{ display:grid; gap: .6rem; }

.gal-item__open{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-align:left;
}

.gal-figure{
  margin:0;
  border:1px solid #ddd;
  background:#fff;
  overflow:hidden;
  aspect-ratio: 4 / 3;
}
.gal-figure img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: center top;
}

.gal-cap{
  margin:0;
  font-size: var(--gal-cap);
  line-height: 1.5;
  color:#666;
}

.gal-item__open:focus-visible{
  outline: 3px solid rgba(146,42,94,0.35);
  outline-offset: 4px;
}

/* link generici in pagina */
.gal-page a{ color: var(--text, #111); }
.gal-page a:focus-visible{
  outline: 3px solid rgba(146,42,94,0.25);
  outline-offset: 2px;
}

/* =========================
   MODAL
   ========================= */
.gal-modal{
  position: fixed;
  inset: 0;
  z-index: 9999; /* ✅ sopra tutto */
}
.gal-modal[hidden]{ display:none !important; }

.gal-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.92);
  z-index: 0;
}

.gal-modal__panel{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    14px
    calc(14px + env(safe-area-inset-bottom, 0px))
    14px;
  z-index: 1;
}

/* ✅ X sempre visibile e cliccabile (desktop+mobile) */
.gal-modal__close{
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e1e1e1;
  background:#fff;
  color:#111;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  display:grid;
  place-items:center;
}
@media (max-width: 720px){
  .gal-modal__close{
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
}

.gal-modal__media{
  width: min(1100px, 100%);
  max-height: calc(100dvh - 150px);
  border: 1px solid #e6e6e6;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.12);
}

.gal-modal__img{
  max-width: 100%;
  max-height: calc(100dvh - 180px);
  width:auto;
  height:auto;
  object-fit: contain;
  object-position:center;
  display:block;
  background:#fff;
}

.gal-modal__meta{
  width: min(1100px, 100%);
  margin-top: 10px;
  text-align:center;
}
.gal-modal__cap{
  margin:0;
  font-size: var(--gal-body);
  color:#444;
  line-height: 1.6;
}

/* frecce */
.gal-modal__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid #e1e1e1;
  background:#fff;
  color:#111;
  font-size: 30px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.gal-modal__nav--prev{ left: 14px; }
.gal-modal__nav--next{ right: 14px; }

@media (max-width: 720px){
  .gal-modal__nav{ width: 46px; height: 46px; }
}

/* focus coerente */
.gal-modal__close:focus-visible,
.gal-modal__nav:focus-visible{
  outline: 3px solid rgba(146,42,94,0.25);
  outline-offset: 2px;
}
/* =========================================================
   PATCH — Allineamento header-like + quick links + vars
   (NON tocca JS)
   ========================================================= */

/* 1) Quick links sotto titolo: stile locale (non cb-under) */
.gal-hero__under{
  margin-top: 0.9rem;
}

.gal-under{
  display: flex;
  justify-content: flex-end;   /* ✅ a destra su desktop */
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0;                 /* evita eredità/stranezze */
  margin: 0;
}

.gal-hero__link{
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #111);
  text-decoration: none;
}
.gal-hero__link:hover,
.gal-hero__link:focus-visible{
  color: var(--brand);
}

@media (max-width: 700px){
  .gal-under{
    justify-content: flex-start; /* ✅ a sinistra su mobile */
  }
}

/* 2) Vars responsive: NO :root dentro media (le mettiamo su .gal-page) */
@media (max-width: 900px){
  .gal-page{
    --gal-body: 15px;
    --gal-cap: 0.9rem;
  }
  .gal-period__title{
    letter-spacing: var(--gal-track-tight);
  }
}

/* 3) Offset header/topnav: versione “safe”
   - desktop: lascia padding-top header (se ti serve)
   - mobile: header + topnav (come già fai) */
.gal-page{
  /* se il tuo global style.css già gestisce l’offset header
     e vedi troppo spazio sopra, commenta la riga sotto */
  padding-top: var(--header-h, 72px);
}

/* 4) TOPNAV fixed: garantisci che non “copra” i click su anchor */
@media (max-width: 900px){
  .gal-page{
    scroll-padding-top: calc(
      var(--header-h, 72px) +
      var(--gal-topnav-h, 56px) +
      18px
    );
  }
  .gal-page section[id]{
    scroll-margin-top: calc(
      var(--header-h, 72px) +
      var(--gal-topnav-h, 56px) +
      18px
    );
  }
}

/* 5) Coerenza container (come header): gal-top già ok, ma assicuriamo che
      gal-layout usi lo stesso “binario” del gal-wrap */
.gal-layout{
  max-width: var(--gal-max);
  margin-inline: auto;
  padding-inline: var(--gal-pad);
}
/* =========================
   ALLINEAMENTO CON HEADER (container + padding)
   ========================= */

/* 1) Usa le stesse variabili globali del sito */
:root{
  --gal-max: var(--container-max, 1100px);
  --gal-pad: var(--page-pad, clamp(1rem, 4vw, 3rem));
}

/* 2) Wrap identico all’header */
.gal-wrap{
  max-width: var(--gal-max);
  margin-inline: auto;
  padding-inline: var(--gal-pad);
}

/* 3) Layout identico all’header (sposta anche sidebar e griglia) */
.gal-layout{
  max-width: var(--gal-max);
  margin-inline: auto;
  padding-inline: var(--gal-pad);
}

/* 4) (Consigliato) “Chi è Cecilia” senza ereditare cb-under (che ti altera padding/misure) */
.gal-hero__under{
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.gal-under{
  /* neutralizza cb-under */
  padding-left: 0;
  margin-top: 0;
  max-width: none;
}

.gal-hero__link{
  text-decoration: none;
  font-weight: 600;
  color: var(--text, #111);
}

.gal-hero__link:hover,
.gal-hero__link:focus-visible{
  color: var(--brand);
}