/**
 * Program page — daily "dnevni dogodki" accordion + full searchable list.
 *
 * Colours come from the active Appearance profile (same as every other content
 * panel: --text-bg-program background, --content-color text) and are NO LONGER
 * inverted. A page can override them via field_panel_bg / field_panel_text,
 * which arrive as the inline custom properties --program-bg / --program-text.
 *
 * Daily mode: each day is its OWN panel with its own background, separated by a
 * gap and slightly tilted, alternating direction day to day (old-site feel).
 */
.reciklart-program {
  /* Resolved panel colours: per-page override → appearance token → hard default. */
  --program-panel-bg: var(--program-bg, var(--text-bg-program, rgba(0, 0, 0, 0.8)));
  --program-panel-text: var(--program-text, var(--content-color, #ffffff));
  /* How far each day panel tilts. Alternates direction per day. Keep small —
     tall panels at large angles can clip past the side gutter. Bump to taste. */
  --program-day-tilt: 2deg;

  width: min(60rem, 100% - 4rem);
  margin: 2.5rem auto;
  text-align: center;
  font-family: var(--content-font);
  font-size: var(--content-size);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Shared panel look (head, day, full-mode wrapper). */
.reciklart-program__head,
.reciklart-program__day,
.reciklart-program__panel {
  background: var(--program-panel-bg);
  color: var(--program-panel-text);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-sizing: border-box;
}

.reciklart-program__head { margin-bottom: 1.5rem; }

.reciklart-program__title {
  font-family: var(--page-title-font);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  color: var(--program-panel-text);
  margin: 0 0 1.5rem;
}

/* Optional header picture: original size, capped to the panel width. */
.reciklart-program__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
}

.reciklart-program__intro { margin: 0 auto; max-width: 40rem; }

/* --- Daily: separate, tilted day panels --------------------------------- */
.reciklart-program__days {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.reciklart-program__day {
  transform: rotate(var(--program-day-tilt));
  transition: transform 0.2s ease;
}
.reciklart-program__day:nth-child(even) {
  transform: rotate(calc(-1 * var(--program-day-tilt)));
}
/* Straighten the open/hovered day so it reads clearly. */
.reciklart-program__day[open],
.reciklart-program__day:hover {
  transform: rotate(0deg);
}

.reciklart-program__day-head {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0;
  font-family: var(--page-title-font);
  font-size: 1.6rem;
  text-transform: uppercase;
}
.reciklart-program__day-head::-webkit-details-marker { display: none; }
.reciklart-program__day-head::after { content: " +"; opacity: 0.5; }
.reciklart-program__day[open] > .reciklart-program__day-head::after { content: " –"; }
.reciklart-program__day-body { padding-top: 1rem; }
.reciklart-program__empty { opacity: 0.6; }

/* --- Event entry (shared by daily + full) -------------------------------- */
.reciklart-program__event {
  max-width: 600px;
  margin: 0 auto;
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.reciklart-program__event:first-child { border-top: 0; }
.reciklart-program__event-head { cursor: pointer; list-style: none; }
.reciklart-program__event-head::-webkit-details-marker { display: none; }
.reciklart-program__event-meta {
  display: block;
  color: var(--color-accent);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
}
.reciklart-program__event-title {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
}
.reciklart-program__event-detail { margin-top: 0.6rem; }

/* Minimalistic link/button to the full event page. */
.reciklart-program__link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.3rem 1rem;
  border: 1px solid currentColor;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.5px;
}
.reciklart-program__link:hover,
.reciklart-program__link:focus {
  background: var(--program-panel-text);
  color: var(--program-panel-bg);
  text-decoration: none;
}

/* --- Full (searchable) mode --------------------------------------------- */
/* React island; reuses the .reciklart-program__event accordion styles above.
 * Only the search/filter controls are new. */
.reciklart-program__status { opacity: 0.7; }

.reciklart-program__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.reciklart-program__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  text-align: left;
}
.reciklart-program__field--search { flex: 1 1 16rem; }
/* Two date inputs (from–to) share a row. */
.reciklart-program__dates { display: flex; gap: 0.5rem; }
.reciklart-program__dates input { min-width: 0; }
.reciklart-program__field-label {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.reciklart-program__field input,
.reciklart-program__field select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--program-panel-text) 40%, transparent);
  background: color-mix(in srgb, var(--program-panel-text) 10%, transparent);
  color: var(--program-panel-text);
  font-family: inherit;
  font-size: 1rem;
}
.reciklart-program__field input::placeholder { color: color-mix(in srgb, var(--program-panel-text) 55%, transparent); }
.reciklart-program__reset {
  padding: 0.55rem 1.25rem;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--program-panel-text);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.5px;
}
.reciklart-program__reset:hover,
.reciklart-program__reset:focus {
  background: var(--program-panel-text);
  color: var(--program-panel-bg);
}

.reciklart-program__count {
  margin: 0 0 1rem;
  font-size: 0.85em;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reciklart-program__events { max-width: 600px; margin: 0 auto; }

/* Event facts (artist / price) inside an expanded full-mode card. */
.reciklart-program__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0.6rem auto;
  text-align: left;
  max-width: 20rem;
}
.reciklart-program__facts dt {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85em;
}
.reciklart-program__facts dd { margin: 0; }