/* ============================================================
   Projekt Termin Sync — Frontend Styles
    Status-Banderolen, Termin-Cards, Meta-Icons
   Wird über wp_enqueue_style() eingebunden (Phase 6)
   ============================================================ */

/* ── Badge über Bild (Stempel-Overlay) ─────────────────────── */

/* ── Termin-Card-Container ──────────────────────────────────── */
.pts-termin-card {
    position: relative;
    overflow: hidden;
}

/* Visuelles Dampening bei abgesagten / verschobenen Terminen */
.pts-status--abgesagt .pts-termin-card__image,
.pts-status--gespielt  .pts-termin-card__image {
    filter: grayscale(50%);
    opacity: .85;
}

.pts-status--abgesagt .pts-termin-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(220, 38, 38, .12);
    pointer-events: none;
}

/* ── Meta-Liste (Datum, Uhrzeit, Ort, Ticket) ───────────────── */
.pts-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pts-meta__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
}

.pts-meta__icon {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    opacity: .55;
    margin-top: 1px;
}

.pts-meta__text {
    flex: 1;
}

/* ── Projektgalerie ─────────────────────────────────────────── */
.pts-projektgalerie {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.pts-projektgalerie__link {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.pts-projektgalerie__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.pts-projektgalerie__link:hover .pts-projektgalerie__image,
.pts-projektgalerie__link:focus-visible .pts-projektgalerie__image {
    transform: scale(var(--pts-projektgalerie-hover-zoom, 1.05));
}

/* ── Ticket-Button ──────────────────────────────────────────── */
.pts-ticket-btn {
    display: inline-block;
    padding: 10px 22px;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: background .15s;
}

.pts-ticket-btn:hover {
    background: #1d4ed8;
    color: #fff;
}

/* ── Countdown ──────────────────────────────────────────────── */
.pts-countdown {
    display: flex;
    gap: 16px;
    font-variant-numeric: tabular-nums;
}

.pts-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pts-countdown__number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #111827;
}

.pts-countdown__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
}

.pts-countdown__expired {
    display: inline-block;
    font-weight: 600;
    color: #4b5563;
}

.pts-ical-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Verschobenes Datum (Strikethrough, wie Sale-Preis) ─────── */
.pts-datum-original {
    text-decoration: line-through !important;
    opacity: .55;
    margin-right: .35em;
    font-weight: inherit;
}

.pts-datum-display {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    flex-wrap: wrap;
}

.pts-datum-arrow {
    flex-shrink: 0;
    opacity: .7;
    vertical-align: middle;
}

/* Monatliche Gruppierung: Der User baut Titel + Divider selbst als eigenes
   Element im Loop Item (Klasse `pts-month-label`) und stylt es komplett in
   Elementor. Diese Klasse blendet den Block nur bei wiederholtem Monat aus
   (reines Ein-/Ausblenden, keine Optik).
   !important ist auf BEIDEN Regeln nötig: Elementors Kit-/Global-Class-CSS
   kann eine eigene `.pts-month-label{display:none}`-Regel enthalten (z. B.
   wenn versehentlich als Global Class mit "Display: None" gestylt) – ohne
   !important würde das unser Standard-sichtbar-Verhalten dauerhaft
   überschreiben, unabhängig vom JS-Toggle. Mit !important auf beiden Seiten
   entscheidet einzig die Klasse `pts-month-label-hidden`, die per JS
   gesetzt/entfernt wird, über Sichtbarkeit – unabhängig davon, was sonst im
   Elementor-Kit hinterlegt ist. */
.pts-month-label {
    display: flex !important;
}

.pts-month-label.pts-month-label-hidden {
    display: none !important;
}

/* Abstand nur zwischen Monatsgruppen. Das Plugin setzt bewusst einen
   veränderbaren Standardwert nach dem Vorbild der Referenzseite. */
.pts-month-group .pts-month-item--end {
    margin-block-end: var(--pts-month-group-gap, 3.5rem) !important;
    border-block-end: 0 !important;
}

/* Elementor-Kit- bzw. Theme-Reveal-Klassen dürfen den Loop beim Laden nicht
   unsichtbar machen. Die Monatsliste rendert sofort stabil; eine Animation
   würde bei Ajax/Infinite Scroll außerdem zu sichtbarem Flackern führen. */
.pts-month-group .e-loop-item,
.pts-month-group .elementor-loop-item,
.pts-month-group .elementor-post,
.pts-month-group .kuchinka-fi {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}



/* ── Terminliste nach Monat (PTS_Termin_Monatsgruppen) ──
    Der Titel erbt die Typografie seines Tags (h2) aus Theme/Elementor-Kit. */
