/**
 * Ziel-Pfad im Projekt: media/mod_bilderauswahl/css/mod_bilderauswahl.css
 *
 * Eigene, modul-lokale Kopie der Bild-Kachel-Optik aus
 * components/com_bilder/tmpl/gallery/default.php (.gallery-box,
 * .gallery-img, .gallery-text-wrapper, .gallery-meta-title) - bewusst
 * unter eigenen Klassennamen (mod-bilderauswahl-*) und mit eigenständigem
 * responsivem CSS-Grid statt der Bootstrap-row-cols-Klassen der Gallery-
 * View, damit das Modul unabhängig von com_bilder installier- und
 * einsetzbar ist (siehe Abstimmung mit dem Auftraggeber vom 2026-08-04).
 */

.mod-bilderauswahl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.mod-bilderauswahl-item {
    display: flex;
    flex-direction: column;
}

/* Nur aktiv, wenn der Modul-Parameter "Fotolink" gesetzt ist - dann wird
 * .mod-bilderauswahl-item als <a> statt als <div> gerendert (siehe
 * tmpl/default.php). Hebt die Standard-Link-Optik auf, damit die Kachel
 * optisch identisch zur unverlinkten Variante bleibt. */
.mod-bilderauswahl-item-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mod-bilderauswahl-item-link:hover,
.mod-bilderauswahl-item-link:focus {
    color: inherit;
    text-decoration: none;
}

.mod-bilderauswahl-box {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    background-color: #cfd8e1;
    aspect-ratio: 4 / 3;
}

.mod-bilderauswahl-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mod-bilderauswahl-text-wrapper {
    margin-top: 10px;
    padding: 0 5px;
}

.mod-bilderauswahl-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e65ad;
    margin-bottom: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}