/* ================== USTAWIENIA GŁÓWNE ================== */
 :root {
     --background-dark: #121212;
     --background-light: #1E1E1E;
     --text-primary: #FFFFFF;
     --text-secondary: #b3b3b3;
     --accent-color: #D4A017;
     --accent-hover: #F2B61A;
     --border-color: #2a2a2a;

     --header-font: 'Oswald', sans-serif;
     --body-font: 'Lato', sans-serif;
     --hero-gradient: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
     --highlight-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 75%);
     --hero-image: url('/app/webroot/images/news_main.webp');
     --parallax-image: url('/app/webroot/template/themes/1329863275.jpg');
 }

 body {
     background-color: var(--background-dark);
     color: var(--text-secondary);
     font-family: var(--body-font);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--header-font);
     color: var(--text-primary);
     font-weight: 500;
 }

 a {
     color: var(--accent-color);
     text-decoration: none;
     transition: color 0.2s;
 }

 a:hover,
 a:focus {
     color: var(--accent-hover);
     text-decoration: none;
 }

 .section-title {
     margin-bottom: 1.5rem;
     padding-bottom: 0.5rem;
     border-bottom: 2px solid var(--accent-color);
     display: inline-block;
 }

 /* Definicja jasnego motywu */
 body.light-theme {
     --background-dark: #f4f4f4;
     --background-light: #ffffff;
     --text-primary: #121212;
     --text-secondary: #555555;
     --border-color: #dddddd;
     --hero-gradient: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.8));
     --highlight-gradient: linear-gradient(to top, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0) 75%);
 }

 /* Płynne przejście między motywami */
 body,
 .post-card,
 .sidebar .widget {
     transition: background-color 0.3s ease, color 0.3s ease;
 }


 /* ================== NAWIGACJA ================== */
 .navbar {
     background-color: rgba(30, 30, 30, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .navbar-brand {
     font-family: var(--header-font);
     font-weight: 700;
 }

 .navbar-toggler {
    margin-left: 1rem;
}

 .navbar-dark .navbar-nav .nav-link {
     color: var(--text-secondary);
     font-family: var(--header-font);
     font-weight: 500;
     text-transform: uppercase;
 }

 .navbar-dark .navbar-nav .nav-link.active,
 .navbar-dark .navbar-nav .nav-link:hover {
     color: var(--text-primary);
 }
 
 body.light-theme .navbar {
     background-color: rgba(255, 255, 255, 0.8);
     /* Jaśniejsze tło nawigacji */
     border-bottom: 1px solid #ddd;
 }

 body.light-theme .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3C/svg%3e");
 }

 body.light-theme .navbar-dark .navbar-nav .nav-link {
     color: var(--text-secondary);
     /* Ciemniejszy kolor linków */
 }

 body.light-theme .navbar-dark .navbar-nav .nav-link.active,
 body.light-theme .navbar-dark .navbar-nav .nav-link:hover {
     color: var(--text-primary);
     /* Najbardziej kontrastowy kolor dla aktywnych/hover */
 }

 body.light-theme .search-btn {
     color: var(--text-secondary);
 }

 body.light-theme .search-btn:hover {
     color: var(--text-primary);
 }

 body.light-theme .nav-search-form:hover .search-input {
     background-color: #e9ecef;
     /* Jasnoszary tło dla pola wyszukiwania */
     border-bottom-color: var(--accent-color);
 }

 body.light-theme .site-logo {
     filter: invert(1);
 }


 /* ================== HERO SECTION ================== */
 .hero-section {
     position: relative;
     height: 60vh;
     min-height: 400px;
     display: flex;
     align-items: flex-end;
     color: var(--text-primary);
     /* Kolor tekstu pobierany z motywu */
     background-color: #111;
     background-image: var(--hero-gradient), var(--hero-image);
     /* Łączenie gradientu z obrazkiem */
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     padding: 2rem;
     margin-bottom: 3rem;
     transition: background-image 0.3s ease;
 }

 .hero-content h1 {
     font-size: 3rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .hero-content p {
     font-size: 1.2rem;
     max-width: 700px;
 }

 .btn-custom {
     background-color: var(--accent-color);
     color: var(--text-primary);
     padding: 0.75rem 1.5rem;
     font-weight: bold;
     text-transform: uppercase;
     border-radius: 5px;
     transition: background-color 0.2s;
 }

 .btn-custom:hover {
     background-color: var(--accent-hover);
     color: var(--text-primary);
 }


 /* ================== NOWY STYL LINKU "WIĘCEJ" ================== */
 .link-more {
     color: var(--accent-color);
     font-weight: bold;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 0.9rem;
 }

 .link-more:hover {
     text-decoration: underline;
     color: var(--accent-hover);
 }

 /* Dodanie strzałki po tekście */
 .link-more::after {
     content: ' →';
     display: inline-block;
     transition: transform 0.2s ease-in-out;
 }

 .link-more:hover::after {
     transform: translateX(5px);
     /* Animacja strzałki */
 }

 /* ================== PRZYCISK POWROTU NA GÓRĘ ================== */
 #backToTopBtn {
     display: none;
     /* Domyślnie ukryty */
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1000;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background-color: var(--background-light);
     color: var(--text-secondary);
     border: 1px solid var(--border-color);
     font-size: 1.5rem;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.3s, transform 0.3s;
 }

 #backToTopBtn.show {
     display: block;
     opacity: 0.8;
 }

 #backToTopBtn:hover {
     opacity: 1;
     background-color: var(--accent-color);
     color: var(--text-primary);
     border-color: var(--accent-color);
     transform: scale(1.05);
 }

 /* Poprawki dla jasnego motywu */
 body.light-theme #backToTopBtn {
     background-color: var(--background-light);
     color: var(--text-secondary);
     border: 1px solid var(--border-color);
 }

 /* ================== KARTY TREŚCI (POST CARD) ================== */
 .post-card {
     background-color: var(--background-light);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     overflow: hidden;
     transition: transform 0.2s, box-shadow 0.2s;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .post-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .post-card-img-top {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .post-card-body {
     padding: 1.25rem;
     flex-grow: 1;
 }

 .post-card-title {
     font-size: 1.25rem;
     margin-bottom: 0.75rem;
 }

 .post-card-title a {
     color: var(--text-primary);
 }

 .post-card-text {
     font-size: 0.9rem;
 }

 /* ================== KOLUMNA BOCZNA (SIDEBAR) ================== */
 .sidebar .widget {
     background-color: var(--background-light);
     padding: 1.5rem;
     border-radius: 8px;
     margin-bottom: 2rem;
     border: 1px solid var(--border-color);
 }

 .widget-title {
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
 }

 .concert-list-item {
     list-style: none;
     padding: 1rem 0;
     border-bottom: 1px solid var(--border-color);
 }

 .concert-list-item:first-child {
     padding-top: 0;
 }

 .concert-list-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .concert-artist {
     font-family: var(--header-font);
     color: var(--text-primary);
     font-size: 1.1rem;
     display: block;
 }

 .concert-details {
     font-size: 0.9rem;
 }

 /* ================== WYSZUKIWARKA W NAWIGACJI ================== */
 .nav-search-form {
     position: relative;
     display: flex;
     align-items: center;
 }


 /* --- Styl pola wyszukiwarki (wspólny) --- */
 .search-input {
     width: 0;
     padding: 0.375rem 0;
     border: none;
     background: transparent;
     opacity: 0;
     transition: all 0.4s ease-in-out;
     transform: translateX(10px);
 }

 .nav-search-form:hover .search-input {
     width: 200px;
     opacity: 1;
     padding: 0.375rem 0.75rem;
     border-bottom: 2px solid var(--accent-color);
     transform: translateX(0);
 }

 /* --- Kolory dla CIEMNEGO MOTYWU --- */
 body:not(.light-theme) .search-input {
     color: var(--text-primary);
     /* Biały tekst */
 }

 body:not(.light-theme) .search-input::placeholder {
     color: var(--text-secondary);
     /* Jasnoszary placeholder */
 }

 body:not(.light-theme) .nav-search-form:hover .search-input {
     background-color: var(--background-light);
 }


 /* --- Kolory dla JASNEGO MOTYWU --- */
 body.light-theme .search-input {
     color: var(--text-primary);
     /* Czarny tekst */
 }

 body.light-theme .search-input::placeholder {
     color: var(--text-secondary);
     /* Ciemnoszary placeholder */
 }

 body.light-theme .nav-search-form:hover .search-input {
     background-color: #e9ecef;
 }

 .search-btn {
     color: var(--text-secondary);
     background: transparent;
     border: none;
     padding: 0.5rem;
     z-index: 1;
     /* Upewnia się, że przycisk jest zawsze na wierzchu */
 }

 .search-btn:hover,
 .search-btn:focus {
     color: var(--text-primary);
 }

 .navbar-brand .site-logo {
     height: 40px;
     /* Wysokość logo, dostosuj wg potrzeb */
     width: auto;
     transition: transform 0.2s ease;
 }

 .navbar-brand .site-logo:hover {
     transform: scale(1.05);
     /* Lekkie powiększenie po najechaniu */
 }

 /* Opcjonalnie: dostosowanie dla mniejszych ekranów, jeśli logo jest za duże */
 @media (max-width: 576px) {
     .navbar-brand .site-logo {
         height: 35px;
         /* Mniejsze logo na bardzo małych ekranach */
     }
 }

 /* ================== PRZEŁĄCZNIK MOTYWU (NOWY STYL) ================== */
 .theme-switch-wrapper {
     display: flex;
     align-items: center;
 }

 .theme-switch {
     position: relative;
     display: inline-block;
     width: 50px;
     /* Zmniejszony dla lepszych proporcji */
     height: 28px;
     margin: 0;
 }

 .theme-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 /* Suwak (tło przełącznika) */
 .slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: var(--background-light);
     /* Ciemnoszare tło w trybie dark */
     transition: .4s;
     border-radius: 28px;
     border: 1px solid var(--border-color);
 }

 /* Kółko (uchwyt przełącznika) */
 .slider:before {
     position: absolute;
     content: "";
     height: 22px;
     width: 22px;
     left: 2px;
     bottom: 2px;
     background-color: #fff;
     /* Białe kółko w trybie dark */
     transition: .4s;
     border-radius: 50%;
 }

 /* Style po przełączeniu (tryb jasny) */
 input:checked+.slider {
     background-color: #E0E0E0;
     /* Jasnoszare tło w trybie light */
     border: 1px solid #c7c7c7;
 }

 input:checked+.slider:before {
     transform: translateX(22px);
     /* Przesunięcie kółka */
     background-color: var(--background-light);
     /* Ciemne kółko w trybie light */
 }


 /* ================== DYSKRETNY PRZYCISK "WIĘCEJ" (Wersja ze strzałką) ================== */
 .btn-more {
     position: relative;
     /* Niezbędne do pozycjonowania strzałki */
     color: var(--text-secondary);
     background-color: transparent;
     border: 1px solid var(--border-color);
     padding: 0.5rem 2.5rem 0.5rem 1rem;
     /* Zwiększony prawy padding na strzałkę */
     font-weight: bold;
     font-family: var(--header-font);
     text-transform: uppercase;
     font-size: 0.8rem;
     border-radius: 5px;
     transition: all 0.2s ease-in-out;
 }

 .btn-more:hover {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     color: var(--text-primary);
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 /* Dodanie i stylizacja strzałki */
 .btn-more::after {
     content: '>';
     position: absolute;
     right: 1rem;
     /* Odległość strzałki od prawej krawędzi */
     top: 50%;
     transform: translateY(-50%);
     transition: transform 0.2s ease-in-out;
 }

 /* Animacja strzałki po najechaniu na przycisk */
 .btn-more:hover::after {
     transform: translateY(-50%) translateX(4px);
 }

 /* ================== STOPKA ================== */
 .site-footer {
     background-color: var(--background-light);
     border-top: 1px solid var(--border-color);
     padding: 3rem 0 1rem 0;
     font-size: 0.9rem;
 }

 .footer-widget-title {
     font-size: 1.1rem;
     font-family: var(--header-font);
     text-transform: uppercase;
     margin-bottom: 1rem;
     color: var(--text-primary);
 }

 .footer-links li {
     margin-bottom: 0.5rem;
 }

 .footer-links a {
     color: var(--text-secondary);
 }

 .footer-links a:hover {
     color: var(--accent-color);
     text-decoration: underline;
 }

 .social-icons a {
     display: inline-block;
     color: var(--text-secondary);
     margin-right: 1rem;
     transition: color 0.2s, transform 0.2s;
 }

 .social-icons a:hover {
     color: var(--accent-color);
     transform: scale(1.1);
 }

 .footer-bottom {
     border-top: 1px solid var(--border-color);
     color: var(--text-secondary);
     font-size: 0.8rem;
     margin-top: 2rem;
 }

 .footer-bottom p {
     margin: 0;
 }


 /* ================== LISTA AKTUALNOŚCI ================== */
 .news-list-item {
     display: flex;
     align-items: baseline;
     padding: 1rem 0;
     border-bottom: 1px solid var(--border-color);
     transition: background-color 0.2s;
 }

 .news-list-item:hover {
     background-color: rgba(255, 255, 255, 0.03);
     /* Delikatne podświetlenie */
 }

 .news-list-date {
     font-size: 0.9rem;
     color: var(--text-secondary);
     min-width: 90px;
     /* Stała szerokość dla wyrównania */
     padding-right: 1.5rem;
 }

 .news-list-title {
     font-size: 1.1rem;
     font-family: var(--body-font);
     /* Używamy czcionki body dla lepszej czytelności */
     font-weight: 700;
     margin: 0;
     text-transform: none;
     /* Wyłączamy wielkie litery dla tytułów na liście */
 }

 .news-list-title a {
     color: var(--text-primary);
 }

 .news-list-title a:hover {
     color: var(--accent-color);
     text-decoration: none;
 }

 /* ================== SEKCJA ZAPOWIEDZI (SIDEBAR) ================== */
 .announcement-card {
     text-align: center;
 }

 .announcement-card img {
     border: 1px solid var(--border-color);
     border-radius: 4px;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .announcement-card img:hover {
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .announcement-title {
     font-size: 0.9rem;
     font-family: var(--body-font);
     font-weight: 700;
     margin-top: 0.5rem;
     text-transform: none;
 }

 .announcement-title a {
     color: var(--text-secondary);
 }

 .announcement-title a:hover {
     color: var(--accent-color);
 }

 /* ================== WIDŻET KONCERTÓW Z ZAKŁADKAMI ================== */

 /* Stylizacja podpisów na karuzeli */
 .carousel-caption {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 0));
     bottom: 0;
     left: 0;
     right: 0;
     padding-bottom: 1.5rem;
 }

 /* ================== SEKCJA "WYRÓŻNIONY + LISTA" ================== */
 .featured-list-section {
     display: grid;
     grid-template-columns: 1fr;
     /* Domyślnie jedna kolumna (mobile) */
     gap: 1.5rem;
 }

 .side-list-item {
     padding: 1rem 0;
     border-bottom: 1px solid var(--border-color);
 }

 .side-list-item:first-child {
     padding-top: 0;
 }

 .side-list-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .side-list-title {
     font-size: 1.1rem;
     font-family: var(--body-font);
     font-weight: 700;
     text-transform: none;
     margin: 0;
 }

 .side-list-title a {
     color: var(--text-primary);
 }

 .side-list-title a:hover {
     color: var(--accent-color);
     text-decoration: none;
 }

 /* ================== ODWRÓCONA KOLORYSTYKA SEKCJI (POPRAWKA HOVER) ================== */
 .section-inverted {
     border-radius: 8px;
     padding: 1.5rem;
     transition: background-color 0.3s, color 0.3s;
 }

 /* --- Style dla motywu CIEMNEGO (jasnoszare tło sekcji) --- */
 body:not(.light-theme) .section-inverted {
     background-color: #E0E0E0;
     /* Jasnoszare tło */
     color: #121212;
     /* Ciemny tekst */
 }

 body:not(.light-theme) .section-inverted h2,
 body:not(.light-theme) .section-inverted h3,
 body:not(.light-theme) .section-inverted h4,
 body:not(.light-theme) .section-inverted p,
 body:not(.light-theme) .section-inverted .side-list-title a,
 body:not(.light-theme) .section-inverted .post-card-title a {
     color: #121212;
 }

 body:not(.light-theme) .section-inverted .side-list-title a:hover,
 body:not(.light-theme) .section-inverted .post-card-title a:hover {
     color: #555555;
     /* Wyraźnie jaśniejszy szary */
 }

 body:not(.light-theme) .section-inverted .section-title {
     border-bottom-color: rgba(0, 0, 0, 0.2);
 }

 body:not(.light-theme) .section-inverted .post-card,
 body:not(.light-theme) .section-inverted .side-list-item {
     background-color: transparent;
     border-color: rgba(0, 0, 0, 0.2);
 }

 /* --- Style dla motywu JASNEGO (ciemnoszare tło sekcji) --- */
 body.light-theme .section-inverted {
     background-color: #2E2E2E;
     /* Ciemnoszare tło */
     color: #FFFFFF;
     /* Jasny tekst */
 }

 body.light-theme .section-inverted h2,
 body.light-theme .section-inverted h3,
 body.light-theme .section-inverted h4,
 body.light-theme .section-inverted p,
 body.light-theme .section-inverted .side-list-title a,
 body.light-theme .section-inverted .post-card-title a {
     color: #FFFFFF;
 }

 /* POPRAWIONY HOVER */
 body.light-theme .section-inverted .side-list-title a:hover,
 body.light-theme .section-inverted .post-card-title a:hover {
     color: #bbbbbb;
     /* Jaśniejszy kolor po najechaniu */
 }

 body.light-theme .section-inverted .section-title {
     border-bottom-color: rgba(255, 255, 255, 0.2);
 }

 body.light-theme .section-inverted .post-card,
 body.light-theme .section-inverted .side-list-item {
     background-color: transparent;
     border-color: rgba(255, 255, 255, 0.2);
 }

 /* ================== POPRAWKI DLA PRZYCISKÓW W ODWRÓCONYCH SEKCJACH ================== */

 /* --- Poprawki dla CIEMNEGO motywu (jasnoszare tło sekcji) --- */
 body:not(.light-theme) .section-inverted .btn-more {
     color: #333;
     /* Ciemnoszary tekst na jasnoszarym tle */
     border-color: #888;
     /* Ciemniejsza ramka dla lepszej widoczności */
 }

 body:not(.light-theme) .section-inverted .btn-more:hover {
     color: #fff;
     /* Biały tekst po najechaniu */
     background-color: #333;
     /* Ciemnoszare tło po najechaniu */
     border-color: #333;
 }

 /* --- Poprawki dla JASNEGO motywu (ciemnoszare tło sekcji) --- */
 body.light-theme .section-inverted .btn-more {
     color: #ddd;
     /* Jasnoszary tekst na ciemnoszarym tle */
     border-color: #888;
     /* Jaśniejsza ramka */
 }

 body.light-theme .section-inverted .btn-more:hover {
     color: #000;
     /* Czarny tekst po najechaniu */
     background-color: #ddd;
     /* Jasnoszare tło po najechaniu */
     border-color: #ddd;
 }

 /* ================== POPRAWKI DLA BANNERÓW ================== */
 .ad-widget {
     padding: 0;
     /* Usuwa wewnętrzne odstępy z widżetu */
     background-color: transparent;
     /* Robi tło widżetu niewidocznym */
     border: none;
     /* Usuwa ramkę widżetu */
     display: flex;
     justify-content: center;
     /* Wyśrodkowuje banner w poziomie */
     align-items: center;
     /* Wyśrodkowuje banner w pionie */
     width: 100%;
     min-width: 250px;
     /* Kluczowa poprawka: minimalna szerokość */
     min-height: 50px;
     /* Zapewnia minimalną wysokość */
 }

 /* Upewniamy się, że reklama Google dobrze się skaluje */
 .ad-widget .adsbygoogle {
     max-width: 100%;
 }

 .adsbygoogle {
     display: block;
     min-height: 50px;
     text-align: center;
 }

 /* Układ dla większych ekranów (desktop) */
 @media (min-width: 768px) {
     .featured-list-section {
         /* Dwie kolumny: pierwsza zajmuje 55%, druga resztę */
         grid-template-columns: 55fr 45fr;
     }

     .side-list-item {
         padding: 0 0 1rem 0;
     }

     .side-list-item:first-child {
         padding-top: 0;
     }
 }

 /* ==================  WYRÓŻNIONE ================== */
 .highlight-card {
     display: flex;
     /* Używamy flexbox do ułożenia elementów */
     flex-direction: column;
     /* Układamy elementy (obraz, tekst) pionowo */
     background-color: var(--background-light);
     /* Tło dla bloku tekstowego */
     border-radius: 8px;
     overflow: hidden;
     height: 350px;
     color: var(--text-primary);
     transition: transform 0.2s, box-shadow 0.2s;
     border: 1px solid var(--border-color);
 }

 .highlight-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .highlight-card-img-container {
     height: 70%;
     /* Obrazek zajmuje 70% wysokości kafelka */
     overflow: hidden;
     position: relative;
 }

 .highlight-card-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease-out;
 }

 .highlight-card:hover .highlight-card-img {
     transform: scale(1.05);
 }

 .highlight-card-content {
     height: 30%;
     /* Blok tekstowy zajmuje 30% wysokości kafelka */
     display: flex;
     align-items: center;
     /* Wyśrodkowanie tekstu w pionie */
     padding: 1rem;
     border-top: 1px solid var(--border-color);
 }

 .highlight-card-title {
     font-size: 1rem;
     /* Zmniejszona czcionka, aby pasowała do mniejszego pola */
     font-family: var(--body-font);
     font-weight: 700;
     line-height: 1.3;
     margin: 0;
     text-transform: none;
     color: var(--text-primary);
     /* Kolor tekstu dziedziczony z motywu */
 }

 .highlight-card:hover .highlight-card-title {
     color: var(--accent-color);
     /* Zmiana koloru tekstu po najechaniu */
 }


 /* ================== SEKCJA PARALLAX ================== */
 /*  */
 .parallax-section {
     /* Ustaw tutaj ścieżkę do swojego obrazka tematycznego */
     background-image: var(--parallax-image);

     /* Wysokość sekcji */
     min-height: 400px;

     /* Kluczowe właściwości dla efektu paralaksy */
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;

     /* Dodajemy marginesy, aby oddzielić od treści */
     margin: 3rem 0;
 }

 /* ================== STRONA LISTY ARTYKUŁÓW ================== */
 .article-list-item {
     display: flex;
     flex-direction: column;
     /* Układ mobilny: obrazek na górze */
     gap: 1rem;
     padding-bottom: 1.5rem;
     margin-bottom: 1.5rem;
     border-bottom: 1px solid var(--border-color);
 }

 .article-list-item:last-of-type {
     border-bottom: none;
 }

 .article-thumbnail {
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     /* Zachowuje proporcje obrazka */
     object-fit: cover;
     border-radius: 8px;
 }

 .article-meta {
     display: block;
     font-size: 0.8rem;
     color: var(--text-secondary);
     margin-bottom: 0.5rem;
 }

 .article-title {
     font-size: 1.5rem;
     text-transform: none;
     font-family: var(--header-font);
     margin-top: 0;
     margin-bottom: 0.5rem;
 }

 .article-title a {
     color: var(--text-primary);
     text-decoration: none;
 }

 .article-title a:hover {
     color: var(--accent-color);
 }

 .article-excerpt {
     font-size: 0.95rem;
     color: var(--text-secondary);
     margin-bottom: 1rem;
 }

 /* Paginacja */
 .pagination .page-link {
     background-color: var(--background-light);
     border-color: var(--border-color);
     color: var(--text-secondary);
 }

 .pagination .page-link:hover {
     background-color: var(--background-dark);
 }

 .pagination .page-item.active .page-link {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     color: var(--text-primary);
 }

 .pagination .page-item.disabled .page-link {
     background-color: transparent;
     border-color: var(--border-color);
 }

 /* Układ dla większych ekranów */
 @media (min-width: 576px) {
     .article-list-item {
         flex-direction: row;
         /* Układ desktopowy: obrazek po lewej */
         align-items: flex-start;
     }

     .article-thumbnail-link {
         flex-shrink: 0;
         width: 200px;
         /* Stała szerokość miniaturki */
     }

     .article-thumbnail {
         aspect-ratio: 4 / 3;
         /* Zmieniamy proporcje na bardziej klasyczne */
     }
 }

 /* ================== NAWIGACJA OKRUSZKOWA (BREADCRUMBS) ================== */
 .breadcrumb {
     background-color: transparent;
     /* Usunięcie tła */
     padding: 0 0 0.75rem 0;
     /* Usunięcie bocznych i górnych odstępów, zostaje dolny */
     border-radius: 0;
     /* Usunięcie zaokrąglonych rogów */
     border: none;
     /* Usunięcie wszystkich ramek */
     border-bottom: 1px solid var(--border-color);
     /* Dodanie tylko dolnej ramki (podkreślenia) */
 }

 .breadcrumb-item a {
     color: var(--accent-color);
     text-decoration: none;
 }

 .breadcrumb-item a:hover {
     color: var(--accent-hover);
 }

 .breadcrumb-item.active {
     color: var(--text-secondary);
 }

 .breadcrumb-item+.breadcrumb-item::before {
     color: var(--text-secondary);
     /* Kolor separatora (np. "/") */
 }

 /* ================== STRONA POJEDYNCZEGO ARTYKUŁU ================== */
 .article-header {
     margin-bottom: 1.5rem;
 }

 .article-title-single {
     font-size: 2.5rem;
     line-height: 1.2;
     text-transform: none;
 }

 .article-meta-single {
     font-size: 0.85rem;
     color: var(--text-secondary);
     margin-top: 0.5rem;
 }

 .article-body p {
     margin-bottom: 1.25rem;
     line-height: 1.7;
 }

 .article-body blockquote {
     border-left: 4px solid var(--accent-color);
     padding-left: 1.5rem;
     margin: 2rem 0;
     font-style: italic;
     color: var(--text-secondary);
 }

 .article-body blockquote footer {
     font-style: normal;
     font-weight: bold;
     margin-top: 0.5rem;
 }

 /* Przyciski udostępniania */
 .share-buttons .btn {
     color: #fff;
     margin-right: 0.5rem;
 }

 .btn-social-facebook {
     background-color: #3b5998;
 }

 .btn-social-twitter {
     background-color: #1da1f2;
 }


 /* WIDŻET: Ostatnie aktualności */
 .latest-news-item {
     margin-bottom: 1rem;
 }

 .latest-news-item:last-child {
     margin-bottom: 0;
 }

 .latest-news-link {
     display: flex;
     gap: 1rem;
     text-decoration: none;
 }

 .latest-news-img {
     width: 80px;
     height: 60px;
     object-fit: cover;
     border-radius: 4px;
     flex-shrink: 0;
 }

 .latest-news-title {
     font-size: 0.9rem;
     font-weight: bold;
     color: var(--text-primary);
     display: block;
     line-height: 1.3;
 }

 .latest-news-link:hover .latest-news-title {
     color: var(--accent-color);
 }

 .latest-news-date {
     font-size: 0.75rem;
     color: var(--text-secondary);
     display: block;
     margin-top: 0.25rem;
 }

 
 /* ================== STRONA LISTY RECENZJI ================== */
 .filter-bar {
     background-color: var(--background-light);
     border: 1px solid var(--border-color);
     padding: 1rem;
     border-radius: 8px;
 }

 .sort-links {
     font-size: 0.9rem;
     color: var(--text-secondary);
 }

 .sort-links a {
     color: var(--text-secondary);
     text-decoration: none;
     margin: 0 0.5rem;
     padding: 0.2rem 0;
 }

 .sort-links a::after {
     content: '|';
     margin-left: 1rem;
     color: var(--border-color);
 }

 .sort-links a:last-child::after {
     content: '';
     /* Usuwa separator po ostatnim linku */
 }

 .sort-links a:hover {
     color: var(--text-primary);
 }

 .sort-links a.active {
     color: var(--accent-color);
     font-weight: bold;
     border-bottom: 2px solid var(--accent-color);
 }

/* ================== STRONA LISTY RECENZJI - Pasek Sortowania ================== */

/* Zapewniamy, że linki są wyświetlane jako bloki inline, aby ::after działał poprawnie */
.sort-links a {
    display: inline-block; /* Ważne dla pozycjonowania strzałki */
    padding: 0.25rem 0.5rem; /* Dopasuj do swojego stylu */
    text-decoration: none;
    color: #CCC; /* Przykład koloru */
    transition: color 0.2s ease-in-out;
}

.sort-links a:hover {
    color: var(--text-primary); /* Kolor po najechaniu (biały w trybie dark, czarny w trybie light) */
}

/* Styl dla aktywnego linku sortowania */
.sort-links a.active {
    font-weight: bold; /* Pogrubienie tekstu dla aktywnego */
    color: #FFC107; /* Kolor żółty dla aktywnego */
    position: relative; /* Ważne dla pozycjonowania strzałek */
    padding-right: 1.2rem; /* Zwiększamy padding, by zrobić miejsce na strzałkę */
}

/* Strzałka w górę dla sortowania rosnącego */
.sort-links a.active.asc::after {
    content: ' ↑';
    position: absolute; /* Pozycjonowanie absolutne względem linku */
    right: 0.2rem; /* Odległość od prawej krawędzi linku */
    top: 50%; /* Wyrównanie w pionie */
    transform: translateY(-50%); /* Dokładne centrowanie w pionie */
    font-size: 0.9em; /* Rozmiar strzałki */
    color: #FFC107; /* Kolor strzałki */
}

/* Strzałka w dół dla sortowania malejącego */
.sort-links a.active.desc::after {
    content: ' ↓';
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    color: #FFC107;
}

 .filter-bar .form-control {
     background-color: var(--background-dark);
     border-color: var(--border-color);
     color: var(--text-secondary);
     font-size: 0.9rem;
 }

 .filter-bar .form-control:focus {
     background-color: var(--background-dark);
     border-color: var(--accent-color);
     box-shadow: none;
     color: var(--text-primary);
 }

 body.light-theme .filter-bar .form-control {
     background-color: #fff;
 }

 .review-card {
     display: block;
     background-color: var(--background-light);
     border-radius: 8px;
     overflow: hidden;
     height: 100%;
     border: 1px solid var(--border-color);
     transition: transform 0.2s, box-shadow 0.2s;
     text-decoration: none;
 }

 .review-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .review-card-img-container {
     aspect-ratio: 1 / 1;
     /* Gwarantuje kwadratowe proporcje */
     overflow: hidden;
 }

 .review-card-img-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .review-card-content {
     padding: 1rem;
 }

 .review-card-artist {
     font-size: 1.1rem;
     color: var(--text-primary);
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .review-card-album {
     font-size: 0.9rem;
     color: var(--text-secondary);
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }


/* ================== LISTA UTWORÓW Z IDEALNYM WYRÓWNANIEM (POPRAWKA FINALNA) ================== */

/* Używamy bardziej precyzyjnego selektora, aby zwiększyć jego "ważność" */
.accordion-body .track-list {
    list-style: none;
    padding-left: 0;
    counter-reset: track-counter;
}

.accordion-body .track-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color); /* Lepsze oddzielenie wizualne */
}

