/* popup-event-calendar.css — generic PopUP_CMS event calendar.
   One unified card at every breakpoint: the poster on top, a full-black
   info banner below it (date, optional schedule line, title), and the
   event type as an always-visible icon sticker pinned to the card's
   bottom-right corner. Upcoming/past/all filters as real URL variants,
   year separators, next-event highlight, friendly empty state. Card
   chrome is self-coloured so every theme — and both color modes — renders
   it identically; only page-level bits (filters, year headers, empty
   state) ride the theme variables. */

/* --- FILTER CONTROLS --- */
.tour-controls {
  margin-bottom: 1.75rem;
}

.tour-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* Filter links point at the page's URL variants (data-page-variants
   marker on the source page) — real pages, so each filter state is a
   plain addressable URL. */
.tour-nav button,
.tour-nav a {
  background: transparent;
  padding: 6px 2px;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  color: var(--c-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
  text-decoration: none;
}

.tour-nav button:hover,
.tour-nav a:hover { color: var(--c-text); }

.tour-nav button.active,
.tour-nav a.active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* --- THE POSTER GRID --- */
.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .event-list { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem 0.8rem; }
}

/* Year separators span the full row */
.event-year {
  grid-column: 1 / -1;
  font-family: 'Lulo Clean W01 One Bold', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--c-muted);
  margin: 1.6rem 0 0.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.event-list > .event-year:first-child { margin-top: 0; }
.event-year::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* --- THE CARD --- */
/* One unified card at every breakpoint: the poster on top, a full-black
   info banner below it — no overlay scrims, no separate mobile layout. */
a.event-card, .event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.event-card:hover,
a.event-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.event-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

a.event-card:hover .event-card-img,
a.event-card:focus-visible .event-card-img {
  transform: scale(1.05);
}

/* info banner — full black, flat, one uniform height for every card; the
   right padding reserves the corner for the always-visible tipo chip */
.event-card-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  height: 104px;
  padding: 8px 60px 10px 12px;
  background: #000;
}

.event-card-date {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d9c9c9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* optional free-text schedule line ("Sábados 10:00–12:30", "Último
   viernes de mes", …) — renders only when the field is non-empty; one
   line, so every banner keeps the same height */
.event-card-schedule {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  line-height: 1.5;
  color: #e6d6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a.event-card:hover .event-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* --- TIPO CHIP --- */
/* Icon sticker, ALWAYS visible, pinned to the card's bottom-right corner
   (injected by the JS from the page's data-event-calendar icon rules).
   The transparent drawing's own black frame is the shape — just a drop
   shadow to lift it off the black banner. Types without a rule get a
   small text chip instead. */
.event-tipo-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.event-tipo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.event-tipo-chip--text {
  width: auto;
  height: auto;
  max-width: calc(100% - 52px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(10, 8, 10, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* The colour/hover gating is gone: the icon is part of the card now. */

/* --- NEXT / PAST --- */
.event-card.is-next {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

/* Tag text configurable via the page config ("nextLabel"); the JS copies
   it into --ec-next-label on the container. */
.event-card.is-next::after {
  content: var(--ec-next-label, "NEXT");
  position: absolute;
  top: 12px;
  right: -1px;
  z-index: 2;
  background: var(--c-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 9px 3px 10px;
  border-radius: 4px 0 0 4px;
}

.event-card.is-past .event-card-img {
  filter: grayscale(70%) brightness(0.82);
  transition: filter 0.3s ease, transform 0.45s ease;
}

a.event-card.is-past:hover .event-card-img {
  filter: grayscale(25%) brightness(0.95);
}

.event-card.is-past .event-card-title { color: rgba(255, 255, 255, 0.82); }

/* --- SMALL SCREENS: the same unified card, just tighter measures --- */
@media (max-width: 640px) {
  .event-card-info {
    height: 116px;
    padding: 8px 48px 10px 10px;
  }

  .event-tipo-chip {
    width: 38px;
    height: 38px;
    right: 8px;
    bottom: 8px;
  }

  .event-card-date {
    /* the narrow columns can't fit "19–21/04 · 2024" on one line */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .event-card.is-next::after {
    top: 8px;
    right: 8px;
    border-radius: 4px;
  }
}

/* --- EMPTY STATE --- */
.event-empty {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--c-muted);
  font-style: italic;
  line-height: 1.7;
  border: 1px dashed var(--c-border-strong);
  border-radius: 8px;
}
.event-empty a { color: var(--c-accent); }

/* --- EDITOR OUTLINES --- */
.medium-editor-element [data-event-calendar] {
  border: 1px dotted grey;
  padding: 6px;
}
.medium-editor-element [data-event-calendar] > .event-list {
  display: grid;
}
.medium-editor-element .event-card {
  border: 1px dotted green;
}

@media (prefers-reduced-motion: reduce) {
  .event-card, .event-card-img, .event-tipo-chip, .tour-nav button { transition: none; }
  a.event-card:hover { transform: none; }
  a.event-card:hover .event-card-img { transform: none; }
}