/* Experience pages — /experiences/<slug>. One curated page per signature
   session (Social Friday, Awaken, Unwind), hydrated from /api/momence/schedule
   by shared/experience-page.js. Base tokens, type and buttons come from the
   page's inline <style>; this file only holds the .p-xp-* layout. */

.p-xp-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; padding: calc(var(--sm-header-height) + 40px) var(--sm-margin-mid) var(--sm-margin-large); overflow: hidden; background: #2a2520; }
@media (min-width: 768px) { .p-xp-hero { min-height: 560px; padding: calc(var(--header-height) + 60px) var(--margin-mid) var(--margin-large); } }
.p-xp-hero_img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.p-xp-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,22,20,.15) 0%, rgba(26,22,20,.55) 55%, rgba(26,22,20,.92) 100%); }
.p-xp-hero_body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; max-width: 1180px; width: 100%; margin: 0 auto; }
@media (min-width: 768px) { .p-xp-hero_body { gap: 18px; } }
.p-xp-hero_label { color: var(--color-highlight); margin: 0; }
.p-xp-hero_title { margin: 0; max-width: 12em; }
.p-xp-hero_desc { margin: 0; opacity: .8; max-width: 34em; }
.p-xp-hero_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
@media (min-width: 768px) { .p-xp-hero_meta { font-size: 13px; } }
.p-xp-hero_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.p-xp-hero_alt { color: var(--color-highlight); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.p-xp-hero_alt:hover { opacity: .75; }

.p-xp-body { max-width: 760px; margin: 0 auto; width: 100%; padding: var(--sm-margin-large) var(--sm-margin-mid) 0; display: flex; flex-direction: column; gap: var(--sm-margin-large); }
@media (min-width: 768px) { .p-xp-body { padding: var(--margin-large) var(--margin-mid) 0; gap: var(--margin-mid); } }
.p-xp-section { display: flex; flex-direction: column; gap: 14px; }
.p-xp-section_title { margin: 0; }
.p-xp-section p { margin: 0; opacity: .85; line-height: 1.7; }
.p-xp-section ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p-xp-section li { padding-left: 1.2em; position: relative; opacity: .85; line-height: 1.6; }
.p-xp-section li::before { content: "—"; position: absolute; left: 0; color: var(--color-highlight); opacity: .8; }

/* Live schedule widget — strip-variant session cards from session-card.css */
.p-xp-schedule { max-width: 1180px; margin: 0 auto; width: 100%; padding: var(--sm-margin-large) var(--sm-margin-mid) 0; }
@media (min-width: 768px) { .p-xp-schedule { padding: var(--margin-large) var(--margin-mid) 0; } }
.p-xp-schedule[hidden] { display: none; }
.p-xp-schedule_head { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--sm-margin-small); }
@media (min-width: 768px) { .p-xp-schedule_head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--margin-mid); margin-bottom: var(--margin-small); } }
.p-xp-schedule_label { color: var(--color-highlight); }
.p-xp-schedule_title { margin: 0; }
.p-xp-schedule_sub { opacity: .55; margin: 0; }
.p-xp-schedule_viewall { display: inline-flex; align-items: center; gap: 6px; color: var(--color-highlight); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; white-space: nowrap; font-size: 12px; transition: opacity .3s; }
.p-xp-schedule_viewall:hover { opacity: .75; }
.p-xp-schedule_grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .p-xp-schedule_grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1180px) { .p-xp-schedule_grid { grid-template-columns: repeat(3, 1fr); } }
.p-xp-schedule_fallback { opacity: .7; margin: 0; }
.p-xp-schedule_fallback a { color: var(--color-highlight); text-decoration: underline; text-underline-offset: 3px; }

.p-xp-cta { max-width: 760px; margin: var(--sm-margin-large) auto 0; width: calc(100% - 2 * var(--sm-margin-mid)); padding: var(--sm-margin-mid); border-radius: var(--border-radius); border: 1px solid rgba(254,246,236,.15); background: rgba(239,215,13,.03); display: flex; flex-direction: column; gap: var(--sm-margin-small); text-align: center; align-items: center; }
@media (min-width: 768px) { .p-xp-cta { margin-top: var(--margin-large); width: calc(100% - 2 * var(--margin-mid)); padding: var(--margin-small); } }
.p-xp-cta_title { font-weight: 300; max-width: 20em; margin: 0; }
.p-xp-cta_desc { opacity: .6; max-width: 32em; margin: 0; }

.p-xp-back { max-width: 760px; margin: var(--sm-margin-mid) auto var(--sm-margin-large); text-align: center; }
@media (min-width: 768px) { .p-xp-back { margin-bottom: var(--margin-large); } }
.p-xp-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-highlight); opacity: .7; transition: opacity .3s; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 500; }
.p-xp-back a:hover { opacity: 1; }