/* ===========================================================
 * Discovery — shared structural CSS
 *
 * Rules that apply identically across mobile and desktop discovery.
 * Both surfaces use different class prefixes on their DOM —
 *   mobile:  .disc-card / .disc-detail / .disc-perf / .disc-bullet
 *   desktop: .dd-card   / .dd-detail   / .dd-perf   / .dd-bullet
 * — but the structure and "intent" of each block is identical, so
 * every rule below uses a multi-selector targeting BOTH prefixes.
 *
 * Visual rules that DO diverge (paddings, gaps, hover behaviour,
 * brand-color variables) stay in each surface's own stylesheet as
 * overrides. The pattern: this file owns the skeleton; the
 * surface stylesheets own the polish.
 *
 * Linked from:
 *   - src/static/discovery.html             (mobile shell, inline)
 *   - src/static/discovery-desktop.html     (desktop shell, <link>)
 * =========================================================== */


/* ── "Close partner" pill on the hero ─────────────────────────
 * Brand-purple pill in the top-left of the card. The desktop badge
 * was a different visual treatment until we made it match mobile;
 * this is the now-shared definition.
 *
 * Surface-specific bits that DON'T live here:
 *   - desktop uses var(--dd-brand) where mobile uses var(--brand)
 *     — both resolve to #510EA8 in production so we inline the
 *     literal here and skip the cross-variable indirection.
 */
.disc-card__partner,
.dd-card__partner {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #510EA8;
    color: #fff;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.disc-card__partner-icon,
.dd-card__partner-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
/* Stack promo + partner pills vertically when a card has both,
   so neither overlaps the corner UI (heart on mobile, plain on desktop). */
.disc-card__art .disc-card__promo + .disc-card__partner,
.dd-card__art .dd-card__promo + .dd-card__partner {
    top: 42px;
}


/* ── "What's included" bullet list ─────────────────────────────
 * Vertical list with a ✅ icon per line. Used on the detail page;
 * built by the same `bulletList` / equivalent helper on both
 * surfaces (mobile owns `bulletList`; desktop renders inline).
 *
 * Per-surface overrides live in each stylesheet:
 *   - mobile: 8px gap, 4px top/bottom margin, line-height 1.45
 *   - desktop: 10px gap, no margin, line-height 1.55
 */
.disc-bullet-list,
.dd-bullet-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.disc-bullet-item,
.dd-bullet-item {
    display: flex;
    align-items: flex-start;
}
.disc-bullet-icon,
.dd-bullet-icon {
    /* Glyph stays in px so it doesn't shrink with the body type scale
       on narrow viewports. */
    flex: 0 0 auto;
    font-size: 16px;
}
.disc-bullet-text,
.dd-bullet-text {
    flex: 1;
    min-width: 0;
}


/* ── Performances list ─────────────────────────────────────────
 * One row per scheduled showtime (de Stoep performances, touring
 * artists). Mobile and desktop differ only in surface chrome
 * (mobile has active states; desktop has hover states; padding
 * varies). The skeleton — list zeroing, item structure, sold-out
 * styling, chevron alignment — is shared.
 */
.disc-perf-list,
.dd-perf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.disc-perf-item,
.dd-perf-item {
    border-top: 1px solid var(--border, #E6E4EC);
}
.disc-perf-item:first-child,
.dd-perf-item:first-child {
    border-top: 0;
}
.disc-perf-item__link,
.dd-perf-item__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
}
.disc-perf-item__when,
.dd-perf-item__when {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.disc-perf-item__date,
.dd-perf-item__date {
    font-weight: 600;
}
.disc-perf-item__time,
.dd-perf-item__time {
    color: var(--text-muted, #6B6B6B);
}