/* TRP Events - Frontend Styles */

/* ── Custom Properties ── */
:root {
  --trp-primary:        var(--bb-primary-color, #5087e5);
  --trp-primary-rgb:    var(--bb-primary-color-rgb, 80, 135, 229);
  --trp-card-bg:        var(--bb-content-background-color, #ffffff);
  --trp-card-border:    var(--bb-content-border-color, #e5e8ec);
  --trp-text:           var(--bb-body-text-color, #4a5568);
  --trp-heading:        var(--bb-headings-color, #122b46);
  --trp-alt-text:       var(--bb-alternate-text-color, #718096);
  --trp-radius:         var(--bb-block-radius, 12px);
  --trp-btn-radius:     var(--bb-button-radius, 6px);
  --trp-columns-d:      3;
  --trp-columns-t:      2;
  --trp-columns-m:      1;
  --trp-gap:            1.5rem;
  --trp-card-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --trp-card-shadow-hover: 0 10px 25px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
  --trp-transition:     .22s cubic-bezier(.4,0,.2,1);
  --trp-event-accent:   var(--trp-primary);
  --trp-image-ratio:    16/9;
}

/* ── Wrapper ── */
.trp-events-wrap {
  width: 100%;
  position: relative;
}

/* ── Archive page (/events/, /events/category/x/, /events/tag/x/) ── */
.trp-archive {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.trp-archive__header {
  margin-bottom: 2rem;
  text-align: center;
}

.trp-archive__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--trp-heading);
  margin: 0 0 .5rem;
  line-height: 1.2;
}

.trp-archive__intro {
  font-size: 1rem;
  color: var(--trp-alt-text);
  line-height: 1.6;
  max-width: 42rem;
  margin: 0 auto;
}

/* ── Filter Bar ── */
.trp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--trp-card-border);
}

.trp-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border: 2px solid transparent;
  border-radius: 9999px;
  background: transparent;
  color: var(--trp-alt-text);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--trp-transition), background var(--trp-transition), border-color var(--trp-transition);
  white-space: nowrap;
}

.trp-filter-btn:hover {
  color: var(--trp-primary);
  background: rgba(var(--trp-primary-rgb), .06);
}

.trp-filter-btn.active {
  color: var(--trp-primary);
  border-color: var(--trp-primary);
  background: rgba(var(--trp-primary-rgb), .08);
  font-weight: 600;
}

.trp-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  border-radius: 9999px;
  background: var(--trp-card-border);
  color: var(--trp-alt-text);
  font-size: .7rem;
  font-weight: 700;
  transition: background var(--trp-transition), color var(--trp-transition);
}

.trp-filter-btn.active .trp-filter-count {
  background: var(--trp-primary);
  color: #fff;
}

/* ── Grid ── */
.trp-grid {
  display: grid;
  grid-template-columns: repeat(var(--trp-columns-d), 1fr);
  gap: var(--trp-gap);
  align-items: start;
}

@media (max-width: 1024px) {
  .trp-grid { grid-template-columns: repeat(var(--trp-columns-t), 1fr); }
}

@media (max-width: 640px) {
  .trp-grid { grid-template-columns: repeat(var(--trp-columns-m), 1fr); }
}

/* ── Card ── */
.trp-card {
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-radius: var(--trp-radius);
  box-shadow: var(--trp-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trp-transition), box-shadow var(--trp-transition);
  position: relative;
  border-top: 3px solid var(--trp-event-accent);
}

.trp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--trp-card-shadow-hover);
}

/* Card image */
.trp-card__image-link {
  display: block;
  text-decoration: none;
}

.trp-card__image {
  position: relative;
  aspect-ratio: var(--trp-image-ratio, 16/9);
  overflow: hidden;
  background: var(--trp-card-border);
}

.trp-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}

.trp-card:hover .trp-card__image img {
  transform: scale(1.04);
}

/* Gradient placeholder when no featured image — keeps cards visually consistent */
.trp-card__image--placeholder {
  background: linear-gradient(
    135deg,
    var(--trp-event-accent) 0%,
    rgba(var(--trp-primary-rgb), .35) 100%
  );
}

/* Dimmed/disabled treatment for locked cards (toggled via Settings → Lock).
   Keeps the lock icon at full opacity so it stays legible. */
.trp-card--dimmed .trp-card__image,
.trp-card--dimmed .trp-card__body {
  filter: grayscale(.85) saturate(.4);
  opacity: .55;
  transition: filter var(--trp-transition), opacity var(--trp-transition);
}

