/**
 * @file
 * Theme overrides for the x10 Calendar module (programme calendar).
 *
 * Loaded on top of the module stylesheet via libraries-extend in
 * rp_fl.info.yml (x10_calendar/calendar -> rp_fl/x10-calendar). The module
 * itself stays untouched: it exposes design tokens (--x10-cal-*), a per-term
 * colour palette (--x10-cal-track-{tid}-color, emitted in a cascade layer
 * that any unlayered theme rule beats) and stable class names.
 *
 * Goal: session cards in the list view look like the theme's own session
 * tickets (node--session--ticket.html.twig, .session-ticket in session.css):
 * pastel track colour as card background, --button-radius corners, meta row
 * (location / time) on top, heavy uppercase title, speaker names, track label
 * at the bottom, white background on hover, whole card clickable.
 *
 * Track colours: rp_fl_preprocess_x10_calendar() in rp_fl.theme redefines the
 * module's palette variables with the theme's --color-track-* values
 * (resolved via field_real_track_id, exactly like the tickets), so cards,
 * timeline tiles and filter dots all share the ticket colours.
 */

/* ========================================================================
   Design tokens — hand the module the theme's values
   ======================================================================== */
:root {
  --x10-cal-color-primary: var(--color-black);
  --x10-cal-color-accent: var(--color-black);
  --x10-cal-color-text: var(--color-text);
  --x10-cal-color-text-muted: var(--color-grey-dark);
  --x10-cal-color-border: var(--color-grey-light);
  --x10-cal-radius-sm: 4px;
  --x10-cal-radius-md: var(--border-radius);
  --x10-cal-font-heading: var(--font-heading);
  --x10-cal-font-size-sm: var(--font-size-expand);
  --x10-cal-font-size-h3: var(--font-size-section-subheader-3);
  /* Ticket cards are wider than the module default; wrap to fewer columns
     a bit earlier so three cards never get squeezed. */
  --x10-cal-item-min: 20rem;
  /* Sticky elements (slot time in the list, timeline head) and anchor
     scrolling stay clear of the sticky site header. base.css defines
     --header-height; the module's own token already falls back to it, this
     just makes the dependency explicit. */
  --x10-cal-header-height: var(--header-height, 4.5rem);
}

/* ========================================================================
   Day title & time column
   ======================================================================== */
.x10-cal-day-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-catch);
  line-height: var(--line-height-catch);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* The module paints the slot time white (dark-theme default); on the white
   theme page it has to be text-coloured. */
.x10-cal-time {
  font-family: var(--font-heading);
  font-size: var(--font-size-standard);
  line-height: var(--line-height-standard);
  color: var(--color-text);
}

.x10-cal-continuous-title {
  color: var(--color-text);
}

/* ========================================================================
   Session card (list view) — ticket look
   ------------------------------------------------------------------------
   Module markup order: star, track badges, speakers, title, formats,
   excerpt, meta, ics. The card is already a flex column, so the ticket
   order is applied with `order`:
     1 meta (location | time)   2 title   3 speakers (grows)
     5 formats                  6 track label
   ======================================================================== */
.x10-cal-item {
  gap: 0;
  min-height: 320px;
  /* Right padding leaves room for the favourite heart (absolute, top right). */
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  /* --track-stripe is set inline by the module: the track's palette variable
     (a plain colour) or a hard-stop gradient for sessions with several
     tracks. Both are valid values for the background shorthand. */
  background: var(--track-stripe, var(--color-track-default));
  color: var(--color-text);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--button-radius);
  box-shadow: none;
  transition: background-color var(--x10-cal-transition-base);
}

/* No accent stripe — the whole card carries the track colour. */
.x10-cal-item::before {
  display: none;
}

.x10-cal-item:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-white);
}

/* Whole card clickable, like .session-ticket__link: the title link is
   stretched over the card. Interactive children (heart, speaker links) sit
   above the overlay. */
.x10-cal-item-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.x10-cal-item .x10-cal-star,
.x10-cal-item .x10-cal-speaker {
  position: relative;
  z-index: 2;
}

.x10-cal-item .x10-cal-star {
  position: absolute;
}

/* --- Meta row: location left, time right (ticket: room | date, time) --- */
.x10-cal-item-meta {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
}

.x10-cal-item-meta > span {
  display: inline;
  gap: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

.x10-cal-item-meta > span::before {
  display: none;
}

.x10-cal-item-location {
  order: 1;
}

.x10-cal-item-time {
  order: 2;
}

.x10-cal-item-max {
  order: 3;
  width: 100%;
  font-weight: 400;
}

/* --- Title --- */
.x10-cal-item-title {
  order: 2;
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-standard);
  font-weight: 700;
  line-height: var(--line-height-standard);
  text-transform: uppercase;
}

