/*
css styles for single template of CPT sd_cpt_event

Same design tokens as sd_program.css - see that file's header comment for the reasoning
(lernort.siebenlinden.org's own CI, not the main site's). Duplicated here rather than shared
because the two stylesheets are enqueued independently per-template.

@package SeminardeskPlugin
 */

/* Hueman Pro's Customizer-driven column layout adds side padding to .main-inner via rules
   like `.col-3c .main-inner` (reserving space for one or two sidebars) - that body class
   comes from body_class() itself, based on the Customizer setting, so it's still applied
   here even though this template's own markup is a standalone fullwidth structure (see the
   .php file's header comment). That padding otherwise squeezes this page's content
   off-center inside a narrower strip. Force it back to 0 with equal specificity to the
   theme's own rules (two class selectors) so this doesn't depend on which layout is picked
   in the Customizer. Rather than chase down every col-* variant by hand (col-3c, col-3cm and
   col-2cl were all confirmed live, in turn, before switching to this generic form), match
   the whole family with an attribute selector - same specificity as a single class, so it
   still reliably wins over the theme's own two-class rule. */
body[class*="col-"] .main-inner {
    padding-left: 0;
    padding-right: 0;
}

.sd-event-page {
    --sd-primary: #7eb686;
    --sd-primary-dark: #5da467;
    --sd-secondary: #495057;
    --sd-secondary-dark: #383d42;
    --sd-success: #16a34a;
    --sd-danger: #c0392b;
    /* same value as sd_program.css/sd_cpt_facilitator.css, not just the same token name -
       keeps body text the same shade across all three templates */
    --sd-ink: #222;
    --sd-ink-muted: #495057;
    --sd-line: #dee2e6;
    --sd-bg: #fff;
    --sd-bg-muted: #f5f5f5;
    --sd-page-bg: #f0f0f0;
    --sd-space-xs: 0.5rem;
    --sd-space-sm: 1rem;
    --sd-space-md: 1.5rem;
    --sd-space-lg: 2rem;
    --sd-space-xl: 3rem;
    --sd-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
    /* same two radius steps as sd_program.css: sm for controls, lg for cards/containers */
    --sd-radius-sm: 0.25rem;
    --sd-radius-lg: 0.5rem;

    font-family: "Titillium Web", Titillium, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    color: var(--sd-ink);
    /* SeminarDesk free-text fields (description, bio, teaser, ...) sometimes contain a long
       unbroken run of characters (e.g. a "____" DE/EN divider) - without this it overflows
       the page width instead of wrapping like normal text does */
    overflow-wrap: break-word;

    /* full-width grey background (matches the theme's own page background either side of
       the content column) - .sd-event-page-inner below constrains the actual content width */
    background: var(--sd-page-bg);
    padding-bottom: var(--sd-space-xl);
}
.sd-event-page-inner {
    /* same content width as sd_program.css's .sd-program-page (max-width: 1100px) - grows
       to full width on narrow/mobile screens (no separate breakpoint needed, a block element
       just shrinks to fit), side padding keeps content off the very edge of the screen */
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sd-space-md) var(--sd-space-md) 0;
}
/* consistent paragraph spacing for SeminarDesk's raw-HTML free text (description, ...) across
   all three templates - see the matching rule in sd_program.css/sd_cpt_facilitator.css */
.sd-event-page p {
    margin-top: 0;
    margin-bottom: 1rem;
}
.sd-event-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: var(--sd-space-md);
    color: var(--sd-secondary);
    text-decoration: none;
    font-weight: 600;
}
.sd-event-back-link:hover {
    text-decoration: underline;
}

/* the card: white, rounded, holds the hero image (flush against the top corners) and the
   body content below it - sits on the page's own grey background */
.sd-event-card {
    background: var(--sd-bg);
    border-radius: var(--sd-radius-lg);
    overflow: hidden;
}

/* content width: the template runs inside Hueman's fullwidth wrapper (see the .php file's
   header comment), so nothing upstream constrains line length any more - set it here
   explicitly instead of relying on the theme's own .section-inner.medium, matching
   sd_program.css's content column (max-width: 1100px) */
.sd-event-body {
    margin: 0 auto;
    padding: 2rem var(--sd-space-md, 1.5rem) 3rem;
}
/* unlike the rest of the page, this stays a distinct white box - it's the only thing on the
   page, so it needs to read as its own notice rather than blend into the grey background */
.sd-event-not-found {
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem var(--sd-space-md, 1.5rem);
    background: var(--sd-bg);
    border-radius: var(--sd-radius-lg);
    text-align: center;
}
.sd-event-not-found h1 {
    margin-bottom: 0.5rem;
}
.sd-event-not-found p {
    color: var(--sd-ink-muted);
}