.trp-card--dimmed:hover .trp-card__image,
.trp-card--dimmed:hover .trp-card__body {
  filter: grayscale(0) saturate(1);
  opacity: .85;
}

.trp-card--dimmed .trp-card__actions {
  opacity: .65;
  transition: opacity var(--trp-transition);
}

.trp-card--dimmed:hover .trp-card__actions {
  opacity: 1;
}

/* Lock badge — top-right corner of locked event cards */
.trp-card__lock {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: rgba(10, 16, 28, 0.78);
  color: #fff;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none;
}

.trp-card__lock svg {
  width: 14px;
  height: 14px;
}

/* Category badge */
.trp-card__category {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .25rem .75rem;
  border-radius: 9999px;
  background: var(--trp-event-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  z-index: 1;
  pointer-events: none;
}

/* Card body */
.trp-card__body {
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  flex: 1;
}

.trp-card__date-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.75rem;
  border-radius: 10px;
  background: rgba(var(--trp-primary-rgb), .08);
  border: 1px solid rgba(var(--trp-primary-rgb), .2);
  line-height: 1;
}

.trp-card__day {
  font-size: 2rem;
  font-weight: 800;
  color: var(--trp-event-accent);
  display: block;
  letter-spacing: -.02em;
}

.trp-card__month {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-alt-text);
  display: block;
  margin-top: 4px;
}

.trp-card__content {
  flex: 1;
  min-width: 0;
}

.trp-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  line-height: 1.3;
  color: var(--trp-heading);
}

.trp-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trp-transition);
}

.trp-card__title a:hover { color: var(--trp-primary); }

/* Card meta */
.trp-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: .75rem;
}

.trp-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--trp-alt-text);
}

.trp-card__meta-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: var(--trp-event-accent);
}

.trp-card__excerpt {
  font-size: .825rem;
  color: var(--trp-text);
  line-height: 1.55;
  margin: 0 0 .875rem;
  /* Reserve ~3 lines so cards align even when an event has no excerpt. */
  min-height: calc(.825rem * 1.55 * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trp-card__excerpt:empty {
  /* Keep the reserved space without showing a stray dot/underline. */
  content: '';
}

/* Card actions — full-width row that sits below the body and aligns flush
   with the card's left edge (no date-badge indent). Each button is locked
   to exactly 50% width minus half the gap, so:
     - 2 buttons → fill the row evenly
     - 1 button  → still 50% wide, sits on the left, right half empty */
.trp-card__actions {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  flex-wrap: nowrap;
  padding: 0 1.25rem 1.25rem;
  margin-top: auto;
}

.trp-card__actions .trp-btn {
  flex: 0 0 calc(50% - .25rem);
  min-width: 0;
  padding: .6rem .5rem;
  justify-content: center;
  font-size: .8rem;
}

/* ── Buttons ── */
.trp-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--trp-btn-radius);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--trp-transition), color var(--trp-transition), border-color var(--trp-transition), box-shadow var(--trp-transition);
  white-space: nowrap;
  line-height: 1;
  /* Reset theme button styles that sometimes leak through (e.g. BuddyBoss hover gradient). */
  text-shadow: none;
  box-shadow: none;
}

