/*
================================================================================
TYPO3 News Extension - COMPLETE INTEGRATED VERSION
================================================================================

KOMPLETTE CSS mit integrierten Verbesserungen:
- Cards Layout: CSS aspect-ratio statt feste Höhen
- Detail Gallery: Einheitliche Thumbnails mit TYPO3 Lightbox
- Responsive Design: Optimiert für alle Bildschirmgrößen

Version: Complete Integrated
Datum: 2025-09-15
================================================================================
*/

/* ============================================================================
   1. HEADER STYLING - Nur bei Cards weiß
   ============================================================================ */

/* Header weiß bei Cards - Mehrere Ansätze für maximale Kompatibilität */
.frame:has(.news-card-item) .frame-header .element-header,
.frame:has(.news-card-item) .frame-header h2,
.frame:has(.news-card-item) .frame-header h3,
.frame:has(.news-card-item) .frame-header h4,
.frame-inner:has(.news-card-item) .frame-header .element-header,
.frame-inner:has(.news-card-item) .frame-header h2,
.frame-inner:has(.news-card-item) .frame-header h3,
.frame-inner:has(.news-card-item) .frame-header h4 {
    color: white !important;
}

.news-layout-cards .frame-header .element-header,
.news-layout-cards .frame-header h2,
.news-layout-cards .frame-header h3,
.news-layout-cards .frame-header h4 {
    color: white !important;
}

[data-template-layout="cards"] .frame-header .element-header,
[data-template-layout="cards"] .frame-header h2,
[data-template-layout="cards"] .frame-header h3,
[data-template-layout="cards"] .frame-header h4 {
    color: white !important;
}

.layout-cards .frame-header .element-header,
.layout-cards .frame-header h2,
.layout-cards .frame-header h3,
.layout-cards .frame-header h4 {
    color: white !important;
}

/* ============================================================================
   2. CARDS LAYOUT - Vertikale Karten mit Flexbox
   ============================================================================ */

/* Cards Wrapper - flex-start damit Cards ihre natürliche Höhe behalten */
.news-cards-wrapper {
    display: flex !important;
    align-items: flex-start !important; /* WICHTIG: Cards bestimmen ihre Höhe */
    gap: 20px !important;
    width: 100% !important;
}

/* News List Container - Cards horizontal anordnen */
.news-cards-wrapper .news-list-view {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 20px !important;
    flex: 1 !important;
}

/* Button Container - richtet sich NICHT an der Zeile aus */
.news-more-button {
    flex: 0 0 60px !important;
    display: flex !important;
    align-items: flex-start !important; /* WICHTIG: flex-start statt stretch */
    width: 60px !important;
    align-self: flex-start !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 0 !important;
}

/* Button Link - nimmt volle Container-Höhe */
.more-news-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 15px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(0deg) !important; /* GEÄNDERT: 0deg statt 180deg */
}

.more-news-link:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    transform: rotate(0deg) translateY(-1px) !important; /* GEÄNDERT: 0deg */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
}

/* Cards - behalten ihre natürliche Höhe */
.news-card-item {
    flex: 1 !important;
    min-height: 450px !important; /* Mindesthöhe für Konsistenz */
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.news-card-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================================================
   3. CARD IMAGE - CSS ASPECT-RATIO (MODERN)
   ============================================================================ */

/* Card Image Container - Mit CSS aspect-ratio */
.news-card-image {
    width: 100% !important;
    aspect-ratio: 4/3 !important; /* Modernes CSS aspect-ratio */
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
}

/* Card Image - Füllt Container perfekt aus */
.news-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Behält Seitenverhältnis bei, schneidet wenn nötig */
    object-position: center !important; /* Zentriert das Bild */
    transition: transform 0.3s ease !important;
}

/* Hover-Effekt für Card Images */
.news-card-item:hover .news-card-img {
    transform: scale(1.05) !important;
}

/* Alternative Aspect Ratios (falls gewünscht) */
.news-card-image.ratio-16-9 {
    aspect-ratio: 16/9 !important; /* Breitbild */
}

.news-card-image.ratio-1-1 {
    aspect-ratio: 1/1 !important; /* Quadratisch */
}

.news-card-image.ratio-3-2 {
    aspect-ratio: 3/2 !important; /* Klassisches Foto-Format */
}

