/**
 * Ensemble Single Event — Frontend CSS Canon (Phase 4)
 *
 * Mobile-first, single-column base for templates/single-event.php.
 * Look distilled from the "pure" reference set: clean typography, thin lines,
 * generous whitespace. Consumes --ensemble-* Brand Tuner variables ONLY.
 *
 * SKIN CONTRACT: .ensemble-single-event is a flex column of direct
 * .ensemble-event-section--{name} children. Sets reorder (order), hide
 * (display:none) or re-layout (display:grid + grid-template-areas) via
 * body.es-layout-{set} … — never their own markup.
 *
 * @package Ensemble
 */

.ensemble-single-event-wrapper {
    max-width: var(--ensemble-content-width, 860px);
    margin: 0 auto;
    padding: 0 var(--ensemble-content-padding, 20px);
    color: var(--ensemble-text, #1a1a1a);
    font-family: var(--ensemble-body-font, inherit);
}

/* ── Section container: the positioning contract ── */
.ensemble-single-event {
    display: flex;
    flex-direction: column;
    gap: var(--ensemble-section-gap, 48px);
    padding: 24px 0 64px;
}

.ensemble-single-event .ensemble-event-section {
    min-width: 0;
}

.ensemble-single-event .ensemble-event-section-title {
    margin: 0 0 20px;
    font-family: var(--ensemble-heading-font, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ensemble-muted-text, #6b6b76);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ensemble-card-border, rgba(0, 0, 0, 0.08));
}

/* ── Hero ── */
.ensemble-event-section--hero {
    position: relative;
    margin: 0 calc(-1 * var(--ensemble-content-padding, 20px));
}

.ensemble-event-section--hero .ensemble-event-hero-image,
.ensemble-event-section--hero .ensemble-event-hero-video {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: cover;
    border-radius: 0;
}

/* Hero-Video (08.09.2026). Eingebettete Anbieter liefern nur ein iframe ohne
   eigenes Seitenverhaeltnis - der Rahmen gibt es vor, das iframe fuellt ihn. */
.ensemble-event-section--hero .ensemble-event-hero-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 62vh;
    overflow: hidden;
}
.ensemble-event-section--hero .ensemble-event-hero-video-wrapper iframe.ensemble-event-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
}

