/* Open Play session card — one card, two chromes.
 *
 * Used by the public listing (/open-play) and the modern home page strip.
 * Those two pages name their design tokens differently (--card-bg/--text-primary
 * on the public chrome, --surface/--ink on home-modern), so every colour here
 * reads through a fallback chain and resolves correctly on either page, in
 * light and dark, without the page having to remap anything.
 *
 * Plain CSS, not Tailwind utilities: the marketing pages do not ship the
 * compiled bundle.
 *
 * The card leads with WHEN — for a drop-in session the clock is the deciding
 * fact, so it gets the display face while the title stays quiet body text.
 * The lineup (avatars + dashed open slots) replaces a progress bar: it shows
 * who is in and that there is room in one device.
 */

.opc {
    --opc-surface:   var(--card-bg, var(--surface, #fff));
    --opc-surface-2: var(--surface-2, var(--dark-surface, #f4f7f4));
    --opc-line:      var(--card-border, var(--line, #dde5df));
    --opc-ink:       var(--text-primary, var(--ink, #16201b));
    --opc-ink-2:     var(--text-muted, var(--ink-2, #51635a));
    --opc-dim:       var(--text-dim, var(--muted, #8a988f));
    --opc-brand:     var(--court-green, var(--brand, #5a7360));
    --opc-brand-rgb: var(--court-green-rgb, var(--brand-rgb, 90, 115, 96));
    --opc-warn:      #a35a06;
    --opc-stop:      #b3261e;
    --opc-radius:    var(--m-r-lg, var(--r-lg, 20px));

    position: relative;
    display: flex;
    flex-direction: column;
    /* Grid and flex items default to min-width:auto, which stops the card from
       shrinking below its widest content and pushes narrow phones into a
       sideways scroll. */
    min-width: 0;
    /* No height:100% — grid and flex parents already stretch their items, and
       a percentage height against an auto-height track cancels that stretch,
       which is what leaves one card in a row short. */
    padding: 20px;
    background: var(--opc-surface);
    border: 1px solid var(--opc-line);
    border-radius: var(--opc-radius);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .25s, border-color .25s;
}

.opc:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--opc-brand-rgb), .45);
    box-shadow: 0 14px 30px -14px rgba(var(--opc-brand-rgb), .5);
}

/* Whole card is clickable via the title's stretched link; the footer CTA sits
   above it so it keeps its own destination. */
.opc__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1;
}

/* ── When ─────────────────────────────────────────────────────────────── */
.opc__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.opc__day {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--opc-brand);
}

.opc__time {
    display: block;
    margin-top: 2px;
    font-family: var(--font-heading, Georgia, serif);
    font-weight: 600;
    font-size: 1.32rem;
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--opc-ink);
    font-variant-numeric: tabular-nums;
}

.opc__time span {
    font-size: .72em;
    font-weight: 500;
    color: var(--opc-ink-2);
}

/* ── Status badges ────────────────────────────────────────────────────── */
.opc__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.opc__badge--live {
    background: rgba(179, 38, 30, .1);
    color: var(--opc-stop);
}

.opc__badge--joined {
    background: rgba(var(--opc-brand-rgb), .12);
    color: var(--opc-brand);
}

.opc__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: opc-pulse 1.6s ease-in-out infinite;
}

@keyframes opc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.72); }
}

/* ── Title + meta ─────────────────────────────────────────────────────── */
.opc__title {
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--opc-ink);
    /* Two lines keeps every card in a row the same height regardless of how
       long a venue types its session names. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.opc__title a { color: inherit; text-decoration: none; }

.opc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 9px;
    font-size: .78rem;
    color: var(--opc-ink-2);
}

.opc__level {
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--opc-surface-2);
    border: 1px solid var(--opc-line);
    font-weight: 600;
    white-space: nowrap;
}

.opc__where {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--opc-dim);
}

.opc__where svg { width: 13px; height: 13px; flex: 0 0 auto; }
.opc__where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.opc__host {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--opc-dim);
}

.opc__host svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── Lineup — the signature ───────────────────────────────────────────── */
.opc__lineup {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--opc-line);
}

/* The roster partial owns the avatar stack; it only needs its bottom gap
   removed here so the count line sits tight under it. */
.opc__lineup .op-roster { margin: 0; }

/* The partial's default initial-chip is the customer portal's purple. On the
   marketing chrome the accent is the tenant's brand, so tint it here rather
   than in the shared partial — the portal keeps its own colour. */
.opc .op-roster__avatar {
    background: rgba(var(--opc-brand-rgb), .14);
    color: var(--opc-brand);
    border-color: var(--opc-surface);
}

.opc .op-roster__avatar--more {
    background: var(--opc-surface-2);
    color: var(--opc-ink-2);
}

.opc .op-roster__avatar--open { background: transparent; }

.opc__count {
    margin: 9px 0 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--opc-ink-2);
}

.opc__count b { font-weight: 700; color: var(--opc-ink); }
.opc__count--low b { color: var(--opc-warn); }
.opc__count--none b { color: var(--opc-stop); }

/* ── Price + action ───────────────────────────────────────────────────── */
.opc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}

.opc__price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--opc-ink);
    font-variant-numeric: tabular-nums;
}

