/* J CONNECT — styles for elements rendered by assets/events-feed.js.
   Uses only the design tokens from style.css; secondary text / rules derive from currentColor
   so they also work inside .section--night and in dark mode. */

/* ---- upcoming cards ---- */
.feed-cards { display: grid; gap: 24px; }
.feed-card { padding: 0; overflow: hidden; color: var(--ink); container-type: inline-size; }
.feed-card__inner { display: grid; grid-template-columns: 1fr; }
.feed-card__media { background: var(--paper-2); aspect-ratio: 1 / 1; overflow: hidden; }
.feed-card__media img { width: 100%; height: 100%; object-fit: cover; }
.feed-card__body { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.feed-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.feed-card__title { font-family: var(--font-latin); font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.feed-card__facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.feed-card__facts dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--accent-text); padding-top: 3px; white-space: nowrap; }
.feed-card__facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.feed-card__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.feed-venue { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.feed-venue:hover { color: var(--accent-text); }
.feed-venue:focus-visible, .feed-list__title:focus-visible, .feed-post a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@container (min-width: 620px) {
  .feed-card__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .feed-card__media { aspect-ratio: auto; position: relative; min-height: 280px; }
  .feed-card__media img { position: absolute; inset: 0; }
  .feed-card__body { padding: 32px 32px 30px; justify-content: center; }
  .feed-card--nomedia .feed-card__inner { grid-template-columns: 1fr; }
}

/* ---- past events: compact list ---- */
.feed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-top-color: color-mix(in srgb, currentColor 16%, transparent); }
.feed-list__item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 14px 4px; border-bottom: 1px solid var(--line); border-bottom-color: color-mix(in srgb, currentColor 16%, transparent);
}
.feed-list__date { font-family: var(--font-latin); font-size: 13px; font-weight: 600; color: var(--muted); color: color-mix(in srgb, currentColor 72%, transparent); }
.feed-list__title { font-weight: 700; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.feed-list__title:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.section--night a.feed-list__title:hover { color: var(--gold); }
.feed-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.feed-list__venue { color: var(--muted); color: color-mix(in srgb, currentColor 72%, transparent); }
@media (min-width: 760px) {
  .feed-list__item { grid-template-columns: 12.5em minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; padding: 16px 8px; }
  .feed-list__meta { justify-content: flex-end; text-align: right; }
}

/* ---- Instagram posts grid ---- */
.feed-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .feed-posts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.feed-post a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }
.feed-post img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.feed-post a:hover img { transform: scale(1.04); }
.feed-post__badge {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  background: var(--brand-deep); color: var(--accent);
}

/* ---- "last updated" ---- */
.feed-updated { font-family: var(--font-latin); font-size: 13px; color: var(--muted); color: color-mix(in srgb, currentColor 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .feed-post img { transition: none; }
  .feed-post a:hover img { transform: none; }
}

/* ---- promo video overlaid on a cover box (events-feed.js attachVideo) ---- */
.has-feed-video { position: relative; }
.feed-video { position: absolute; inset: 0; z-index: 2; background: #05060a; }
.feed-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.feed-video__sound {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  background: rgba(7,27,58,.78); color: #fff; font: 700 13px/1.2 var(--font-latin);
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.feed-video__sound:hover { background: rgba(7,27,58,.92); border-color: #fff; }
.feed-video__sound:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.feed-video__off, .feed-video__sound[aria-pressed="true"] .feed-video__on { display: none; }
.feed-video__sound[aria-pressed="true"] .feed-video__off { display: inline; }
/* the cover box takes the video's 4:5 shape (overrides square mobile crops) */
.has-feed-video > img { aspect-ratio: 4 / 5 !important; }
.feed-card__media.has-feed-video { aspect-ratio: 4 / 5; }