.ensemble-event-section--hero .ensemble-event-badge {
    position: absolute;
    top: 16px;
    right: calc(16px + var(--ensemble-content-padding, 20px));
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--ensemble-primary, #e91e8c);
    color: var(--ensemble-primary-contrast, #fff);
    border-radius: var(--ensemble-badge-radius, 4px);
    z-index: 2;
}
.ensemble-event-section--hero .ensemble-event-badge--status {
    background: var(--ensemble-danger, #c0392b);
    color: #fff;
}

/* ── Header ── */
.ensemble-event-section--header .ensemble-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ensemble-muted-text, #6b6b76);
    margin-bottom: 14px;
}

.ensemble-event-section--header .ensemble-event-date {
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #1a1a1a));
    font-weight: 600;
}

.ensemble-event-section--header .ensemble-event-title {
    margin: 0;
    font-family: var(--ensemble-heading-font, inherit);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: var(--ensemble-heading-weight, 700);
    line-height: 1.12;
    color: inherit;
}

.ensemble-event-section--header .ensemble-event-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ensemble-event-section--header .ensemble-event-category {
    padding: 4px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    border: 1px solid var(--ensemble-card-border, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
    color: var(--ensemble-muted-text, #6b6b76);
}

.ensemble-event-section--header .ensemble-event-price {
    display: inline-block;
    margin-top: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #1a1a1a));
}

/* ── Description ── */
.ensemble-event-section--description .ensemble-event-content {
    font-size: 1.05rem;
    line-height: var(--ensemble-line-height, 1.75);
    max-width: 68ch;
}

.ensemble-event-section--description .ensemble-event-content p {
    margin: 0 0 1.2em;
}

/* ── Lineup (canonical artist cards stacked) ── */
.ensemble-event-section--artists .ensemble-event-lineup {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Zeit steht ueber der Karte im selben Eintrag (10.10.2026) */
.ensemble-event-section--artists .ensemble-lineup-time {
    margin: 0 0 6px;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--ensemble-muted-text, #6b6b76);
}

/* ── Buttons (tickets fallback etc.) ── */
.ensemble-single-event .ensemble-btn {
    display: inline-block;
    padding: 12px 26px;
    border-radius: var(--ensemble-button-radius, 6px);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ensemble-single-event .ensemble-btn-tickets {
    background: var(--ensemble-primary, #1a1a1a);
    color: var(--ensemble-primary-contrast, #ffffff);
}

.ensemble-single-event .ensemble-btn:hover {
    opacity: 0.85;
}

/* Zweitknopf (06.10.2026): der externe Link neben dem Ticketknopf. Umriss
   statt Flaeche, damit der Ticketknopf der erste Blick bleibt. */
.ensemble-single-event .ensemble-btn-secondary {
    background: transparent;
    color: var(--ensemble-primary, #1a1a1a);
    box-shadow: inset 0 0 0 1px var(--ensemble-primary, #1a1a1a);
}

.ensemble-single-event .ensemble-event-section--tickets .ensemble-btn + .ensemble-btn {
    margin-left: 10px;
}

/* ── Special status ── */
.ensemble-single-event[class*="ensemble-event-status-"] .ensemble-event-title {
    opacity: 0.75;
}

/* ── Desktop refinements (mobile-first: base above is the phone layout) ── */
@media (min-width: 782px) {
    .ensemble-single-event {
        gap: var(--ensemble-section-gap-desktop, 64px);
        padding-top: 40px;
    }

    .ensemble-event-section--hero .ensemble-event-hero-image,
    .ensemble-event-section--hero .ensemble-event-hero-video,
    .ensemble-event-section--hero .ensemble-event-hero-video-wrapper {
        border-radius: var(--ensemble-card-radius, 12px);
    }

    .ensemble-event-section--hero {
        margin: 0;
    }

    .ensemble-event-section--hero .ensemble-event-badge {
        right: 16px;
    }
}

/* ── Checkout feedback notices ── */
.ensemble-event-notice {
    margin: 20px 0 0;
    padding: 14px 18px;
    border-radius: var(--ensemble-card-radius, 12px);
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}

.ensemble-event-notice--success {
    background: color-mix(in srgb, var(--ensemble-success, #10b981) 12%, transparent);
    border: 1px solid var(--ensemble-success, #10b981);
    color: inherit;
}

.ensemble-event-notice--cancelled {
    background: var(--ensemble-muted-bg, #f0f0f3);
    border: 1px solid var(--ensemble-card-border, rgba(0, 0, 0, 0.12));
    color: var(--ensemble-muted-text, #6b6b76);
}

.ensemble-event-notice-code {
    font-family: var(--ensemble-mono-font, monospace);
    letter-spacing: 0.05em;
}

/* ── Header CTA (e.g. Booking Engine calendar panel opener) ── */
.ensemble-single-event .ensemble-event-cta {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 28px;
    background: var(--ensemble-primary, #1a1a1a);
    color: var(--ensemble-primary-contrast, #ffffff);
    border-radius: var(--ensemble-button-radius, 6px);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ensemble-single-event .ensemble-event-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Zeitplan (Fix-Paket F, Befund 4): Akteur-Zeiten + Pausen als Liste ── */
.ensemble-event-schedule {
    margin: 0 0 24px;
}
.ensemble-event-schedule-title {
    margin: 0 0 10px;
    font-size: var(--ensemble-body-size, 16px);
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a202c);
}
.ensemble-event-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ensemble-event-schedule-item {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ensemble-card-border, #e2e8f0);
    font-size: var(--ensemble-small-size, 14px);
    color: var(--ensemble-text, #1a202c);
}
.ensemble-event-schedule-item:last-child { border-bottom: 0; }
.ensemble-event-schedule-time {
    flex: 0 0 4.5em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}
.ensemble-event-schedule-label { flex: 1 1 auto; }
.ensemble-event-schedule-meta { color: var(--ensemble-text-muted, #a0aec0); }
.ensemble-event-schedule-item--break .ensemble-event-schedule-label {
    color: var(--ensemble-text-muted, #a0aec0);
    font-style: italic;
}

/* ── Räume auf der Event-Seite (Fix-Paket F, Befund 8) ── */
.ensemble-event-rooms { list-style: none; margin: 12px 0 0; padding: 0; }
.ensemble-event-room {
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
    padding: 6px 0; border-top: 1px solid var(--ensemble-card-border, #e2e8f0);
    font-size: var(--ensemble-small-size, 14px);
}
.ensemble-event-room-name { font-weight: 600; color: var(--ensemble-text, #1a202c); }
.ensemble-event-room-opening { color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea)); font-weight: 600; }
.ensemble-event-room-description { flex-basis: 100%; color: var(--ensemble-text-muted, #a0aec0); }