.trp-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Primary (filled) — uses event accent by default; settings can override via CSS vars. */
.trp-btn--primary,
.trp-btn--primary:link,
.trp-btn--primary:visited {
  background-color: var(--trp-btn-bg, var(--trp-event-accent)) !important;
  color: var(--trp-btn-text, #ffffff) !important;
  border-color: var(--trp-btn-bg, var(--trp-event-accent)) !important;
}

.trp-btn--primary:hover,
.trp-btn--primary:focus {
  background-color: var(--trp-btn-bg-hover, transparent) !important;
  color: var(--trp-btn-text-hover, var(--trp-event-accent)) !important;
  border-color: var(--trp-btn-bg, var(--trp-event-accent)) !important;
}

/* Outline (View Event Details) — light tint on hover, never the theme default. */
.trp-btn--outline,
.trp-btn--outline:link,
.trp-btn--outline:visited {
  background-color: transparent !important;
  border-color: var(--trp-card-border) !important;
  color: var(--trp-text) !important;
}

.trp-btn--outline:hover,
.trp-btn--outline:focus {
  background-color: rgba(var(--trp-primary-rgb), .06) !important;
  border-color: var(--trp-primary) !important;
  color: var(--trp-primary) !important;
}

.trp-btn--icon {
  padding: .45rem;
  border: 2px solid var(--trp-card-border);
  background: transparent;
  border-radius: var(--trp-btn-radius);
  color: var(--trp-alt-text);
}

.trp-btn--icon:hover {
  border-color: var(--trp-primary);
  color: var(--trp-primary);
}

.trp-btn--icon svg {
  width: 15px;
  height: 15px;
}

.trp-btn--sm {
  padding: .35rem .8rem;
  font-size: .75rem;
}

.trp-btn--load-more {
  display: flex;
  margin: 2rem auto 0;
  padding: .7rem 2.5rem;
  font-size: .875rem;
  background: transparent;
  border: 2px solid var(--trp-primary);
  color: var(--trp-primary);
  border-radius: var(--trp-btn-radius);
  position: relative;
}

.trp-btn--load-more:hover {
  background: var(--trp-primary);
  color: #fff;
}

/* ── Add-to-Calendar Dropdown ── */
.trp-cal-wrap {
  position: relative;
}

.trp-cal-dropdown {
  position: absolute;
  bottom: calc(100% + .5rem);
  right: 0;
  min-width: 190px;
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-radius: var(--trp-radius);
  box-shadow: 0 8px 25px rgba(0,0,0,.14);
  z-index: 100;
  padding: .35rem 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--trp-transition), transform var(--trp-transition);
}

.trp-cal-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.trp-cal-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--trp-text);
  text-decoration: none;
  transition: background var(--trp-transition), color var(--trp-transition);
  white-space: nowrap;
}

.trp-cal-option:hover {
  background: rgba(var(--trp-primary-rgb), .07);
  color: var(--trp-primary);
}

.trp-cal-option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Load More / Spinner ── */
.trp-load-more-wrap {
  text-align: center;
}

.trp-load-more__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: trp-spin .7s linear infinite;
}

.trp-load-more.is-loading .trp-load-more__text { display: none; }
.trp-load-more.is-loading .trp-load-more__spinner { display: inline-block; }

@keyframes trp-spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton ── */
.trp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(var(--trp-columns-d), 1fr);
  gap: var(--trp-gap);
}

@media (max-width: 1024px) {
  .trp-skeleton-grid { grid-template-columns: repeat(var(--trp-columns-t), 1fr); }
}

@media (max-width: 640px) {
  .trp-skeleton-grid { grid-template-columns: repeat(var(--trp-columns-m), 1fr); }
}

.trp-skeleton-card {
  border-radius: var(--trp-radius);
  overflow: hidden;
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
}

.trp-skeleton-img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, var(--trp-card-border) 25%, rgba(255,255,255,.4) 50%, var(--trp-card-border) 75%);
  background-size: 200% 100%;
  animation: trp-shimmer 1.4s ease-in-out infinite;
}

.trp-skeleton-body {
  padding: 1.25rem;
}

.trp-skeleton-line {
  height: .75rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--trp-card-border) 25%, rgba(255,255,255,.4) 50%, var(--trp-card-border) 75%);
  background-size: 200% 100%;
  animation: trp-shimmer 1.4s ease-in-out infinite;
  margin-bottom: .6rem;
}

.trp-skeleton-line--title { width: 80%; height: 1rem; }
.trp-skeleton-line--meta  { width: 50%; }
.trp-skeleton-line--text  { width: 100%; }
.trp-skeleton-line--text2 { width: 88%; }

@keyframes trp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Fade animation for card entry ── */
.trp-card--entering {
  animation: trp-fade-up .35s ease both;
}

@keyframes trp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Grid is-filtering state ── */
.trp-grid.is-filtering {
  opacity: 0;
  pointer-events: none;
}

/* ── No events ── */
.trp-no-events {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--trp-alt-text);
  font-size: 1rem;
}

/* ── Upcoming (list style) ── */
.trp-upcoming--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trp-upcoming__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-left: 4px solid var(--trp-event-accent);
  border-radius: var(--trp-radius);
  box-shadow: var(--trp-card-shadow);
  transition: transform var(--trp-transition), box-shadow var(--trp-transition);
}

.trp-upcoming__item:hover {
  transform: translateX(4px);
  box-shadow: var(--trp-card-shadow-hover);
}

.trp-upcoming__date-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 3rem;
  border-radius: 6px;
  background: rgba(var(--trp-primary-rgb), .08);
  line-height: 1;
}

.trp-upcoming__day {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--trp-event-accent);
  display: block;
}