.accordion-body .track-list li:last-child {
    border-bottom: none; /* Usuwamy ramkę pod ostatnim utworem */
}

.accordion-body .track-list li::before {
    counter-increment: track-counter;
    content: counter(track-counter) ".";
    min-width: 2em;
    text-align: right;
    padding-right: 0.5rem;
    color: var(--text-secondary);
}

.accordion-body .track-list .track-title {
    flex-grow: 1;
}

/* Ten selektor jest teraz bardziej precyzyjny i musi zadziałać */
.accordion-body .track-list .track-duration {
    flex-shrink: 0;
    width: 50px; /* Stała szerokość dla idealnego wyrównania w kolumnie */
    text-align: right; /* Wyrównuje tekst do prawej wewnątrz tej kolumny */
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Styl dla listy składu bez punktorów */
.artist-list {
    list-style: none; /* Usuwa punktory */
    padding-left: 0;  /* Usuwa domyślne wcięcie listy */
    margin: 0;
}

/* Opcjonalny odstęp między pozycjami */
.artist-list li {
    margin-bottom: 0.25rem;
}

/* Styl dla listy linków do stron zespołu */
.artist-urls strong {
    display: block;
    margin-bottom: 0.5rem;
}
.artist-urls ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.artist-urls a {
    text-decoration: underline;
}

 /* ================== STRONA LISTY ALFABETYCZNEJ ================== */

 /* Nawigacja A-Z (wersja z przyciskami) */
 .az-navigation {
     list-style: none;
     padding: 0;
     margin-bottom: 2rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.5rem;
     /* Odstępy między przyciskami */
 }

 .az-navigation a {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 40px;
     /* Stała szerokość przycisku */
     height: 40px;
     /* Stała wysokość przycisku */
     color: var(--text-secondary);
     background-color: var(--background-light);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     /* Zaokrąglone rogi */
     font-family: var(--header-font);
     font-weight: 500;
     text-decoration: none;
     transition: all 0.2s ease-in-out;
 }

 .az-navigation a:hover,
 .az-navigation a.active {
     /* Styl aktywnego przycisku */
     color: var(--text-primary);
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     transform: translateY(-2px);
     /* Lekkie uniesienie */
 }

 /* Akordeon */
 .accordion-item {
     background-color: var(--background-dark);
     border: 1px solid var(--border-color);
 }

 .accordion-header .accordion-button {
     background-color: var(--background-light);
     color: var(--text-primary);
     font-family: var(--header-font);
     font-size: 1.5rem;
 }

 .accordion-header .accordion-button:not(.collapsed) {
     background-color: var(--accent-color);
     color: var(--text-primary);
     box-shadow: none;
 }

 .accordion-header .accordion-button:focus {
     box-shadow: 0 0 0 0.25rem rgba(var(--accent-color), 0.25);
 }

 .accordion-header .accordion-button::after {
     /* Zmiana ikony strzałki na + i - */
     background-image: none;
     content: '+';
     font-size: 2rem;
     font-weight: bold;
     transform: translateY(-4px);
 }

 .accordion-header .accordion-button:not(.collapsed)::after {
     content: '−';
 }

 .accordion-body {
     background-color: var(--background-dark);
 }

 /* Lista wewnątrz akordeonu */
 .review-alpha-list {
     list-style: none;
     padding-left: 0;
     columns: 1;
     /* Jedna kolumna na mobile */
 }

 .review-alpha-list li {
     margin-bottom: 0.5rem;
 }

 .review-alpha-list a {
     color: var(--text-secondary);
 }

 .review-alpha-list a:hover {
     color: var(--accent-color);
 }

 .review-alpha-list em {
     font-style: normal;
     color: var(--text-primary);
 }

 @media (min-width: 768px) {
     .review-alpha-list {
         columns: 2;
         /* Dwie kolumny na większych ekranach */
     }
 }

 /* ================== STRONA POJEDYNCZEJ RECENZJI ================== */

 /* Nagłówek recenzji */
 .review-header {
     display: flex;
     flex-direction: column;
     /* Układ mobilny */
     gap: 1.5rem;
 }

 .review-cover img {
     width: 100%;
     max-width: 300px;
     /* Maksymalna szerokość na mobile */
     height: auto;
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .review-artist {
     font-size: 2.5rem;
     line-height: 1.1;
     text-transform: uppercase;
     margin: 0;
 }

 .review-album-title {
     font-size: 1.5rem;
     font-family: var(--body-font);
     color: var(--text-secondary);
     margin: 0.5rem 0;
 }

 .review-meta,
 .review-author {
     font-size: 0.9rem;
     color: var(--text-secondary);
 }

 .accordion-body {
     color: var(--text-primary);
     /* Ustawia główny, jasny kolor tekstu */
 }

 .accordion-body strong {
     color: var(--text-primary);
     /* Upewnia się, że etykiety też są jasne */
 }


 .star-rating {
     --star-size: 24px;
     --star-color: #555;
     --star-background: var(--accent-color);
     --percent: calc(var(--rating) / 5 * 100%);
     display: inline-block;
     font-size: var(--star-size);
     font-family: Times;
     line-height: 1;
 }

 .star-rating::before {
     content: '★★★★★';
     letter-spacing: 3px;
     background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .rating-text {
     display: block;
     font-size: 0.9rem;
     color: var(--text-secondary);
     margin-top: 0.5rem;
 }

 /* System ocen czytelników */
 .user-rating-box {
     background-color: var(--background-light);
     border: 1px solid var(--border-color);
     padding: 1.5rem;
     border-radius: 8px;
 }

 .user-rating-box .form-select {
     background-color: var(--background-dark);
     color: var(--text-primary);
     border-color: var(--border-color);
 }

 body.light-theme .user-rating-box .form-select {
     background-color: #fff;
     color: var(--text-primary);
 }


 /* Układ dla większych ekranów */
 @media (min-width: 768px) {
     .review-header {
         flex-direction: row;
         /* Układ desktopowy */
         align-items: flex-start;
     }

     .review-cover {
         flex-shrink: 0;
         width: 300px;
     }
 }

 /* ================== OCENA W GWIAZDKACH ================== */
 .author-rating {
     margin: 1rem 0;
 }

 .star-rating {
     --star-size: 24px;
     --star-color: #555;
     /* Kolor pustych gwiazdek */
     --star-background: var(--accent-color);
     /* Kolor wypełnionych gwiazdek */

     /* Obliczamy procentowe wypełnienie na podstawie oceny w skali 0-5 */
     --percent: calc(var(--rating) / 5 * 100%);

     display: inline-block;
     font-size: var(--star-size);
     font-family: Times, 'Times New Roman', serif;
     /* Używa standardowych glifów gwiazdek */
     line-height: 1;
 }

 .star-rating::before {
     content: '★★★★★';
     /* 5 gwiazdek */
     letter-spacing: 3px;
     background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .rating-text {
     display: block;
     font-size: 0.9rem;
     color: var(--text-secondary);
     margin-top: 0.5rem;
 }

 /* Dostosowanie koloru pustych gwiazdek w jasnym motywie */
 body.light-theme .star-rating {
     --star-color: #ddd;
 }

 /* ================== POWIĄZANE RECENZJE (POD ARTYKUŁEM) ================== */
 .related-review-card {
     display: block;
     text-align: center;
     text-decoration: none;
 }

 .related-review-card img {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 4px;
     border: 1px solid var(--border-color);
     margin-bottom: 0.5rem;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .related-review-card:hover img {
     transform: scale(1.05);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .related-review-card .related-review-artist {
     font-size: 0.8rem;
     color: var(--text-secondary);
     font-weight: bold;
     display: block;
 }

 .related-review-card:hover .related-review-artist {
     color: var(--accent-color);
 }

 /* ================== GWIAZDKA UZNANIA (ALTERNATYWNA OCENA) ================== */
 .recognition-star {
     display: none;
     /* Domyślnie ukryta */
     align-items: center;
     gap: 1rem;
     background-color: var(--background-dark);
     padding: 0.75rem 1rem;
     border-radius: 8px;
     border: 1px solid var(--border-color);
 }

 .recognition-star-icon {
     width: 32px;
     height: 32px;
     color: var(--accent-color);
     flex-shrink: 0;
 }

 .recognition-star-text {
     font-family: var(--header-font);
     font-size: 1.1rem;
     color: var(--text-primary);
     font-weight: 500;
     line-height: 1.2;
 }

 .recognition-star-text small {
     display: block;
     font-family: var(--body-font);
     font-size: 0.8rem;
     color: var(--text-secondary);
     font-weight: 400;
 }

 /* ================== LOGIKA PRZEŁĄCZANIA WIDOCZNOŚCI OCEN ================== */

 /* Domyślnie, w standardowym artykule... */
 .single-article .recognition-star {
     display: none;
     /* ...zawsze ukrywaj Gwiazdkę Uznania. */
 }

 .single-article .author-rating {
     display: block;
     /* ...i zawsze pokazuj ocenę w gwiazdkach. */
 }

 /* Kiedy do artykułu dodamy klasę .has-recognition... */
 .single-article.has-recognition .author-rating {
     display: none;
     /* ...ukryj ocenę w gwiazdkach... */
 }

 .single-article.has-recognition .recognition-star {
     display: flex;
     /* ...i pokaż Gwiazdkę Uznania. */
 }

 /* ================== GALERIA ZDJĘĆ W RELACJI ================== */
 .photo-gallery a {
     display: block;
     overflow: hidden;
     border-radius: 8px;
     border: 1px solid var(--border-color);
 }

 .photo-gallery img {
     transition: transform 0.3s ease;
 }

 .photo-gallery a:hover img {
     transform: scale(1.05);
 }

 /* Dostosowanie wyglądu Lightboxa do naszego motywu */
 .lb-data .lb-caption {
     color: var(--text-secondary);
 }

 .lb-data .lb-number {
     color: var(--text-secondary);
 }

 .lightbox .lb-close {
     opacity: 0.7;
 }

 .lightbox .lb-close:hover {
     opacity: 1;
 }

 .lightbox {
    z-index: 10000 !important;
}

 /* ================== ELASTYCZNA KARUZELA Z PLAKATAMI ================== */

 /* Ustawiamy stałe proporcje dla całej karuzeli, aby uniknąć "skakania" layoutu */
 #posterCarousel .carousel-inner {
     aspect-ratio: 4 / 5;
     /* Proporcje kompromisowe, lekko pionowe */
     background-color: var(--background-dark);
     /* Tło dla "pasków" przy poziomych bannerach */
     border-radius: 8px;
     /* Zaokrąglenie, aby pasowało do reszty */
 }

 /* Jasny motyw - dostosowanie tła */
 body.light-theme #posterCarousel .carousel-inner {
     background-color: #f0f0f0;
 }


 #posterCarousel .carousel-item {
     height: 100%;
 }

 /* Kluczowa reguła: dopasowuje obrazek, aby był widoczny w całości */
 #posterCarousel .carousel-item img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* Zapewnia, że cały obrazek zmieści się w kontenerze */
     border-radius: 8px;
 }

 body.light-theme #posterCarousel .carousel-caption {
    /* Zmieniamy gradient na jasny, aby pasował do motywu */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0));
    /* Ustawiamy domyślny kolor tekstu na ciemny dla lepszego kontrastu */
    color: var(--text-primary); /* Użyje głównego koloru tekstu z jasnego motywu */
}

