/* ============================================================================
   Centralia Carillon — The Events Calendar (List View) restyle
   Matches: Centralia_Carillon_-_Prototype_dc.html  (Events page)
   Load location: child theme  ->  /tribe-events/tribe-events.css
   (Auto-loaded by TEC, AFTER the plugin's own stylesheets.)

   Brand tokens:
     crimson (primary/action) ....... #9c1b2e   (hover: #7d1624)
     slate navy (headings) .......... #23303a
     ink text ....................... #3a3a36
     body text (muted) .............. #5a564d
     faint text ..................... #8a8478 / #6b6557
     hairline / card border ......... #ece8dd  #e0dac9  #d9d3c6
     fonts .......................... Newsreader (serif, headings)
                                      Public Sans (sans, body)
   Everything is scoped to  .tribe-events-view--list  so it only touches the
   List view and outranks TEC's default rules. A few layout-critical rules use
   !important where TEC's defaults are otherwise stubborn.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0.  BRAND TOKENS  ->  TEC CSS custom properties
   Redefining these at :root recolors most interactive elements (buttons,
   links, accents, the search icon) in one shot, so we don't have to chase
   individual selectors.  These load on event pages only.
   --------------------------------------------------------------------------- */
:root {
  --tec-color-accent-primary:            #9c1b2e;
  --tec-color-accent-primary-hover:      #7d1624;
  --tec-color-accent-primary-active:     #7d1624;
  --tec-color-accent-primary-background: #9c1b2e;

  --tec-color-button-primary:            #9c1b2e;
  --tec-color-button-primary-hover:      #7d1624;
  --tec-color-button-primary-active:     #7d1624;
  --tec-color-button-primary-background:            #9c1b2e;
  --tec-color-button-primary-background-hover:      #7d1624;

  --tec-color-link-primary:              #9c1b2e;
  --tec-color-link-accent:               #9c1b2e;
  --tec-color-link-accent-hover:         #7d1624;

  /* Base font for the calendar UI (chrome, buttons, meta). Headings get
     Newsreader explicitly further down. */
  --tec-font-family-sans-serif: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --tec-font-family-base:       'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}


/* ---------------------------------------------------------------------------
   1.  OUTER CONTAINER
   Keep the calendar aligned with the rest of the site (1400px, centered).
   If your Divi row already constrains width, this is just a safety net.
   --------------------------------------------------------------------------- */
.tribe-events-view--list.tribe-events,
.tribe-events-view--list .tribe-events-l-container {
  max-width: 1400px;
  margin-inline: auto;
  font-family: 'Public Sans', sans-serif;
}


/* ---------------------------------------------------------------------------
   2.  EVENTS BAR  (search + Find Events + List/Month/Day switcher)
   Prototype: one white pill, 1px #e0dac9 border, 6px radius.
   TEC classes: .tribe-events-c-events-bar / .tribe-events-c-search /
                .tribe-events-c-view-selector
   --------------------------------------------------------------------------- */
.tribe-events-view--list .tribe-events-c-events-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e0dac9;
  border-radius: 6px;
  padding: 8px 10px 8px 18px;
  box-shadow: none;
  margin-top: 20px;
}

