/**
 * UCLA Events Calendar Templates — view-specific styles.
 *
 * Token file (`ucla-tokens.css`) declares the CSS custom properties used
 * here. This file maps those tokens onto The Events Calendar v2 view markup
 * (and our own block/widget templates).
 *
 * Everything is scoped to `body.ucla-tec` so the rules don't leak outside
 * the plugin's pages.
 */

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.ucla-breadcrumb {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  /* Matches the side gutters on .ucla-tec-single-grid below it. */
  box-sizing: content-box;
  padding: 16px 24px;
}

/* ── TEC default overrides ─────────────────────────────────────────────── */
#tribe-events-pg-template {
  max-width: none;
  padding: 12px 0 0 0;
}

/* Remove theme header margin on TEC archive/event pages */
.post-type-archive-tribe_events .ucla-header,
.single-tribe_events .ucla-header {
  margin-bottom: 0 !important;
}

/* ── Page chrome ───────────────────────────────────────────────────────── */
body.ucla-tec {
  font-family: var(--ucla-font);
  color: var(--ucla-text);
  background: #fff;
}
body.ucla-tec .tribe-events,
body.ucla-tec .tribe-events-pro {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Hero / page title (added by ucla-page-hero.php partial) ───────────── */
.ucla-tec-hero {
  padding: 40px 24px 32px;
  border-bottom: 1px solid var(--ucla-gray-10);
  background: #fff;
  margin-bottom: 24px;
}
.ucla-tec-hero--vibrant {
  background: var(--ucla-darkest-blue);
  color: #fff;
  border-bottom: 8px solid var(--ucla-gold);
}
.ucla-tec-hero__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; }
.ucla-tec-hero__title {
  font-size: var(--ucla-fs-54);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 12px;
}
.ucla-tec-hero__sub {
  font-size: var(--ucla-fs-18);
  line-height: 1.55;
  color: var(--ucla-gray-60);
  max-width: 720px;
}
.ucla-tec-hero--vibrant .ucla-tec-hero__sub { color: rgba(255,255,255,.85); }

/* ── View switcher (TEC tabs) ──────────────────────────────────────────── */
.tribe-events-c-view-selector,
.ucla-tec-views {
  border-bottom: 1px solid var(--ucla-gray-20);
  background: #fff;
  margin-bottom: 0;
}
.ucla-tec-views { display: flex; align-items: stretch; max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 0; }
.ucla-tec-views__tab {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ucla-gray-60);
  text-decoration: none;
  border-bottom: 4px solid transparent;
}
.ucla-tec-views__tab:hover { color: var(--ucla-darkest-blue); }
.ucla-tec-views__tab--active {
  color: var(--ucla-darkest-blue);
  border-bottom-color: var(--ucla-blue);
}
.ucla-tec-views[data-tone="vibrant"] .ucla-tec-views__tab--active { border-bottom-color: var(--ucla-gold); }

/* ── Filter bar ────────────────────────────────────────────────────────── */
.ucla-tec-filters {
  background: var(--ucla-gray-3);
  border-bottom: 1px solid var(--ucla-gray-10);
  padding: 16px 24px;
  margin-bottom: 24px;
}
.ucla-tec-filters__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ucla-tec-filters__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ucla-gray-60);
}
/* Separates the past-events toggle from the date-window chips — it changes
   the list's direction rather than narrowing its range. */
.ucla-tec-filters__divider {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  background: var(--ucla-gray-20);
  margin: 0 4px;
}
.ucla-tec-filters__search {
  margin-left: auto;
  border: 1px solid var(--ucla-gray-20);
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--ucla-font);
  min-width: 220px;
}

/* ── Month grid (TEC: .tribe-events-calendar-month) ─────────────────────── */
.ucla-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--ucla-gray-20);
  border-left: 1px solid var(--ucla-gray-20);
}
body.ucla-tec .tribe-events-calendar-month__header-column-title,
.ucla-tec-cal__head,
.ucla-cal-head {
  background: var(--ucla-darkest-blue) !important;
  color: #fff !important;
  padding: 12px 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.15) !important;
  min-width: 0;
}
body.ucla-tec .tribe-events-calendar-month__day,
.ucla-tec-cal__cell,
.ucla-cal-cell {
  background: #fff !important;
  min-height: 120px;
  padding: 8px 10px !important;
  border-right: 1px solid var(--ucla-gray-20) !important;
  border-bottom: 1px solid var(--ucla-gray-20) !important;
  min-width: 0;
  overflow: hidden;
}
body.ucla-tec .tribe-events-calendar-month__day--past,
.ucla-tec-cal__cell--past,
.ucla-cal-cell--past { background: var(--ucla-gray-3) !important; }