.x10-cal-item-title a:hover,
.x10-cal-item-title a:focus-visible {
  color: inherit;
}

/* Partner mark: the theme's "P" graphic (same as .session-has-partner on
   the tickets) instead of the module's circle — on list cards and on the
   timeline/grid tiles. font-size: 0 hides the module's "P" text; the
   aria-label keeps the meaning for screen readers. */
.x10-cal-item-title .x10-cal-partner-badge,
.x10-cal-tl-item-title .x10-cal-partner-badge {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-size: 0;
  color: transparent;
  background: url(../images/partner-p.svg) center / contain no-repeat;
  border: 0;
  border-radius: 0;
}

.x10-cal-item-title .x10-cal-partner-badge {
  width: 2rem;
  height: 1.125rem;
}

/* Tiles scale with their (small) title font. */
.x10-cal-tl-item-title .x10-cal-partner-badge {
  width: 1.8em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.1em;
}

/* --- Speakers: plain uppercase names, comma separated, no thumbnails --- */
.x10-cal-item-speakers {
  order: 3;
  flex-grow: 1;
  align-items: flex-start;
  align-content: flex-start;
  gap: 0 0.35em;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 400;
  text-transform: uppercase;
}

.x10-cal-speaker {
  gap: 0;
  align-items: center;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.x10-cal-speaker:not(:last-child)::after {
  content: ",";
}

/* Speaker thumbnails stay (switch them off on the module's settings page,
   "show_speaker_images", if not wanted); just a little air before the name. */
.x10-cal-speaker-img {
  margin-right: 0.4rem;
}

/* --- Excerpt: tickets don't show one --- */
.x10-cal-item-excerpt {
  display: none;
}

/* --- Track label at the very bottom (ticket: .session-ticket__track) --- */
.x10-cal-track-badges {
  order: 6;
  gap: 0 0.5em;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.x10-cal-track-badge {
  display: inline;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

.x10-cal-track-badge:not(:last-child)::after {
  content: ",";
}

/* --- Formats: quiet line above the track label --- */
.x10-cal-item-formats {
  order: 5;
  gap: 0 0.5em;
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
  font-weight: 400;
  text-transform: uppercase;
}

.x10-cal-item-format {
  display: inline;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

.x10-cal-item-format::before {
  display: none;
}

.x10-cal-item-format:not(:last-child)::after {
  content: ",";
}

/* --- Favourite heart: outline in text colour, filled when favourited --- */
.x10-cal-item .x10-cal-star {
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text);
}

.x10-cal-item .x10-cal-star::before {
  -webkit-mask-image: var(--x10-cal-icon-heart-outline);
          mask-image: var(--x10-cal-icon-heart-outline);
}

.x10-cal-item .x10-cal-star.is-favorited {
  color: var(--color-text);
}

.x10-cal-item .x10-cal-star.is-favorited::before {
  -webkit-mask-image: var(--x10-cal-icon-heart);
          mask-image: var(--x10-cal-icon-heart);
}

/* --- Responsive (mirrors .session-ticket breakpoints) --- */
@media (max-width: 767px) {
  .x10-cal-item {
    min-height: 240px;
    padding: 1rem 2.75rem 1rem 1rem;
  }

  .x10-cal-item-title {
    font-size: var(--font-size-expand);
    line-height: var(--line-height-expand);
  }
}

/* ========================================================================
   Bottom bar — same colour as the site header
   (--color-header-bg is defined next to the header rule in vienna.css)
   ======================================================================== */
.x10-cal-bar {
  background: var(--color-header-bg, var(--color-white));
}

/* ========================================================================
   Timeline / grid tiles — same colours and type, lighter chrome
   ======================================================================== */
.x10-cal-tl-item-content {
  border: 1px solid var(--color-grey-light);
  box-shadow: none;
}

.x10-cal-tl-item-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: var(--font-size-expand);
  line-height: var(--line-height-expand);
}

/* Speaker names in the grid tiles: regular weight, like on the tickets. */
.x10-cal-tl-speaker {
  font-weight: 400;
  font-size:.9rem;
}

/* Pastel dots need an edge on the white drawer. */
.x10-cal-dot {
  border: 1px solid var(--color-grey-light);
}


.path-programm .container {
  max-width: var(--layout-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.x10-cal-toggle-liked.is-active, .x10-cal-filter-toggle.is-active {
  color: #ffffff;
  border-color: #ffffff;
}

.path-programm h1 {
    display: none;
}