.pts-termin-monatsgruppe + .pts-termin-monatsgruppe {
    margin-block-start: var(--pts-monatsgruppe-abstand, 3.5rem);
}

.pts-termin-monatsgruppe__heading {
    margin-block-end: var(--pts-monatsgruppe-heading-abstand, 1.5rem);
}

.pts-termin-monatsgruppe__titel {
    margin: 0 0 .4rem;
}

/* Termine einer Gruppe untereinander wie im einspaltigen Loop Grid. */
.pts-termin-monatsgruppe__termine {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pts-termin-monatsliste__seiten {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    margin-block-start: 2.5rem;
}

/* Nachladen beim Scrollen: Seitenlinks weg (display:flex oben schlaegt sonst
   das hidden-Attribut), unsichtbare Marke am Listenende, beim Laden ein
   Kreisel in Textfarbe. */
.pts-termin-monatsliste__seiten[hidden] { display: none; }
.pts-termin-monatsliste__nachladen { height: 1px; }
.pts-termin-monatsliste.is-laedt .pts-termin-monatsliste__nachladen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding-block: 2rem;
}
.pts-termin-monatsliste.is-laedt .pts-termin-monatsliste__nachladen::before {
    content: "";
    width: 2rem;
    height: 2rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .6;
    animation: pts-nachladen-dreh .8s linear infinite;
}
@keyframes pts-nachladen-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pts-termin-monatsliste.is-laedt .pts-termin-monatsliste__nachladen::before { animation-duration: 2.4s; }
}

/* ── Projekt-Beschreibung: Bilder wachsen mit der Textspalte ──
   Im Editor eingefügte Bilder kommen als „Mittel" (300 px) mit fester
   Breite. Hier skalieren sie mit der Spalte; auf dem Handy volle Breite
   ohne Umfluss. Greift im Tag „Beschreibungstext" (.pts-beschreibung) und
   im Elementor-Widget „Beitragsinhalt" auf Projektseiten. Die passende
   Bilddatei wählt der Browser über srcset/sizes (PTS_Frontend). */
.pts-beschreibung::after,
.single-projekt .elementor-widget-theme-post-content .elementor-widget-container::after {
    content: "";
    display: table;
    clear: both;
}