body.ucla-tec .tribe-events-calendar-month__day-date,
.ucla-tec-cal__num,
.ucla-cal-num { font-weight: 700; font-size: 14px; color: var(--ucla-text); }
body.ucla-tec .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.ucla-tec-cal__num--today,
.ucla-cal-num--today {
  background: var(--ucla-blue);
  color: #fff !important;
  padding: 2px 6px;
  border-radius: 0;
}

/* Event pills inside month cells */
body.ucla-tec .tribe-events-calendar-month__calendar-event,
.ucla-tec-evt-pill,
.ucla-evt-pill {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  padding: 3px 6px;
  background: var(--ucla-lightest-blue);
  color: var(--ucla-darkest-blue);
  border-left: 3px solid var(--ucla-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  box-sizing: border-box;
}
body.ucla-tec .tribe-events-calendar-month__calendar-event--featured,
.ucla-tec-evt-pill--gold,
.ucla-evt-pill--gold {
  background: #FFF4C2;
  color: #5A4500;
  border-left-color: var(--ucla-gold);
}
.ucla-evt-pill--ghost {
  background: transparent;
  color: var(--ucla-gray-60);
  border-left-color: transparent;
  font-style: italic;
}

/* ── List view (TEC: .tribe-events-calendar-list) ───────────────────────── */
body.ucla-tec .tribe-events-calendar-list__event,
.ucla-tec-event-row {
  display: grid;
  /* image · content · CTA — the date lives in the day header above the group */
  grid-template-columns: 240px 1fr auto;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid var(--ucla-gray-10);
  margin-bottom: 15px;
}
/* An event with no featured image drops the column rather than leaving a
   240px hole. Declared before the media query below so the single-column
   mobile rule, of equal specificity, still wins there. */
.ucla-tec-event-row--no-img {
  grid-template-columns: 1fr auto;
}

/* The CTA column holds one button. `align-items: flex-start` is what keeps it
   that size: a column flex container stretches its items across the full
   width by default, which blows the button up to the whole track — the whole
   row once the grid collapses to one column below 900px. The design system's
   .ucla-btn is a full-size CTA (1rem, .625rem/.875rem padding); this is a
   row action sitting beside a 15px excerpt, so it is scaled down to match. */
.ucla-tec-event-row__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ucla-tec-event-row__cta .ucla-btn {
  font-size: 14px;
  padding: 8px 12px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  body.ucla-tec .tribe-events-calendar-list__event,
  .ucla-tec-event-row {
    grid-template-columns: 1fr;
  }
  .ucla-tec-event-row__img, .ucla-tec-event-row__cta { grid-column: 1 / -1; }
}

.ucla-tec-event-row__day-header {
  padding: 8px 24px;
  margin-bottom: 1px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ucla-darkest-blue);
}

/* Past / upcoming link below the list — the second place someone who has run
   out of upcoming events will look. No border-top: the last event row already
   draws one, and the two together read as a double rule. */
.ucla-tec-list-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}
/* Keeps "forward in time" on the right even when there is no back link. */
.ucla-tec-list-nav__link--next { margin-left: auto; }
.ucla-tec-list-nav__link {
  font-weight: 700;
  font-size: 15px;
  color: var(--ucla-link);
  text-decoration: none;
  padding: 10px 16px;
  border: 2px solid var(--ucla-link);
  border-radius: var(--ucla-radius-btn);
}
.ucla-tec-list-nav__link:hover,
.ucla-tec-list-nav__link:focus {
  background: var(--ucla-link);
  color: #fff;
}

/* ── Date stack — styles provided by ucla-lib.min.css (UCLA Design System) */
/* Local overrides only: flex-shrink/align-self so it doesn't stretch in a flex row */
.ucla-card__event-date {
  flex-shrink: 0;
  align-self: flex-start;
}
.ucla-tec-featured .ucla-card__event-day {
  margin-top: -8px;
}

/* ── Photo view ────────────────────────────────────────────────────────── */
.ucla-tec-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px)  { .ucla-tec-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ucla-tec-photo-grid { grid-template-columns: 1fr; } }