.trp-upcoming__month {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-alt-text);
  display: block;
  margin-top: 2px;
}

.trp-upcoming__details { flex: 1; min-width: 0; }

.trp-upcoming__title {
  font-size: .9rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trp-upcoming__title a {
  color: var(--trp-heading);
  text-decoration: none;
  transition: color var(--trp-transition);
}

.trp-upcoming__title a:hover { color: var(--trp-primary); }

.trp-upcoming__meta {
  display: flex;
  gap: .75rem;
  font-size: .75rem;
  color: var(--trp-alt-text);
}

/* Upcoming card style */
.trp-upcoming--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.trp-upcoming__card {
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-top: 3px solid var(--trp-event-accent);
  border-radius: var(--trp-radius);
  box-shadow: var(--trp-card-shadow);
  overflow: hidden;
  transition: transform var(--trp-transition), box-shadow var(--trp-transition);
}

.trp-upcoming__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--trp-card-shadow-hover);
}

.trp-upcoming__image-link { display: block; }

.trp-upcoming__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--trp-card-border);
}

.trp-upcoming__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}

.trp-upcoming__card:hover .trp-upcoming__image img { transform: scale(1.04); }

.trp-upcoming__card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.trp-upcoming__card .trp-upcoming__date-badge {
  width: 2.5rem;
  height: 2.75rem;
}

.trp-upcoming__card .trp-upcoming__title {
  font-size: .875rem;
  white-space: normal;
}

.trp-upcoming__time {
  font-size: .78rem;
  color: var(--trp-alt-text);
  margin: 0;
}

/* ── Single event template ── */
.trp-single {
  max-width: 860px;
  margin: 0 auto;
}

.trp-single__hero {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--trp-radius);
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--trp-card-border);
}

.trp-single__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trp-single__date-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4.5rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  border-top: 4px solid var(--trp-event-accent);
  line-height: 1;
}

.trp-single__date-badge .trp-card__day   { font-size: 1.6rem; color: var(--trp-event-accent); }
.trp-single__date-badge .trp-card__month { font-size: .65rem; }

.trp-single__header { margin-bottom: 1.5rem; }

.trp-single__title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--trp-heading);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.trp-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  font-size: .875rem;
  color: var(--trp-text);
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(var(--trp-primary-rgb), .04);
  border-radius: var(--trp-radius);
  border: 1px solid var(--trp-card-border);
}

.trp-single__meta-item {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.trp-single__meta-item svg {
  width: 16px;
  height: 16px;
  stroke: var(--trp-event-accent);
  flex-shrink: 0;
}

.trp-single__meta-label {
  font-weight: 600;
  color: var(--trp-heading);
  margin-right: .2rem;
}

.trp-single__content {
  line-height: 1.7;
  color: var(--trp-text);
  font-size: .95rem;
  margin-bottom: 2rem;
}

.trp-single__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-radius: var(--trp-radius);
  margin-bottom: 1.5rem;
}

.trp-single__actions .trp-btn { font-size: .875rem; padding: .65rem 1.5rem; }

.trp-single__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .825rem;
  color: var(--trp-alt-text);
  text-decoration: none;
  transition: color var(--trp-transition);
}

.trp-single__back:hover { color: var(--trp-primary); }

.trp-single__back svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Body scroll lock */
body.trp-modal-open {
  overflow: hidden;
}

/* Overlay */
.trp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 16, 28, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s cubic-bezier(.4,0,.2,1);
  /* Bridge per-event accent from JS into the shared CSS variable */
  --trp-event-accent: var(--trp-modal-accent, var(--trp-primary));
}

.trp-modal-overlay[hidden] {
  display: none;
}

.trp-modal-overlay.trp-modal--open,
.trp-modal-overlay.trp-modal--opening {
  opacity: 1;
}

.trp-modal-overlay.trp-modal--closing {
  opacity: 0;
}

/* Modal box */
.trp-modal {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 2rem);
  background: var(--trp-card-bg);
  border-radius: calc(var(--trp-radius) * 1.5);
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
  opacity: 0;
}

.trp-modal-overlay.trp-modal--open .trp-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.trp-modal-overlay.trp-modal--closing .trp-modal {
  transform: translateY(12px) scale(.98);
  opacity: 0;
}

/* ── Toolbar (share + close) ── */
.trp-modal__toolbar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.trp-modal__share,
.trp-modal__close {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 9999px;
  color: var(--trp-heading);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--trp-transition), color var(--trp-transition), box-shadow var(--trp-transition);
  white-space: nowrap;
}