.pts-beschreibung :is(img, .wp-caption, figure)[class*="align"],
.single-projekt .elementor-widget-theme-post-content :is(img, .wp-caption, figure)[class*="align"] {
    width: clamp(220px, 48%, 560px) !important;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.pts-beschreibung :is(.wp-caption, figure) img,
.single-projekt .elementor-widget-theme-post-content :is(.wp-caption, figure) img {
    width: 100% !important;
    height: auto;
}

.pts-beschreibung .alignright,
.single-projekt .elementor-widget-theme-post-content .alignright {
    float: right;
    margin: .35em 0 1em 1.75em;
}

.pts-beschreibung .alignleft,
.single-projekt .elementor-widget-theme-post-content .alignleft {
    float: left;
    margin: .35em 1.75em 1em 0;
}

.pts-beschreibung .aligncenter,
.single-projekt .elementor-widget-theme-post-content .aligncenter {
    display: block;
    margin: 1em auto;
}

@media (max-width: 767px) {
    .pts-beschreibung :is(img, .wp-caption, figure)[class*="align"],
    .single-projekt .elementor-widget-theme-post-content :is(img, .wp-caption, figure)[class*="align"] {
        float: none;
        display: block;
        width: 100% !important;
        margin: 0 0 1.25em;
    }
}

/*
 * Link-Element ohne Link: Ein Element mit `pts-link-icon`, in dem gerade
 * kein <a> steckt (z. B. Premiere, die vorbei ist – der Permalink-Tag ist
 * dann leer), soll wie normaler Text aussehen, nicht wie ein Link. Die
 * Link-Gestaltung aus Elementor (Farbe, fett, Hover) wird hier aufgehoben.
 * `body .elementor` hebt die Spezifität über Elementors `.elementor .e-…`.
 */
body .elementor .pts-link-icon:not(a):not(:has(a)),
body .elementor .pts-link-icon:not(a):not(:has(a)):is(:hover, :focus-visible) {
    color: inherit;
    font-weight: inherit;
    cursor: auto;
}

/*
 * Adresse bei Veranstaltungsort → Google Maps (pts-pi-veranstaltungsorte).
 * Linkfarbe wie Premiere; das Symbol kommt aus PTS_Link_Icon. Erkannt an der
 * URL, weil Elementor Klassen im Tag-Text entfernt.
 */
body .elementor a[href^="https://www.google.com/maps/search/"] {
    color: var(--pts-link-color, #55808B);
    text-decoration: none;
    cursor: pointer;
}

body .elementor a[href^="https://www.google.com/maps/search/"]:is(:hover, :focus-visible) {
    color: var(--pts-link-color-hover, #30484E);
}

/*
 * Funktionen im Projekt (Projekt-Detailseite): Die Pills stehen im
 * Elementor-Template als vier feste Elemente, nicht passende blendet das
 * Seiten-CSS aus. Reihenfolge wie PTS_CPT::ROLLEN_REIHENFOLGE: Autor, Regie,
 * Schauspieler, Musiker – unabhängig von der Reihenfolge im Template.
 */
#projekt-role-pill-autor      { order: 1; }
#projekt-role-pill-regie      { order: 2; }
#projekt-role-pill-schauspiel { order: 3; }
#projekt-role-pill-musik      { order: 4; }

/* Mitwirkende gruppiert: Spaltenzahl als Variable, damit eine Gruppe mit
   „Breite nach Inhalt" nie mehr Spalten belegt, als der Breakpoint hat.
   Rueckfall fuer Elementor-CSS, das vor Update 295 erzeugt wurde; das
   Spalten-Control des Widgets ueberschreibt diese Werte. */
.pts-mitwirkende__groups { --pts-cols: 3; }
@media (max-width: 1024px) { .pts-mitwirkende__groups { --pts-cols: 2; } }
@media (max-width: 767px)  { .pts-mitwirkende__groups { --pts-cols: 1; } }

/* Datum-Kachel (Dynamic Tag pts-datum-kachel-html): „Fr" klein ueber
   „09. Okt". Schrift, Groesse und Farbe kommen aus dem Elementor-Widget. */
.pts-datum-kachel            { display: inline-block; line-height: 1.1; }
.pts-datum-kachel__wochentag { display: block; font-size: .85em; line-height: 1.2; margin-bottom: .1em; }
.pts-datum-kachel__zeile     { display: block; white-space: nowrap; }

/* Spieltermine nach Rolle (Widget „PTS Spieltermine nach Rolle").
   Rolle in Versalien und kursiv wie auf der alten Seite; Schrift, Farben
   und Abstände kommen aus dem Widget. */
.pts-rollen-termine          { display: flex; flex-direction: column; gap: 1.5em; }
.pts-rollen-termine__titel   { margin: 0 0 .5em; }
.pts-rollen-termine__rolle   { text-transform: uppercase; }
.pts-rollen-termine__liste   { margin: 0; padding-left: 1.2em; list-style: disc; }
.pts-rollen-termine__termin a { color: inherit; }
.pts-rollen-termine__vorbehalt { margin: .4em 0 0; font-style: italic; font-size: .85em; }

/* Projekt-Labels („Uraufführung", „ÖEA") – umrandete Pill in der Farbe des
   Labels (Projekte → Labels, --pts-projekt-label-color), leicht getönt.
   Bewusst anders als die gefüllte Status-Banderole: dauerhafte Eigenschaft
   des Werks, kein Zustand. Größe über --pts-projekt-label-size. */
.pts-projekt-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
}
.pts-projekt-label {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .38em .95em .36em;
    border: 1px solid var(--pts-projekt-label-color, #55808B);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pts-projekt-label-color, #55808B) 8%, transparent);
    color: var(--pts-projekt-label-color, #55808B);
    font-size: var(--pts-projekt-label-size, .6rem);
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.pts-projekt-labels--seite .pts-projekt-label { font-size: var(--pts-projekt-label-size, .75rem); }
.pts-projekt-label svg,
.pts-projekt-label .dashicons,
.pts-projekt-label img {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    font-size: 1.15em;
}

/* Projekt-Labels als Stempel: assets/css/pts-projekt-stempel.css (auch im Admin geladen). */

/* Alexander Kuchinka im Untertitel (pts-pi-untertitel): wie in „PTS Mitwirkende“
   hervorgehoben – Petrol, fett, Link auf /zur-person/, Link-Symbol aus
   PTS_Link_Icon. Erkannt an der URL (#alexander-kuchinka), weil Elementor
   Klassen im Tag-Text entfernt. */
body a[href$="/zur-person/#alexander-kuchinka"] {
    color: var(--pts-link-color, #55808B);
    font-weight: 700;
    text-decoration: none;
}
body a[href$="/zur-person/#alexander-kuchinka"]:is(:hover, :focus-visible) {
    color: var(--pts-link-color-hover, #30484E);
}

/* Ende der PTS-Frontend-Stile. */