/* ====================================================================
 * DATEI:         public/assets/css/modules/4-main_03_news-vorschau-test.css
 * PROJEKT:       Dali Personal GmbH - Relaunch 2025
 * MODUL:         4-main_03_news-vorschau-test.php
 * FUNKTION:      Definiert die exklusiven Stile für das 'News-Vorschau' Modul.
 * Alle Regeln sind an die Hauptklasse `.modul-news-preview`
 * gekoppelt, um globale Stil-Konflikte zu verhindern.
 * VERSION:       2.5 (Skip-Button stabilisiert mit festen Grid-Höhen)
 * ==================================================================== */

/* =================================================================
   Modul Container - Basis (wird von Modifier-Klassen überschrieben)
   ================================================================= */
.modul-news-preview {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* =================================================================
   Padding-Modifier-System für flexible Abstände
   ================================================================= */
/* Padding Top Modifier */
.modul-news-preview.padding-top-xs { padding-top: var(--spacing-xs, 0.3125rem); }
.modul-news-preview.padding-top-sm { padding-top: var(--spacing-sm, 0.625rem); }
.modul-news-preview.padding-top-md { padding-top: var(--spacing-md, 0.9375rem); }
.modul-news-preview.padding-top-lg { padding-top: var(--spacing-lg, 1.25rem); }
.modul-news-preview.padding-top-xl { padding-top: var(--spacing-xl, 1.875rem); }

/* Padding Bottom Modifier */
.modul-news-preview.padding-bottom-xs { padding-bottom: var(--spacing-xs, 0.3125rem); }
.modul-news-preview.padding-bottom-sm { padding-bottom: var(--spacing-sm, 0.625rem); }
.modul-news-preview.padding-bottom-md { padding-bottom: var(--spacing-md, 0.9375rem); }
.modul-news-preview.padding-bottom-lg { padding-bottom: var(--spacing-lg, 1.25rem); }
.modul-news-preview.padding-bottom-xl { padding-bottom: var(--spacing-xl, 1.875rem); }

/* =================================================================
   News Grid - Basis Layout - STABILISIERT
   ================================================================= */
.modul-news-preview .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl, 2rem);
    margin-top: var(--spacing-md, 1.5rem);
    margin-bottom: var(--spacing-xs, 1.5rem);
    
    /* WICHTIG: Feste Höhe für stabilen Skip-Button */
    min-height: 450px;
    /* height: 450px;*/
    overflow: visible; /* Desktop: alle Cards sichtbar */
    
    transition: opacity var(--transition-normal, 0.3s) ease,
                transform var(--transition-normal, 0.3s) ease;
}

/* =================================================================
   News Card
   ================================================================= */
.modul-news-preview .news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 380px;
    max-height: 420px; /* Maximalhöhe für Konsistenz */
    background: var(--white, #ffffff);
    border-radius: var(--border-radius-md, 8px);
    /* Verstärkter Basis-Schatten mit mehr seitlicher Betonung */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: box-shadow var(--transition-normal, 0.3s) ease;
}

.modul-news-preview .news-card:hover {
    /* Nur minimal mehr Schatten bei Hover */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* =================================================================
   News Card Image
   ================================================================= */
.modul-news-preview .news-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    /* Smooth Zoom-Transition */
    transition: transform 0.3s ease;
}

/* Bild-Zoom bei Card-Hover */
.modul-news-preview .news-card:hover .news-card-image {
    transform: scale(1.05);
}

/* =================================================================
   News Card Content - MIT MINDESTHÖHE FÜR DESKTOP-STABILITÄT
   ================================================================= */
.modul-news-preview .news-card-content {
    padding: var(--spacing-sm, 1rem) var(--spacing-sm, 1.5rem);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 180px;  /* Angepasst für neue Card-Höhe */
    max-height: 220px;  /* Verhindert Überlauf */
    overflow: hidden;
}

.modul-news-preview .news-card-meta {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #666);
    margin-top: 0;
    margin-bottom: var(--spacing-xs, 0.5rem);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    flex-shrink: 0;  /* NEU: Meta-Info schrumpft nicht */
}

