/* ============================================================
   TTSOL Gallerie – Frontend-Styles (Bootstrap 5 kompatibel)
   ============================================================ */

/* ----------------------------------------------------------
   Galerie-Wrapper
   ---------------------------------------------------------- */
.ttsol-gallerie {
    container-type: inline-size;
}

/* ----------------------------------------------------------
   Thumbnail-Link
   ---------------------------------------------------------- */
.ttsol-gallerie__link {
    overflow: hidden;
    display: block;
}

/* ----------------------------------------------------------
   Thumbnail-Bild: feste Höhe, Crop zentriert
   ---------------------------------------------------------- */
.ttsol-gallerie__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}

.ttsol-gallerie__link:hover .ttsol-gallerie__thumb,
.ttsol-gallerie__link:focus .ttsol-gallerie__thumb {
    transform: scale(1.06);
    opacity: 0.88;
}

/* ----------------------------------------------------------
   Karte
   ---------------------------------------------------------- */
.ttsol-gallerie__item.card {
    transition: box-shadow 0.25s ease;
}

.ttsol-gallerie__item.card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18) !important;
}

/* ----------------------------------------------------------
   Bildunterschrift
   ---------------------------------------------------------- */
.ttsol-gallerie__caption {
    background-color: #fff;
}

.ttsol-gallerie__title {
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ttsol-gallerie__description {
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ----------------------------------------------------------
   Leer-Meldung
   ---------------------------------------------------------- */
.ttsol-gallerie__empty {
    padding: 2rem;
    text-align: center;
    font-style: italic;
}

/* ----------------------------------------------------------
   Paginierung – passt Bootstrap 5 an
   ---------------------------------------------------------- */
.ttsol-gallerie__pagination .pagination {
    gap: 0.25rem;
}

.ttsol-gallerie__pagination .page-link {
    min-width: 2.4rem;
    text-align: center;
    border-radius: 0.375rem !important;
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.ttsol-gallerie__pagination .page-link:hover,
.ttsol-gallerie__pagination .page-link:focus {
    background-color: #222;
    border-color: #222;
    color: #fff;
}

.ttsol-gallerie__pagination .page-item.active .page-link,
.ttsol-gallerie__pagination .page-item.active span.page-link {
    background-color: #f5c518;
    border-color: #f5c518;
    color: #000;
}

.ttsol-gallerie__pagination .page-item.disabled .page-link {
    background-color: #333;
    border-color: #333;
    color: #888;
}

/* ----------------------------------------------------------
   Responsive: kleiner als 400px → 2 Spalten erzwingen
   ---------------------------------------------------------- */
@container (max-width: 399px) {
    .ttsol-gallerie__grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}