/* description + sidebar side by side (ZEGG-style: run content in parallel instead of stacking
   everything, so the page doesn't grow as long) - the booking form deliberately stays OUTSIDE
   this row, full width, below both columns: it's a multi-step SeminarDesk wizard that needs
   real width to stay usable, unlike the short date/facilitator entries in the sidebar */
.sd-event-main-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 760px) {
    .sd-event-main-row {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
}
.sd-event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* hero: image with the title/subtitle overlaid directly on it, not sitting below it. The
   image itself stays full-bleed; only the text sitting on top of it is width-constrained,
   same max-width as .sd-event-body so the title lines up with the content below it */
.sd-event-hero {
    position: relative;
    overflow: hidden;
}
.sd-event-hero-image {
    margin: 0;
}
.sd-event-hero-image img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}
.sd-event-hero-text {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: var(--sd-space-md, 1.5rem);
    padding-right: var(--sd-space-md, 1.5rem);
    box-sizing: border-box;
}
.sd-event-hero:not(.sd-event-hero-no-image) .sd-event-hero-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 3em;
    padding-bottom: 1.5em;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}
.sd-event-hero-text .archive-title {
    margin: 0;
    font-family: "Titillium Web", Titillium, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    /* clamp rather than a fixed size - a long title otherwise wraps to 3+ lines inside the
       hero's gradient overlay, which reads poorly over an image; this scales it down a bit
       toward narrower viewports (overridden further below 600px, where space is tightest) */
    font-size: clamp(1.5rem, 3vw + 1rem, 2rem);
    line-height: 1.2;
}
.sd-event-hero:not(.sd-event-hero-no-image) .sd-event-hero-text .archive-title {
    color: #fff;
}
.sd-event-subtitle {
    margin: 0.5em 0 0 0;
    font-size: 1.1em;
    opacity: 0.9;
}
.sd-event-hero-no-image .sd-event-hero-text {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
.sd-event-hero-no-image .sd-event-subtitle {
    opacity: 0.75;
}
.sd-event-description {
    /* cap line length for readability instead of letting paragraphs run the full column
       width, which stays useful even at the page's current 1100px width */
    max-width: 68ch;
    margin-bottom: 2rem;
    line-height: 1.6;
}
/* the description is raw HTML from SeminarDesk and any links in it have no color of their
   own, so without this they fall back to the theme's default link color (an odd ochre) and
   its global a:hover{color:#444} rule on hover - inconsistent with the rest of the page,
   which always uses --sd-primary/--sd-primary-dark for links */
.sd-event-description a {
    color: var(--sd-primary);
    text-decoration: underline;
}
.sd-event-description a:hover {
    color: var(--sd-primary-dark);
}
/* <details>/<summary> disclosure: .sd-event-description is now the <details> element itself.
   Chrome/Firefox/Safari all support ::marker on <summary>, removed here since the toggle
   label text below does that job instead. */
.sd-event-description-summary {
    cursor: pointer;
    list-style: none;
}
.sd-event-description-summary::-webkit-details-marker {
    display: none;
}
.sd-event-description-summary::marker {
    content: "";
}
.sd-event-description-preview {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-event-description-full {
    display: none;
}
.sd-event-description-toggle-label {
    display: inline-block;
    margin-top: 0.5em;
    font-weight: 600;
    color: var(--sd-primary);
}
.sd-event-description-summary:hover .sd-event-description-toggle-label {
    color: var(--sd-primary-dark);
    text-decoration: underline;
}
.sd-event-description-toggle-label-less {
    display: none;
}
/* open state: swap which half is shown, and which toggle label reads */
.sd-event-description[open] .sd-event-description-preview {
    display: none;
}
.sd-event-description[open] .sd-event-description-full {
    display: block;
}
.sd-event-description[open] .sd-event-description-toggle-label-more {
    display: none;
}
.sd-event-description[open] .sd-event-description-toggle-label-less {
    display: inline-block;
}
/* clamp/toggle only on mobile - desktop shows the full text unclamped, like before this was
   introduced, no click needed. <details> stays in the markup either way (harmless - nothing's
   clamped to reveal, so the toggle label below is hidden too, there's just nothing to toggle) */
@media (min-width: 760px) {
    .sd-event-description-preview {
        /* fully exit -webkit-box mode, not just neutralize the clamp - box-items inside
           -webkit-box don't margin-collapse like normal block children, so leaving that
           display mode active would keep any multi-paragraph description's <p> spacing
           doubled/uncollapsed on desktop, a real visual difference from plain block flow */
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    .sd-event-description-toggle-label {
        display: none;
    }
}

/* section titles use lernort's own primary sage-green */
.sd-event-facilitators-title,
.sd-event-dates-title {
    margin: 2.5rem 0 1rem 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--sd-primary);
}
.sd-event-dates-title {
    margin-top: 0;
}
/* two layouts, one per breakpoint (see the template comment for why both render unconditionally
   instead of branching in PHP): desktop keeps the original full photo+name+bio cards; mobile
   gets a compact overlapping avatar "team stack" (photo only) + one shared comma-separated name
   list, freeing up vertical space where it matters most (small screens, most bookings). Hidden
   by default (mobile-first); @media below switches which of the two is shown. */
.sd-event-facilitators-list {
    display: none;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 2em;
}
.sd-event-facilitator-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 0.75em;
    border-radius: var(--sd-radius-lg);
    transition: background-color 0.15s ease;
}
.sd-event-facilitator-card:hover {
    background-color: var(--sd-bg-muted, #f5f5f5);
}
.sd-event-facilitator-card:hover .sd-event-facilitator-name {
    color: var(--sd-primary-dark);
    text-decoration: underline;
}
.sd-event-facilitator-photo {
    display: block;
    width: 96px;
    height: 96px;
    margin-bottom: 0.6em;
    border-radius: 50%;
    overflow: hidden;
}
.sd-event-facilitator-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sd-event-facilitator-name {
    width: 100%;
    font-weight: 600;
    color: var(--sd-primary);
}
.sd-event-facilitator-bio {
    width: 100%;
    margin-top: 0.3em;
    font-size: 0.85em;
    color: var(--sd-ink-muted);
    line-height: 1.4;
    /* same fix as sd_cpt_facilitator.css: a long DE/EN divider run of underscores/dashes with
       no spaces is one unbreakable "word" and overflows the card instead of wrapping */
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* in the sidebar specifically, the centered-column card layout (built for a wide flex-wrap
   row) doesn't fit a narrow single column well - lay facilitators out horizontally instead
   (photo left, name/bio right), no bio (there isn't room), one per row */
.sd-event-sidebar .sd-event-facilitators-list {
    flex-direction: column;
    gap: 0.75em;
}
.sd-event-sidebar .sd-event-facilitator-card {
    flex-direction: row;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.4em;
}
.sd-event-sidebar .sd-event-facilitator-photo {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
    margin-right: 0.7em;
    flex: 0 0 auto;
}
.sd-event-sidebar .sd-event-facilitator-bio {
    display: none;
}

.sd-event-facilitators-stack {
    display: flex;
    margin-bottom: 0.5em;
}
.sd-event-facilitator-avatar {
    display: block;
    width: 44px;
    height: 44px;
    margin-right: -14px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    box-shadow: var(--sd-shadow);
    transition: transform 0.15s ease, z-index 0s;
}
/* bring the hovered avatar to the front and lift it slightly - without this, hovering one
   that's underneath in the stack order is hard to notice since it stays half-covered */
.sd-event-facilitator-avatar:hover,
.sd-event-facilitator-avatar:focus-visible {
    z-index: 1;
    transform: scale(1.1);
}
.sd-event-facilitator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sd-event-facilitators-names {
    margin: 0 0 2em 0;
    font-size: 0.9em;
    color: var(--sd-ink-muted);
    line-height: 1.5;
}
.sd-event-facilitators-names a {
    color: var(--sd-primary);
    text-decoration: none;
}
.sd-event-facilitators-names a:hover {
    color: var(--sd-primary-dark);
    text-decoration: underline;
}
/* mobile: stack + name list, no cards. Desktop: cards, no stack/name list. */
@media (min-width: 760px) {
    .sd-event-facilitators-list {
        display: flex;
    }
    .sd-event-facilitators-stack,
    .sd-event-facilitators-names {
        display: none;
    }
}

/* Termine: each date is its own soft-shadow card (lernort's .card treatment, no border) -
   status and price carry the most weight (the two questions a visitor actually needs
   answered first), venue is secondary */
.sd-event-dates-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sd-event-date-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em 1.25em;
    padding: 1rem 1.25rem;
    background: var(--sd-bg);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow);
}
.sd-event-date-check {
    display: none; /* the card shape already reads as a list item; the checkmark badge
                       added visual noise without carrying information */
}
.sd-event-date-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3em 1em;
    flex: 1 1 auto;
    min-width: 0;
}
.sd-event-date-when {
    font-weight: 600;
    color: var(--sd-primary);
}
.sd-event-date-price {
    font-weight: 600;
}
.sd-event-date-venue {
    color: var(--sd-ink-muted);
    font-size: 0.9em;
}
.sd-event-date-aside {
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex: 0 0 auto;
    margin-left: auto;
}
.sd-event-date-status {
    font-size: 0.85em;
    font-weight: 600;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    color: var(--sd-success);
    white-space: nowrap;
}
/* ausgebucht/warteliste: still worth a look, an amber "wait, check this" rather than a hard
   stop - canceled gets the stronger red instead, since it's the one state that's really over */
.sd-status-fully_booked .sd-event-date-status,
.sd-status-wait_list .sd-event-date-status {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}
.sd-status-canceled .sd-event-date-status {
    background: rgba(192, 57, 43, 0.12);
    color: var(--sd-danger);
}
.sd-status-canceled {
    opacity: 0.7;
}
/* booking form embedded directly in the page (SeminarDesk's own /embed form, in an iframe) -
   no popup, matching lernort.siebenlinden.org's own event pages, which show it inline right
   under the list of dates rather than behind a button. Desktop only - see
   .sd-event-booking-link below for the mobile treatment.

   Height: no content-height signal is available from SeminarDesk's /embed page at all
   (confirmed via DevTools - console, Network tab, both from the top frame AND from inside the
   embedded iframe itself, plus a generic window.addEventListener('message', ...) catch-all -
   nothing SeminarDesk-specific ever arrives, only browser-extension noise). This is a
   SeminarDesk-side gap, not fixable from the plugin - flagged to them separately. An earlier
   saved HTML dump (Design-Vorlage/..._files/embed_*.js) appeared to show child-side handshake
   code for the "iframe-resizer" library, but that evidently doesn't reflect what /embed
   currently serves - stale save, or a SeminarDesk-side change since.

   Tried auto-sizing via iframe-resizer, then a manual scrolling="no" + overflow-y:auto wrapper
   once that was reverted - both ended up worse on desktop (introduced their own new scrollbar)
   without reliably fixing mobile either. Back to the simplest version: plain fixed height, no
   scrolling attribute (browser default), no wrapper - this was the original implementation and
   is still the one that's actually held up. */
/* sidebar links out to lernort's still-authoritative "Rund um den Aufenthalt" pages (FAQ,
   Anreise, Unterkunft, Verpflegung) - placeholder until those get migrated into WordPress of
   their own, see SD_LERNORT_BASE_URL's other uses for the same not-yet-migrated pattern */
.sd-event-sidebar-links {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sd-line);
}
.sd-event-sidebar-links-title {
    margin: 0 0 0.75em 0;
    font-size: 1em;
    font-weight: 600;
    color: var(--sd-ink-muted);
}
.sd-event-sidebar-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.sd-event-sidebar-links a {
    color: var(--sd-primary);
    text-decoration: underline;
}
.sd-event-sidebar-links a:hover {
    color: var(--sd-primary-dark);
}

