/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');

/* Ostatnia edycja: 11.11.2025 (Nowy layout listy wydarzeń na index.php) */

/* --- Reset & Global Styles --- */
:root {
    /* Kolory Główne */
    --primary-color: #0d47a1;
    --secondary-color: #1565c0;
    --text-color: #333;
    --light-gray: #f4f4f4;
    --weekend-bg: #fffadd;
    --white: #ffffff;
    --yellow-green: #B2C831;
    --font-family: 'Rajdhani', sans-serif;

    /* --- Paleta Kolorów Sekcji --- */
    --color-aktualnosci-primary: #0d47a1;
    --color-aktualnosci-hover: #1565c0;
    
    --color-wydarzenia-primary: #388e3c; /* Zielony */
    --color-wydarzenia-hover: #2e7d32; 
    
    --color-neutral-button: #795548; /* Brązowy */
    --color-neutral-button-hover: #5d4037; 

    /* Zmienne generyczne */
    --section-primary: var(--color-aktualnosci-primary);
    --section-primary-hover: var(--color-aktualnosci-hover);
}

/* --- Skórki Sekcji --- */
#aktualnosci,
.page-aktualnosci {
    --section-primary: var(--color-aktualnosci-primary);
    --section-primary-hover: var(--color-aktualnosci-hover);
}
#wydarzenia,
.page-wydarzenia {
    --section-primary: var(--color-wydarzenia-primary);
    --section-primary-hover: var(--color-wydarzenia-hover);
}


* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}
html { 
    scroll-behavior: smooth; 
}
body { 
    font-family: var(--font-family); 
    line-height: 1.6; 
    color: var(--text-color); 
    background-color: var(--white); 
}
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 1.5rem; 
}
h1, h2, h3, h4 { 
    font-weight: 600; 
    line-height: 1.2; 
}
h2 { 
    font-size: 2.2rem; 
    text-align: left; 
    margin-bottom: 1.5rem; 
    color: var(--primary-color); 
    border-bottom: 3px solid var(--primary-color); 
    padding-bottom: 0.5rem; 
}
section h2 {
    color: var(--section-primary); 
    border-bottom-color: var(--section-primary); 
}

section { 
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}

/* --- Uniwersalne Przyciski --- */
.btn {
    display: inline-block; 
    padding: 0.8rem 2rem; 
    background-color: var(--section-primary); 
    color: var(--white); 
    text-decoration: none; 
    font-weight: 600; 
    border-radius: 5px; 
    transition: background-color 0.3s;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    font-family: var(--font-family);
}
.btn:hover {
    background-color: var(--section-primary-hover); 
    color: var(--white);
}
.btn::after {
    content: ' \2192'; 
}
.btn.btn-neutral {
    background-color: var(--color-neutral-button);
}
.btn.btn-neutral:hover {
    background-color: var(--color-neutral-button-hover);
}
.btn.btn-neutral::after {
    content: '';
}
.btn-centered {
    display: block;
    width: fit-content;
    margin: 2.5rem auto 1rem auto;
}


/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/hero-1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
}
.hero-link { 
    text-decoration: none; 
    color: var(--white); 
}
.hero-text h1 { 
    font-size: 5vw; 
    font-weight: 700; 
    letter-spacing: 2px; 
}
.hero-subtitle { 
    font-size: 1.2rem; 
    color: var(--yellow-green); 
    position: relative; 
    margin-top: 1.5rem; 
    padding-top: 1.5rem; 
}
.hero-subtitle::before, .hero-subtitle::after { 
    content: ''; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: var(--yellow-green); 
    height: 1px; 
}
.hero-subtitle::before { 
    width: 100px; 
    top: 0; 
}
.hero-subtitle::after { 
    width: 50px; 
    top: 0.5rem; 
}