.ucla-tec-photo-card { background: #fff; border: 1px solid var(--ucla-gray-10); }
.ucla-tec-photo-card__img {
  aspect-ratio: 16 / 10;
  background: var(--ucla-gray-5);
  background-size: cover;
  background-position: center;
  position: relative;
}
.ucla-tec-photo-card__body { padding: 16px; display: flex; gap: 12px; }
.ucla-tec-photo-card__title {
  font-size: 18px;
  line-height: 22px;
  color: var(--ucla-darkest-blue);
  font-weight: 700;
}

/* ── Single event ──────────────────────────────────────────────────────── */
.ucla-tec-single-hero {
  background: var(--ucla-darker-blue);
  color: #fff;
  padding: 48px 24px 32px;
  border-bottom: 8px solid var(--ucla-gold);
}
.ucla-tec-single-hero__title {
  font-size: var(--ucla-fs-36);
  line-height: 1.1;
  font-weight: 700;
  margin: 16px 0 16px;
  max-width: 820px;
}
.ucla-tec-single-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  /* Side gutters so the content clears the viewport edge once it is narrower
     than wide-size. content-box keeps the columns exactly wide-size on a big
     screen, with the gutters outside, whatever box-sizing the theme sets. */
  box-sizing: content-box;
  padding: 40px 24px;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}
@media (max-width: 900px) { .ucla-tec-single-grid { grid-template-columns: 1fr; } }

.ucla-tec-single-side {
  background: var(--ucla-gray-3);
  padding: 24px;
  border-top: 8px solid var(--ucla-blue);
}

/* ── Single event · custom fields (Secure Custom Fields / ACF) ─────────── */
.ucla-tec-fields { margin: 0 0 32px; }
.ucla-tec-fields__heading {
  font-family: var(--ucla-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ucla-darker-blue);
  margin: 0 0 12px;
}
.ucla-tec-fields__list {
  margin: 0;
  border-top: 1px solid var(--ucla-gray-20);
}
.ucla-tec-fields__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ucla-gray-10);
}
@media (max-width: 700px) { .ucla-tec-fields__row { grid-template-columns: 1fr; gap: 4px; } }
.ucla-tec-fields__label {
  font-weight: 700;
  font-size: 15px;
  color: var(--ucla-darkest-blue);
}
.ucla-tec-fields__value {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ucla-text);
}
.ucla-tec-fields__value > p:first-child { margin-top: 0; }
.ucla-tec-fields__value > p:last-child  { margin-bottom: 0; }

/* Repeater rows and group sub-fields */
.ucla-tec-fields__repeater { list-style: none; margin: 0; padding: 0; }
.ucla-tec-fields__item {
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--ucla-blue);
  margin-bottom: 8px;
}
.ucla-tec-fields__item:last-child { margin-bottom: 0; }
.ucla-tec-fields__sub { display: block; }
.ucla-tec-fields__sub-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ucla-gray-60);
  margin-right: 6px;
}
.ucla-tec-fields__img { max-width: 100%; height: auto; display: block; }
.ucla-tec-fields__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.ucla-tec-fields__swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid var(--ucla-gray-20);
}

/* ── Featured-events block ────────────────────────────────────────────── */
.ucla-tec-featured { padding: 32px 0; }
.ucla-tec-featured__head { display: flex; align-items: baseline; justify-content: space-between; }
.ucla-tec-featured__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.ucla-tec-featured__grid--row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .ucla-tec-featured__grid,
  .ucla-tec-featured__grid--row { grid-template-columns: 1fr; }
}

/* ── Mini calendar widget ─────────────────────────────────────────────── */
.ucla-tec-mini {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ucla-gray-10);
  font-family: var(--ucla-font);
}
.ucla-tec-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
  border-bottom: 2px solid var(--ucla-gold);
}
.ucla-tec-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-top: 12px;
}
.ucla-tec-mini__day {
  text-align: center;
  padding: 6px 0;
  position: relative;
  font-size: 14px;
}
.ucla-tec-mini__day--today { background: var(--ucla-blue); color: #fff; font-weight: 700; }
.ucla-tec-mini__day--muted { color: var(--ucla-gray-40); }
.ucla-tec-mini__day--has::after {
  content: "";
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--ucla-gold);
  border-radius: 50%;
}

/* ── Submit Events button — hidden until submission flow is ready ───── */
.tribe-events-calendar-submit-event,
.tribe-events__submit-events,
.tribe-community-events-submit-link,
.tribe-events-cal-links .tribe-event-url { display: none !important; }

/* ── Buttons / chips reach into TEC's primitives so its CTAs match ──── */
body.ucla-tec .tribe-events-c-subscribe-dropdown__button,
body.ucla-tec .tribe-common-c-btn {
  background: var(--ucla-link) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--ucla-radius-btn) !important;
  font-family: var(--ucla-font) !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
}
body.ucla-tec .tribe-common-c-btn:hover { background: var(--ucla-link-hover) !important; }
body.ucla-tec .tribe-events-c-top-bar__today-button {
  background: transparent !important;
  color: var(--ucla-link) !important;
  border: 2px solid var(--ucla-link) !important;
}