/*
 * Calendar / Event content element – Layout 0
 * Wird nur geladen, wenn das Element gerendert wird (via f:asset.css + cb:assetPath).
 * Plain CSS mit Bootstrap-CSS-Variablen (--bs-*), damit keine SCSS-Kompilierung nötig ist.
 */

/* Aufklapp-Button: oranger Kreis mit +/− (SVG) */
.pp-calendar-event--layout0 .pp-cal-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--bs-primary, #e8740c);
    color: #fff;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Grosses Plus, aber dünne Linie (stroke-width unabhängig von der Icon-Grösse) */
.pp-calendar-event--layout0 .pp-cal-toggle-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.pp-calendar-event--layout0 .pp-cal-toggle-icon line {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* aufgeklappt → Minus: vertikale Linie ausblenden */
.pp-calendar-event--layout0 .pp-cal-toggle[aria-expanded="true"] .pp-cal-toggle-v {
    opacity: 0;
}

.pp-calendar-event--layout0 .pp-cal-toggle:hover,
.pp-calendar-event--layout0 .pp-cal-toggle:focus {
    filter: brightness(0.92);
}

/* Platzhalter, wenn keine Beschreibung vorhanden ist (hält die Ausrichtung) */
.pp-calendar-event--layout0 .pp-cal-toggle--empty {
    background-color: transparent;
    cursor: default;
}

.pp-calendar-event--layout0 .pp-cal-info {
    min-width: 0; /* erlaubt Umbruch in schmalen Spalten */
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.pp-calendar-event--layout0 .pp-cal-sep {
    color: var(--bs-border-color, #cfcfcf);
    margin: 0 0.5rem;
}

.pp-calendar-event--layout0 .pp-cal-place,
.pp-calendar-event--layout0 .pp-cal-date,
.pp-calendar-event--layout0 .pp-cal-time {
    color: var(--bs-body-color, #555);
}

/* ICS-Download-Icon rechts */
.pp-calendar-event--layout0 .pp-cal-ics {
    display: inline-flex;
    align-items: center;
    color: var(--bs-body-color, #333);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pp-calendar-event--layout0 .pp-cal-ics:hover,
.pp-calendar-event--layout0 .pp-cal-ics:focus {
    color: var(--bs-primary, #e8740c);
}

.pp-calendar-event--layout0 .pp-cal-ics-icon {
    display: block;
    width: 1.4rem;
    height: auto;
}

.pp-calendar-event--layout0 .pp-cal-body {
    color: var(--bs-body-color, #555);
    /* auf Höhe von .pp-cal-title einrücken: Toggle-Breite (2.25rem) + gap-3 (1rem) */
    padding-left: 3.25rem;
}

/* Auf kleinen Screens: Titel eigene Zeile, Meta (Ort | Datum | Uhrzeit) darunter inline mit Umbruch */
@media (max-width: 767.98px) {
    .pp-calendar-event--layout0 .pp-cal-title {
        flex: 0 0 100%;
    }

    .pp-calendar-event--layout0 .pp-cal-sep:first-of-type {
        display: none;
    }
}