/* PORCH-WO-31c-1: the resource detail page (design: 31c-0 detail.html). Loaded with event-detail.css (the page reuses the event page's
   hero, facts, tags, notice and "keep exploring" classes) only on /r/{uuid} and /resources/{slug}/. Tokens only. */

/* ---- detail page: only what the event page doesn't have ---- */
.res-detail .event-hero__when { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.04em; }
.res-detail .event-notice { margin-bottom: 40px; }
.res-detail .event-notice p { margin: 8px 0 0; }
.res-detail .event-notice .btn { margin-top: 8px; }
.res-preview { margin-top: 48px; }
.res-preview__h { margin: 0 0 16px; font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.res-frame { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: 680px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--c-paper); }
.res-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.res-frame--image { aspect-ratio: auto; padding: 24px; }
.res-frame--image img { max-width: 100%; max-height: 560px; height: auto; }
.res-frame--video { aspect-ratio: 16 / 9; background: var(--c-ink); }
.res-frame--video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-tile__play--lg { width: 72px; height: 72px; }
.res-tile__play--lg::after { left: 28px; top: 21px; border-left-width: 24px; border-top-width: 15px; border-bottom-width: 15px; }
.res-preview__cap { margin: 12px 0 0; font-size: 14px; color: var(--color-text-2); }
.res-preview__cap a, .res-preview__alt a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.res-preview__alt { margin: 0; padding: 24px; border: 1px dashed var(--c-ink-muted); border-radius: var(--r-md); background: var(--c-paper); }
.res-only-narrow { display: none; }
.res-player { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--c-paper); }
.res-player__btn { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-ink); }
.res-player__btn .res-tile__play { width: 52px; height: 52px; background: transparent; }
.res-player__btn .res-tile__play::after { left: 20px; top: 16px; border-left-color: var(--c-light); }
.res-player__bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--color-border); }
.res-player__t { font: 500 13px/1 var(--font-body); color: var(--color-text-2); white-space: nowrap; }


/* ---- phone and tablet ---- */
@media (max-width: 767px) {
  .res-only-wide { display: none; }
  .res-only-narrow { display: block; }
}