/* --- Widget pogodowy --- */
.weather-widget-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px; 
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "data map"
        "forecast map";
    align-items: stretch;
    gap: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.weather-forecast-row {
    grid-area: forecast;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.forecast-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    font-weight: 600;
}
.forecast-item .forecast-time {
    font-size: 0.62rem;
    opacity: 0.85;
    font-weight: 400;
}
.forecast-item .forecast-icon {
    width: 26px;
    height: 26px;
}
.forecast-item .forecast-temp {
    font-size: 0.8rem;
    line-height: 1.2;
}
.weather-wind-map {
    grid-area: map;
    flex: 1; 
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    min-height: 150px;
    overflow: hidden;
}
.map-visual {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;
    aspect-ratio: 488 / 670; 
    max-width: 100%;
    max-height: 100%;
}
#lake-png-map {
    position: absolute;
    top: 5%; 
    left: 5%; 
    width: 90%; 
    height: 90%; 
    object-fit: contain;
}
.wind-arrow-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2;
}

.wind-arrow {
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 24px solid var(--yellow-green);
    position: absolute; 
    margin-top: -12px;   /* wyśrodkowanie: top/left = środek obrotu, nie czubek */
    transition: all 0.5s ease-out; 
    transform-origin: center center; 
    opacity: 0.95; 
    background-color: transparent;
    border-radius: 0;
}

.wind-arrow.no-wind {
    width: 10px; 
    height: 10px; 
    background-color: var(--yellow-green);
    border-radius: 50%; 
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 0 solid transparent;
    margin-top: -5px;    /* wyśrodkowanie kropki na tym samym punkcie co strzałka */
    margin-left: -5px;
}

/* Pozycje 5 strzałek */
#wind-arrow-1 { top: 12%; left: 70%;}
#wind-arrow-5 { top: 22%; left: 46%;}
#wind-arrow-2 { top: 34%; left: 21%;}
#wind-arrow-3 { top: 55%; left: 25%;}
#wind-arrow-4 { top: 77%; left: 28%;}


