/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/timeline/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* Timeline — palette TT5 (accent-1 #DAC898, accent-2 #DAC898, accent-3 #6b2a0b, accent-4 #819671, accent-5 #FFFEEF) */
/* Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tl-hidden {
  display: none !important;
}
.is-hidden {
  display: none !important;
}
/* ══════════════════════════════
   WRAPPER
══════════════════════════════ */
.tl-wrap {
  padding: 20px 0;
  width: 100%;
  font-family: inherit;
}
/* ══════════════════════════════
   BARRA SUPERIORE
══════════════════════════════ */
.tl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--wp--preset--color--contrast);
  opacity: 1;
  border-bottom-color: var(--wp--preset--color--contrast);
}
.tl-bar-left,
.tl-bar-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.tl-btn {
  font-family: inherit;
  font-size: inherit;
  color: var(--wp--preset--color--contrast);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tl-btn:hover {
  color: var(--wp--preset--color--contrast);
}
.tl-btn:focus {
  outline: none;
}
.tl-btn--link {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ══════════════════════════════
   TOGGLE VISTA
══════════════════════════════ */
.view-toggle {
  display: flex;
  align-items: center;
}
.v-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--wp--preset--color--contrast);
  padding: 5px 8px;
  cursor: pointer;
  color: var(--wp--preset--color--contrast);
  line-height: 0;
  transition: all 0.15s;
}
.v-btn:first-child {
  border-radius: 6px 0 0 6px;
}
.v-btn:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}
.v-btn.active {
  background: var(--wp--preset--color--contrast, #111);
  color: var(--wp--preset--color--accent-5, #FFFEEF);
  border-color: var(--wp--preset--color--contrast, #111);
}
.v-btn:not(.active):hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 40%, transparent);
  color: var(--wp--preset--color--contrast, #111);
}
/* ══════════════════════════════
   FILTRI (a scomparsa)
══════════════════════════════ */
.tl-filters {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.tl-filters.open {
  max-height: 500px;
  padding-top: 1.25rem;
}
.filter-row {
  display: flex;
  gap: 1rem;
}
@media (min-width: 768px) {
  .filter-row {
    gap: 3rem;
  }
}
.filter-row {
  flex-wrap: wrap;
  margin: 0 0 1.25rem 0;
}
.filter-col {
  --_pill-bg: var(--wp--preset--color--contrast, #111);
}
.filter-col--accent-4 {
  --_pill-bg: var(--wp--preset--color--accent-4, #819671);
}
.filter-col--accent-1 {
  --_pill-bg: var(--wp--preset--color--accent-1, #DAC898);
}
.filter-col--accent-2 {
  --_pill-bg: var(--wp--preset--color--accent-2, #DAC898);
}
@media (min-width: 767px) {
  .filter-col {
    max-width: 31%;
  }
}
.filter-col .filter-label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.5rem;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  font-family: inherit;
  font-size: inherit;
  padding: 0.25em 0.85em;
  border-radius: 100px;
  border: 1px solid var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--contrast);
  background: none;
  font-size: var(--wp--preset--font-size--small);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  /* === ANIMAZIONE COLLASSO PILL DISABILITATE (da valutare) ===
  max-width: 20rem;
  overflow: hidden;
  transform-origin: center;
  transition:
      background 0.15s,
      opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      max-width 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      padding 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      margin 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      border-width 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  === */
}
.pill:hover, .pill.active {
  background: var(--_pill-bg);
  border: 1px solid var(--wp--preset--color--contrast);
  outline: none;
}
.pill:focus {
  outline: none;
}
.pill.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  /* === ANIMAZIONE COLLASSO (da valutare) ===
  opacity: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0 -3px;
  border-width: 0;
  transform: scale(0.85);
  === */
}
.pill {
  /* Pill nascosta */
}
.pill.invisible {
  display: none;
}
/* ══════════════════════════════
   DIVISORE
══════════════════════════════ */
.tl-divider {
  height: 1px;
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 40%, transparent);
  margin-bottom: 0.3rem;
}
/* ══════════════════════════════
   FILTRI ATTIVI
══════════════════════════════ */
.tl-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .tl-active-filters {
    gap: 1rem;
  }
}
.tl-active-filters {
  margin-bottom: 0.5rem;
}
.tl-current-century {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6rem;
}
.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--_pill-bg, var(--wp--preset--color--contrast));
  cursor: pointer;
}
.active-filter-tag:focus {
  outline: none;
}
/* ══════════════════════════════
   COUNTER
══════════════════════════════ */
.tl-counter {
  margin: 0;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast);
  text-align: right;
}
/* ══════════════════════════════
   VISTA TIMELINE — carousel 3D (5 card)
══════════════════════════════ */
.timeline-view {
  display: none;
}
.timeline-view.show {
  display: block;
  overflow: hidden;
}
.timeline-view {
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .timeline-view {
    margin-top: 1.5rem;
  }
}
.timeline-viewport {
  /* Full-bleed: esce dal container senza usare transform (che romperebbe preserve-3d) */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* Altezza calcolata sulla card attiva: thumb (16/9) + spazio per testo + margine shadow */
  --tl-card-w: 87vw;
  --tl-card-content: 20rem;
  height: calc(var(--tl-card-w) * 9 / 16 + var(--tl-card-content));
  max-height: 75vh;
  max-height: 75svh;
}
@media (min-width: 768px) {
  .timeline-viewport {
    --tl-card-w: 33vw;
  }
}
.timeline-viewport {
  perspective: 500vw;
  perspective-origin: 50% 38%;
  position: relative;
  overflow: hidden;
  /* Mobile: solo scroll verticale al browser; swipe orizzontale gestito da JS */
  touch-action: pan-y;
}
.cards-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.timeline-card {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  /*  Mobile: card larga quanto il device, solo carta attiva */
  width: 87vw;
  transform: translate(-50%, 0) translateZ(-600px) scale(0.35);
  /* Card attiva: top edge ancorato al viewport (scale 1 → nessun gap dall'alto) */
}
.timeline-card.is-active {
  transform: translate(-50%, 0) translateZ(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.timeline-card {
  /* Su mobile le card laterali restano invisibili */
}
.timeline-card.is-prev, .timeline-card.is-next, .timeline-card.is-prev2, .timeline-card.is-next2 {
  opacity: 0;
  pointer-events: none;
}
.timeline-card {
  /* Desktop: laterali con stesso top edge, ma scale<1 attorno al centro le porta
     a una "distanza dall'alto proporzionale alla loro dimensione" naturalmente */
}
@media (min-width: 768px) {
  .timeline-card {
    width: 33vw;
    transform: translate(-50%, 0) translateZ(-400px) scale(0.35);
  }
  .timeline-card.is-prev {
    transform: translate(calc(-50% - 25vw), 0) translateZ(-90px) rotateY(7deg) scale(0.82);
    opacity: 0.65;
    pointer-events: auto;
    cursor: pointer;
  }
  .timeline-card.is-next {
    transform: translate(calc(-50% + 25vw), 0) translateZ(-90px) rotateY(-7deg) scale(0.82);
    opacity: 0.65;
    pointer-events: auto;
    cursor: pointer;
  }
  .timeline-card.is-prev2 {
    transform: translate(calc(-50% - 40vw), 0) translateZ(-160px) rotateY(11deg) scale(0.65);
    opacity: 0.3;
    pointer-events: auto;
    cursor: pointer;
  }
  .timeline-card.is-next2 {
    transform: translate(calc(-50% + 40vw), 0) translateZ(-160px) rotateY(-11deg) scale(0.65);
    opacity: 0.3;
    pointer-events: auto;
    cursor: pointer;
  }
}
/*  Link immagine + titolo */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* Interno card */
.card-inner {
  background: var(--wp--preset--color--accent-5, #FFFEEF);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1);
}
.is-active .card-inner {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity 0.4s ease;
}
.is-active .card-inner:hover .card-thumb img {
  transform: scale(1.04);
}
.card-thumb img {
  /* Lazy-load: nascosta finché data-src è presente; fade-in alla rimozione */
}
.card-thumb img[data-src] {
  opacity: 0;
}
.card-date {
  display: block;
  padding: 0.75rem 1rem 0;
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.card-title {
  margin: 0.35rem 0 0.5rem;
  padding: 0 1rem;
  font-weight: 700;
  line-height: 1.3;
  height: 4.5rem;
}
@media (min-width: 768px) {
  .card-title {
    height: 3.5rem;
  }
}
.card-excerpt {
  padding: 0 1rem;
  margin: 0 0 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 6rem;
}
@media (max-width: 768px) {
  .card-excerpt {
    height: 4.7rem;
    font-size: var(--wp--preset--font-size--medium);
  }
}
.card-tag {
  display: inline-block;
  margin: 0 1rem 0.75rem;
  padding: 1em 0;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Bottoni navigazione */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--contrast);
  background: none;
  color: var(--wp--preset--color--contrast);
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
  margin: 2px 0;
}
.nav-btn:hover:not(:disabled) {
  background: var(--wp--preset--color--contrast, #111);
}
.nav-btn:hover:not(:disabled) svg path {
  stroke: #fff;
}
.nav-btn:hover:not(:disabled) {
  border-color: var(--wp--preset--color--contrast, #111);
}
.nav-btn:disabled {
  opacity: 0.2;
  cursor: default;
}
/* ══════════════════════════════
   SCRUBBER
══════════════════════════════ */
.tl-scrubber {
  display: none;
  padding: 3rem 7rem 1.5rem;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: pan-y;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .tl-scrubber {
    display: block;
  }
}
.scrubber-track {
  position: relative;
  height: 2px;
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 20%, transparent);
}
.scrubber-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 30%, transparent);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  /* hit area più grande senza ingrandire il dot */
}
.scrubber-marker::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.scrubber-marker.is-active {
  background: var(--wp--preset--color--contrast, #111);
  transform: translate(-50%, -50%) scale(1.6);
}
.scrubber-marker.is-hidden {
  display: none;
}
.scrubber-marker__label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7em;
  font-family: var(--wp--preset--font-family--baloo-2);
  line-height: 1.2;
  color: var(--wp--preset--color--contrast, #111);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  /* impedisce di uscire dai bordi del track */
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scrubber-marker:hover .scrubber-marker__label, .scrubber-marker.is-active .scrubber-marker__label {
  opacity: 1;
}
.scrubber-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--wp--preset--color--contrast, #111);
  pointer-events: none;
  transition: left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
/* ══════════════════════════════
   VISTA GRIGLIA
══════════════════════════════ */
.grid-view {
  display: none;
}
.grid-view.show {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 30px;
}
.grid-view {
  margin-top: 2rem;
}
.grid-card {
  background: var(--wp--preset--color--accent-5, #FFFEEF);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.grid-card:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 35%, transparent);
}
/* ── Link grid card ── */
.gc-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gc-img {
  width: 100%;
  aspect-ratio: 3/2;
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent);
  overflow: hidden;
  position: relative;
}
.gc-img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 25%, transparent);
  font-size: 1.5em;
}
.gc-img--ph::after {
  content: "□";
}
/* Spinner durante lazy-load (.is-loading gestita da view.js) */
.card-thumb.is-loading::after,
.gc-img.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid color-mix(in srgb, var(--wp--preset--color--contrast, #111) 25%, transparent);
  border-top-color: var(--wp--preset--color--accent-4, #819671);
  border-radius: 50%;
  animation: tl-spin 0.8s linear infinite;
}
@keyframes tl-spin {
  to {
    transform: rotate(360deg);
  }
}
.gc-img-inner {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}
.gc-img-inner[data-src] {
  opacity: 0;
}
.gc-body .gc-year {
  display: block;
  padding: 0.75rem 1rem 0;
  font-size: 0.65em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gc-body .gc-title {
  margin: 0.35rem 0 0.5rem;
  padding: 0 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.gc-body .gc-excerpt {
  padding: 0 1rem;
  margin: 0 0 0.75rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gc-tags {
  display: inline-block;
  margin: 0 1rem 0.75rem;
  padding: 1em 0;
  border-radius: 4px;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* ══════════════════════════════
   CENTURY BAR
══════════════════════════════ */
.tl-century-bar {
  --tl-dot-gap: 6px;
  --tl-dot-offset: 4px;
  --tl-dot-size: 4px;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 1.5rem 0 0;
  position: relative;
  /* Esce dal container ma lascia 20px di margine dai bordi del viewport.
     calc(100vw - 40px) evita anche l'overflow orizzontale di pagina che
     capita su Chrome con `100vw` + scrollbar verticale presente. */
  width: calc(100vw - 40px);
  margin-left: calc(20px - 50vw + 50%);
  /* Scroll orizzontale quando i segmenti eccedono il viewport */
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  /* Scrollbar nascosta (drag-to-pan come unico controllo visivo) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tl-century-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.tl-century-bar {
  /* Drag-to-pan: mouse → grab/grabbing; touch → pan nativo (touch-action) */
  cursor: grab;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
}
.tl-century-bar.is-dragging {
  cursor: grabbing;
}
@media (max-width: 767px) {
  .tl-century-bar {
    --tl-dot-gap: 4px;
    --tl-dot-offset: 3px;
    --tl-dot-size: 3px;
  }
}
.century-seg {
  display: flex;
  flex-direction: column;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.4rem 0 0;
  text-align: left;
  color: color-mix(in srgb, var(--wp--preset--color--contrast, #111) 35%, transparent);
  transition: color 0.2s;
  /* Min 110px desktop: cresce equamente se c'è spazio, mai sotto 110 (no shrink) */
  flex: 1 0 110px;
}
.century-seg.is-empty {
  cursor: default;
  opacity: 0.4;
}
.century-seg {
  /* Mobile: min 90px */
}
@media (max-width: 767px) {
  .century-seg {
    flex: 1 0 90px;
  }
}
.century-seg.is-active {
  color: var(--wp--preset--color--accent-4, #819671);
}
.century-seg:hover:not(.is-active):not(.is-empty) {
  color: var(--wp--preset--color--contrast, #111);
}
.century-seg:focus {
  outline: none;
}
.century-seg__head {
  position: relative;
  padding-bottom: 6px;
}
.century-seg__head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 6px;
  background: currentColor;
}
.century-seg__head {
  /* Primo segmento: niente tick verticale di apertura */
}
.century-seg:first-child .century-seg__head::after {
  background: transparent;
}
.century-seg__label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 767px) {
  .century-seg__label {
    font-size: 0.8rem;
  }
}
.century-seg__label {
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-family: inherit;
  font-weight: 600;
  padding-left: 2px;
}
.century-seg__dots {
  position: relative;
  border-top: 1px solid currentColor;
  height: calc(var(--tl-dot-offset) + var(--tl-dot-gap) * var(--tl-seg-stack, 1) + var(--tl-dot-size));
  min-height: 18px;
  overflow: visible;
}
.century-dot {
  position: absolute;
  top: calc(var(--tl-dot-offset) + var(--tl-stack-i, 0) * var(--tl-dot-gap));
  width: var(--tl-dot-size);
  height: var(--tl-dot-size);
  background: currentColor;
  opacity: 0.45;
  transition: opacity 0.2s, background 0.2s;
}
.century-seg.is-active .century-dot {
  opacity: 0.65;
}
.century-dot.is-active {
  opacity: 1;
  background: var(--wp--preset--color--contrast, #111);
}

/*# sourceMappingURL=style-index.css.map*/