/*
 * Bilder der News-Detailansicht: Teaserbild, Slideshow-Hinweis, Quellenangabe
 *
 * Eigenstaendige Datei, per page.includeCSS eingebunden (wie slideout.css) – damit
 * main.css nicht neu aus den SCSS-Quellen gebaut werden muss.
 *
 * Das 16:9-Format und der Zuschnitt entstehen serverseitig im Fluid-Partial
 * (Detail/TeaserImage.html, height="625c-50").
 * Das Bild laeuft ueber die volle Spaltenbreite. Die width/height-Attribute stimmen
 * exakt mit der Darstellung ueberein – das Layout springt beim Nachladen nicht.
 */

.dehoga-news-teaser {
    width: 100%;
    margin: 1.5rem 0 2rem;
}

.dehoga-news-teaser-link {
    display: block;
}

.dehoga-news-teaser-img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 575.98px) {
    .dehoga-news-teaser {
        margin: 1rem 0 1.5rem;
    }
}

/*
 * Hinweis auf die Slideshow und Quellenangabe
 *
 * Gilt fuer alle Bilder, die GLightbox oeffnen: Teaserbild und Galerie.
 * Beim Ueberfahren legt sich eine leichte Abdunklung mit Pluszeichen ueber das Bild,
 * damit erkennbar ist, dass es sich vergroessern laesst. Der Hinweis erscheint auch
 * bei Tastaturfokus.
 *
 * Die Quellenangabe liegt unten links ueber dem Bild und nimmt keine Klicks an
 * (pointer-events: none), damit sie das Oeffnen der Slideshow nicht behindert.
 * Sie liegt ausserdem ueber der Abdunklung, bleibt also beim Hover lesbar.
 */

.dehoga-news-teaser-link,
.dehoga-news-gallery-link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Abdunklung + Pluszeichen */
.dehoga-news-teaser-link::after,
.dehoga-news-gallery-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='rgba(0,0,0,0.45)' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M24 13v22M13 24h22' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0 0;
    opacity: 0;
    transition: opacity .25s ease, background-color .25s ease, background-size .25s ease;
    pointer-events: none;
}

.dehoga-news-teaser-link:hover::after,
.dehoga-news-teaser-link:focus-visible::after,
.dehoga-news-gallery-link:hover::after,
.dehoga-news-gallery-link:focus-visible::after {
    opacity: 1;
    background-color: rgba(0, 0, 0, .14);
    background-size: 42px 42px;
}

/* Auf der kleineren Galerie-Kachel ein kleineres Zeichen */
.dehoga-news-gallery-link:hover::after,
.dehoga-news-gallery-link:focus-visible::after {
    background-size: 30px 30px;
}

/* Quellenangabe */
.dehoga-image-source {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    max-width: 100%;
    padding: .15rem .55rem;
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .7rem;
    line-height: 1.5;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .dehoga-image-source {
        font-size: .65rem;
        padding: .1rem .4rem;
    }
}

/*
 * Quellenangabe in den Listen-Vorschaubildern
 *
 * Auf den kleinen Kacheln reicht der Platz nicht fuer eine dauerhafte Einblendung,
 * daher erscheint die Angabe erst beim Ueberfahren. Zusaetzlich bei Tastaturfokus
 * innerhalb der Kachel (focus-within), damit sie nicht nur per Maus erreichbar ist.
 *
 * Ein Pluszeichen gibt es hier bewusst nicht: Die Vorschaubilder fuehren zur News,
 * sie oeffnen keine Slideshow.
 */

.card-image-top,
.news-img-wrap {
    position: relative;
}

.dehoga-image-source-hover {
    opacity: 0;
    transition: opacity .2s ease;
}

.card-image-top:hover .dehoga-image-source-hover,
.card-image-top:focus-within .dehoga-image-source-hover,
.news-img-wrap:hover .dehoga-image-source-hover,
.news-img-wrap:focus-within .dehoga-image-source-hover {
    opacity: 1;
}

/* Ohne Hover-Eingabe (Touch) dauerhaft zeigen – sonst waere die Angabe dort nie sichtbar. */
@media (hover: none) {
    .dehoga-image-source-hover {
        opacity: 1;
    }
}