/* ==========================================================================
   EVENTS — skin for The Events Calendar v6.
   Update-proof: colors/fonts flow through TEC's own public CSS custom
   properties (its documented theming API); the few structural rules below
   target long-stable `.tribe-events-*` classes only. No template overrides.
   ========================================================================== */

/* --- 1. TEC design tokens → brand tokens ---------------------------------- */
:root {
  /* accents (links, active view, datepicker selection) */
  --tec-color-accent-primary: var(--teal);
  --tec-color-accent-primary-hover: var(--teal-d);
  --tec-color-accent-primary-active: var(--teal-dd);
  --tec-color-accent-primary-background: var(--teal-ul);

  /* buttons ("Buscar Eventos", subscribe) */
  --tec-color-button-primary: var(--teal);
  --tec-color-button-primary-hover: var(--teal-d);
  --tec-color-button-primary-active: var(--teal-dd);
  --tec-color-button-primary-background: var(--teal);

  /* links */
  --tec-color-link-primary: var(--text);
  --tec-color-link-accent: var(--teal);
  --tec-color-link-accent-hover: var(--teal-d);

  /* text */
  --tec-color-text-primary: var(--text);
  --tec-color-text-secondary: var(--text-m);
  --tec-color-text-events-title: var(--text);
  --tec-color-text-event-date: var(--text);

  /* typography */
  --tec-font-family-sans-serif: var(--font-body);
  --tec-font-family-base: var(--font-body);

  /* borders */
  --tec-color-border-default: var(--border);
  --tec-color-border-secondary: var(--border);
  --tec-color-border-active: var(--teal);
}

/* --- 2. layout shell (hero prints from the theme header hook, so it is
   naturally full-width; TEC output gets the standard container) ------------ */
.gvb-events-body { padding: 34px 28px 64px; }

/* TEC prints empty wrapper blocks (price, venue) when an event has no such
   data — hide any tribe block without element children, and empty paragraphs
   the editor left behind. */
.tribe-events-single .tribe-block:not(:has(*)),
.tribe-events-single p:empty { display: none; }

/* --- 3. events bar --------------------------------------------------------
   With 14 events, the plugin's search bar + view switcher is pure chrome and
   the main reason the page reads "plugin" instead of "site". Hidden here
   (new theme only — the CSS never loads for the old theme). The list stays
   navigable via the Próximos/Anteriores selector below. */
.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-header__events-bar { display: none; }

/* headings ("Últimos Eventos Pasados", month names) in brand head font */
.tribe-events .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-latest-past__month-separator-text,
.tribe-events h2.tribe-events-c-messages__message-list-item,
.tribe-events-single-event-title,
.tribe-events .tribe-events-header__title-text {
  font-family: var(--font-head);
  color: var(--text);
}

/* --- 4. list view: brand media cards (same family as the blog cards) ------ */
.tribe-events .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-latest-past__event-row {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--white);
  padding: 22px;
  margin-bottom: 20px;
  transition: box-shadow .18s, transform .18s;
}
.tribe-events .tribe-events-calendar-list__event-row:hover,
.tribe-events .tribe-events-calendar-latest-past__event-row:hover {
  box-shadow: var(--sh-m);
  transform: translateY(-2px);
}
/* date numeral in teal */
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag-daynum {
  color: var(--teal);
  font-family: var(--font-head);
}

/* media-card layout: image LEFT at fixed size (the plugin floats a huge
   image right, which is what breaks coherence), details right */
.tribe-events .tribe-events-calendar-list__event,
.tribe-events .tribe-events-calendar-latest-past__event,
.tribe-events .tribe-events-calendar-list__event-wrapper > div:only-child,
.tribe-events .tribe-events-calendar-latest-past__event-wrapper {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-events .tribe-events-calendar-latest-past__event-featured-image-wrapper {
  order: -1;
  flex: 0 0 260px;
  max-width: 260px;
  margin: 0;
  padding: 0;
}
.tribe-events .tribe-events-calendar-list__event-featured-image-link,
.tribe-events .tribe-events-calendar-latest-past__event-featured-image-link { display: block; }
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-latest-past__event-featured-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--mint-bg);
}

/* tighten the space the hidden events-bar leaves behind */
.tribe-events .tribe-events-header { padding-top: 0; margin-top: 0; }
.tribe-events .tribe-events-calendar-list__event-details,
.tribe-events .tribe-events-calendar-latest-past__event-details {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .tribe-events .tribe-events-calendar-list__event,
  .tribe-events .tribe-events-calendar-latest-past__event,
  .tribe-events .tribe-events-calendar-list__event-wrapper > div:only-child,
  .tribe-events .tribe-events-calendar-latest-past__event-wrapper { flex-direction: column; gap: 14px; }
  .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper,
  .tribe-events .tribe-events-calendar-latest-past__event-featured-image-wrapper { flex-basis: auto; max-width: none; width: 100%; }
}

/* datetime as a small teal eyebrow, title in head font, muted description */
.tribe-events .tribe-events-calendar-list__event-datetime-wrapper,
.tribe-events .tribe-events-calendar-latest-past__event-datetime-wrapper {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal-d);
  margin-bottom: 4px;
}
.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-latest-past__event-title-link {
  font-family: var(--font-head);
}
.tribe-events .tribe-events-calendar-list__event-description,
.tribe-events .tribe-events-calendar-latest-past__event-description {
  color: var(--text-m);
  font-size: var(--fs-s);
}

/* month separators as quiet section rules */
.tribe-events .tribe-events-calendar-list__month-separator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 18px;
}
.tribe-events .tribe-events-calendar-list__month-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* "no events" notice → informative, on-brand */
.tribe-events .tribe-events-c-messages__message {
  background: var(--mint-bg);
  border-radius: var(--r);
  color: var(--text-m);
}

/* --- 5. single event (classic template) ----------------------------------- */
.tribe-events-single { max-width: 860px; margin: 0 auto; }
.tribe-events-notices {
  background: var(--mint-bg);
  border: none;
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--teal-dd);
  text-shadow: none;
}
.tribe-events-single-event-title { line-height: 1.25; }
.tribe-events-schedule h2 { color: var(--teal-d); font-family: var(--font-head); }
.tribe-events-single .tribe-events-event-image img { border-radius: var(--r); height: auto; }
.tribe-events-single .tribe-events-single-event-description {
  font-size: var(--fs-b);
  line-height: 1.75;
}
.tribe-events-event-meta {
  background: var(--mint-bg);
  border: none;
  border-radius: var(--r);
}
.tribe-events-event-meta .tribe-events-meta-group { padding: 18px 22px; }
.tribe-events-meta-group .tribe-events-single-section-title {
  font-family: var(--font-head);
  color: var(--teal-d);
}
.tribe-events-single a { color: var(--teal); }
.tribe-events-single a:hover { color: var(--teal-d); }
.tribe-events-back a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
}
/* prev / next event footer */
.tribe-events-nav-pagination a,
#tribe-events-footer a, #tribe-events-header a { color: var(--teal); }

/* --- 6. small screens ------------------------------------------------------ */
@media (max-width: 639px) {
  .gvb-events-body { padding: 22px 16px 48px; }
  .tribe-events .tribe-events-calendar-list__event-row,
  .tribe-events .tribe-events-calendar-latest-past__event-row { padding: 16px; }
}