/* ════════════════════════════════════════════
   ARCHIVE HEROES — shared base
   Used by corsi, eventi (future)
════════════════════════════════════════════ */

/* Hide default WP banner on pages with custom hero */
.term-corsi .archive-banner,
.product-category-corsi .archive-banner { display: none; }

/* ═══ Hero wrapper ═══ */
.lr-archive-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 260px);
  min-height: 640px;
  background: var(--theme-bg);
  overflow: hidden;
}

/* ═══ Mosaic grid ═══ */
.lr-archive-hero__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 10px;
  padding: 10px;
}

/* ── Tile base ── */
.lr-archive-hero__tile {
  border-radius: 6px;
  overflow: hidden;
  opacity: 0;
  animation: archiveHeroTileFadeIn 0.6s ease forwards;
}

.lr-archive-hero__tile img,
.lr-archive-hero__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Tile positions ── */
.lr-archive-hero__tile--1 { grid-column: 1 / 4;   grid-row: 1 / 4; animation-delay: 0.1s; }
.lr-archive-hero__tile--2 { grid-column: 4 / 5;   grid-row: 1 / 3; animation-delay: 0.2s; }
.lr-archive-hero__tile--3 { grid-column: 10 / 13;  grid-row: 1 / 3; animation-delay: 0.15s; }
.lr-archive-hero__tile--4 { grid-column: 1 / 3;    grid-row: 4 / 6; animation-delay: 0.3s; }
.lr-archive-hero__tile--5 { grid-column: 11 / 13;  grid-row: 3 / 6; animation-delay: 0.25s; }
.lr-archive-hero__tile--6 { grid-column: 1 / 4;    grid-row: 6 / 9; animation-delay: 0.35s; }
.lr-archive-hero__tile--7 { grid-column: 4 / 8;    grid-row: 7 / 9; animation-delay: 0.4s; }
.lr-archive-hero__tile--8 { grid-column: 8 / 10;   grid-row: 7 / 9; animation-delay: 0.3s; }
.lr-archive-hero__tile--9 { grid-column: 10 / 13;  grid-row: 6 / 9; animation-delay: 0.45s; }

@keyframes archiveHeroTileFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══ Radial overlay ═══ */
.lr-archive-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(240, 238, 230, 0.7) 20%,
    rgba(240, 238, 230, 0.1) 55%,
    rgba(240, 238, 230, 0.12) 100%
  );
  pointer-events: none;
}

[data-theme="dark"] .lr-archive-hero__overlay {
  background: radial-gradient(
    ellipse at center,
    rgba(28, 28, 28, 0.7) 20%,
    rgba(28, 28, 28, 0.1) 55%,
    rgba(28, 28, 28, 0.15) 100%
  );
}

/* ═══ CTA — dead center ═══ */
.lr-archive-hero__cta {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  padding: 2.5rem 3rem;
  opacity: 0;
  animation: archiveHeroCtaReveal 0.8s ease 0.5s forwards;
}

@keyframes archiveHeroCtaReveal {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Badge ── */
.lr-archive-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Epilogue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8C3127;
  margin-bottom: 1rem;
}

.lr-archive-hero__badge::before,
.lr-archive-hero__badge::after {
  content: '';
  width: 20px;
  height: 1.5px;
  background: #8C3127;
}

/* ── Title ── */
.lr-archive-hero__title {
  font-family: 'IM Fell French Canon', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  color: #1A1918;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}

[data-theme="dark"] .lr-archive-hero__title {
  color: var(--theme-text);
}

/* ── Subtitle ── */
.lr-archive-hero__subtitle {
  font-family: 'Epilogue', sans-serif;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--theme-text-secondary);
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto 1.8rem;
}

/* ── Buttons ── */
.lr-archive-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lr-archive-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #F0EEE6;
  background: var(--theme-accent);
  border: none;
  border-radius: 4px;
  padding: 14px 28px;
  cursor: pointer;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.lr-archive-hero__btn:hover {
  background: var(--theme-accent-light);
}

.lr-archive-hero__btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Epilogue', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-accent);
  background: none;
  border: 1.5px solid var(--theme-accent);
  border-radius: 4px;
  padding: 13px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}

.lr-archive-hero__btn-secondary:hover {
  background: var(--theme-accent);
  color: #F0EEE6;
}

/* ═══ Tablet ═══ */
@media (max-width: 768px) {
    .lr-archive-hero {
      min-height: 80vh;
    }
  
    .lr-archive-hero__mosaic {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 6px;
      padding: 6px;
    }
  
    .lr-archive-hero__tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
    .lr-archive-hero__tile--2 { grid-column: 3 / 5; grid-row: 1 / 2; }
    .lr-archive-hero__tile--3 { grid-column: 5 / 7; grid-row: 1 / 3; }
    .lr-archive-hero__tile--4 { grid-column: 1 / 2; grid-row: 3 / 5; }
    .lr-archive-hero__tile--5 { grid-column: 6 / 7; grid-row: 3 / 5; }
    .lr-archive-hero__tile--6 { grid-column: 1 / 3; grid-row: 8 / 11; }
    .lr-archive-hero__tile--7 { grid-column: 3 / 5; grid-row: 9 / 11; }
    .lr-archive-hero__tile--8 { grid-column: 5 / 7; grid-row: 9 / 11; }
    .lr-archive-hero__tile--9 { grid-column: 5 / 7; grid-row: 7 / 9; }
  
    .lr-archive-hero__cta {
      padding: 1.5rem 1.2rem;
    }
  
    .lr-archive-hero__overlay {
      background: radial-gradient(
        ellipse at center,
        rgba(240, 238, 230, 0.92) 15%,
        rgba(240, 238, 230, 0.55) 50%,
        rgba(240, 238, 230, 0.15) 100%
      );
    }
  }
  
  /* ═══ Phone — filmstrip ═══ */
  @media (max-width: 480px) {
    .lr-archive-hero {
      min-height: auto;
      height: auto;
      display: flex;
      flex-direction: column;
    }
  
    .lr-archive-hero__mosaic {
      display: flex;
      gap: 8px;
      padding: 8px;
      overflow-x: visible;
      position: relative;
      order: 2;
      height: 160px;
      width: max-content;
      animation: archiveHeroScroll 75s linear infinite;
    }
  
    .lr-archive-hero__tile {
      flex: 0 0 220px;
      height: 100%;
      border-radius: 6px;
      animation: none;
      opacity: 1;
    }
  
    .lr-archive-hero__tile video {
      display: block;
    }
  
    .lr-archive-hero__overlay {
      display: none;
    }
  
    .lr-archive-hero__cta {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      opacity: 1;
      animation: none;
      order: 1;
      padding: 3rem 1.5rem 1.5rem;
      background: var(--theme-bg);
    }
  
    .lr-archive-hero__actions {
      flex-direction: column;
    }
  
    .lr-archive-hero__btn,
    .lr-archive-hero__btn-secondary {
      width: 100%;
      justify-content: center;
    }
  
    @keyframes archiveHeroScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
  }