/* ============================================================
   MITICI ANNI — estratto bonus (9–18 ottobre 2026)
   Due pagine nuove al giorno per dieci giorni, in cima alla home.
   Si appoggia a style.css (finestre, bottoni, variabili).
   ============================================================ */

.estratto { padding-block: 18px 4px; }
.es-win { position: relative; }
.es-win .win-title { background: linear-gradient(90deg, #7a0000, #c40000 60%, #7a0000); }
.es-win .win-title #es-day { color: var(--giallo); text-shadow: 0 0 8px rgba(255,225,77,.6); }
.es-win .win-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; background: #efe9dc; }

.es-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.es-badge {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--rosso); color: #fff; font-family: var(--font-display); font-weight: 400;
  text-align: center; line-height: 1; font-size: 11px; letter-spacing: .04em;
  box-shadow: 3px 3px 0 #000; transform: rotate(-8deg); border: 3px solid #fff; outline: 2px solid #000;
}
.es-badge b { display: block; font-size: 30px; color: var(--giallo); }
.es-head h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); color: #a00; text-shadow: none; line-height: 1.1; }
.es-lead { margin: 6px 0 0; color: #222; font-size: 16.5px; }
.es-lead b { color: #000; }
#es-count { font-family: var(--font-crt); font-size: 21px; color: var(--blu95); }

/* La striscia delle pagine */
.es-strip {
  min-width: 0; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 6px 4px 12px;
  scrollbar-width: thin; scrollbar-color: var(--blu95) #d9d2c3;
}
.es-page {
  flex: 0 0 150px; scroll-snap-align: start; position: relative; display: block;
  padding: 0; margin: 0; border: 2px solid #000; background: #fff; cursor: pointer;
  box-shadow: 4px 4px 0 var(--blu95); font: inherit; color: inherit; text-align: left;
}
.es-page:hover, .es-page:focus-visible { box-shadow: 4px 4px 0 var(--rosso); outline: 2px solid var(--rosso); }
.es-page img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.es-page .es-tag {
  position: absolute; left: -6px; top: 10px; padding: 3px 8px;
  font-family: var(--font-crt); font-size: 17px; line-height: 1; background: var(--blu95); color: #fff;
  box-shadow: 2px 2px 0 #000;
}
.es-page.is-new .es-tag { background: var(--rosso); color: #fff; }
.es-page.is-new { box-shadow: 4px 4px 0 var(--rosso); }
.es-page .es-num {
  position: absolute; right: 0; bottom: 0; padding: 2px 8px;
  font-family: var(--font-crt); font-size: 16px; background: rgba(0,0,0,.75); color: #fff;
}
.es-locked {
  flex: 0 0 150px; scroll-snap-align: start; display: grid; place-content: center; text-align: center; gap: 4px;
  aspect-ratio: 2 / 3; border: 2px dashed #8a8372; color: #6b655a; background: repeating-linear-gradient(135deg, #e6dfd0 0 10px, #ebe5d8 10px 20px);
  font-family: var(--font-crt); font-size: 18px; line-height: 1.15; padding: 8px;
}
.es-locked .es-lock { font-size: 28px; }
.es-locked b { font-size: 20px; color: #4a4538; }

.es-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.es-next { margin: 0; font-family: var(--font-crt); font-size: 20px; color: #a00; }
.es-foot .spot-cta .btn95 { flex: 1 1 220px; font-size: 19px; }

/* Il lettore a tutto schermo */
.es-reader { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; z-index: 9500; background: rgba(5,5,7,.96); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.es-reader[hidden] { display: none; }
.es-rbar {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px var(--gutter);
  background: var(--grigio95); border-bottom: 2px solid #000; color: #000;
}
.es-rbar .es-rtitle { flex: 1 1 auto; min-width: 0; font-family: var(--font-crt); font-size: 20px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-rbar .es-rtitle small { display: block; font-size: 16px; color: #333; }
.es-rbar .btn95 { min-height: 40px; padding: 4px 12px; font-size: 17px; white-space: nowrap; flex: 0 0 auto; }
.es-rbar .btn95[aria-pressed="true"] { background: var(--blu95); color: #fff; }
.es-rbody { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.es-rpage { display: none; margin: 0 auto; max-width: 820px; padding: 14px var(--gutter) 24px; }
.es-reader[data-view="pagina"] .es-rpage { display: block; }
.es-rpage img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 2px #000, 8px 8px 0 var(--blu95); }
.es-rpage.is-zoom img { width: 200%; max-width: none; }
.es-rtext { display: none; margin: 0 auto; max-width: 720px; padding: 18px var(--gutter) 40px; background: #fbf7ee; color: #111; min-height: 100%; }
.es-reader[data-view="testo"] .es-rtext { display: block; }
.es-rtext h4 { font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: .02em; color: #a00; margin: 26px 0 10px; line-height: 1.25; }
.es-rtext h4:first-child { margin-top: 0; }
.es-rtext p { margin: 0 0 .7em; font-size: 20px; line-height: 1.5; }
.es-rtext .es-rfoot { margin-top: 28px; padding-top: 14px; border-top: 2px dashed #c9c0ad; font-family: var(--font-crt); font-size: 19px; color: #555; }
.es-rnav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px var(--gutter); background: var(--grigio95); border-top: 2px solid #000;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.es-rnav .btn95 { min-height: 44px; font-size: 18px; flex: 1 1 0; }
.es-rnav .es-rcount { flex: 0 0 auto; font-family: var(--font-crt); font-size: 20px; color: #000; padding-inline: 6px; }
.es-rnav .btn95.primary { flex: 1.4 1 0; }
body.es-open { overflow: hidden; }

/* ---------- Telefono ---------- */
@media (max-width: 600px) {
  .estratto { padding-top: 12px; }
  .es-win .win-body { padding: 12px; gap: 12px; }
  .es-head { grid-template-columns: auto 1fr; gap: 10px; }
  .es-badge { width: 68px; height: 68px; font-size: 9.5px; }
  .es-badge b { font-size: 24px; }
  .es-head h2 { font-size: 21px; }
  .es-lead { font-size: 15.5px; }
  .es-page, .es-locked { flex-basis: 128px; }
  .es-rbar { padding-inline: 10px; }
  .es-rbar .es-rtitle { font-size: 18px; }
  .es-rbar .es-rtitle small { display: none; }
  .es-rbar .btn95 { padding-inline: 9px; font-size: 16px; }
  .es-rpage, .es-rtext { padding-inline: 10px; }
  .es-rtext p { font-size: 19px; }
  .es-rnav { padding-inline: 10px; }
}
@media (max-width: 380px) {
  .es-rnav .es-rcount { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .es-strip { scroll-behavior: auto; }
}

/* 9/10/2026 — spazio riservato: la striscia non spinge giù la pagina quando arrivano le pagine */
.es-strip { min-height: 243px; align-items: flex-start; }
@media (max-width: 600px) { .es-strip { min-height: 211px; } }