/* ------------------------------------------------------------------
   TERMINE MIT BILD
   Das Bild ist freiwillig (Beitrag -> Bilder und Links ->
   Einleitungsbild). Termine ohne Bild sehen aus wie bisher.

   Diese Datei laedt das Kalendermodul selbst (mod_termin_kalender,
   tmpl/default.php). Sie liegt bewusst nicht im custom_less des
   Template-Stils: so kommt sie per Datei-Upload auf den Server, ohne
   dass der Live-Stil in der Datenbank angefasst und neu kompiliert
   werden muss. Die Karten auf der Startseite brauchen nichts davon -
   .vh-news__bild steht schon im Design (Abschnitt 12).
   ------------------------------------------------------------------ */

/* Breite Ansicht: Kalenderblatt | Text | Bild rechts */
.vh-kalender .vh-kalender__eintrag--bild {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 11rem;
    grid-template-areas: "blatt text bild";
    align-items: start;
    column-gap: 1rem;
}

.vh-kalender .vh-kalender__eintrag--bild > .vh-kalender__blatt       { grid-area: blatt; }
.vh-kalender .vh-kalender__eintrag--bild > .vh-kalender__eintrag-text { grid-area: text; }

.vh-kalender .vh-kalender__bild {
    grid-area: bild;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vh-green-soft, #eaf2ea);
    box-shadow: var(--vh-shadow, 0 10px 30px rgba(33, 20, 1, .08));
}

.vh-kalender .vh-kalender__bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--vh-ease, ease);
}

.vh-kalender .vh-kalender__eintrag--bild:hover .vh-kalender__bild img { transform: scale(1.04); }

