/* =====================================================================
   Festa dei Fichi — pagina di attesa fra un'edizione e l'altra.
   Riprende la veste dell'app: gradiente viola→verde, Montserrat,
   insegne inclinate.
   ===================================================================== */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/font/montserrat.woff2') format('woff2');
}

:root {
  --verde: #2d9436;
  --verde-scuro: #1d6b25;
  --viola: #8a4b84;

  --fondo-1: #efeaf5;
  --fondo-2: #eaeef1;
  --fondo-3: #e9f2ea;

  --carta: #ffffff;
  --inchiostro: #23201d;
  --inchiostro-medio: #5c554c;
  --inchiostro-tenue: #8b8377;
  --linea: #e6e0d6;

  --ombra-s: 0 1px 2px rgba(35,32,29,.05);
  --ombra-m: 0 3px 14px rgba(35,32,29,.08);

  --r-m: 16px; --r-l: 26px;
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --verde: #5cc266; --verde-scuro: #8fdc96; --viola: #cd93c6;
    --fondo-1: #221b30; --fondo-2: #1b2129; --fondo-3: #17241a;
    --carta: #1f1c19;
    --inchiostro: #f4efe6; --inchiostro-medio: #c3baab; --inchiostro-tenue: #8e867a;
    --linea: #332d26;
    --ombra-s: 0 1px 2px rgba(0,0,0,.45);
    --ombra-m: 0 3px 16px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

/* Un elemento nascosto deve restare nascosto anche se più avanti gli si
   dà un «display». Senza questa riga il pulsante «mostra altre foto»
   resta visibile pur essendo stato spento da JavaScript. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(175deg, var(--fondo-1) 0%, var(--fondo-2) 48%, var(--fondo-3) 100%);
  background-attachment: scroll;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px; font-weight: 500; line-height: 1.55;
  color: var(--inchiostro);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------ cima --- */

.cima {
  min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 22px 76px;
  position: relative;
}
.cima__logo { width: min(210px, 52vw); height: auto; margin-bottom: 26px; }

.cima__occhiello {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--inchiostro-tenue);
}

.cima__titolo {
  font-size: clamp(38px, 12vw, 74px);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.cima__anno {
  display: inline-block;
  position: relative;
  color: #fff;
  padding: 2px 18px 4px 15px;
  isolation: isolate;
}
.cima__anno::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--verde) 0%, #37a742 100%);
  transform: skewX(-11deg);
  border-radius: 3px;
}

.cima__coda {
  margin: 0; max-width: 32ch;
  font-size: 14.5px; color: var(--inchiostro-medio);
}

.cima__giu {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--inchiostro-tenue);
  background: var(--carta); border: 1px solid var(--linea);
  box-shadow: var(--ombra-s);
  animation: respira 2.6s ease-in-out infinite;
}
.cima__giu svg { width: 20px; height: 20px; }
@keyframes respira { 0%,100% { transform: translate(-50%,0) } 50% { transform: translate(-50%,5px) } }
@media (prefers-reduced-motion: reduce) { .cima__giu { animation: none } }

/* --------------------------------------------------------- sezioni --- */

.sezione { padding: 30px 16px 8px; max-width: 1180px; margin: 0 auto; }
.sezione--coda { padding-top: 12px; padding-bottom: 20px; }

.insegna {
  display: inline-block; position: relative;
  font-size: clamp(21px, 5.5vw, 28px); text-transform: uppercase;
  color: #fff; padding: 5px 17px 6px 14px; isolation: isolate;
}
.insegna::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--viola) 0%, #a45f9d 100%);
  transform: skewX(-11deg); border-radius: 2px;
}

.occhiello { margin: 12px 0 20px; font-size: 13.5px; color: var(--inchiostro-medio); }

/* --------------------------------------------------------- griglia --- */

/* A colonne: le foto verticali e orizzontali si incastrano senza tagli
   e senza spazi vuoti, e non serve misurare niente da JavaScript. */
.griglia { columns: 2 160px; column-gap: 10px; }
@media (min-width: 700px)  { .griglia { columns: 3 220px; column-gap: 12px; } }
@media (min-width: 1040px) { .griglia { columns: 4 240px; column-gap: 12px; } }

.scatto {
  break-inside: avoid;
  margin: 0 0 10px;
  padding: 0; border: 0; background: none;
  display: block; width: 100%;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--ombra-s);
  position: relative;
  background: color-mix(in srgb, var(--inchiostro-tenue) 12%, transparent);
}
@media (min-width: 700px) { .scatto { margin-bottom: 12px; } }

.scatto img {
  display: block; width: 100%; height: auto;
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.scatto img.dentro { opacity: 1; }
.scatto:hover img { transform: scale(1.03); }
@media (hover: none) { .scatto:hover img { transform: none } }
.scatto:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.stato {
  padding: 18px 4px 6px; margin: 0;
  font-size: 13px; color: var(--inchiostro-tenue); text-align: center;
}

.ancora, .bottone {
  display: inline-block; margin: 14px auto 6px;
  padding: 12px 24px; border: 0; border-radius: 999px;
  background: var(--verde); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
}
.ancora { display: block; }
.bottone { margin-top: 16px; }

/* -------------------------------------------------------- riquadro --- */

.riquadro {
  background: var(--carta); border: 1px solid var(--linea);
  border-radius: var(--r-l); box-shadow: var(--ombra-m);
  padding: 26px 22px; text-align: center;
}
.riquadro__titolo { font-size: 19px; text-transform: uppercase; }
.riquadro__testo { margin: 10px auto 0; max-width: 46ch; font-size: 14px; color: var(--inchiostro-medio); }

/* ------------------------------------------------------------ piede -- */

.piede {
  padding: 34px 16px calc(34px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 12.5px; color: var(--inchiostro-tenue);
}
.piede p { margin: 0 0 4px; }
.piede__tenue { opacity: .75; }

/* ------------------------------------------------- foto a tutto schermo */

.lente {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 12, 16, .96);
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.lente[hidden] { display: none; }

.lente__corpo { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.lente__corpo img {
  max-width: 96vw; max-height: 86svh;
  width: auto; height: auto;
  border-radius: 4px;
  touch-action: pan-y;
}

.lente__conto {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.62);
}

.lente__chiudi, .lente__freccia {
  position: absolute; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: rgba(255,255,255,.1); color: #fff;
  backdrop-filter: blur(6px);
}
.lente__chiudi svg, .lente__freccia svg { width: 21px; height: 21px; }
.lente__chiudi { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lente__freccia { top: 50%; transform: translateY(-50%); }
.lente__freccia--sx { left: 10px; }
.lente__freccia--dx { right: 10px; }
.lente__freccia[disabled] { opacity: .25; }
@media (max-width: 560px) {
  .lente__freccia { width: 40px; height: 40px; }
}

body.bloccato { overflow: hidden; }