/* Skala liczbowa siły wiatru - umieszczona pod "Wiatr: km/h" w danych tekstowych */
.wind-scale {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.9);
    cursor: help;
    margin-top: 6px;
    width: 100%;
}
.wind-scale-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.wind-scale-track {
    position: relative;
    flex: 1;
    height: 6px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    /* Strefy: 0-8 lekki, 8-25 umiarkowany, 25-45 silny, 45+ huragan */
    background: linear-gradient(to right,
        rgba(96, 125, 139, 0.9) 0%,
        rgba(96, 125, 139, 0.9) 14.5%,
        rgba(67, 160, 71, 0.9) 14.5%,
        rgba(67, 160, 71, 0.9) 45.5%,
        rgba(251, 140, 0, 0.9) 45.5%,
        rgba(251, 140, 0, 0.9) 81.8%,
        rgba(211, 47, 47, 0.9) 81.8%,
        rgba(211, 47, 47, 0.9) 100%
    );
}
.scale-tick {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-1px);
}
.scale-needle {
    position: absolute;
    top: -7px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #fff;
    transform: translateX(-5px);
    transition: left 0.5s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

/* Znaczniki warunków (żaglówka / windsurfing) w prawym dolnym rogu mapki */
.activity-badges {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 4;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
}
.activity-badge {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    border: 1.5px solid rgba(255,255,255,0.25);
    padding: 3px;
    box-sizing: border-box;
}
.activity-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.current-weather-data {
    grid-area: data;
    flex: 1; 
    position: relative; 
    z-index: 4;
    color: var(--white);
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.current-weather-data .weather-temp { 
    font-size: 3rem; 
    line-height: 1;
}
.current-weather-data .weather-extra { 
    font-size: 0.9rem; 
    line-height: 1.5; 
}
.current-weather-data .weather-extra span { 
    display: block; 
}


/* --- Układ strony głównej (i inne style) --- */
.home-layout { display: flex; flex-direction: column; gap: 2rem; }
#wydarzenia.home-events-column, #aktualnosci.home-news-column { padding-top: 4rem; }
.home-events-column h2, .home-news-column h2 { 
    font-size: 2rem; 
}

/* --- START ZMIANY: Przywrócenie .home-events-list i nowy .mini-event-card --- */
.home-events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mini-event-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--light-gray);
    border-left: 4px solid var(--section-primary);
    border-radius: 4px;
    overflow: hidden;
}
.mini-event-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex-shrink: 0;
}
.mini-event-details {
    padding: 0.5rem 1rem 0.5rem 0;
}
.mini-event-details h3 {
    color: var(--section-primary);
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.mini-event-meta span {
    font-size: 0.9rem;
    color: #555;
    font-weight: 600;
    display: block; /* Ustawia datę i lokalizację jedna pod drugą */
    line-height: 1.3;
}
/* --- KONIEC ZMIANY --- */


/* Ujednolicony grid i karta (TYLKO DLA AKTUALNOŚCI) */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.content-card {
    background: var(--white);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.content-card-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.content-card-body {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.content-card-meta {
    font-size: 0.8rem;
    font-weight: 600;
    color: #777;
    margin-bottom: 0.25rem;
}
.content-card h3 {
    margin: 0.25rem 0 0.5rem 0;
    font-size: 1.2rem;
}
.content-card h3 a {
    text-decoration: none;
    color: var(--section-primary);
}
.content-card h3 a:hover {
    text-decoration: underline;
}
.content-card p {
    flex-grow: 1;
    margin: 0.5rem 0 1rem 0;
    font-size: 0.9rem;
    color: #555;
}
.content-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}
.read-more { 
    display: inline-block; 
    padding: 0.5rem 1rem; 
    background: var(--section-primary); 
    color: var(--white); 
    text-decoration: none; 
    border-radius: 5px; 
    transition: background-color 0.3s; 
    align-self: flex-start; 
    font-size: 0.9rem; 
    font-weight: 600;
}
.read-more:hover { 
    background-color: var(--section-primary-hover); 
}
.read-more::after {
    content: ' \2192'; 
}

.info-box { text-align: center; padding: 2rem; background: var(--light-gray); border-radius: 5px; }
.admin-id-display { font-size: 0.8rem; font-weight: 600; color: #aaa;}
.section-link-wrapper { text-align: center; margin-top: 2rem; } 


/* --- Style dla strony z listą wydarzeń --- */
.month-separator { 
    text-transform: capitalize; 
    color: var(--section-primary); 
    border-bottom: 2px solid var(--section-primary); 
    padding-bottom: 0.5rem; 
    margin-top: 3rem; 
    margin-bottom: 1.5rem; 
}
.week-separator { 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0)); 
    margin: 2.5rem 0; 
}
.event-list-item { 
    display: flex; 
    gap: 1.5rem; 
    padding: 1.25rem; 
    border-radius: 5px; 
    border-left: 5px solid var(--section-primary); 
    margin-bottom: 1.5rem; 
    align-items: flex-start; 
    background-color: #fcfcfc; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
.event-list-item.is-weekend { 
    background-color: var(--weekend-bg); 
    border-left-color: var(--yellow-green); 
}
.event-list-image { 
    width: 120px; 
    height: 120px; 
    object-fit: cover; 
    border-radius: 5px; 
    flex-shrink: 0; 
}
.event-list-details { 
    flex-grow: 1; 
}
.event-list-header { 
    margin-bottom: 0.25rem; 
} 
.event-list-details h4 { 
    font-size: 1.4rem; 
    color: var(--section-primary); 
    margin: 0; 
}
.event-list-details h4 a { 
    text-decoration: none; 
    color: inherit; 
}
.event-list-details h4 a:hover { 
    text-decoration: underline; 
}

.event-list-meta { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    gap: 0.2rem; 
    color: #333; 
    margin-bottom: 0.5rem; 
    font-size: 0.9rem; 
}
.event-meta-top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 600;
    color: #333; 
}
.event-meta-location span {
    font-size: 0.9rem;
    color: #555;
}
.event-list-meta span:not(:first-child)::before { 
    content: none; 
}
.event-list-meta .admin-id-display { 
    margin-left: 1rem; 
    padding-left: 0; 
    font-size: 0.8rem;
    font-weight: 600;
    color: #aaa;
}

.event-list-description { 
    font-size: 0.95rem; 
    color: #444; 
}
.event-actions { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.75rem; 
    margin-top: 1.5rem; 
}
.action-button { 
    flex: 1; 
    border: none; 
    font-family: var(--font-family); 
    text-align: center; 
    padding: 0.6rem 1rem; 
    color: var(--white); 
    text-decoration: none; 
    font-weight: 600; 
    border-radius: 5px; 
    transition: background-color 0.3s; 
    font-size: 0.9rem; 
    cursor: pointer; 
    white-space: nowrap; 
}
.navigate-button { 
    background-color: var(--section-primary); 
}
.google-button { 
    background-color: var(--section-primary); 
}
.map-toggle-button { 
    background-color: var(--color-neutral-button); 
}
.navigate-button:hover { 
    background-color: var(--section-primary-hover); 
}
.google-button:hover { 
    background-color: var(--section-primary-hover); 
}
.map-toggle-button:hover { 
    background-color: var(--color-neutral-button-hover); 
}
.map-container { 
    display: none; 
    margin-top: 1rem; 
    height: 250px; 
    border-radius: 5px; 
    overflow: hidden; 
    border: 1px solid #ddd; 
}
.map-container.visible { 
    display: block; 
}
.map { 
    height: 100%; 
    width: 100%; 
}

/* --- Responsive Design --- */
@media(min-width: 768px) {
    .hero-section { background-attachment: fixed; }
    .hero-text h1 { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.5rem; }
}

/* --- Responsive Design --- */
@media (max-width: 768px) {

    .hero-section {
        height: 90vh; 
    }
    .hero-text h1 { 
        font-size: 16vw; 
    }

    .weather-widget-link-wrapper { max-width: 280px; }
    
    .weather-widget-container { 
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "data map"
            "forecast forecast";
        padding: 6px; 
        gap: 6px; 
        max-width: 280px; 
        width: 82%;
    }
    
    .weather-wind-map { 
        min-width: 0;
        min-height: 100px; 
    }
    .current-weather-data { 
        padding: 5px; 
        text-align: center; 
        min-width: 0;
        justify-content: center; 
    }
    .wind-scale {
        margin-top: 4px;
        gap: 4px;
    }
    .wind-scale-icon {
        width: 11px;
        height: 11px;
    }
    .activity-badges {
        bottom: 4px;
        right: 4px;
        gap: 4px;
    }
    .activity-badge {
        width: 30px;
        height: 30px;
        padding: 2px;
        border-radius: 7px;
    }
    .current-weather-data .weather-temp { 
        font-size: 1.8rem; 
        margin: 0 0 2px 0; 
    }
    .current-weather-data .weather-extra { 
        font-size: 0.75rem; 
        line-height: 1.4; 
    }

    .weather-forecast-row {
        padding-top: 6px;
        gap: 2px;
    }
    .forecast-item .forecast-time {
        font-size: 0.98rem;
    }
    .forecast-item .forecast-icon {
        width: 30px;
        height: 30px;
    }
    .forecast-item .forecast-temp {
        font-size: 1.2rem;
    }
    
    .hero-article .hero-text h1 { font-size: 1rem; }

    /* Poprawki listy wydarzeń na mobilce */
    .event-list-item { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 1rem; 
        padding: 0; 
        border-left: none; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
        background: var(--white);
    }
    .event-list-item.is-weekend { 
        background-color: var(--weekend-bg); 
    }
    .event-list-image {
        width: 100%; 
        height: 180px; 
        flex-shrink: 0;
        border-radius: 5px 5px 0 0; 
    }   
     
   .event-list-details {
        display: flex;
        flex-direction: column; 
        padding: 1rem; 
        width: 100%; 
    }

.event-list-header { 
    order: 2; 
} 

.event-list-meta { 
    order: 1; 
    display: flex;
    flex-direction: column; 
    gap: 0.2rem; 
    margin-bottom: 1rem; 
    width: 100%; 
    color: #333; 
    font-size: 0.9rem;
}
.event-meta-top-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}
.event-meta-location span {
    font-size: 0.85rem;
    color: #555;
}


.event-list-meta span:not(:first-child)::before {
    content: none; 
}

.event-list-description {
    order: 3;
}

.event-actions {
    order: 4;
    display: flex;
    flex-direction: row;
}
    
    .action-button {
    padding: 0.8rem 0.5rem; 
}
    
}
@media (min-width: 1024px) {
    .home-layout { 
        display: flex; 
        flex-direction: row; 
        align-items: flex-start; 
        gap: 2.5rem; 
    }
    
    .layout-z-wydarzeniami .home-events-column { 
        flex: 1; 
        min-width: 320px; 
    }
    .layout-z-wydarzeniami .home-news-column { 
        flex: 2; 
    }

    /* --- START POPRAWKI: Układ siatki na desktopie --- */
    /* Aktualności mają 2 kolumny, gdy są wydarzenia */
    .layout-z-wydarzeniami #aktualnosci .card-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    /* Wydarzenia mają 1 kolumnę (lista) */
    .layout-z-wydarzeniami #wydarzenia .card-grid { 
        grid-template-columns: 1fr; /* To jest teraz .home-events-list, więc ta reguła nic nie robi, ale .card-grid poniżej tak */
    }
    #wydarzenia .card-grid {
        grid-template-columns: 1fr; /* Wymusza 1 kolumnę dla wydarzeń zawsze */
    }
    
    /* Aktualności mają 3 kolumny, gdy NIE ma wydarzeń */
    .layout-bez-wydarzen #aktualnosci .card-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }

    /* Strona "Wszystkie aktualności" ma 3 kolumny */
    #wszystkie-aktualnosci-lista .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* --- KONIEC POPRAWKI --- */
}