.trp-modal__share:hover,
.trp-modal__close:hover {
  background: #fff;
  color: var(--trp-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.trp-modal__share svg,
.trp-modal__close svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.trp-modal__close span,
.trp-modal__share span {
  display: none;
}

@media (min-width: 480px) {
  .trp-modal__close span,
  .trp-modal__share span {
    display: inline;
  }
}

/* ── Inner layout (2-col)
   jQuery .show() sets display:block — the attribute selector restores grid ── */
.trp-modal__inner {
  display: none;
  grid-template-columns: 280px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.trp-modal__inner[style*="display: block"],
.trp-modal__inner[style*="display:block"] {
  display: grid !important;
}

/* ── Media column ──
   The date is the hero element. Image (if any) sits behind it as a subtle
   backdrop, dimmed so the date remains readable. */
.trp-modal__media {
  position: relative;
  background: #0a1118;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trp-modal__image {
  position: absolute;
  inset: 0;
}

.trp-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .35;
  filter: saturate(.85);
}

/* Dim only over a real image — placeholders already render their own dark gradient. */
.trp-modal__image:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,17,24,.55) 0%, rgba(10,17,24,.8) 100%);
}

.trp-modal__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(var(--trp-primary-rgb), .25) 0%,
    rgba(10,17,24,.95) 100%
  );
}

/* Hero date — fills most of the left panel */
.trp-modal__date-badge {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  width: 100%;
  color: #fff;
  line-height: 1;
}

.trp-modal__day {
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 900;
  color: #fff;
  display: block;
  line-height: .9;
  letter-spacing: -.04em;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.trp-modal__month-year {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(255,255,255,.85);
  display: block;
  margin-top: 1.25rem;
  padding-left: .25em; /* visually balance the letter-spacing */
}

/* ── Details column ── */
.trp-modal__details {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2.25rem 2rem 1.75rem;
  gap: 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--trp-card-border) transparent;
}

.trp-modal__details::-webkit-scrollbar { width: 4px; }
.trp-modal__details::-webkit-scrollbar-track { background: transparent; }
.trp-modal__details::-webkit-scrollbar-thumb { background: var(--trp-card-border); border-radius: 2px; }

/* ── Badges ── */
.trp-modal__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.trp-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.trp-modal__badge--cat {
  background: rgba(var(--trp-primary-rgb), .1);
  color: var(--trp-primary);
}

.trp-modal__badge--virtual {
  background: #e8f5e9;
  color: #2e7d32;
}

.trp-modal__badge--virtual svg {
  width: 11px;
  height: 11px;
}

.trp-modal__badge--repeat {
  background: rgba(var(--trp-primary-rgb), .06);
  color: var(--trp-alt-text);
}

.trp-modal__badge--past {
  background: #fff3e0;
  color: #e65100;
}

/* ── Title ── */
.trp-modal__title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--trp-heading);
  line-height: 1.25;
  margin: 0;
}

/* ── Countdown ── */
.trp-countdown {
  background: linear-gradient(135deg, rgba(var(--trp-primary-rgb),.06) 0%, rgba(var(--trp-primary-rgb),.02) 100%);
  border: 1px solid rgba(var(--trp-primary-rgb),.15);
  border-radius: calc(var(--trp-radius) * .75);
  padding: 1rem 1.25rem;
}

.trp-countdown__label-top {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-alt-text);
  margin-bottom: .65rem;
  text-align: center;
}

.trp-countdown__units {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}

.trp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  min-width: 3.25rem;
}

.trp-countdown__num {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--trp-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  transition: transform .15s ease, opacity .15s ease;
}

.trp-countdown__num.trp-flip {
  animation: trp-count-flip .2s ease;
}

@keyframes trp-count-flip {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.trp-countdown__unit-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--trp-alt-text);
}

.trp-countdown__sep {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--trp-primary);
  opacity: .45;
  margin-bottom: 1rem;
  line-height: 1;
}

/* Event started / past notice */
.trp-event-started {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1rem;
  background: #fff3e0;
  border: 1px solid #ffe0b2;
  border-radius: calc(var(--trp-radius) * .75);
  font-size: .82rem;
  color: #e65100;
  font-weight: 500;
}

/* ── Meta grid ── */
.trp-modal__meta {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.trp-modal__meta-row {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .85rem;
  color: var(--trp-text);
  line-height: 1.45;
}

.trp-modal__meta-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--trp-primary-rgb), .08);
  border-radius: 6px;
  margin-top: .05rem;
}