.sd-event-booking-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sd-line);
}
.sd-event-booking-title {
    margin: 0 0 1rem 0;
    font-size: 1.3em;
    font-weight: 600;
    color: var(--sd-primary);
}
/* mobile (below 760px, matching .sd-event-main-row's own breakpoint): no iframe at all, just
   a link straight to SeminarDesk's bare /embed form in a new tab. Every attempt to embed with
   some scroll configuration (scrolling="no" + wrapper overflow, iframe-resizer before that)
   produced either a nested/double scrollbar or a regression on desktop - not fixable from this
   side given SeminarDesk's /embed page posts no content-height signal at all (see the comment
   above the markup). Desktop keeps the plain inline iframe below. */
.sd-event-booking-embed-wrap {
    display: none;
}
.sd-event-booking-link {
    display: inline-block;
    padding: 0.75em 1.5em;
    background: var(--sd-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--sd-radius-sm);
}
.sd-event-booking-link:hover {
    background: var(--sd-primary-dark);
    color: #fff;
}
@media (min-width: 760px) {
    .sd-event-booking-embed-wrap {
        display: block;
    }
    .sd-event-booking-link {
        display: none;
    }
}
.sd-event-booking-embed {
    display: block;
    width: 100%;
    height: 900px;
    border: none;
}

@media (max-width: 600px) {
    .sd-event-date-aside {
        margin-left: 0;
        flex: 1 1 100%;
    }
    /* clamp instead of a fixed size - a long title at a fixed 1.5rem could still overflow the
       gradient-overlay area awkwardly on a narrow phone; clamp shrinks it further down to
       ~360px viewports while staying at 1.5rem on anything wider than that */
    .sd-event-hero-text .archive-title {
        font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    }
    /* most bookings come from mobile - a 480px-tall hero eats most of the first screen
       before any content (or the way to book) is visible, so cap it shorter here. Not as
       short as before (220px) - that left too little room for the title/subtitle overlay
       text on top of it, especially with a long title. */
    .sd-event-hero-image img {
        max-height: 300px;
    }
    .sd-event-hero-text {
        padding-top: 1.5em;
    }
}

/* visible keyboard focus (WCAG 2.4.7) - see sd_program.css's header comment for why this is
   needed (the theme supplies no default outline for links/buttons) */
.sd-event-page a:focus-visible,
.sd-event-page button:focus-visible {
    outline: 2px solid var(--sd-primary-dark);
    outline-offset: 2px;
}
.sd-event-facilitator-card:focus-visible {
    outline-offset: -2px;
}