/* =========================================================
   LIVING WEBSITES
   EVENT TIMELINE

   Layout and responsive behaviour are controlled by Elementor.
   This file controls colour and visual theming only.
   ========================================================= */

/* =========================================================
   EVENT CARD
   ========================================================= */

.lw-event-list-card {
  border-bottom: 1px solid color-mix(in srgb, var(--lw-section-colour) 14%, transparent);

  color: var(--lw-card-text);
}

/* =========================================================
     DATE
     ========================================================= */

.lw-event-date-parts__day,
.lw-event-date-parts__number,
.lw-event-date-parts__month {
  color: var(--lw-section-colour);
}

/* =========================================================
     TIMELINE
     ========================================================= */

.lw-event-list-card__timeline {
  position: relative;
}

/*
   * Vertical line.
   *
   * Positioning is required here because the
   * line itself is a CSS-generated visual element.
   */
.lw-event-list-card__timeline::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 1px;

  transform: translateX(-50%);

  background: color-mix(in srgb, var(--lw-section-colour) 28%, transparent);
}

/*
   * Timeline dot.
   */
.lw-event-list-card__dot {
  position: relative;

  z-index: 2;

  border-radius: 50%;

  background-color: var(--lw-section-colour);

  box-shadow: 0 0 0 5px var(--lw-section-bg);
}

/*
   * First / last event line treatment.
   */
.lw-event-list .e-loop-item:first-child .lw-event-list-card__timeline::before {
  top: 50%;
}

.lw-event-list .e-loop-item:last-child .lw-event-list-card__timeline::before {
  bottom: 50%;
}

/* =========================================================
     TITLE
     ========================================================= */

.lw-event-list-card__title,
.lw-event-list-card__title .elementor-heading-title {
  color: var(--lw-card-heading);
}

/* =========================================================
     DESCRIPTION
     ========================================================= */

.lw-event-list-card__description {
  color: var(--lw-card-secondary);
}

/* =========================================================
     EVENT DETAILS
     ========================================================= */

.lw-event-list-card__details {
  color: var(--lw-card-secondary);
}

/* ---------------------------------------------------------
     TIME ICON
     --------------------------------------------------------- */

.lw-event-list-card__time::before,
.lw-event-list-card__time .elementor-shortcode::before {
  content: "◷";

  color: var(--lw-section-colour);
}

.lw-event-list-card__time:has(.elementor-shortcode)::before {
  content: none;
}

/* ---------------------------------------------------------
     LOCATION ICON
     --------------------------------------------------------- */

.lw-event-list-card__location::before,
.lw-event-list-card__location .elementor-shortcode::before {
  content: "●";

  color: var(--lw-section-colour);
}

.lw-event-list-card__location:has(.elementor-shortcode)::before {
  content: none;
}

/* =========================================================
     PRICE
     ========================================================= */

.lw-event-list-card__price {
  color: var(--lw-section-colour);
}

/* =========================================================
     ARROW
     ========================================================= */

.lw-event-list-card__arrow {
  color: var(--lw-section-colour);

  opacity: 0.8;
}

/* =========================================================
     HOVER COLOUR
     ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .lw-event-list-card {
    transition: background-color 0.2s ease;
  }

  .lw-event-list-card:hover {
    background: color-mix(in srgb, var(--lw-section-colour) 4%, transparent);
  }
}