/* ==========================================================================
   Coppelius · calendario (calendario.html)
   Se carga DESPUÉS de styles.css y sobrescribe sus reglas del calendario.
   Patrones adaptados de la lista de la Wiener Staatsoper (no su marca):
   cabecera de temporada, filtros por género con contador, fecha completa
   en cada evento (el 2.º del mismo día solo enseña la hora), estado de la
   venta con precio desde, y CTA de entradas + «Detalles».

   Fase 2 (Bricks): las clases calendar__* y calendar-event__* son clases
   globales; los breakpoints, los de Bricks (base · ≤991 · ≤767).
   ========================================================================== */

:root {
  --calendar-inset: min(42px, 2.917vw);  /* sangría del contenido de la lista (42 a 1440) */
}

/* --------------------------------------------------------------------------
   Cabecera: temporada + mes (h1 visible)
   -------------------------------------------------------------------------- */
.calendar__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 40px var(--calendar-inset) 0px;
}

.calendar__season {
  font-size: var(--font-size-14);
  font-weight: 700;
  line-height: var(--line-height-tight);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-accent-on-light);
}

.calendar__title {
  font-size: var(--font-size-40);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-text-heading);
}

/* Pestañas: a sangre hasta 1440 (como el Figma); por encima, no pasan de 1440 */
.calendar__months {
  padding-top: 24px;
}

.calendar__months-list {
  max-width: calc(var(--wrap) + 96px);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Barra de filtros por género + contador
   -------------------------------------------------------------------------- */
.calendar__toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 24px var(--calendar-inset) 0px;
}

.calendar__filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar__filter {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  min-height: 40px;
  padding: 0px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  background-color: var(--color-bg-page);
  font-size: var(--font-size-14);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.calendar__filter:hover {
  border-color: var(--color-border-strong);
}

.calendar__filter--active {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.calendar__count {
  font-size: var(--font-size-14);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

.calendar__count-number {
  font-weight: 700;
  color: var(--color-text-body);
}

.calendar__empty {
  padding: 48px var(--calendar-inset);
  font-size: var(--font-size-16);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Lista de eventos: ritmo regular (el Figma tenía 48–154px sin regla)
   -------------------------------------------------------------------------- */
.calendar__events {
  padding-top: 8px;
}

.calendar-event {
  padding: 32px var(--calendar-inset) 40px;
}

/* Divisor punteado entre dos eventos del mismo día (agrupa el día, como la referencia) */
.calendar-event:has(+ .calendar-event > .calendar-event__date--continued) {
  border-bottom-style: dashed;
}

/* Oculto por el filtro (el display:grid de la clase ganaría al atributo) */
.calendar-event[hidden] {
  display: none;
}

/* 2.º evento del mismo día: misma estructura, solo se ve la hora, arriba */
.calendar-event__date--continued {
  padding-top: 2px;
}

.calendar-event__date--continued .calendar-event__weekday,
.calendar-event__date--continued .calendar-event__day {
  display: none;
}

.calendar-event__title-link {
  color: inherit;
  transition: color 0.2s ease;
}

.calendar-event__title-link:hover {
  color: var(--color-text-accent-on-light);
}

/* Botones: a 1440 llenan los 405px de la columna (188 + 14 + 203); entre
   992 y ~1300 se apilan y ocupan todo el ancho de la columna */
.calendar-event__button--buy,
.calendar-event__button--sold-out,
.calendar-event__button--details {
  flex-grow: 1;
}

/* «Detalles» solo (sin venta): no se estira */
.calendar-event__availability + .calendar-event__button--details {
  flex-grow: 0;
}

/* Entradas: estado + precio arriba, botones debajo */
.calendar-event__tickets {
  align-items: center;
  gap: 12px 14px;
  margin-top: 2px;
}

.calendar-event__availability {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 12px;
  flex: 1 0 100%;
  font-size: var(--font-size-14);
  line-height: var(--line-height-tight);
}

.calendar-event__status {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: var(--font-size-12);
  color: var(--color-text-body);
}

.calendar-event__status--pocas {
  color: var(--color-feedback-error-text);
}

.calendar-event__status--pocas::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background-color: currentColor;
}

.calendar-event__status--libre {
  color: var(--color-text-accent-on-light);
}

.calendar-event__price {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   ≤ 991 · tablet (derivado): todo lo táctil a 44px
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* La sección no tiene gutter: lo ponen la cabecera y la barra, como .calendar__events */
  .calendar__header,
  .calendar__toolbar {
    padding-inline: var(--space-gutter);
  }

  .calendar__empty {
    padding-inline: 0px;
  }

  .calendar__months-list {
    max-width: none;
  }

  .calendar__month,
  .calendar__filter {
    min-height: var(--size-tap-target);
  }

  .calendar-event {
    padding-inline: 0px;
  }

  .calendar-event__tickets {
    margin-top: 24px;
  }

  .calendar-event__availability {
    justify-content: flex-start;
  }

  .calendar-event__button {
    flex-grow: 0;
  }
}

/* --------------------------------------------------------------------------
   ≤ 767 · móvil (Figma 390)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .calendar__header {
    gap: 4px;
    padding-top: 24px;
  }

  .calendar__season {
    font-size: var(--font-size-12);
  }

  .calendar__title {
    font-size: var(--font-size-28);
  }

  .calendar__months {
    padding-top: 16px;
  }

  .calendar__month {
    height: var(--size-tap-target);
  }

  /* Filtros en una sola fila con scroll, a sangre dentro del gutter */
  /* nowrap: en columna con wrap, la línea mide lo que el contenido y desborda */
  .calendar__toolbar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    padding-top: 16px;
  }

  .calendar__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--space-gutter) * -1);
    padding-inline: var(--space-gutter);
    scrollbar-width: none;
  }

  .calendar__filter {
    flex: 0 0 auto;
    padding-inline: 14px;
    font-size: var(--font-size-12);
  }

  .calendar__events {
    padding-top: 8px;
  }

  .calendar-event {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .calendar-event__date--continued {
    padding-top: 0px;
  }

  .calendar-event__tickets {
    gap: 10px 8px;
    margin-top: 20px;
  }
}

/* Mes anterior / siguiente: en los extremos de la temporada calendario.js oculta
   el que no existe (el display de .button ganaría al atributo hidden) */
.calendar__month-button[hidden] {
  display: none;
}