/* --- Style dla nagłówka na podstronach --- */
.hero-article {
    height: 200px; 
    min-height: auto; 
}

.hero-article .hero-text h1 {
    font-size: 2.5rem; 
}

.hero-article .hero-subtitle {
    display: none; 
}

/* --- Style dla podstrony Artykułu (czytaj_wiecej.php) --- */

.article-container {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.article-container article {
    max-width: 800px; 
    margin: 0 auto;
}

.article-header {
    margin-bottom: 2rem;
}
.article-header h2 {
    font-size: 2.2rem;
    color: var(--section-primary); 
    text-align: left; 
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--section-primary); 
    padding-bottom: 0.5rem;
}
.article-meta {
    font-size: 0.9rem;
    color: #777;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.article-main-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.article-lead {
    font-weight: bold; 
    font-size: 1.2rem; 
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 1.5rem; 
    text-indent: 0; 
}

.article-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
}
.article-content p {
    margin-bottom: 1rem; 
    text-indent: 2rem; 
    margin-top: 0; 
}
.article-content p.article-lead {
    text-indent: 0;
}
.article-content strong {
    color: var(--section-primary); 
}
.article-content .img-w-tresci {
    width: 100%;
    max-width: 600px; 
    height: auto;
    display: block; 
    margin: 1.5rem auto; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.article-content .highlight {
    color: var(--section-primary); 
    font-weight: bold;
    background-color: var(--weekend-bg); 
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.article-gallery h3 {
    font-size: 1.8rem;
    color: var(--section-primary); 
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--section-primary); 
    padding-bottom: 0.5rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 1rem;
}

.gallery-grid img {
    width: 100%;
    height: 200px; 
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.gallery-grid img:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Style dla Lightbox (Galerii) --- */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
    user-select: none;
}
.lightbox-close:hover {
    transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 3rem;
    font-weight: 100;
    cursor: pointer;
    padding: 1rem 1.5rem;
    user-select: none;
    transition: background 0.3s ease;
    display: flex; 
    align-items: center;
    justify-content: center;
    height: 100px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

#lightbox-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(0,0,0,0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
}

/* --- Style Artykułu na Mobilce --- */
@media (max-width: 768px) {
    .article-header h2 {
        font-size: 1.8rem; 
    }
    .article-lead {
        font-size: 1.1rem; 
    }
    .article-content {
        font-size: 1rem;
        line-height: 1.6;
    }
    .article-content p {
        text-indent: 1.5rem;
    }
    .article-content p.article-lead {
        text-indent: 0; 
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 0.5rem;
    }
    .gallery-grid img {
        height: 150px;
    }

    /* Lightbox na mobilce */
    .lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 2.5rem;
        color: #ddd;
    }
    .lightbox-prev, .lightbox-next {
        font-size: 2rem;
        padding: 0.5rem;
        height: 60px;
    }
    #lightbox-counter {
        font-size: 1rem;
        top: 15px;
    }
    
    /* Przycisk powrotu na mobilce */
    .btn-centered {
        font-size: 0.9rem;
        padding: 0.7rem 1.5rem;
    }

    /* Poprawka dla siatki na stronie "Wszystkie aktualności" na mobilce */
    #wszystkie-aktualnosci-lista .card-grid {
        grid-template-columns: 1fr;
    }
}