.opc__price small {
    font-size: .74rem;
    font-weight: 500;
    color: var(--opc-dim);
}

.opc__price s {
    font-size: .8rem;
    font-weight: 500;
    color: var(--opc-dim);
}

.opc__price em {
    font-style: normal;
    color: var(--opc-brand);
}

.opc__free { color: var(--opc-brand); }

.opc__cta {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 11px;
    border: 1.5px solid var(--opc-line);
    background: var(--opc-surface);
    color: var(--opc-ink);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s, transform .18s;
}

.opc__cta:hover {
    border-color: var(--opc-brand);
    color: var(--opc-brand);
    transform: translateY(-1px);
}

.opc__cta svg { width: 14px; height: 14px; transition: transform .2s; }
.opc__cta:hover svg { transform: translateX(2px); }

.opc__cta--off {
    border-style: dashed;
    color: var(--opc-dim);
    cursor: default;
    pointer-events: none;
}

/* ── Full / closed sessions read back, not broken ─────────────────────── */
.opc--closed { background: var(--opc-surface-2); }
.opc--closed .opc__time { color: var(--opc-ink-2); }

/* ── Dark ─────────────────────────────────────────────────────────────── */
/* Tenant brand colours are picked for a light page and can sit very close to a
   dark background. Lift the accent for text on dark, but keep --opc-brand-rgb
   at the true brand for tints and the hover border. */
:root[data-theme="dark"] .opc,
:root.theme-dark .opc {
    --opc-brand: color-mix(in srgb, var(--court-green, var(--brand, #5a7360)) 45%, #fff);
    --opc-warn: #f0b357;
    --opc-stop: #f2a2a0;
}

:root[data-theme="dark"] .opc__badge--live,
:root.theme-dark .opc__badge--live { background: rgba(242, 162, 160, .14); }

/* The roster stylesheet ships its own dark rules for the portal's purple, and
   they out-specify the brand tint above — so restate it for dark here. */
:root[data-theme="dark"] .opc .op-roster__avatar,
:root.theme-dark .opc .op-roster__avatar {
    background: rgba(var(--opc-brand-rgb), .22);
    color: var(--opc-brand);
    border-color: var(--opc-surface);
}

:root[data-theme="dark"] .opc .op-roster__avatar--more,
:root.theme-dark .opc .op-roster__avatar--more {
    background: var(--opc-surface-2);
    color: var(--opc-ink-2);
}

:root[data-theme="dark"] .opc .op-roster__avatar--open,
:root.theme-dark .opc .op-roster__avatar--open { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .opc, .opc__cta, .opc__cta svg { transition: none; }
    .opc:hover, .opc__cta:hover { transform: none; }
    .opc__dot { animation: none; }
}

@media (max-width: 480px) {
    .opc { padding: 17px; }
    .opc__time { font-size: 1.22rem; }
}