/* series.css
   Clean, scoped styles for the series listing (with dark mode)
*/
:root {
    --bt-primary-a: #009d00;
    --bt-primary-b: #889d00;
    --bt-text-on-primary: #ffffff;
    --bt-text-on-secondary: rgba(255, 255, 255, 0.7);

    --bt-radius-md: 8px;

    /* light palette */
    --bt-bg: #ffffff;
    --bt-panel: #f8fafc;
    --bt-card: #f8fafc;
    --bt-border: rgba(148, 163, 184, 0.35);
    --bt-border-soft: rgba(148, 163, 184, 0.30);

    --bt-title: #0f172a;
    --bt-text: #334155;
    --bt-muted: #64748b;
    --bt-muted-2: #475569;

    --bt-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

    /* media sizing */
    --bt-media-w: 220px;
    --bt-media-h: 150px;
}

/* Dark theme support via your existing data-bt-theme toggles */
:root[data-bt-theme="dark"],
body[data-bt-theme="dark"] {
    --bt-bg: #0f172a;
    --bt-panel: #0f172a;
    --bt-card: #0b1222;

    --bt-border: rgba(51, 65, 85, 0.9);
    --bt-border-soft: rgba(51, 65, 85, 0.8);

    --bt-title: #e5e7eb;
    --bt-text: #cbd5e1;
    --bt-muted: #94a3b8;
    --bt-muted-2: #94a3b8;

    --bt-shadow: none;
}

p {
    margin: 0;
}

/* ---- container ---- */
.series-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.25rem;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border);
    border-radius: 16px;
}

/* ---- header ---- */
.series-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

:root[data-bt-theme="dark"] .series-header,
body[data-bt-theme="dark"] .series-header {
    border-bottom-color: rgba(51, 65, 85, 0.75);
}

.series-title {
    margin: 0;
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--bt-title);
}

.series-description,
.series-subtitle {
    margin: 0.35rem 0 0 0;
    color: var(--bt-muted);
}

/* ---- list ---- */
.series-events-list {
    display: grid;
    gap: 0.9rem;
}

/* ---- card ---- */
.series-event {
    background: var(--bt-card);
    border: 1px solid var(--bt-border-soft);
    border-radius: 14px;
    padding: 1rem;
    box-shadow: var(--bt-shadow);
}

.evtHeadlineDiv {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.2;
    color: var(--bt-title);
}

.evtSummaryDiv {
    margin: 0 0 0.85rem 0;
    font-size: 0.95rem;
    color: var(--bt-muted-2);
}

/* ---- detail layout (image optional) ----
   IMPORTANT: your JS removes <img> when no image.
   This rule makes text span full width in that case.
*/
.evtDetailDiv {
    display: grid;
    grid-template-columns: var(--bt-media-w) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin: 0.25rem 0 0.75rem 0;
}

/* constrain image when present */
.evtDetailDiv > img.evtImage {
    width: 100%;
    height: var(--bt-media-h);
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

/* text */
.evtDetailDiv > .evtText {
    min-width: 0; /* critical: prevents narrow-column bugs */
    color: var(--bt-text);
    font-size: 0.98rem;
    line-height: 1.5;
}

.evtDetailDiv > .evtText p {
    margin: 0.35rem 0;
}

/* ✅ if image was removed, text becomes first child → full width */
.evtDetailDiv > .evtText:first-child {
    grid-column: 1 / -1;
}

/* ---- venue map link ---- */
.evtVenueMap {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-muted-2);
    text-decoration: underline;
}

/* ---- read more toggle (injected by the embed after .evtText) ---- */
.evtDetailDiv > .bt-read-more {
    grid-column: 2;
    justify-self: start;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bt-muted-2);
    text-decoration: underline;
}

/* no image → text spans full width, so the toggle should too */
.evtDetailDiv > .evtText:first-child + .bt-read-more {
    grid-column: 1 / -1;
}

/* ---- actions ---- */
.evtActionsDiv {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

/* ---- buttons ---- */
.btn-primary,
.btn-secondary {
    height: 36px;
    padding: 0 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bt-radius-md);
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

.btn-primary {
    border: 1px solid transparent;
    color: var(--bt-text-on-primary);
    background: linear-gradient(135deg, var(--bt-primary-a), var(--bt-primary-b));
}

.btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-secondary {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.45);
    color: #e5e7eb;
}

/* ---- mobile ---- */
@media (max-width: 640px) {
    .series-container {
        padding: 1rem;
    }

    .evtDetailDiv {
        grid-template-columns: 1fr;
    }

    .evtDetailDiv > img.evtImage {
        height: 180px;
    }

    .evtActionsDiv {
        justify-content: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
}