.trp-modal__meta-icon svg {
  width: 13px;
  height: 13px;
  stroke: var(--trp-primary);
  flex-shrink: 0;
}

.trp-modal__meta-text {
  flex: 1;
  min-width: 0;
}

.trp-modal__meta-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--trp-alt-text);
  margin-bottom: .1rem;
}

.trp-modal__meta-value {
  display: block;
  font-weight: 500;
  color: var(--trp-text);
  word-break: break-word;
}

.trp-modal__meta-value a {
  color: var(--trp-primary);
  text-decoration: none;
  transition: opacity var(--trp-transition);
}

.trp-modal__meta-value a:hover { opacity: .75; text-decoration: underline; }

/* ── Description ── */
.trp-modal__content {
  font-size: .875rem;
  line-height: 1.7;
  color: var(--trp-text);
  padding-top: .25rem;
  border-top: 1px solid var(--trp-card-border);
}

.trp-modal__content p:first-child { margin-top: 0; }
.trp-modal__content p:last-child  { margin-bottom: 0; }

.trp-modal__content p,
.trp-modal__content ul,
.trp-modal__content ol {
  margin: 0 0 .75rem;
}

/* ── Add to Calendar section ── */
.trp-modal__cal-section {
  border-top: 1px solid var(--trp-card-border);
  padding-top: 1rem;
}

.trp-modal__cal-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-alt-text);
  margin: 0 0 .65rem;
}

.trp-modal__cal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: stretch;
}

/* Three calendar pills share the row equally — they wrap to two rows of ~1.5
   on narrow modals via flex-wrap. */
.trp-modal__cal-btns .trp-cal-pill {
  flex: 1 1 calc(33.333% - .35rem);
  min-width: 0;
}

.trp-cal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem .9rem;
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--trp-transition), box-shadow var(--trp-transition), background-color var(--trp-transition);
  border: 1px solid;
  white-space: nowrap;
  width: 100%;   /* fills its flex slot so all four pills are equal width */
  box-sizing: border-box;
}

.trp-cal-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.trp-cal-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.trp-cal-pill--google {
  background: #fff;
  border-color: #dadce0;
  color: #3c4043;
}

.trp-cal-pill--google:hover {
  background: #f8f9fa;
  border-color: #c6c8cb;
  color: #3c4043;
}

.trp-cal-pill--apple {
  background: #1c1c1e;
  border-color: #1c1c1e;
  color: #fff;
}

.trp-cal-pill--apple:hover {
  background: #2c2c2e;
  border-color: #2c2c2e;
  color: #fff;
}

.trp-cal-pill--outlook {
  background: #0078d4;
  border-color: #0078d4;
  color: #fff;
}

.trp-cal-pill--outlook:hover {
  background: #106ebe;
  border-color: #106ebe;
  color: #fff;
}

/* Register / Join pill — uses the event accent color so it leads visually. */
.trp-cal-pill--register,
.trp-cal-pill--register:link,
.trp-cal-pill--register:visited {
  background: var(--trp-event-accent);
  border-color: var(--trp-event-accent);
  color: #fff;
}

.trp-cal-pill--register:hover,
.trp-cal-pill--register:focus {
  background: var(--trp-event-accent);
  border-color: var(--trp-event-accent);
  color: #fff;
  filter: brightness(1.08);
}

/* ── Register / Join — full-width row at the bottom of the details column.
   Hidden when there's no reg_url. */
.trp-modal__actions:empty {
  display: none;
}

.trp-modal__actions {
  display: flex;
  border-top: 1px solid var(--trp-card-border);
  padding-top: 1rem;
  margin-top: auto;
}

.trp-modal__actions .trp-modal__register {
  flex: 1 1 100%;
  justify-content: center;
  font-size: .9rem;
  padding: .8rem 1.5rem;
}

/* ── Loading overlay (jQuery show/hide controls display) ── */
/* ── Locked event state ──
   When the modal is opened on an event the user lacks access to, the
   countdown / meta / content / register row are all hidden and a single
   promotional card takes their place. The event title stays visible at
   the top so the user knows which event they're locked out of. */
.trp-modal--locked .trp-countdown,
.trp-modal--locked .trp-event-started,
.trp-modal--locked .trp-modal__meta,
.trp-modal--locked .trp-modal__content,
.trp-modal--locked .trp-modal__cal-section,
.trp-modal--locked .trp-modal__actions,
.trp-modal--locked .trp-modal__badges {
  display: none !important;
}