/* Upewniamy się, że nagłówek i paragraf wewnątrz również mają ciemny kolor */
body.light-theme #posterCarousel .carousel-caption h5,
body.light-theme #posterCarousel .carousel-caption p {
    color: var(--text-primary);
}

/* Dodajemy delikatny cień do tekstu w podpisach dla obu motywów */


body #posterCarousel .carousel-caption h5,
body #posterCarousel .carousel-caption p {
    text-shadow: 1px 1px 3px rgba(177, 177, 177, 0.3);
}

body.light-theme #posterCarousel .carousel-caption h5,
body.light-theme #posterCarousel .carousel-caption p {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
#posterCarousel .carousel-item a img {
    transition: opacity 0.2s ease-in-out;
}

#posterCarousel .carousel-item a:hover img {
    opacity: 0.9; /* Obrazek stanie się lekko jaśniejszy po najechaniu */
}
 /* ================== STRONA WYNIKÓW WYSZUKIWANIA ================== */
.search-form-page {
    display: flex;
    gap: 1rem;
}
.search-form-page .form-control {
    background-color: var(--background-light);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.search-results-header h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.search-result-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.search-result-item:first-of-type {
    padding-top: 0;
}

.result-title {
    font-size: 1.25rem;
    font-family: var(--body-font);
    font-weight: 700;
    text-transform: none;
    margin-bottom: 0.5rem;
}
.result-title a {
    color: var(--text-primary);
}
.result-title a:hover {
    color: var(--accent-color);
}

.result-excerpt {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Podświetlenie szukanej frazy */
.result-excerpt mark,
.result-excerpt strong {
    background-color: var(--accent-color);
    color: var(--text-primary);
    padding: 0.1rem 0.2rem;
}

.result-context {
    font-size: 0.8rem;
    color: var(--accent-color);
    margin-top: 0.75rem;
}

/* ================== SZABLON ZAPOWIEDZI KONCERTOWYCH ================== */
.concert-announcement {
    background-color: var(--background-dark);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-small);
}

.concert-announcement .announcement-title {
    font-size: 1.8rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-family: var(--header-font);
    font-weight: 600;
}

.concert-dates {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
}
.concert-dates small {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.announcement-poster-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5; /* Stałe proporcje dla kontenera, kompromis dla plakatów */
    background-color: #0d0d0d; /* Tło pod plakat, gdy jest poziomy */
    border-radius: 8px;
    overflow: hidden; /* Upewnia się, że obrazki nie wystają poza ramkę */
    display: flex; /* Do centrowania obrazka */
    align-items: center; /* Do centrowania obrazka */
    justify-content: center; /* Do centrowania obrazka */
    border: 1px solid var(--border-color);
}

.announcement-poster {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Obrazek dopasuje się, zachowując proporcje, z "letterboxing" */
    display: block; /* Usuwa zbędne marginesy */
}

.announcement-description p {
    margin-bottom: 1rem;
}

/* Wideo responsywne */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}
.embed-responsive iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px; /* Zaokrąglone rogi dla wideo */
}

.announcement-description iframe[src*="youtube.com"],
.article-body iframe[src*="youtube.com"],
.news-body iframe[src*="youtube.com"] {
    /* 1. Ustawiamy szerokość na 100%, aby dopasować się do kontenera. */
    width: 100% !important; 
    
    /* 2. Automatycznie obliczamy wysokość, aby zachować proporcje 16:9. */
    aspect-ratio: 16 / 9;
    
    /* 3. Usuwamy wysokość ustawioną w atrybucie HTML. */
    height: auto !important; 
    
    /* Dodatkowe style dla estetyki */
    border-radius: 8px;
    display: block; /* Usuwa ewentualne dodatkowe marginesy pod wideo */
    margin: 1.5rem 0; /* Dodaje odstęp od góry i dołu */
}