/* ============================================================
   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;
}

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