.modul-news-preview .news-card-meta time {
    color: var(--text-secondary, #666);
}

.modul-news-preview .news-card-meta .meta-separator {
    color: var(--neutral-grey, #ddd);
}

.modul-news-preview .news-card-category {
    font-weight: var(--font-weight-medium, 500);
}

.modul-news-preview .news-card h3 {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
    margin-top: 0;
    margin-bottom: var(--spacing-xxs, 0.75rem);
    line-height: 1.3;
    min-height: 2.6em;  /* NEU: Mindesthöhe für Titel (2 Zeilen) */
    max-height: 2.6em;
    overflow: hidden;
    flex-shrink: 0;  /* NEU: Titel schrumpft nicht */
}

.modul-news-preview .news-card-title-link {
    color: var(--primary-dark-blue, #1a2a3f);
    text-decoration: none;
    transition: color var(--transition-fast, 0.2s) ease;
}

.modul-news-preview .news-card-title-link:hover {
    color: var(--primary-orange, #ff6b35);
}

.modul-news-preview .news-card-excerpt {
    font-size: var(--font-size-md, 1rem);
    color: var(--text-secondary, #333);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: var(--spacing-xs, 0.75rem);
    min-height: 60px;  /* Reduziert für neue Card-Höhe */
    max-height: 90px;  /* Maximalhöhe */
    overflow: visible;
    flex-grow: 1;  /* NEU: Nimmt verfügbaren Platz ein */
}

.modul-news-preview .news-card-readmore {
    display: inline;
    color: var(--primary-orange, #ff6b35);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    white-space: nowrap;
    transition: color var(--transition-fast, 0.2s) ease;
}

.modul-news-preview .news-card-readmore .link-arrow {
    display: inline-block;
    margin-left: 0.25em;
    transition: transform var(--transition-fast, 0.2s) ease;
}

.modul-news-preview .news-card-readmore:hover {
    color: var(--primary-dark-blue, #1a2a3f);
    text-decoration: underline;
}

.modul-news-preview .news-card-readmore:hover .link-arrow {
    transform: translateX(3px);
}

.modul-news-preview .news-card-readmore:focus-visible {
    outline: 2px solid var(--primary-orange, #ff6b35);
    outline-offset: 2px;
}

/* =================================================================
   Section Footer Link
   ================================================================= */
.modul-news-preview .section-footer-link {
    text-align: center;
    margin-top: var(--spacing-xl, 2rem);
    margin-bottom: 0;
}

/* =================================================================
   Slider Navigation Container - STABILISIERT
   ================================================================= */
.modul-news-preview .news-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1.5rem);
    margin-top: 0;
    margin-bottom: var(--spacing-lg, 2rem);
    min-height: 48px;
    height: 48px; /* Feste Höhe gegen Springen */
}

.modul-news-preview .news-slider-nav-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1.5rem);
    margin-top: 0;
    margin-bottom: var(--spacing-lg, 2rem);
    min-height: 48px;
    height: 48px; /* Feste Höhe */
}

.modul-news-preview .slider-nav-btn {
    position: relative; /* FIX: Damit ::before sich korrekt positioniert */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--white, #fff);
    border: 2px solid var(--primary-orange, #ff6b35);
    border-radius: 50%;
    color: var(--primary-orange, #ff6b35);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s) ease;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.modul-news-preview .slider-nav-btn:hover:not(:disabled) {
    background: var(--primary-orange, #ff6b35);
    color: var(--white, #fff);
    transform: scale(1.05);
}

.modul-news-preview .slider-nav-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.modul-news-preview .slider-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.modul-news-preview .slider-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--neutral-grey, #ddd);
    color: var(--text-secondary, #999);
}

.modul-news-preview .slider-nav-btn svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.modul-news-preview .slider-page-indicator {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #666);
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    user-select: none;
}

/* =================================================================
   Empty State
   ================================================================= */
.modul-news-preview .news-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xxl, 3rem);
}

.modul-news-preview .news-empty-state p {
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

/* =================================================================
   Responsive Breakpoints - TABLET
   ================================================================= */
@media (max-width: 992px) {
    .modul-news-preview .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg, 1.5rem);
        min-height: 450px;
       /* height: 450px; /* Feste Höhe für Stabilität */
    }
    
    .modul-news-preview .news-card {
        min-height: 430px;
        max-height: 430px;
    }
}

/* =================================================================
   Responsive Breakpoints - MOBILE (NUR 1 KARTE SICHTBAR!)
   ================================================================= */
@media (max-width: 576px) {
    .modul-news-preview .news-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 1.5rem);
        margin-top: var(--spacing-md, 1rem);
        margin-bottom: var(--spacing-md, 1.5rem);
        
        /* WICHTIG: Feste Höhe + Overflow für nur 1 sichtbare Karte */
        min-height: 440px;
        height: 440px;
        max-height: 440px;
        overflow: hidden; /* KRITISCH: Versteckt die teilweise zweite Karte */
    }
    
    .modul-news-preview .news-card {
        min-height: 430px;  /* Passt in Container */
        max-height: 430px;  /* Feste Höhe */
        height: 430px;
        overflow: hidden;   /* Falls Content zu lang */
    }
    
    /* Bild bleibt fix */
    .modul-news-preview .news-card-image {
        height: 180px;
        flex-shrink: 0;
    }
    
    /* Content-Bereich mit Overflow-Control */
    .modul-news-preview .news-card-content {
        padding: var(--spacing-xs) var(--spacing-xs);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 370px;  /* 450px - 180px Bild */
        max-height: 370px;
    }
    
    /* Titel mit fester max-height */
    .modul-news-preview .news-card h3 {
        max-height: 2.6em;
        min-height: auto;  /* Mobile: Überschreibt Desktop-Wert */
        overflow: hidden;
    }
    
    /* Excerpt (Textauschniutt) mit begrenzter Höhe */
    .modul-news-preview .news-card-excerpt {
        max-height: 130px;
        min-height: auto;  /* Mobile: Überschreibt Desktop-Wert */
        overflow: hidden; /* Kein Scroll, nur abgeschnitten */
        flex-grow: 1;
    }
    
    /* Mobile: Intro-Text links ausrichten */
    .modul-news-preview .text-center p {
        text-align: left !important;
    }
    
    .modul-news-preview .slider-nav-btn {
        position: relative;
        width: 40px;
        height: 40px;
    }
    
    .modul-news-preview .slider-nav-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .modul-news-preview .news-slider-nav,
    .modul-news-preview .news-slider-nav-placeholder {
        gap: var(--spacing-sm, 1rem);
        margin-bottom: var(--spacing-md, 1.5rem);
        height: 44px; /* Mobile auch feste Höhe */
    }
    
    .modul-news-preview .slider-nav-btn::before {
        content: '';
        position: absolute;
        inset: -8px;
    }
}

/* =================================================================
   Loading & Transition States - OPTIMIERT
   ================================================================= */
.modul-news-preview[data-loading="true"] .news-grid {
    opacity: 0.5;
    pointer-events: none;
}

/* Basis-Mindesthöhen entfernt - nutzen jetzt feste Höhen oben */