/**
 * mod_ebw_articles - CSS
 *
 * @package     Joomla.Site
 * @subpackage  mod_ebw_articles
 * @copyright   (C) 2026 Jan Derhake / EasyBayWeb
 * @license     GNU General Public License version 2 or later
 *
 * EBW-ERWEITERUNGEN:
 * - 3-Spalten Grid (IMMER, auch auf Mobile)
 * - Hover/Zoom auf Beitragsbild
 * - Content ohne Bilder
 */

/* ==========================================================================
   3-Spalten Grid — IMMER (kein Responsive-Collapse)
   ========================================================================== */

.mod-ebw-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Verhindert dass Inhalt das Grid aufbläht */
    width: 100%;
}

.mod-ebw-articles-grid > li {
    margin: 0;
    padding: 0;
    /* Wichtig: Verhindert Overflow durch lange Texte/Bilder */
    min-width: 0;
    overflow: hidden;
}

/* ==========================================================================
   Mobile Responsive (unter 800px)
   ========================================================================== */

@media (max-width: 799px) {
    .mod-ebw-articles-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   Artikel-Item Styling
   ========================================================================== */

.mod-ebw-articles-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    /* Keine Rundung wie Live-Seite */
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.mod-ebw-articles-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Bild-Container mit Hover/Zoom (mod-articles-1stpic)
   ========================================================================== */

.mod-articles-1stpic {
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #f0f0f0;
    /* Weißer Rahmen wie Live-Seite, KEINE Rundung */
    border: 3px solid #fff;
    border-radius: 0;
}

.mod-articles-1stpic a {
    display: block;
    width: 100%;
    height: 100%;
}

.mod-articles-1stpic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
    /* Keine Rundung */
    border-radius: 0;
}

/* Hover-Zoom Effekt */
.mod-articles-1stpic:hover img {
    transform: scale(1.1);
}

/* ==========================================================================
   Content-Bereich (mod-ebw-articles-item-content)
   ========================================================================== */

.mod-ebw-articles-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
}

/* Titel */
.mod-ebw-articles-title {
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

.mod-ebw-articles-title a {
    color: inherit;
    text-decoration: none;
}

.mod-ebw-articles-title a:hover {
    color: #45b5aa;
}

/* ==========================================================================
   Content OHNE Bilder (mod-articles-content)
   ========================================================================== */

.mod-articles-content {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    flex: 1;
}

/* Bilder im Content verstecken (Fallback/Sicherheit) */
.mod-articles-content img {
    display: none !important;
}

/* Leere Absätze nach Bild-Entfernung verstecken */
.mod-articles-content p:empty {
    display: none;
}

/* ==========================================================================
   Meta-Informationen
   ========================================================================== */

.mod-ebw-articles-item-content dl {
    font-size: 0.75rem;
    color: #888;
    margin: 0 0 0.5rem 0;
}

.mod-ebw-articles-item-content dd {
    margin: 0;
}

.mod-ebw-articles-item-content .list-inline-item {
    margin-right: 0.75rem;
}

.mod-ebw-articles-item-content .list-inline-item:last-child {
    margin-right: 0;
}

/* ==========================================================================
   Tags
   ========================================================================== */

.mod-ebw-articles-tags {
    margin-bottom: 0.5rem;
}

.mod-ebw-articles-tags .badge {
    font-size: 0.7rem;
}

/* ==========================================================================
   Read More
   ========================================================================== */

.mod-ebw-articles-item-content .readmore {
    margin-top: auto;
    padding-top: 0.5rem;
}

.mod-ebw-articles-item-content .readmore .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* ==========================================================================
   Titles-Only Layout
   ========================================================================== */

.mod-ebw-articles.mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mod-ebw-articles.mod-list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid #eee;
}

.mod-ebw-articles.mod-list li:last-child {
    border-bottom: none;
}

/* ==========================================================================
   Grouped Layout
   ========================================================================== */

.mod-ebw-articles-group {
    margin-bottom: 1.5rem;
}

.mod-ebw-articles-group > h2,
.mod-ebw-articles-group > h3,
.mod-ebw-articles-group > h4 {
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #45b5aa;
    padding-bottom: 0.25rem;
}