/* Title stays — but soften its bottom margin so the locked card sits closer. */
.trp-modal--locked .trp-modal__title {
  margin-bottom: .25rem;
}

.trp-modal__locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  margin: 0 auto;
  max-width: 32rem;
}

.trp-modal__locked-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(var(--trp-primary-rgb), .12);
  color: var(--trp-event-accent, var(--trp-primary));
  margin-bottom: 1.25rem;
}

.trp-modal__locked-icon svg {
  width: 32px;
  height: 32px;
}

.trp-modal__locked-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--trp-heading);
  margin: 0 0 .5rem;
  line-height: 1.25;
}

.trp-modal__locked-message {
  font-size: .95rem;
  color: var(--trp-text);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 28rem;
}

.trp-modal__locked-tier {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 9999px;
  background: rgba(var(--trp-primary-rgb), .1);
  color: var(--trp-event-accent, var(--trp-primary));
  font-size: .78rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
}

.trp-modal__locked-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  width: 100%;
}

.trp-locked-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.5rem;
  border-radius: var(--trp-btn-radius);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: background-color var(--trp-transition), color var(--trp-transition), border-color var(--trp-transition), transform var(--trp-transition);
  white-space: nowrap;
}

.trp-locked-btn--primary {
  background: var(--trp-event-accent, var(--trp-primary));
  color: #fff !important;
  border-color: var(--trp-event-accent, var(--trp-primary));
}

.trp-locked-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.trp-locked-btn--secondary {
  background: transparent;
  color: var(--trp-event-accent, var(--trp-primary)) !important;
  border-color: var(--trp-event-accent, var(--trp-primary));
}

.trp-locked-btn--secondary:hover {
  background: rgba(var(--trp-primary-rgb), .08);
}

/* Lock icon next to View Event Details on locked cards */
.trp-btn--locked svg {
  opacity: .8;
  margin-right: .15rem;
}

.trp-modal__loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--trp-card-bg);
  border-radius: calc(var(--trp-radius) * 1.5);
  z-index: 5;
}

.trp-modal__loading[style*="display: block"],
.trp-modal__loading[style*="display:block"] {
  display: flex !important;
}

.trp-modal__spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--trp-card-border);
  border-top-color: var(--trp-primary);
  border-radius: 50%;
  animation: trp-spin .75s linear infinite;
}

/* ── Share toast notification ── */
.trp-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 100001;
  background: var(--trp-heading);
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  padding: .6rem 1.25rem;
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.trp-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 700px) {
  .trp-modal {
    max-height: calc(100dvh - 1.5rem);
    border-radius: calc(var(--trp-radius) * 1.25);
  }

  .trp-modal__inner,
  .trp-modal__inner[style*="display: block"],
  .trp-modal__inner[style*="display:block"] {
    grid-template-columns: 1fr !important;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .trp-modal__media {
    min-height: 200px;
    max-height: 240px;
  }

  .trp-modal__image {
    /* Stays absolute, fills the media area. */
    min-height: 0;
    max-height: none;
  }

  .trp-modal__day {
    font-size: clamp(4rem, 22vw, 7rem);
  }

  .trp-modal__month-year {
    font-size: .85rem;
    margin-top: .75rem;
    letter-spacing: .2em;
  }

  .trp-modal__details {
    padding: 1.5rem 1.25rem 1.25rem;
    overflow-y: visible;
  }

  .trp-modal__title {
    font-size: 1.2rem;
  }

  .trp-countdown__num {
    font-size: 1.35rem;
  }

  .trp-countdown__unit {
    min-width: 2.5rem;
  }

  .trp-modal__toolbar {
    top: .75rem;
    right: .75rem;
  }
}

@media (max-width: 380px) {
  .trp-modal-overlay {
    padding: .5rem;
  }

  .trp-countdown__units {
    gap: .1rem;
  }

  .trp-countdown__sep {
    font-size: 1rem;
  }
}
/* ═══════════════════════════════════════════════════════════════
   AGENDA — [trp_events_agenda] compact boxed list
   ═══════════════════════════════════════════════════════════════ */

.trp-agenda {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 100%;
  /* Fixed-height window — first ~3 events visible, rest reachable via scroll.
     Override at the shortcode level if needed: <div style="--trp-agenda-h: 600px"> */
  --trp-agenda-h: 360px;
  display: flex;
  flex-direction: column;
}

.trp-agenda__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: var(--trp-agenda-h);
  overflow-y: auto;
  overflow-x: hidden;
  /* Subtle visual cue that more content exists below the fold. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--trp-card-border) transparent;
  /* Soft fade at the bottom edge so the last visible row hints there's more. */
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.5rem), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 1.5rem), transparent);
}