/* Schmal: Bild oben ueber die volle Breite, darunter Blatt und Text */
@media (max-width: 639px) {
    .vh-kalender .vh-kalender__eintrag--bild {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "bild  bild"
            "blatt text";
        row-gap: .8rem;
    }

    .vh-kalender .vh-kalender__bild { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .vh-kalender .vh-kalender__bild img { transition: none; }
    .vh-kalender .vh-kalender__eintrag--bild:hover .vh-kalender__bild img { transform: none; }
}

/* Kontrastmodus: klare Kante statt weichem Schatten */
.vh-kontrast .vh-kalender .vh-kalender__bild {
    box-shadow: none;
    border: 2px solid #000;
}

/* ------------------------------------------------------------------
   Startseite: steht eine Karte mit Bild allein (oft gibt es nur einen
   anstehenden Termin), wuerde sie ueber die volle Breite laufen und
   das 16:9-Bild riesig. Ab Tablet-Breite geht sie deshalb quer:
   Bild links, Text rechts.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .vh-news .vh-news__karte--bild:only-child {
        flex-direction: row;
        max-width: 60rem;
    }

    .vh-news .vh-news__karte--bild:only-child .vh-news__bild {
        flex: 0 0 44%;
        aspect-ratio: auto;
        min-height: 16rem;
    }

    .vh-news .vh-news__karte--bild:only-child .vh-news__inhalt {
        justify-content: center;
        padding: 1.8rem 2rem;
    }
}

/* ------------------------------------------------------------------
   Einzelner Termin: das Bild als ruhiges Titelbild im Querformat,
   egal ob jemand ein Hochformat-Handyfoto hochlaedt. Wer das Bild
   ganz sehen will, hat es in der Mediathek - hier zaehlt der Termin.
   ------------------------------------------------------------------ */
.vh-termine .uk-article [property="image"] {
    margin-top: 0 !important;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--vh-green-soft, #eaf2ea);
}

@media (min-width: 960px) {
    .vh-termine .uk-article [property="image"] { aspect-ratio: 2 / 1; }
}

.vh-termine .uk-article [property="image"] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   Steht kein Termin an, bleibt der Platz nicht leer. Ein abgelaufener
   Termin ganz oben auf der Startseite waere schlimmer als gar keiner -
   deshalb zeigt die Vorschau in diesem Fall einen ruhigen Satz statt
   der letzten Karte.
   ------------------------------------------------------------------ */
.vh-news .vh-news__leer {
    margin: 0;
    padding: 1.6rem 1.8rem;
    border: 1px dashed var(--vh-line, #e3dcd4);
    border-radius: 16px;
    background: rgba(255, 255, 255, .55);
    color: var(--vh-ink-soft, #5c5146);
    font-size: 1rem;
    line-height: 1.6;
}

.vh-kontrast .vh-news .vh-news__leer {
    background: #fff;
    color: #000;
    border: 2px dashed #000;
}

/* ------------------------------------------------------------------
   PLAKATE STATT FOTOS
   Gemeldet: "BILD wirkt gerade abgeschnitten und überschrift sehr
   riesig", mobil deutlicher als auf dem Rechner.

   Das erste Terminbild auf der Seite war kein Foto, sondern ein Plakat
   im Hochformat (1448 x 2048). Im 16:9-Rahmen mit object-fit: cover
   blieb davon ein Streifen aus der Mitte: Logo oben angeschnitten,
   alles unter dem Schriftzug weg - und das ist bei einem Plakat genau
   die Information (Datum, Ort, Uhrzeit).

   Ein Foto vertraegt den Zuschnitt, ein Plakat nicht. Die Vorlage
   erkennt die Ausrichtung an den Massen, die Joomla ohnehin in der
   Bildkennung mitfuehrt, und zeigt stehende Bilder ganz. Das
   Herunterrechnen behaelt dafuer das Seitenverhaeltnis bei - sonst
   waere schon die erzeugte Datei beschnitten und kein CSS koennte das
   noch heilen.
   ------------------------------------------------------------------ */

.vh-news .vh-news__karte--stehend .vh-news__bild {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--vh-green-soft, #eaf2ea);
}

.vh-news .vh-news__karte--stehend .vh-news__bild img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 22rem;
    object-fit: contain;
}

/* Der sanfte Zoom beim Ueberfahren passt zu einem formatfuellenden
   Foto. Ein Plakat, das gerade eben ganz hineinpasst, wuerde dabei an
   den Raendern verschwinden. */
.vh-news .vh-news__karte--stehend:hover .vh-news__bild img { transform: none; }

@media (min-width: 768px) {
    .vh-news .vh-news__karte--stehend:only-child .vh-news__bild {
        flex: 0 0 30%;
        min-height: 0;
        padding: 1.4rem;
    }

    .vh-news .vh-news__karte--stehend:only-child .vh-news__bild img { max-height: 20rem; }

    /* .vh-news__text hat flex: 1 und waechst mit der Karte. Neben einem
       hohen Plakat riss das eine leere Flaeche zwischen Beschreibung und
       "Zum Termin" auf, ueber die halbe Karte. Hier waechst der Text
       nicht mit, der Block steht mittig. */
    .vh-news .vh-news__karte--stehend:only-child .vh-news__text { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------
   Der Ort steht in einer eigenen Zeile.

   Anfangs stand er mit in der Datumszeile. Die ist in Grossbuchstaben
   gesetzt und gesperrt - mit "Klever Weihnachtsmarkt -
   Pastor-Leinung-Platz, 47533 Kleve" dahinter wurde sie auf dem
   Telefon dreizeilig und 66 Pixel hoch. Sie las sich dadurch als
   Ueberschrift, lauter als der Titel darunter. Das Datum bleibt die
   Marke, der Ort ist eine Angabe.
   ------------------------------------------------------------------ */
.vh-news .vh-news__ort {
    margin: -.25rem 0 .7rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--vh-ink-soft, #5c5146);
}

.vh-kontrast .vh-news .vh-news__ort { color: #000; }

/* Kalender: dasselbe fuer die Liste. Dort war das Plakat auf 480x360
   gerechnet, der Zuschnitt steckte also schon in der erzeugten Datei. */
.vh-kalender .vh-kalender__eintrag--stehend .vh-kalender__bild {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem;
    background: var(--vh-green-soft, #eaf2ea);
}

.vh-kalender .vh-kalender__eintrag--stehend .vh-kalender__bild img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 13rem;
    object-fit: contain;
}

.vh-kalender .vh-kalender__eintrag--stehend:hover .vh-kalender__bild img { transform: none; }

@media (max-width: 639px) {
    .vh-kalender .vh-kalender__eintrag--stehend .vh-kalender__bild { aspect-ratio: auto; }
    .vh-kalender .vh-kalender__eintrag--stehend .vh-kalender__bild img { max-height: 18rem; }
}

/* Einzelner Termin: Das Titelbild ist bewusst auf ein ruhiges Querformat
   getrimmt (siehe oben). Bei einem Plakat faellt dabei die Information
   weg - dort gilt das Bild, wie es ist. */
.vh-termine .vh-termin-plakat .uk-article [property="image"] {
    aspect-ratio: auto;
    background: transparent;
}

.vh-termine .vh-termin-plakat .uk-article [property="image"] img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 34rem;
    margin: 0 auto;
    object-fit: contain;
}