/* search field: strip TEC's box, keep it inline in the pill */
.tribe-events-view--list .tribe-events-c-events-bar__search,
.tribe-events-view--list .tribe-events-c-search {
  flex: 1 1 240px;
  min-width: 240px;
  margin: 0;
}
.tribe-events-view--list .tribe-events-c-search__input-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.tribe-events-view--list .tribe-events-c-search__input {
  font-family: 'Public Sans', sans-serif;
  font-size: 15.5px;
  color: #3a3a36;
  background: transparent;
  border: none;
  padding: 9px 0;
}
.tribe-events-view--list .tribe-events-c-search__input::placeholder { color: #8a8478; }

/* search icon -> crimson */
.tribe-events-view--list .tribe-events-c-search .tribe-common-c-svgicon,
.tribe-events-view--list .tribe-events-c-search__input-control-icon-svg {
  color: #9c1b2e;
  fill: #9c1b2e;
}

/* Find Events button (color comes from the vars above; this tightens the shape) */
.tribe-events-view--list .tribe-events-c-search__button {
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

/* View switcher: List / Month / Day */
.tribe-events-view--list .tribe-events-c-view-selector__list {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tribe-events-view--list .tribe-events-c-view-selector__list-item-link {
  font-size: 15px;
  font-weight: 600;
  color: #8a8478;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2.5px solid transparent;
}
.tribe-events-view--list .tribe-events-c-view-selector__list-item-link:hover { color: #23303a; }

/* Active tab (List). NOTE: confirm the active class in DevTools on your build —
   it is usually  ...__list-item--active . */
.tribe-events-view--list .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  color: #23303a;
  font-weight: 700;
  border-bottom-color: #9c1b2e;
}


/* ---------------------------------------------------------------------------
   3.  TOP BAR  (date navigation: ‹ ›  Today   "Upcoming" label)
   TEC class: .tribe-events-c-top-bar
   --------------------------------------------------------------------------- */
.tribe-events-view--list .tribe-events-c-top-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 2px;
  border: none;
}

/* prev / next arrows -> 40px outlined circles */
.tribe-events-view--list .tribe-events-c-top-bar__nav-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #d9d3c6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6557;
  background: transparent;
}
.tribe-events-view--list .tribe-events-c-top-bar__nav-link:hover {
  border-color: #9c1b2e;
  color: #9c1b2e;
}
.tribe-events-view--list .tribe-events-c-top-bar__nav-link .tribe-common-c-svgicon {
  color: currentColor;
}

/* Today button -> outlined pill */
.tribe-events-view--list .tribe-events-c-top-bar__today-button {
  border: 1.5px solid #d9d3c6;
  color: #3a3a36;
  padding: 9px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14.5px;
  background: transparent;
}
.tribe-events-view--list .tribe-events-c-top-bar__today-button:hover {
  border-color: #9c1b2e;
  color: #9c1b2e;
}

/* Date label ("Upcoming") -> Newsreader */
.tribe-events-view--list .tribe-events-c-top-bar__datepicker-button,
.tribe-events-view--list .tribe-events-c-top-bar__datepicker-time {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 30px;
  color: #23303a;
}
.tribe-events-view--list .tribe-events-c-top-bar__datepicker-button .tribe-common-c-svgicon {
  color: #9c1b2e;
}


/* ---------------------------------------------------------------------------
   4.  MONTH SEPARATOR  ("July 2026" + hairline)
   TEC class: .tribe-events-calendar-list__month-separator
   --------------------------------------------------------------------------- */
.tribe-events-view--list .tribe-events-calendar-list__month-separator {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 36px 0 4px;
  border: none;
  text-align: left;
}
.tribe-events-view--list .tribe-events-calendar-list__month-separator-text {
  font-family: 'Public Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #8a8478;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
/* the trailing hairline */
.tribe-events-view--list .tribe-events-calendar-list__month-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e0dac9;
}


/* ---------------------------------------------------------------------------
   5.  EVENT ROW  ->  [ date tag ] [ details ] [ image ]
   Default TEC order is  date-tag | (image + details stacked).  We turn the
   article into a flex row and push the featured image to the right.
   --------------------------------------------------------------------------- */

/* the row itself */
.tribe-events-view--list .tribe-events-calendar-list__event-row {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  padding: 34px 0;
  margin: 0;
  border-bottom: 1px solid #ece8dd;
}
.tribe-events-view--list .tribe-events-calendar-list__event-row:first-of-type { padding-top: 6px; }

/* DATE TAG (far left, 70px) */
.tribe-events-view--list .tribe-events-calendar-list__event-date-tag {
  flex: 0 0 70px;
  width: 70px;
  text-align: center;
  padding: 4px 0 0;
  margin: 0;
}
/* day-of-week (confirm class in DevTools: ...date-tag-weekday) */
.tribe-events-view--list .tribe-events-calendar-list__event-date-tag-weekday {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9c1b2e;
  line-height: 1.2;
}
/* big day number (confirm class in DevTools: ...date-tag-daynumber) */
.tribe-events-view--list .tribe-events-calendar-list__event-date-tag-daynumber {
  display: block;
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.02;
  color: #23303a;
}

/* WRAPPER (transparent flex passthrough so date-tag | article sit side by side) */
.tribe-events-view--list .tribe-events-calendar-list__event-wrapper {
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
}

/* ARTICLE -> flex row: details (left, grows) + image (right, fixed) */
.tribe-events-view--list .tribe-events-calendar-list__event {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 34px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* FEATURED IMAGE -> right side, 300 x 200, rounded */
.tribe-events-view--list .tribe-events-calendar-list__event-featured-image-wrapper {
  order: 2;                 /* push to the right of the details */
  flex: 0 0 300px;
  width: 300px;
  height: 200px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}
.tribe-events-view--list .tribe-events-calendar-list__event-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 8px;
  display: block;
}

/* DETAILS -> left, grows */
.tribe-events-view--list .tribe-events-calendar-list__event-details {
  order: 1;
  flex: 1;
  min-width: 0;
  padding: 0;
}

/* header: put the time ABOVE the title (prototype order) */
.tribe-events-view--list .tribe-events-calendar-list__event-header {
  display: flex;
  flex-direction: column;
}
.tribe-events-view--list .tribe-events-calendar-list__event-datetime-wrapper {
  order: 1;
  font-size: 14.5px;
  font-weight: 600;
  color: #9c1b2e;
  margin: 0 0 8px;
}
.tribe-events-view--list .tribe-events-calendar-list__event-title {
  order: 2;
  margin: 0 0 12px;
}
.tribe-events-view--list .tribe-events-calendar-list__event-title-link {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  color: #23303a;
  text-decoration: none;
}
.tribe-events-view--list .tribe-events-calendar-list__event-title-link:hover { color: #9c1b2e; }

/* description / excerpt */
.tribe-events-view--list .tribe-events-calendar-list__event-description {
  font-size: 15.5px;
  line-height: 1.62;
  color: #5a564d;
  margin: 0 0 14px;
  max-width: 640px;
}
.tribe-events-view--list .tribe-events-calendar-list__event-description p { margin: 0 0 14px; }

/* "Read more" link, if shown -> crimson "View details" style */
.tribe-events-view--list .tribe-events-calendar-list__event-description .tribe-events-calendar-list__event-read-more,
.tribe-events-view--list a.tribe-events-calendar-list__event-read-more {
  font-size: 14px;
  font-weight: 700;
  color: #9c1b2e;
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   6.  BOTTOM PAGINATION  ("Previous Events"  /  "Next Events →")
   TEC class: .tribe-events-c-nav
   --------------------------------------------------------------------------- */
.tribe-events-view--list .tribe-events-c-nav {
  border-top: none;
  margin-top: 40px;
}
.tribe-events-view--list .tribe-events-c-nav__prev,
.tribe-events-view--list .tribe-events-c-nav__next {
  border: 1.5px solid #d9d3c6;
  color: #3a3a36;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  background: transparent;
}
.tribe-events-view--list .tribe-events-c-nav__prev:hover,
.tribe-events-view--list .tribe-events-c-nav__next:hover {
  border-color: #9c1b2e;
  color: #9c1b2e;
}


/* ---------------------------------------------------------------------------
   7.  RESPONSIVE
   TEC uses CONTAINER breakpoints, not @media. The class .tribe-common--
   breakpoint-medium is added to the container at >=768px. So: write the
   MOBILE layout as the unprefixed default, and desktop as breakpoint-prefixed.
   Below, we let desktop keep the styles above and collapse to a stacked
   layout on narrow containers.
   --------------------------------------------------------------------------- */

/* Narrow containers (below medium): stack date -> details -> image */
.tribe-events-view--list .tribe-events-calendar-list__event-row {
  flex-wrap: wrap;
}
.tribe-events-view--list .tribe-events-calendar-list__event {
  flex-wrap: wrap;
}
.tribe-events-view--list .tribe-events-calendar-list__event-featured-image-wrapper {
  /* full-width image when the column is narrow */
  flex-basis: 100%;
  width: 100%;
  height: 200px;
  margin-top: 16px;
}

/* Restore the side-by-side layout once the container hits medium (>=768px) */
.tribe-common--breakpoint-medium.tribe-events-view--list .tribe-events-calendar-list__event {
  flex-wrap: nowrap;
}
.tribe-common--breakpoint-medium.tribe-events-view--list .tribe-events-calendar-list__event-featured-image-wrapper {
  flex: 0 0 300px;
  width: 300px;
  margin-top: 0;
}
.tribe-common--breakpoint-medium.tribe-events-view--list .tribe-events-calendar-list__event-row {
  flex-wrap: nowrap;
}

/* Back-to-events link on the archive (Advanced Template Settings) */
.carillon-events-backlink {
  max-width: 1400px;
  margin: 0 auto 28px;   /* space below the link, above the search bar */
  padding: 0 40px;
}
.carillon-events-backlink a {
  display: inline-block;
  border: 1.5px solid #d9d3c6;
  color: #3a3a36;
  padding: 12px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;       /* larger text */
  line-height: 1;
  text-decoration: none;
}
.carillon-events-backlink a:hover {
  border-color: #9c1b2e;
  color: #9c1b2e;
}
/* Hide the back-to-events link on single event pages (archive keeps it) */
.single-tribe_events .carillon-events-backlink {
    display: none;
}