.trp-agenda__list::-webkit-scrollbar { width: 5px; }
.trp-agenda__list::-webkit-scrollbar-track { background: transparent; }
.trp-agenda__list::-webkit-scrollbar-thumb {
  background: var(--trp-card-border);
  border-radius: 3px;
}
.trp-agenda__list::-webkit-scrollbar-thumb:hover {
  background: var(--trp-alt-text);
}

.trp-agenda__heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--trp-alt-text);
  margin: 1rem .25rem .5rem;
}

.trp-agenda__item {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.trp-agenda__item + .trp-agenda__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4.75rem;
  right: .25rem;
  border-top: 1px solid var(--trp-card-border);
}

.trp-agenda__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem .25rem;
  color: var(--trp-heading) !important;
  text-decoration: none !important;
  border-radius: 8px;
  transition: background-color var(--trp-transition), transform var(--trp-transition);
  cursor: pointer;
}

.trp-agenda__link:hover,
.trp-agenda__link:focus {
  background-color: rgba(var(--trp-primary-rgb), .04);
  color: var(--trp-heading) !important;
  text-decoration: none !important;
}

.trp-agenda__link:hover .trp-agenda__chevron {
  transform: translateX(4px);
  color: var(--trp-event-accent);
}

.trp-agenda__link:hover .trp-agenda__title {
  color: #000 !important;
}

/* Date badge — the hero of each row */
.trp-agenda__date {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--trp-card-bg);
  border: 1px solid var(--trp-card-border);
  border-radius: 10px;
  line-height: 1;
  transition: border-color var(--trp-transition), box-shadow var(--trp-transition);
}

.trp-agenda__link:hover .trp-agenda__date {
  border-color: var(--trp-event-accent);
  box-shadow: 0 2px 8px rgba(var(--trp-primary-rgb), .12);
}

.trp-agenda__day {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--trp-heading);
  letter-spacing: -.02em;
  line-height: 1;
}

.trp-agenda__month {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-event-accent);
  margin-top: .35rem;
}

/* Body */
.trp-agenda__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.trp-agenda__proximity {
  display: inline-flex;
  align-self: flex-start;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--trp-event-accent);
  background: rgba(var(--trp-primary-rgb), .1);
  padding: .15rem .5rem;
  border-radius: 9999px;
  margin-bottom: .15rem;
}

.trp-agenda__title {
  font-size: 1rem;
  font-weight: 700;
  color: #000 !important;
  margin: 0;
  line-height: 1.35;
  transition: color var(--trp-transition);
  /* Clamp to 2 lines so very long titles don't break the layout */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.trp-agenda__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .85rem;
  font-size: .78rem;
  color: var(--trp-alt-text);
  margin-top: .15rem;
}

.trp-agenda__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.trp-agenda__meta-item svg {
  width: 12px;
  height: 12px;
  stroke: var(--trp-event-accent);
  flex-shrink: 0;
}

.trp-agenda__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--trp-card-border);
  transition: transform var(--trp-transition), color var(--trp-transition);
}

.trp-agenda__chevron svg {
  width: 16px;
  height: 16px;
}

/* View All footer link */
.trp-agenda__view-all {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .5rem .25rem 1rem;
  padding: .5rem 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--trp-primary) !important;
  text-decoration: none !important;
  transition: gap var(--trp-transition);
}

.trp-agenda__view-all:hover {
  gap: .65rem;
  color: var(--trp-primary) !important;
}

.trp-agenda__view-all svg {
  width: 14px;
  height: 14px;
}

/* Empty state */
.trp-agenda--empty {
  text-align: center;
  padding: 1.5rem 1.25rem;
}

/* Mobile */
@media (max-width: 480px) {
  .trp-agenda {
    padding: .25rem 1rem;
  }
  .trp-agenda__date {
    width: 3.25rem;
    height: 3.25rem;
  }
  .trp-agenda__day {
    font-size: 1.25rem;
  }
  .trp-agenda__month {
    font-size: .6rem;
  }
  .trp-agenda__title {
    font-size: .9rem;
  }
  .trp-agenda__item + .trp-agenda__item::before {
    left: 3.85rem;
  }
  .trp-agenda__chevron {
    display: none;
  }
}