/* Fallback für ältere Browser (IE, alte Safari) */
@supports not (aspect-ratio: 1) {
    .news-card-image {
        height: 225px !important; /* Fallback-Höhe */
    }
    
    .news-card-image::before {
        content: '';
        display: block;
        padding-top: 75%; /* 4:3 Ratio = 75% */
    }
    
    .news-card-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
}

/* ============================================================================
   4. CARD CONTENT STYLING
   ============================================================================ */

/* Card Content Container */
.news-card-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 12px !important;
    height: 100% !important;
}

/* Card Date */
.news-card-date {
    font-size: 12px !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

/* Card Header */
.news-card-header {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.news-card-header h3 {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    margin: 0 !important;
}

.news-card-header h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

.news-card-header h3 a:hover {
    color: #ab0033 !important;
}

/* Card Teaser */
.news-card-teaser {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    margin: 0 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Card Actions Container - EXAKT WIE LIST-VIEW */
.news-list-action {
    margin-top: auto !important;
    padding-top: 15px !important;
}

/* ============================================================================
   5. HR-LINIEN KOMPLETT ENTFERNEN + FRAME BORDERS
   ============================================================================ */

/* Mehrschichtige HR-Unterdrückung */
.news-cards-wrapper hr,
.news-cards-wrapper + hr,
hr + .news-cards-wrapper,
.news-cards-wrapper .news-list-view hr,
.news-card-item hr,
.news-cards-wrapper[data-news-layout="cards"] hr,
.news-cards-wrapper * hr {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Frame-spezifische Borders entfernen */
.frame:has(.news-cards-wrapper) {
    border-top: none !important;
    border-bottom: none !important;
}

.frame:has(.news-cards-wrapper)::before,
.frame:has(.news-cards-wrapper)::after {
    display: none !important;
}

/* Frame-Container Borders entfernen */
.frame-container:has(.news-cards-wrapper),
.frame-container-default:has(.news-cards-wrapper),
.frame-inner:has(.news-cards-wrapper) {
    border-top: none !important;
    border-bottom: none !important;
}

.frame-container:has(.news-cards-wrapper)::before,
.frame-container:has(.news-cards-wrapper)::after,
.frame-container-default:has(.news-cards-wrapper)::before,
.frame-container-default:has(.news-cards-wrapper)::after,
.frame-inner:has(.news-cards-wrapper)::before,
.frame-inner:has(.news-cards-wrapper)::after {
    display: none !important;
    content: none !important;
}

/* ============================================================================
   6. LIST VIEW - URSPRÜNGLICHE CSS
   ============================================================================ */

/* List Container */
.news-list-container {
    display: flex !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

.news-list-container:last-child {
    border-bottom: none !important;
}

.news-list-container:first-child {
    border-top: none !important;
}

/* List Image */
.news-list-image {
    flex: 0 0 300px !important;
    height: 225px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
}

.news-list-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.news-list-img:hover {
    transform: scale(1.05) !important;
}

/* List Content */
.news-list-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* List Date */
.news-list-date {
    font-size: 12px !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* List Title */
.news-list-header {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    margin: 0 !important;
}

.news-list-header a {
    color: inherit !important;
    text-decoration: none !important;
}

.news-list-header a:hover {
    color: #ab0033 !important;
}

/* List Teaser */
.news-list-teaser {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #495057 !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* ============================================================================
   7. BUTTONS - Weiterlesen und More News
   ============================================================================ */

/* Weiterlesen Button */
.more {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    border: 1px solid #ab0033 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #ab0033 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
}

.more::after,
.news-more-link::after,
.btn-more::after {
    content: " >" !important;
    margin-left: 4px !important;
    font-weight: 600 !important;
}

.more:hover {
    background: #ab0033 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

/* ============================================================================
   8. DETAIL VIEW - MIT GALLERY VERBESSERUNGEN
   ============================================================================ */

.news-detail-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.news-detail-image {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

.news-detail-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.news-detail-content {
    padding: 0 !important;
}

.news-detail-date {
    font-size: 12px !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 15px 0 !important;
}

.news-detail-title {
    font-size: 2rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #00304a !important;
    margin: 0 0 20px 0 !important;
}

.news-detail-teaser {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #495057 !important;
    margin: 0 0 25px 0 !important;
}

.news-detail-bodytext {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #212529 !important;
    margin: 0 0 30px 0 !important;
}

/* ============================================================================
   9. DETAIL GALLERY - EINHEITLICHE THUMBNAILS
   ============================================================================ */

/* Gallery Container */
.news-detail-gallery {
    margin: 40px 0 !important;
    padding: 30px 0 !important;
    border-top: 1px solid #e0e0e0 !important;
}

.news-gallery-title {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
    color: #333 !important;
}

/* Gallery Grid - Responsive Raster */
.news-detail-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

/* Gallery Item */
.news-detail-gallery-item {
    margin: 0 !important;
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.news-detail-gallery-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Gallery Link */
.news-gallery-link {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

/* Gallery Image - EINHEITLICHE GRÖSSE */
.news-detail-gallery-image {
    width: 100% !important;
    height: 200px !important; /* Feste Höhe für einheitliches Raster */
    object-fit: cover !important; /* Behält Seitenverhältnis bei */
    object-position: center !important;
    transition: transform 0.3s ease !important;
}

.news-gallery-link:hover .news-detail-gallery-image {
    transform: scale(1.05) !important;
}

/* Gallery Caption */
.news-detail-gallery-caption {
    padding: 15px !important;
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.4 !important;
    background: #fff !important;
}

/* ============================================================================
   10. LIGHTBOX SUPPORT - TYPO3 NATIVE
   ============================================================================ */

/* Lightbox Links */
.lightbox {
    cursor: pointer !important;
    position: relative !important;
}

/* Zoom Overlay für Hauptbild */
.news-detail-figure {
    position: relative !important;
    margin: 30px 0 !important;
}

.news-zoom-overlay {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.news-detail-figure:hover .news-zoom-overlay {
    opacity: 1 !important;
}

/* Gallery Zoom Overlay */
.news-gallery-zoom-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 8px !important;
    border-radius: 50% !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.news-gallery-link:hover .news-gallery-zoom-overlay {
    opacity: 1 !important;
}

/* ============================================================================
   11. DETAIL ACTIONS
   ============================================================================ */

.news-detail-actions {
    display: flex !important;
    gap: 15px !important;
    margin: 30px 0 0 0 !important;
    padding: 20px 0 0 0 !important;
    border-top: 1px solid #e9ecef !important;
}

.news-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 8px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background: #fdfdfd !important;
    color: #495057 !important;
    text-decoration: none !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.news-action-btn:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
    color: #212529 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.news-action-btn.back {
    border-color: #dc3545 !important;
    background: transparent !important;
    color: #dc3545 !important;
}

.news-action-btn.back:hover {
    background: #dc3545 !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3) !important;
}

.news-detail-caption {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2rem;
}

/* ============================================================================
   12. PAGINATION - Dezent mit Pfeilen
   ============================================================================ */

.f3-widget-paginator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 30px 0 !important;
    padding: 20px 0 !important;
    list-style: none !important;
    border-top: 1px solid #f0f0f0 !important;
}

.f3-widget-paginator li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.f3-widget-paginator li a,
.f3-widget-paginator li.current {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    min-width: 36px !important;
    height: 36px !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}

.f3-widget-paginator li a:hover {
    background-color: #f8f9fa !important;
    border-color: #e0e0e0 !important;
    color: #333 !important;
}

.f3-widget-paginator li.current {
    background-color: #f0f4f8 !important;
    border-color: #d0dae6 !important;
    color: #2c5282 !important;
    font-weight: 500 !important;
    cursor: default !important;
}

.f3-widget-paginator li.previous a,
.f3-widget-paginator li.next a {
    padding: 8px 14px !important;
    font-weight: 400 !important;
    position: relative !important;
}

.f3-widget-paginator li.previous a::before {
    content: "←" !important;
    margin-right: 6px !important;
    font-size: 14px !important;
}

.f3-widget-paginator li.next a::after {
    content: "→" !important;
    margin-left: 6px !important;
    font-size: 14px !important;
}

.f3-widget-paginator li.previous a:hover,
.f3-widget-paginator li.next a:hover {
    background-color: #f0f4f8 !important;
    color: #2c5282 !important;
    border-color: #d0dae6 !important;
}

.f3-widget-paginator li:not(.previous):not(.next):not(.current):not(:has(a)) {
    padding: 8px 4px !important;
    color: #999 !important;
    font-weight: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
}

.f3-widget-paginator li.disabled span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    min-width: 36px !important;
    height: 36px !important;
    text-align: center !important;
    border: 1px solid #f5f5f5 !important;
    border-radius: 6px !important;
    background-color: #fafafa !important;
    color: #ccc !important;
    cursor: not-allowed !important;
}

.news .f3-widget-paginator:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    border-top: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.news .f3-widget-paginator:last-of-type {
    margin-top: 30px !important;
    margin-bottom: 0 !important;
    border-top: 1px solid #f0f0f0 !important;
}

.f3-widget-paginator li.previous,
.f3-widget-paginator li.next {
    display: inline-block !important;
}

/* ============================================================================
   13. RESPONSIVE DESIGN
   ============================================================================ */

/* Responsive Cards aspect-ratio */
@media (max-width: 768px) {
    .news-card-image {
        aspect-ratio: 16/9 !important; /* Breiteres Format auf Mobile */
    }
    
    .news-cards-wrapper {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .news-more-button {
        width: 100% !important;
        height: 60px !important; /* Feste Höhe nur auf Mobile */
        flex: none !important;
    }
    
    .news-more-button .more-news-link {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        padding: 15px 30px !important;
    }
    
    .news-more-button .more-news-link::after {
        content: "►" !important;
        margin-left: 8px !important;
        margin-top: 0 !important;
    }
    
    .news-list-container {
        flex-direction: column !important;
    }
    
    .news-list-image {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px !important;
    }
    
    .news-detail-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 15px !important;
    }
    
    .news-detail-gallery-image {
        height: 150px !important;
    }
    
    .news-gallery-title {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .news-card-image {
        aspect-ratio: 3/2 !important; /* Noch breiteres Format auf sehr kleinen Screens */
    }
    
    .news-detail-gallery-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    .news-detail-gallery-image {
        height: 120px !important;
    }
    
    .news-detail-gallery-caption {
        padding: 10px !important;
        font-size: 12px !important;
    }
}

/* Responsive Pagination */
@media (max-width: 992px) {
    .f3-widget-paginator {
        gap: 4px !important;
        margin: 20px 0 !important;
        padding: 15px 0 !important;
    }
    
    .f3-widget-paginator li a,
    .f3-widget-paginator li.current {
        padding: 6px 8px !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
    
    .f3-widget-paginator li.previous a,
    .f3-widget-paginator li.next a {
        padding: 6px 10px !important;
    }
}

@media (max-width: 768px) {
    .f3-widget-paginator li a,
    .f3-widget-paginator li.current {
        padding: 4px 6px !important;
        min-width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .f3-widget-paginator li.previous a,
    .f3-widget-paginator li.next a {
        padding: 4px 8px !important;
    }
}

/* ============================================================================
   14. DATE MENU - Jahre-Buttons wie Pagination
   ============================================================================ */

.news-date-menu {
    margin: 30px 0 !important;
    padding: 20px 0 !important;
}

.date-menu-list {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

.date-menu-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.date-menu-button {
    display: inline-flex !important;
    align-items: left !important;
    justify-content: left !important;
    padding: 8px 12px !important;
    min-width: 60px !important;
    height: 36px !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.date-menu-button:hover {
    background-color: #f8f9fa !important;
    border-color: #e0e0e0 !important;
    color: #333 !important;
    text-decoration: none !important;
}

.date-menu-button.active {
    background-color: #f0f4f8 !important;
    border-color: #d0dae6 !important;
    color: #2c5282 !important;
    font-weight: 500 !important;
    cursor: default !important;
}

@media (max-width: 992px) {
    .date-menu-list {
        gap: 4px !important;
    }
    
    .date-menu-button {
        padding: 6px 8px !important;
        min-width: 50px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .date-menu-list {
        gap: 2px !important;
    }
    
    .date-menu-button {
        padding: 4px 6px !important;
        min-width: 45px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .news-date-menu {
        margin: 20px 0 !important;
        padding: 15px 0 !important;
    }
}