/* Theme Name: Bolesławiec 
Theme URI: https://mgsip.pl
Author: MCZ 
Author URI: https://marketingczarnecki.pl 
Description: Motyw dla strony Urzędu Miasta Bolesławiec
Version: 1.0 
License: GNU General Public License v2 or later 
License URI: http://www.gnu.org/licenses/gpl-2.0.html 
Text Domain: my-custom-theme 
Tags: responsive, custom-theme */

:root {
    --font-primary: "Plus Jakarta Sans", sans-serif;
    --color-headers: #000000;
    --color-paragraph: #141414;
    --color-hover: #134347;
    --color-button: #18555B;
    --font-size-base: 16px;
    --font-size-lg: 36px;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --border-radius: 8px;
    --transition-ease: 0.3s ease;
    --spacing-sm: 8px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --max-width: 1240px;
}

* {
    box-sizing: border-box;
}

body {
    background-color: white;
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
}

/* Header Styles */
.site-header {
    background-color: #1d2327;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-topbar {
    background-color: white;
    padding: 10px 0;
}

/* Gdy scrollujemy, zmniejszamy padding topbar */
.site-header.scrolled .header-topbar {
    padding: 10px 0;
}

.site-header.scrolled .topbar-image {
    height: 45px;
}

.site-header.scrolled .header-logo img {
    max-height: 45px;
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 5px var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d2327;
    position: relative;
}

.header-container.scrolled {
    padding: 5px var(--spacing-lg);
}

.topbar-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-image {
    height: 45px;
    width: auto;
}

/* Logo */
.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    max-height: 45px;
    width: auto;
    display: block;
    transition: max-height 0.3s ease;
}

.site-title-link {
    text-decoration: none;
}

.site-title {
    margin: 0;
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
}

.custom-logo-link {
    display: block;
}

/* Navigation */
.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    align-items: center;
}

.header-menu li {
    position: relative;
}

.header-menu a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
    padding: 10px 0;
    display: block;
    position: relative;
}

/* Hover effect - underline from left */
.header-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
}

/* Aktywna strona - domyślnie podkreślona i pogrubiona */
.header-menu .current-menu-item > a::after,
.header-menu .current-menu-ancestor > a::after {
    width: 100%;
}

.header-menu .current-menu-item > a,
.header-menu .current-menu-ancestor > a {
    text-shadow: 0 0 1px white, 0 0 1px white;
}

/* Gdy najedziemy na CAŁE menu - wszystkie linki (włącznie z aktywną) robią się szare */
.header-menu:hover a {
    color: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}

/* Gdy najedziemy na CAŁE menu - wszystkie podkreślenia znikają */
.header-menu:hover a::after {
    width: 0;
}

/* Tylko hoverowany element jest biały, pogrubiony i podkreślony */
.header-menu:hover li:hover > a {
    color: white;
    text-shadow: 0 0 1px white, 0 0 1px white;
}

.header-menu:hover li:hover > a::after {
    width: 100%;
}

/* CTA Section */
.header-cta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.header-cta-text {
    color: var(--color-paragraph);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
}

.header-cta-button {
    background-color: var(--color-button);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    transition: background-color var(--transition-ease);
    white-space: nowrap;
}

.header-cta-button:hover {
    background-color: var(--color-hover);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: all var(--transition-ease);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    background-color: #1d2327;
    padding: var(--spacing-lg);
    border-top: 1px solid #3a3f44;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu-list li {
    margin-bottom: var(--spacing-md);
}

.mobile-menu-list a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    display: block;
    padding: 10px 0;
}

.mobile-menu-cta {
    margin-top: var(--spacing-lg);
}

.mobile-menu-cta .header-cta-button {
    display: block;
    text-align: center;
    width: 100%;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .header-topbar {
        padding: 15px 0;
    }

    .topbar-container {
        padding: 0 var(--spacing-md);
    }

    .header-nav {
        display: none;
    }
    
    .header-cta-text {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }

    .header-container {
        padding: 15px var(--spacing-md);
        justify-content: flex-end;
    }

    .header-container.scrolled {
        padding: 12px var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .site-header.scrolled .topbar-image{
        height: auto;
        width: 250px;
    }

    .header-logo img {
        max-height: 50px;
    }

    .topbar-image {
        height: auto;
        width: 250px;
    }
    
    .header-cta-button {
        padding: 10px 18px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .header-cta {
        gap: var(--spacing-sm);
    }

    .header-logo img {
        max-height: 40px;
    }

    .topbar-image {
        height: auto;
        width: 250px;
    }
}

/* Submenu Styles */
.header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-ease);
    border-radius: var(--border-radius);
    z-index: 1000;
}

.header-menu > li {
    position: relative;
}

.header-menu > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-menu .sub-menu li {
    margin: 0;
}

.header-menu .sub-menu a {
    padding: 12px 20px;
    display: block;
    color: var(--color-headers);
    white-space: nowrap;
}

.header-menu .sub-menu a::after {
    display: none;
}

.header-menu .sub-menu a:hover {
    background-color: #f8f9fa;
    color: var(--color-button);
}

/* Chevron Icon */
.menu-chevron {
    margin-left: 6px;
    font-size: 12px;
    transition: transform var(--transition-ease);
}

/* Mobile Submenu */
.mobile-menu-list .sub-menu {
    list-style: none;
    margin: 0;
    padding-left: var(--spacing-lg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-ease);
}

.mobile-menu-list li.active > .sub-menu {
    max-height: 500px;
    margin-top: var(--spacing-sm);
}

.mobile-menu-list .sub-menu a {
    font-size: 16px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.mobile-menu-list .sub-menu a:hover {
    color: var(--color-button);
}

.mobile-menu-list > li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-list .menu-chevron {
    transition: transform var(--transition-ease);
}

/* Hamburger Animation */
.mobile-menu-toggle.active .hamburger-line {
    background-color: var(--color-button);
}

/* Nested Submenu Support */
.header-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 5px;
}

.header-menu .sub-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Indicator for items with children */
.menu-item-has-children > a {
    position: relative;
}

@media (max-width: 1024px) {
    .header-menu .sub-menu {
        display: none;
    }
}

/* Footer Styles */
.site-footer {
    position: relative;
    background-color: #1d2327;
    padding: 40px 0 20px;
    color: white;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 2;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Footer Logo Section */
.footer-logo-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-logo {
    max-width: 80px;
    height: auto;
}

.footer-logo-title {
    font-size: 17px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    color: white;
    margin: 0;
}

/* Footer Menu Sections */
.footer-menu-section {
    display: flex;
    flex-direction: column;
}

.footer-section-title {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0 0 var(--spacing-md) 0;
}

.footer-menu-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-menu-list li {
    margin: 0;
}

.footer-menu-list a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: color var(--transition-ease);
    display: inline-block;
}

.footer-menu-list a:hover {
    color: white;
    text-shadow: 0 0 1px white, 0 0 1px white;
}

/* Footer Contact Section */
.footer-contact-section {
    display: flex;
    flex-direction: column;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    gap: 5px;
    margin-bottom: var(--spacing-lg);
}

.footer-contact-name {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    margin: 0 0 8px 0;
    color: white;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}

.footer-contact-item i {
    font-size: 16px;
    color: white;
    margin-top: 2px;
    width: 16px;
    flex-shrink: 0;
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--transition-ease);
}

.footer-contact-item a:hover {
    color: white;
}

.footer-contact-button {
    display: inline-block;
    background-color: var(--color-button, #007bff);
    color: white;
    margin-left: 10px;
    padding: 12px 32px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    transition: background-color var(--transition-ease);
    text-align: center;
    align-self: flex-start;
}

.footer-contact-button:hover {
    background-color: var(--color-hover, #0056b3);
}

/* Responsive Footer */
@media (max-width: 1200px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-logo-section {
        grid-column: 1 / 2;
    }
    
    .footer-contact-section {
        grid-column: 1 / -1;
        margin-top: var(--spacing-lg);
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 30px;
    }
    
    .footer-container {
        padding: 0 var(--spacing-md);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .footer-logo-section {
        grid-column: 1;
        text-align: center;
        align-items: center;
    }
    
    .footer-logo {
        max-width: 150px;
    }
    
    .footer-menu-section,
    .footer-contact-section {
        grid-column: 1;
    }
    
    .footer-section-title {
        font-size: 18px;
    }
    
    .footer-contact-button {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 30px 0 20px;
    }
    
    .footer-logo {
        max-width: 120px;
    }
    
    .footer-logo-title {
        font-size: 16px;
    }
    
    .footer-section-title {
        font-size: 16px;
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-menu-list a {
        font-size: 14px;
    }
    
    .footer-contact-item {
        font-size: 14px;
    }
}

/* Hero Section */
.hero-section {
    position: relative;
    min-height: 450px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px var(--spacing-lg);
}

.hero-background-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.5)
    );
    z-index: 1;
}

.hero-container {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    position: relative;
    justify-content: center;
    text-align: center;
    z-index: 2;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo img {
    max-height: 160px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.hero-logo .custom-logo-link {
    display: inline-block;
}

.hero-title {
    font-size: 30px;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Responsive Hero Section */
@media (max-width: 1024px) {
    .hero-section {
        min-height: 500px;
        padding: 60px var(--spacing-lg);
    }
    
    .hero-logo {
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-logo img {
        max-height: 100px;
    }
    
    .hero-title {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 450px;
        padding: 50px var(--spacing-md);
    }
    
    .hero-logo {
        margin-bottom: var(--spacing-md);
    }
    
    .hero-logo img {
        max-height: 120px;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-content {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 400px;
        padding: 40px var(--spacing-md);
    }
    
    .hero-logo {
        margin-bottom: var(--spacing-md);
    }
    
    .hero-logo img {
        max-height: 100px;
    }
    
    .hero-title {
        font-size: 28px;
    }
}

.gminy-section {
    margin-bottom: -80px;
    position: relative;
    padding: 40px 0;
    background: white;
}

.gminy-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
}

.gminy-title {
    font-size: 30px;
    color: var(--color-headers);
    font-weight: 700;
    margin-bottom: -25px;
}

.gminy-text {
    font-size: 18px;
    color: var(--color-paragraph);
    margin-bottom: 40px;
}

.gminy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 25px 0; 
}

.gmina-card {
    position: relative;
    display: block;
    max-height: 300px;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    aspect-ratio: 1;
}

.gmina-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gmina-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    transform: scale(1.05); /* Grafika już powiększona */
    transition: transform 0.5s ease;
}

.gmina-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        #18555b83 0%,
        #134347a8 100%
    );
    z-index: 1;
    transition: background 0.3s ease;
}

/* Delikatne rozjaśnienie przy hover */
.gmina-card:hover .gmina-overlay {
    background: linear-gradient(
        to bottom,
        #196e75c4 0%,
        #196e75c4 100%
    );
}

/* Herb na środku */
.gmina-herb {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: all 0.3s ease;
}

.gmina-herb img {
    width: 95px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

/* Powiększenie herbu przy hover na całą kartę */
.gmina-card:hover .gmina-herb img {
    transform: scale(1.15);
}

/* Nazwa gminy z rozmyciem - stała wysokość */
.gmina-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    color: white;
    padding: 20px 15px;
    height: 70px; /* Stała wysokość */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.gmina-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: white;
    text-align: center;
    line-height: 1.3;
}

.gmina-type {
    display: none;
}

/* Strzałka w prawym górnym rogu */
.gmina-hover-content {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

.gmina-card:hover .gmina-hover-content {
    opacity: 1;
    transform: translateY(0);
}

.gmina-hover-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 50%;
    color: #1b5660;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.gmina-card:hover .gmina-hover-icon {
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 1200px) {
    .gminy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .gminy-section {
        padding: 20px 5px;
    }
    .gminy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .gminy-title {
        font-size: 26px;
    }
    
    .gmina-name {
        font-size: 16px;
    }
    
    .gmina-herb img {
        width: 80px;
    }
    
    .gmina-content {
        height: 60px;
        padding: 15px;
    }
    
    .gmina-hover-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

@media (max-width: 500px) {
    .gminy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .gmina-herb img {
        width: 60px;
    }
}

.moduly-section {
    margin-top: 30px;
    padding: 40px 0;
    background-color: white;
}

.moduly-section-gmina {
    padding: 20px 0;
    background-color: white;
}

.moduly-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
}

.moduly-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    text-align: left;
    margin-bottom: -25px;
}

.moduly-title-site {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    text-align: left;
    margin-bottom: 10px;
}

.moduly-text {
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    color: #333;
    margin: 0 0 40px 0;
    line-height: 1.6;
}

/* Grid */
.moduly-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 25px 0; 
}

.modul-card {
    position: relative;
    padding: 30px;
    border-radius: 12px;
    height: 210px;
    cursor: pointer;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
    overflow: hidden;
    text-decoration: none;
    display: block;
}

.modul-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Warstwa ze zdjęciem w tle */
.modul-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: filter 0.4s ease;
}

.modul-card:hover .modul-bg-image {
    filter: blur(4px);
}

/* Overlay z gradientem */
.modul-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Hover - rozjaśnienie gradientu */
.modul-card:hover .modul-overlay {
    opacity: 0.85;
}

/* Default content - wycentrowany wertykalnie */
.modul-default-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.modul-card:hover .modul-default-content {
    opacity: 0;
}

/* Header z ikoną i tytułem */
.modul-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modul-icon {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modul-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.modul-name {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    line-height: 1.3;
    font-family: var(--font-primary);
    flex: 1;
}

/* Hover content - opis na górze, CTA na dole */
.modul-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.modul-card:hover .modul-hover-content {
    opacity: 1;
}

/* Opis na hover */
.modul-description {
    color: white;
    font-size: 15px;
    line-height: 1.6;
    font-weight: var(--font-weight-normal);
    font-family: var(--font-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.modul-description p {
    margin: 0;
    color: rgba(255,255,255,0.95) !important;
}

/* CTA (Przejdź do portalu + strzałka) */
.modul-cta {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 15px;
}

.modul-hover-text {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: white;
    font-family: var(--font-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.modul-hover-arrow {
    font-size: 24px;
    color: white;
    transition: transform var(--transition-ease);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.modul-card:hover .modul-hover-arrow {
    transform: translateX(5px);
}

/* Przycisk Zobacz wszystkie */
.moduly-button-wrapper {
    text-align: center;
}

.moduly-button-wrapper-site {
    text-align: center;
    margin-bottom: 50px;
}

.moduly-button {
    display: inline-block;
    padding: 14px 40px;
    background: transparent;
    border: 2px solid #e2e2e2;
    color: black;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
}

.moduly-button:hover {
    background: #e2e2e2;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .moduly-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .moduly-section-gmina {
        padding: 50px 5px;
    }
    .moduly-section {
        padding: 50px 5px;
    }

    .moduly-title {
        font-size: 28px;
    }
    
    .moduly-text {
        font-size: var(--font-size-base);
        margin-bottom: 30px;
    }
    
    .moduly-grid {
        gap: 15px;
        margin-bottom: 40px;
    }
    
    .modul-card {
        padding: 25px;
        min-height: 120px;
    }
    
    .modul-icon {
        width: 45px;
        height: 45px;
    }
    
    .modul-name {
        font-size: 16px;
    }

    .modul-hover-arrow {
        font-size: 10px;
    }
    
    .modul-description {
        font-size: 10px;
    }
    
    .modul-hover-text {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .moduly-section-gmina {
        padding: 40px 5px;
    }

    .moduly-section {
        padding: 40px 5px;
    }
    
    .moduly-title {
        font-size: 24px;
    }
    
    .moduly-grid {
        grid-template-columns: 1fr;
    }
    
    .modul-card {
        padding: 20px;
        height: 80px;
    }
}

.partnerzy-section {
    padding: 20px 0 40px;
    background: #fff;
}

.partnerzy-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.partnerzy-title {
    font-size: 30px;
    color: var(--color-headers);
    font-weight: 700;
    text-align: left;
}

.partnerzy-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.partnerzy-slider {
    flex: 1;
    overflow: hidden;
}

.partnerzy-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
}

.partner-slide {
    flex: 0 0 calc((100% - 60px) / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 12px;
    min-height: 150px;
}

.partner-slide img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.partnerzy-arrow {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: none;
    background: #e2e2e2;
    color: black;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.partnerzy-arrow:hover {
    background: #cfcfcf;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.partnerzy-arrow:active {
    transform: scale(0.95);
}

@media (max-width: 968px) {
    .partner-slide {
        flex: 0 0 calc((100% - 30px) / 2);
    }
}

@media (max-width: 600px) {
    .partnerzy-slider-wrapper {
        gap: 10px;
    }

    .partnerzy-container {
        padding: 20px 5px;
    }
    
    .partner-slide {
        flex: 0 0 100%;
    }
    
    .partnerzy-arrow {
        width: 40px;
        height: 40px;
        font-size: 1em;
    }
    
    .partnerzy-title {
        font-size: 1.8em;
        margin-bottom: 30px;
    }
}

/* Sekcja Wpisów */
.wpisy-section {
    padding: 40px var(--spacing-lg);
    background-color: #f8f9fa;
}

.wpisy-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.wpisy-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    text-align: left;
    margin-bottom: -10px;
}

.wpisy-text {
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    color: var(--color-paragraph);
}

.wpisy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 25px 0; 
}

.wpis-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.wpis-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.wpis-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.wpis-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.wpis-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-ease);
}

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

.wpis-content {
    padding: 25px;
}

.wpis-category {
    display: inline-block;
    background-color: #e2e2e2;
    color: black;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.wpis-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.wpis-title a {
    color: var(--color-headers);
    text-decoration: none;
    transition: color var(--transition-ease);
}

.wpis-title a:hover {
    color: var(--color-button);
}

.wpis-excerpt {
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--color-paragraph);
    line-height: 1.6;
    margin-bottom: 20px;
}

.wpis-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
}

.wpis-date {
    font-size: 14px;
    color: var(--color-paragraph);
    font-weight: var(--font-weight-normal);
}

.wpisy-button-wrapper {
    text-align: center;
}

.wpisy-button {
    display: inline-block;
    padding: 14px 40px;
    background: transparent;
    border: 2px solid #e2e2e2;
    color: black;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
}

.wpisy-button:hover {
    background: #e2e2e2;
    transform: translateY(-2px);
}

/* Responsive Wpisy */
@media (max-width: 1024px) {
    .wpisy-section {
        padding: 60px var(--spacing-lg);
    }
    
    .wpisy-title {
        font-size: 36px;
    }
    
    .wpisy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .wpisy-section {
        padding: 50px var(--spacing-md);
    }
    
    .wpisy-title {
        font-size: 32px;
    }
    
    .wpisy-text {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .wpisy-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .wpis-image {
        height: 200px;
    }
    
    .wpis-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .wpisy-section {
        padding: 40px 5px;
    }
    
    .wpisy-title {
        font-size: 28px;
    }
    
    .wpis-content {
        padding: 20px;
    }
    
    .wpisy-button {
        padding: 12px 30px;
        font-size: 14px;
    }
}

/* Kontakt Hero Section */
.kontakt-hero-section {
    position: relative;
    min-height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 40px 0;
    z-index: 100;
}

/* Slider w tle */
.kontakt-hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.kontakt-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.kontakt-hero-slide.active {
    opacity: 1;
}

.kontakt-hero-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: -340px;
}

.kontakt-hero-content {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.kontakt-hero-wrapper {
    position: relative;
    background: rgb(248, 248, 248);
    border-radius: var(--border-radius);
    width: 1340px;
    height: 100px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 25px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.kontakt-hero-wrapper-inner {
    display: flex;
    align-items: center;
    gap: 25px;
}

.hero-logo-kontakt {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-kontakt img {
    max-height: 70px;
    width: auto;
}

.hero-logo-kontakt .custom-logo-link {
    display: inline-block;
}

.kontakt-hero-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0;
}

.kontakt-hero-title .title-small {
    font-size: 14px;
    font-weight: 400;
    display: block;
    margin-bottom: -35px;
    margin-left: 5px;
}

.kontakt-hero-text {
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--color-paragraph);
    margin: 0;
    max-width: 600px;
}

/* Responsive Kontakt Hero */
@media (max-width: 1024px) {
    .kontakt-hero-section {
        min-height: unset;
        padding: 50px var(--spacing-lg);
    }
    
    .kontakt-hero-container {
        padding: 0 var(--spacing-lg);
        margin-bottom: -300px;
    }
    
    .kontakt-hero-wrapper {
        padding: 18px 25px;
        gap: 20px;
        height: fit-content;
    }
    
    .hero-logo-kontakt img {
        max-height: 100px;
    }
    
    .kontakt-hero-title {
        font-size: 38px;
    }
    
    .breadcrumbs {
        align-self: flex-start;
        font-size: 8px;
    }
}

@media (max-width: 768px) {
    .kontakt-hero-section {
        max-height: 350px;
        padding: 60px var(--spacing-md);
    }
    
    .kontakt-hero-container {
        padding: 0 var(--spacing-md);
        margin-bottom: -100px;
    }
    
    .kontakt-hero-wrapper {
        padding: 15px 20px;
        gap: 15px;
    }
    
    .hero-logo-kontakt img {
        max-height: 80px;
    }

    .kontakt-hero-title .title-small {
        margin-bottom: -25px;
        margin-left: 2px;
    }
    
    .kontakt-hero-title {
        text-align: left;
        font-size: 32px;
    }
    
    .kontakt-hero-text {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .kontakt-hero-wrapper {
        flex-direction: column;
        padding: 12px 18px;
        gap: 12px;
    }
    
    .hero-logo-kontakt img {
        max-height: 60px;
    }
    
    .kontakt-hero-title {
        font-size: 22px;
    }
    
    .kontakt-hero-text {
        font-size: 15px;
    }
}

.breadcrumbs-container {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: left;
}

.breadcrumbs-container-special {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
}

.breadcrumbs {
    flex-shrink: 0;
    align-self: center;
}

/* Breadcrumbs Styling */
.breadcrumbs {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    max-width: max-content;
    border-radius: var(--border-radius);
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 50px;
}

.breadcrumbs a {
    color: var(--color-button);
    text-decoration: none;
    transition: color var(--transition-ease);
}

.breadcrumbs a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

.breadcrumbs span {
    color: var(--color-headers);
    font-weight: var(--font-weight-bold);
}

/* Sekcja Formularza Kontaktowego */
.kontakt-form-section {
    padding: 40px var(--spacing-lg);
    background-color: white;
    margin-top: 30px;
}

.kontakt-form-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.kontakt-form-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Zdjęcie Kontakt */
.kontakt-image {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

.kontakt-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Formularz */
.kontakt-form {
    background-color: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.kontakt-form-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 var(--spacing-sm) 0;
}

.kontakt-form-subtitle {
    font-size: 18px;
    color: var(--color-paragraph);
    margin: 0 0 var(--spacing-xl) 0;
    line-height: 1.6;
}

/* Komunikaty */
.form-message {
    padding: 15px 20px;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    font-size: 15px;
    font-weight: 500;
}

.form-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Formularz Style */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-headers);
    margin-bottom: var(--spacing-sm);
}

.required {
    color: #dc3545;
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid #dfe3e8;
    border-radius: var(--border-radius);
    font-size: 15px;
    font-family: var(--font-primary);
    color: var(--color-headers);
    transition: border-color var(--transition-ease), box-shadow var(--transition-ease);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-button);
    box-shadow: 0 0 0 3px rgba(24, 85, 91, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a8b4c0;
}

/* Checkbox */
.form-checkbox {
    margin-top: var(--spacing-sm);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-paragraph);
    font-weight: var(--font-weight-normal);
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-label a {
    color: var(--color-button);
    text-decoration: underline;
}

.checkbox-label a:hover {
    color: var(--color-hover);
}

/* Submit Button */
.form-submit-button {
    background-color: var(--color-button);
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: background-color var(--transition-ease), transform var(--transition-ease);
    align-self: flex-start;
    display: flex;
    gap: 15px;
    align-items: center;
}

.form-submit-button i {
    font-size: 24px;
    color: white;
}

.form-submit-button:hover {
    background-color: var(--color-hover);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .kontakt-form-section {
        padding: 60px var(--spacing-lg);
    }
    
    .kontakt-form-wrapper {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 5px;
    }

    .breadcrumbs-container {
        text-align: center;
        justify-self: center;
        margin-bottom: 25px;
    }

    .breadcrumbs-container-special {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }

    .breadcrumbs {
        margin-bottom: 10px;
        max-width: 100%;
    }

    .kontakt-form-section {
        padding: 50px var(--spacing-md);
    }
    
    .kontakt-form-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .kontakt-image {
        min-height: 300px;
    }
    
    .kontakt-form {
        padding: 30px;
    }
    
    .kontakt-form-title {
        font-size: 28px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .kontakt-form-section {
        padding: 40px var(--spacing-md);
    }
    
    .kontakt-form {
        padding: 25px;
    }
    
    .kontakt-form-title {
        font-size: 24px;
    }
    
    .form-submit-button {
        width: 100%;
    }
}

/* Sekcja Dane Kontaktowe */
.dane-section {
    padding: 40px var(--spacing-lg);
    background-color: #f8f9fa;
}

.dane-container {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.dane-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0;
}

.dane-text {
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    color: var(--color-paragraph);
    margin: 0 auto 50px;
    line-height: 1.6;
    max-width: 700px;
}

.dane-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.dane-card {
    background-color: white;
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease), border-color var(--transition-ease);
}

.dane-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

.dane-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dane-icon i {
    font-size: 32px;
    color: var(--color-headers);
}

.dane-content {
    flex: 1;
    min-width: 0;
}

.dane-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-headers);
    margin: 0 0 5px 0;
}

.dane-value {
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    color: var(--color-paragraph);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

.dane-value a,
a.dane-value {
    color: var(--color-paragraph);
    text-decoration: none;
    transition: color var(--transition-ease);
    display: block;
}

.dane-value a:hover,
a.dane-value:hover {
    color: var(--color-button);
}

/* Responsive Dane */
@media (max-width: 1024px) {
    .dane-section {
        padding: 60px var(--spacing-lg);
    }
    
    .dane-title {
        font-size: 36px;
    }
    
    .dane-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .dane-section {
        padding: 50px var(--spacing-md);
    }
    
    .dane-title {
        font-size: 32px;
    }
    
    .dane-text {
        font-size: 16px;
        margin-bottom: 40px;
    }
    
    .dane-grid {
        gap: 20px;
        margin-top: 40px;
    }
    
    .dane-card {
        padding: 30px 25px;
    }
    
    .dane-icon {
        width: 55px;
        height: 55px;
    }
    
    .dane-icon i {
        font-size: 28px;
    }
    
    .dane-label {
        font-size: 17px;
    }
    
    .dane-value {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .dane-section {
        padding: 40px var(--spacing-md);
    }
    
    .dane-title {
        font-size: 28px;
    }
    
    .dane-card {
        padding: 25px 20px;
        gap: 15px;
    }
    
    .dane-icon {
        width: 50px;
        height: 50px;
    }
    
    .dane-icon i {
        font-size: 26px;
    }
    
    .dane-label {
        font-size: 16px;
    }
    
    .dane-value {
        font-size: 14px;
    }
}

.projekt-section {
    margin-top: 30px;
    padding: 40px var(--spacing-lg);
    background-color: white;
}

/* Statyczne Strony (Polityka, RODO) */
.statyczne-section {
    padding: 40px var(--spacing-lg);
    background-color: white;
}

.statyczne-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.statyczne-header {
    margin-bottom: 30px;
}

.statyczne-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

.statyczne-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-paragraph);
}

.statyczne-meta i {
    font-size: 14px;
}

/* Separator */
.statyczne-separator {
    height: 1px;
    background-color: #E0E6F6;
    margin: 30px 0 40px;
}

/* Treść */
.statyczne-content {
    color: var(--color-paragraph);
    font-size: 16px;
    line-height: 1.8;
}

.statyczne-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 40px 0 20px 0;
    line-height: 1.3;
}

.statyczne-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-headers);
    margin: 30px 0 15px 0;
    line-height: 1.4;
}

.statyczne-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-headers);
    margin: 25px 0 12px 0;
}

.statyczne-content p {
    margin: 0 0 20px 0;
    line-height: 1.8;
}

.statyczne-content ul,
.statyczne-content ol {
    margin: 0 0 25px 0;
    padding-left: 30px;
}

.statyczne-content ul li,
.statyczne-content ol li {
    margin-bottom: 12px;
    line-height: 1.8;
}

.statyczne-content ul {
    list-style-type: disc;
}

.statyczne-content ol {
    list-style-type: decimal;
}

.statyczne-content a {
    color: var(--color-button);
    text-decoration: underline;
    transition: color var(--transition-ease);
}

.statyczne-content a:hover {
    color: var(--color-hover);
}

.statyczne-content strong {
    font-weight: 600;
    color: var(--color-headers);
}

.statyczne-content em {
    font-style: italic;
}

.statyczne-content blockquote {
    border-left: 4px solid var(--color-button);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    color: var(--color-paragraph);
}

.statyczne-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

.statyczne-content table th,
.statyczne-content table td {
    padding: 12px 15px;
    border: 1px solid #e5e5e5;
    text-align: left;
}

.statyczne-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--color-headers);
}

.statyczne-content table tr:hover {
    background-color: #f8f9fa;
}

/* Responsive */
@media (max-width: 1024px) {
    .statyczne-section {
        padding: 60px var(--spacing-lg);
    }
    
    .statyczne-title {
        font-size: 36px;
    }
    
    .statyczne-content h2 {
        font-size: 26px;
    }
    
    .statyczne-content h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .statyczne-section {
        padding: 50px var(--spacing-md);
    }
    
    .statyczne-container {
        max-width: 100%;
    }
    
    .statyczne-title {
        font-size: 32px;
    }
    
    .statyczne-content {
        font-size: 15px;
    }
    
    .statyczne-content h2 {
        font-size: 24px;
        margin: 35px 0 18px 0;
    }
    
    .statyczne-content h3 {
        font-size: 19px;
        margin: 28px 0 14px 0;
    }
    
    .statyczne-content ul,
    .statyczne-content ol {
        padding-left: 25px;
    }
}

@media (max-width: 480px) {
    .statyczne-section {
        padding: 40px var(--spacing-md);
    }
    
    .statyczne-title {
        font-size: 28px;
    }
    
    .statyczne-meta {
        font-size: 13px;
    }
    
    .statyczne-content {
        font-size: 14px;
    }
    
    .statyczne-content h2 {
        font-size: 22px;
    }
    
    .statyczne-content h3 {
        font-size: 18px;
    }
    
    .statyczne-content h4 {
        font-size: 16px;
    }
    
    .statyczne-content ul,
    .statyczne-content ol {
        padding-left: 20px;
    }
    
    .statyczne-content table {
        font-size: 13px;
    }
    
    .statyczne-content table th,
    .statyczne-content table td {
        padding: 10px 12px;
    }
}

/* Aktualności Section */
.aktualnosci-section {
    margin-top: 30px;
    padding: 40px 0;
    background-color: white;
}

.aktualnosci-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Header i tekst NAD gridami */
.aktualnosci-header-wrapper {
    margin-bottom: 50px;
}

.aktualnosci-naglowek {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0;
    font-family: var(--font-primary);
}

.aktualnosci-tekst {
    font-size: 18px;
    color: var(--color-paragraph);
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
}

/* Main wrapper - content + sidebar obok siebie */
.aktualnosci-main-wrapper {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.aktualnosci-content {
    flex: 1;
}

/* Grid Wpisów - 2 kolumny - BEZ STYLOWANIA wpis-card! */
.wpisy-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}

/* No Posts Message */
.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px var(--spacing-lg);
    background: white;
    border-radius: var(--border-radius);
}

.no-posts p {
    font-size: var(--font-size-base);
    color: var(--color-paragraph);
    font-family: var(--font-primary);
}

/* Paginacja */
.wpisy-pagination {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.pagination-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #E0E6F6;
    border-radius: 50%;
    color: var(--color-paragraph);
    text-decoration: none;
    transition: all var(--transition-ease);
}

.pagination-arrow:hover {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
}

.pagination-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.pagination-arrow i {
    font-size: 14px;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-number {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #E0E6F6;
    border-radius: var(--border-radius);
    color: var(--color-paragraph);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-ease);
    padding: 0 12px;
    font-family: var(--font-primary);
}

.pagination-number:hover {
    background: #F8F9FA;
    border-color: var(--color-button);
    color: var(--color-button);
}

.pagination-number.pagination-current {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
    font-weight: var(--font-weight-bold);
}

.pagination-dots {
    color: var(--color-paragraph);
    padding: 0 4px;
    font-size: 14px;
}

/* Wyszukiwarka */
.aktualnosci-search-box {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.aktualnosci-search-box .sidebar-title {
    display: block;
    margin-bottom: 25px !important;
    font-weight: 600;
    color: #333;
    cursor: pointer;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    gap: 10px;
}

.post-search-input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-primary);
    transition: border-color 0.3s ease;
}

.post-search-input:focus {
    outline: none;
    border-color: var(--color-button);
}

.search-btn {
    width: 45px;
    height: 45px;
    background: var(--color-button);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.search-btn:hover {
    background: var(--color-hover);
}

/* Sidebar Categories */
.aktualnosci-sidebar {
    top: 100px;
}

.aktualnosci-categories-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.aktualnosci-categories-box .sidebar-title,
.aktualnosci-search-box .sidebar-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-headers);
    margin-top: 0;
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

.categories-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Category Filter Buttons */
.category-filter-btn {
    width: 100%;
    padding: 14px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-paragraph);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-filter-btn:hover {
    background: #e9ecef;
    border-color: var(--color-button);
    transform: translateX(3px);
}

.category-filter-btn.active {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
}

.category-filter-btn.active .category-count {
    color: rgba(255,255,255,0.8);
}

.category-count {
    font-size: 14px;
    color: #adb5bd;
    font-weight: 400;
}

/* Paginacja */
.wpisy-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination-number,
.pagination-arrow {
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-paragraph);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-number:hover,
.pagination-arrow:hover {
    background: #f8f9fa;
    border-color: var(--color-button);
    color: var(--color-button);
}

.pagination-current {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
}

.pagination-current:hover {
    background: var(--color-button);
    color: white;
}

.pagination-dots {
    padding: 0 8px;
    color: #adb5bd;
    font-size: 15px;
}

/* No Results Message */
.no-results-message {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.no-results-message p {
    font-size: 18px;
    color: var(--color-paragraph);
    margin: 0;
}

/* Sidebar Info */
.sidebar-info {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.sidebar-info .sidebar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-headers);
    margin-bottom: 15px;
    font-family: var(--font-primary);
}

.sidebar-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-paragraph);
    font-family: var(--font-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .aktualnosci-main-wrapper {
        flex-direction: column;
    }
    
    .aktualnosci-sidebar {
        position: static;
        order: -1;
        margin-bottom: 30px;
    }
    
    .categories-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .category-filter-btn {
        width: auto;
        flex: 1;
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .wpisy-archive-grid {
        grid-template-columns: 1fr;
    }
    .aktualnosci-search-box,
    .aktualnosci-categories-box {
        padding: 20px;
    }
    
    .category-filter-btn {
        font-size: 14px;
        padding: 12px 16px;
    }
    
    .pagination-number,
    .pagination-arrow {
        min-width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .categories-buttons {
        flex-direction: column;
    }
    
    .category-filter-btn {
        width: 100%;
    }
}

/* Recent Posts */
.recent-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recent-post-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--border-radius);
    transition: background var(--transition-ease);
}

.recent-post-item:hover {
    background: #F8F9FA;
}

.recent-post-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.recent-post-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.recent-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-ease);
}

.recent-post-item:hover .recent-post-image img {
    transform: scale(1.1);
}

.recent-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recent-post-title {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    margin: 0;
    font-family: var(--font-primary);
}

.recent-post-title a {
    color: var(--color-headers);
    text-decoration: none;
    transition: color var(--transition-ease);
}

.recent-post-title a:hover {
    color: var(--color-button);
}

.recent-post-date {
    font-size: 12px;
    color: var(--color-paragraph);
    font-family: var(--font-primary);
}

/* Loader styles */
.wpisy-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--border-radius);
}

.loader-spinner {
    text-align: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #F8F9FA;
    border-top: 4px solid var(--color-button);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-spinner p {
    color: var(--color-paragraph);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-primary);
}

/* Clear filters button */
.clear-filters-btn {
    width: 100%;
    padding: 12px;
    margin-top: 16px;
    background: white;
    border: 2px solid var(--color-button);
    border-radius: var(--border-radius);
    color: var(--color-button);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
}

.clear-filters-btn:hover {
    background: var(--color-button);
    color: white;
}

/* Filter count badge */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm);
    background: var(--color-button);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    margin-left: var(--spacing-sm);
}

.filter-active {
    background: #E3F2FD !important;
}

.search-input.has-active-search {
    border-color: var(--color-button);
    background: #F8F9FA;
}

/* Responsive */
@media (max-width: 1200px) {
    .aktualnosci-main-wrapper {
        flex-direction: column;
    }
    
    .aktualnosci-content {
        max-width: 100%;
    }
    
    .aktualnosci-sidebar {
        width: 100%;
        max-width: 100%;
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .aktualnosci-section {
        padding: 60px var(--spacing-md);
    }
    
    .aktualnosci-header-wrapper {
        margin-bottom: 40px;
    }
    
    .wpisy-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .aktualnosci-naglowek {
        font-size: 28px;
    }
    
    .pagination-numbers {
        gap: 4px;
    }
    
    .pagination-number,
    .pagination-arrow {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .aktualnosci-section {
        padding: 40px var(--spacing-md);
    }
    
    .aktualnosci-container {
        padding: 0;
    }
    
    .aktualnosci-header-wrapper {
        margin-bottom: var(--spacing-xl);
    }
    
    .sidebar-search,
    .sidebar-filter,
    .sidebar-recent {
        padding: 16px;
    }
    
    .recent-post-image {
        width: 60px;
        height: 60px;
    }
}

.single-hero {
    padding: 60px var(--spacing-lg) 40px;
    background-color: white;
}

.single-hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
}

/* Lewa strona - 50% */
.single-hero-left {
    flex: 1;
    max-width: 50%;
}

/* Meta - Data i Autor w linii */
.single-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.single-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-paragraph);
    font-family: var(--font-primary);
}

.single-meta-item i {
    font-size: 16px;
    color: var(--color-button);
}

/* Tytuł wpisu */
.single-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 var(--spacing-lg) 0;
    font-family: var(--font-primary);
}

/* Kategorie */
.single-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.single-category {
    display: inline-block;
    background-color: #e2e2e2;
    color: black;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    text-decoration: none;
}

/* Prawa strona - 50% */
.single-hero-right {
    flex: 1;
    max-width: 50%;
}

.single-featured-image {
    width: 100%;
}

.single-featured-image img {
    width: auto;
    border-radius: var(--border-radius);
    height: 350px;
    display: block;
}

/* Separator */
.single-separator {
    height: 1px;
    background-color: #E0E6F6;
    max-width: var(--max-width);
    margin: 40px auto;
}

/* Content Section */
.single-content-section {
    padding: 40px var(--spacing-lg);
    background-color: white;
}

.single-content-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.single-content {
    color: var(--color-paragraph);
    font-size: var(--font-size-base);
    line-height: 1.8;
    font-family: var(--font-primary);
}

.single-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 40px 0 var(--spacing-lg) 0;
    line-height: 1.3;
    font-family: var(--font-primary);
}

.single-content h3 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    line-height: 1.4;
    font-family: var(--font-primary);
}

.single-content h4 {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    font-family: var(--font-primary);
}

.single-content p {
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.8;
}

.single-content ul,
.single-content ol {
    margin: 0 0 var(--spacing-lg) 0;
    padding-left: var(--spacing-xl);
}

.single-content ul li,
.single-content ol li {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.single-content ul {
    list-style-type: disc;
}

.single-content ol {
    list-style-type: decimal;
}

.single-content a {
    color: var(--color-button);
    text-decoration: underline;
    transition: color var(--transition-ease);
}

.single-content a:hover {
    color: var(--color-hover);
}

.single-content strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
}

.single-content em {
    font-style: italic;
}

.single-content blockquote {
    border-left: 4px solid var(--color-button);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    font-style: italic;
    color: var(--color-paragraph);
}

.single-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: var(--spacing-lg) 0;
}

.single-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
}

.single-content table th,
.single-content table td {
    padding: 12px var(--spacing-md);
    border: 1px solid #E0E6F6;
    text-align: left;
}

.single-content table th {
    background-color: #F8F9FA;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
}

.single-content table tr:hover {
    background-color: #F8F9FA;
}

/* Navigation Section */
.single-navigation {
    padding: 40px var(--spacing-lg);
    background-color: white;
}

.single-navigation-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

/* Nav Items */
.single-nav-item {
    flex: 1;
}

.single-nav-prev {
    text-align: left;
}

.single-nav-next {
    text-align: right;
}

.nav-post-empty {
    height: 1px;
}

.nav-post-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: #F8F9FA;
    text-decoration: none;
    transition: all var(--transition-ease);
}

.nav-post-link:hover {
    background: #e2e2e2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.single-nav-next .nav-post-link {
    flex-direction: row-reverse;
}

.nav-post-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.nav-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-post-content {
    flex: 1;
    min-width: 0;
}

.nav-post-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
    color: var(--color-paragraph);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    margin-bottom: 6px;
    font-family: var(--font-primary);
}

.single-nav-next .nav-post-label {
    justify-content: flex-end;
}

.nav-post-label i {
    font-size: 10px;
}

.nav-post-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    line-height: 1.4;
    margin: 0;
    font-family: var(--font-primary);
}

/* Center Button */
.single-nav-center {
    flex-shrink: 0;
}

.btn-back-to-posts {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 28px;
    background-color: transparent;
    color: black;
    border-radius: var(--border-radius);
    border: 2px solid #e2e2e2;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
    white-space: nowrap;
}

.btn-back-to-posts:hover {
    background-color: #e2e2e2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-back-to-posts i {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
    .single-hero-container {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .single-featured-image img {
        max-width: 100%;
        height: auto;
    }
    
    .single-hero-left,
    .single-hero-right {
        max-width: 100%;
    }
    
    .single-title {
        font-size: 36px;
    }
    
    .single-navigation-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .single-nav-item {
        width: 100%;
    }
    
    .single-nav-center {
        order: -1;
    }
}

@media (max-width: 768px) {
    .single-hero {
        padding: 40px var(--spacing-md);
    }
    
    .single-title {
        font-size: 28px;
    }
    
    .single-meta {
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .single-content-section {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .single-content h2 {
        font-size: 28px;
    }
    
    .single-content h3 {
        font-size: 22px;
    }
    
    .single-navigation {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .nav-post-link {
        padding: var(--spacing-sm);
    }
    
    .nav-post-image {
        width: 60px;
        height: 60px;
    }
    
    .nav-post-title {
        font-size: 14px;
    }
    
    .btn-back-to-posts {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .single-hero {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .single-title {
        font-size: 24px;
    }
    
    .single-meta-item {
        font-size: 13px;
    }
    
    .single-content {
        font-size: 15px;
    }
    
    .single-content h2 {
        font-size: 24px;
    }
    
    .single-content h3 {
        font-size: 20px;
    }
    
    .single-separator {
        margin: var(--spacing-lg) auto;
    }
    
    .nav-post-link {
        flex-direction: column !important;
        text-align: center;
    }
    
    .single-nav-next .nav-post-link {
        flex-direction: column !important;
    }
    
    .nav-post-label {
        justify-content: center !important;
    }
}

/* Kontakt i Serwisy */
.gmina-info-section {
    padding: 40px 0;
    margin: 30px auto 0;
}

.gmina-info-flex {
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--spacing-xl);
    margin: 0 auto;
}

.gmina-kontakt h2,
.gmina-serwisy h2 {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: 0 0 var(--spacing-lg) 0;
    font-family: var(--font-primary);
}

.kontakt-list {
    background: white;
    border-radius: var(--border-radius);
}

.kontakt-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid #eee;

}

.kontakt-item:last-child {
    border-bottom: none;
}

.kontakt-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #9b9c9c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.kontakt-text strong {
    display: block;
    font-size: 14px;
    color: var(--color-headers);
    margin-bottom: 4px;
    font-weight: var(--font-weight-bold);
}

.kontakt-text p {
    margin: 0;
    color: var(--color-paragraph);
}

.kontakt-text a {
    color: var(--color-button);
    text-decoration: none;
    transition: color var(--transition-ease);
}

.kontakt-text a:hover {
    color: var(--color-paragraph);
}

/* Serwisy Grid */
.serwisy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.serwis-card {
    position: relative;
    color: white;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    overflow: hidden;
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
}

.serwis-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.serwis-card:hover .serwis-bg {
    transform: scale(1.05);
}

/* Tło ze zdjęciem */
.serwis-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Overlay */
.serwis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(24, 85, 91, 0.9) 0%, rgba(24, 85, 91, 0.75) 100%);
    z-index: 1;
    transition: background 0.4s ease;
}

/* POPRAWKA: hover na karcie zmienia overlay */
.serwis-card:hover .serwis-overlay {
    background: linear-gradient(
        to bottom,
        #196e75c4 0%,
        #196e75c4 100%
    );
}

/* Zawartość karty */
.serwis-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: var(--spacing-md) var(--spacing-lg);
    width: 100%;
    pointer-events: none; /* Przepuszcza hover do rodzica */
}

/* Ikona z blurem */
.serwis-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    flex-shrink: 0;
}

.serwis-icon i {
    font-size: 26px;
    color: white;
}

.serwis-text {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: 0.5px;
    flex-grow: 1; /* Wypełnia przestrzeń między ikoną a strzałką */
}

/* Strzałka przy prawej krawędzi */
.serwis-arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.serwis-arrow i {
    font-size: 16px;
    color: white;
}

/* Animacja strzałki na hover */
.serwis-card:hover .serwis-arrow {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(5px);
}

/* O Gminie */
.gmina-about-section {
    max-width: var(--max-width);
    padding: 20px 0;
    background: white;
    margin: 0 auto;
}

.gmina-about-flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: flex-start;
}

.gmina-about-text h2 {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: 0 0 var(--spacing-lg) 0;
    font-family: var(--font-primary);
}

.gmina-about-text p {
    font-size: 14px;
    color: var(--color-paragraph);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
}

.gmina-about-image-slider {
    position: relative;
}

.slider-wrapper {
    position: relative;
    width: 100%;
}

.gmina-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.gmina-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.gmina-slide.active {
    position: relative;
    opacity: 1;
}

.gmina-slide img {
    margin-top: 60px;
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    border-radius: var(--border-radius);
}

/* Strzałki nawigacyjne */
.gmina-slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.gmina-slider-arrow {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid #e2e2e2;
    background: transparent;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
}

.gmina-slider-arrow:hover {
    background: #e2e2e2;
    color: black;
    transform: scale(1.1);
}

.gmina-slider-arrow:active {
    transform: scale(0.95);
}

.gmina-slider-arrow i {
    pointer-events: none;
}

.gmina-about-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Portale i Aktualności */
.gmina-portale-section,
.gmina-aktualnosci-section {
    padding: 60px 0;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-title {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: 0 0 50px 0;
    font-family: var(--font-primary);
}

.section-subtitle {
    font-size: 18px;
    color: var(--color-paragraph);
    margin: 0 0 var(--spacing-xl) 0;
}

/* Portale Grid */
.portale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
}

.portal-card {
    position: relative;
    padding: var(--spacing-xl);
    border-radius: calc(var(--border-radius) * 2);
    min-height: 180px;
    cursor: pointer;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
    overflow: hidden;
}

.portal-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.portal-default-content {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
    transition: opacity var(--transition-ease);
}

.portal-card:hover .portal-default-content {
    opacity: 0;
}

.portal-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: calc(var(--border-radius) * 1.5);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.portal-name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    line-height: 1.3;
}

.portal-hover-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity var(--transition-ease);
}

.portal-card:hover .portal-hover-content {
    opacity: 1;
}

.portal-opis {
    font-size: var(--font-size-base);
    color: white;
    line-height: 1.6;
    text-align: left;
    margin: 0 0 var(--spacing-lg) 0;
}

.portal-link {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all var(--transition-ease);
    text-decoration: none;
}

.portal-link:hover {
    background: rgba(255,255,255,0.5);
    transform: scale(1.1);
}

/* Aktualności Grid */
.aktualnosci-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.aktualnosc-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
}

.aktualnosc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.aktualnosc-image {
    overflow: hidden;
}

.aktualnosc-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition-ease);
}

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

.aktualnosc-content {
    padding: var(--spacing-lg);
}

.aktualnosc-meta {
    margin-bottom: var(--spacing-sm);
}

.aktualnosc-date {
    font-size: 14px;
    color: var(--color-paragraph);
}

.aktualnosc-date i {
    margin-right: 5px;
}

.aktualnosc-title a {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-ease);
}

.aktualnosc-title a:hover {
    color: var(--color-button);
}

.aktualnosc-excerpt {
    color: var(--color-paragraph);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.aktualnosc-link {
    color: var(--color-button);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: 14px;
    transition: color var(--transition-ease);
}

.aktualnosc-link:hover {
    color: var(--color-hover);
}

.aktualnosc-link i {
    margin-left: 5px;
    font-size: 12px;
}

/* Przyciski */
.aktualnosci-button-wrapper {
    text-align: center;
}

.aktualnosci-button {
    display: inline-block;
    padding: 14px 40px;
    background: transparent;
    border: 2px solid #e2e2e2;
    color: black;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    transition: all var(--transition-ease);
    font-family: var(--font-primary);
}

.aktualnosci-button:hover {
    background: #e2e2e2;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 968px) {
    .hero-title {
        font-size: 32px;
    }
    
    .gmina-info-flex,
    .gmina-about-flex {
        grid-template-columns: 1fr;
    }
    
    .serwisy-grid,
    .portale-grid,
    .aktualnosci-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 24px;
    }
    
    .serwisy-grid,
    .portale-grid,
    .aktualnosci-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 28px;
    }
}

.rejestr-nav-section {
    margin-top: 30px;
    padding: 40px 0 0;
    background: white;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.rejestr-nav-buttons {
    max-width: var(--max-width);
    margin: -80px auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.nav-button {
    padding: 14px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-primary);
    transition: all var(--transition-ease);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-button-back {
    padding: 12px 28px;
    background: white;
    color: var(--color-headers);
    border: 2px solid #e2e2e2;
}

.nav-button-back:hover {
    background: #e2e2e2;
}

.nav-button-geoportal {
    background: var(--color-button);
    color: white;
}

.nav-button-geoportal:hover {
    background: var(--color-hover);
}

.rejestry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.rejestr-category-card {
    padding: 40px var(--spacing-lg);
    border-radius: var(--border-radius);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
}

.rejestr-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.rejestr-category-card h3 {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    font-family: var(--font-primary);
    text-transform: uppercase;
    line-height: 1.3;
}

/* Dokumenty */
.dokumenty-section {
    padding: 40px 0;
    background: #f8f9fa;
}

.dokumenty-column {
    width: 100%;
    margin-bottom: 60px;
}

.dokumenty-column:last-child {
    margin-bottom: 0;
}

.dokumenty-column .section-title {
    margin-bottom: 30px;
}

.dokumenty-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 1400px) {
    .dokumenty-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .dokumenty-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dokumenty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .dokumenty-grid {
        grid-template-columns: 1fr;
    }
}

.dokument-card {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    text-align: center;
    transition: all var(--transition-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dokument-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.dokument-name {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-headers);
    margin: 0 0 var(--spacing-md) 0;
    font-family: var(--font-primary);
    line-height: 1.6;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dokument-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.dokument-download,
.dokument-zalatwienie {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
}

.dokument-download {
    background: white;
    color: var(--color-headers);
    border: 2px solid #e9ecef;
}

.dokument-download:hover {
    background: #f8f9fa;
    border-color: var(--color-button);
}

.dokument-zalatwienie {
    background: var(--color-button);
    color: white;
}

.dokument-zalatwienie:hover {
    background: var(--color-hover);
}

.dokument-download i,
.dokument-zalatwienie i {
    font-size: 16px;
}

.no-files {
    text-align: center;
    padding: 60px 20px;
}

.no-files p {
    font-size: 18px;
    color: var(--color-paragraph);
}

/* CTA Buttons na dole */
.cta-buttons-section {
    padding: 60px 0;
    background: white;
}

.cta-button-large {
    background: var(--color-button);
    padding: 30px 40px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: white;
    font-family: var(--font-primary);
    transition: all var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 150px;
}

.cta-button-large:hover {
    background: var(--color-hover);
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.cta-button-large:hover .cta-arrow {
    transform: translateX(5px);
}

/* Lewa strona - ikona i content */
.cta-left {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.cta-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(7px);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.cta-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cta-title {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.3;
}

.cta-description {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: rgba(255,255,255,0.9);
    margin: 0;
    line-height: 1.5;
}

/* Prawa strona - link i strzałka */
.cta-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.cta-link-text {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: white;
    white-space: nowrap;
}

.cta-arrow {
    font-size: 24px;
    color: white;
    transition: transform var(--transition-ease);
}

/* Responsywność */
@media (max-width: 768px) {
    .cta-button-large {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    
    .cta-left {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-right {
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .rejestry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dokumenty-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .rejestr-nav-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .nav-button {
        text-align: center;
        justify-content: center;
    }
    
    .rejestry-grid {
        grid-template-columns: 1fr;
    }
    
    .dokumenty-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cta-buttons-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dokumenty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dokument-icon {
        width: 60px;
        height: 60px;
    }
    
    .dokument-icon i {
        font-size: 30px;
    }
    
    .dokument-name {
        font-size: 13px;
    }
}

.rejestry-bottom-section {
    margin-top: -70px;
}

/* ========================================
   SEKCJE
   ======================================== */
.rejestry-categories-section {
    padding: 40px 0;
    background: white;
}

.rejestry-bottom-section .section-title {
    margin: 25px 0;
}

/* ========================================
   DOKUMENTY KAFLE - STARY STYL (kolumnowy)
   ======================================== */
.dokumenty-kafle-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dokument-kafel-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-radius: 12px;
    text-decoration: none;
    height: 140px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dokument-kafel-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.dokument-kafel-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.5s ease;
}

.dokument-kafel-card:hover .dokument-kafel-bg {
    transform: scale(1.05);
}

.dokument-kafel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.dokument-kafel-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 25px;
}

.dokument-kafel-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dokument-kafel-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.dokument-kafel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dokument-kafel-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 -10px;
}

.dokument-kafel-desc {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.dokument-kafel-arrow {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.dokument-kafel-card:hover .dokument-kafel-arrow {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.3);
}

.dokument-kafel-arrow i {
    color: #fff;
    font-size: 18px;
}

.rejestry-kafle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.rejestr-kafel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    border: 2px solid #e2e2e2;
    background: #fff;
    transition: box-shadow 0.3s ease;
}

.rejestr-kafel-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.rejestr-kafel-overlay {
    display: none;
}

.rejestr-kafel-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
    flex: 1;
}

.rejestr-kafel-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

/* Ikona */
.rejestr-kafel-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rejestr-kafel-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none; /* Usunięty invert - ikona będzie czarna */
}

/* Tytuł */
.rejestr-kafel-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.3;
}

/* Opis - z edytora WYSIWYG */
.rejestr-kafel-desc {
    font-size: 12px;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
}

.rejestr-kafel-desc p {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #333;
}

.rejestr-kafel-desc p:last-child {
    margin-bottom: 15px;
}

.rejestr-kafel-desc ul,
.rejestr-kafel-desc ol {
    margin: 5px 0 5px 15px;
    padding: 0;
    font-size: 12px;
    color: #333;
}

.rejestr-kafel-desc li {
    margin-bottom: 3px;
}

.rejestr-kafel-desc a {
    color: #000;
    text-decoration: underline;
}

.rejestr-kafel-desc a:hover {
    opacity: 0.7;
}

.rejestr-kafel-desc strong,
.rejestr-kafel-desc b {
    font-weight: 600;
    color: #000;
}

/* Zdjęcie - stała wysokość, zawsze na dole contentu */
.rejestr-kafel-image {
    border-radius: 10px;
    overflow: hidden;
    height: 180px;
    margin-top: auto;
}

.rejestr-kafel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pasek na dole - kolorowy gradient */
.rejestr-kafel-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    height: 60px;
}

/* Tekst w pasku */
.rejestr-kafel-bar-text {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

/* Strzałka w pasku */
.rejestr-kafel-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rejestr-kafel-arrow i {
    color: #fff;
    font-size: 16px;
}

@media (max-width: 992px) {
    .rejestry-kafle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rejestry-kafle-grid .rejestr-kafel-card:last-child {
        grid-column: span 2;
    }
    
    .rejestr-kafel-image {
        height: 160px;
    }
}

@media (max-width: 768px) {
    .rejestry-categories-section {
        padding: 10px 0;
    }
    .rejestry-kafle-grid {
        grid-template-columns: 1fr;
    }
    
    .rejestry-kafle-grid .rejestr-kafel-card:last-child {
        grid-column: span 1;
    }
    
    .rejestr-kafel-title {
        font-size: 18px;
    }
    
    .rejestr-kafel-content {
        padding: 20px;
    }
    
    .rejestr-kafel-header {
        gap: 12px;
        margin-bottom: 10px;
    }
    
    .rejestr-kafel-icon {
        width: 45px;
        height: 45px;
        padding: 8px;
    }
    
    .rejestr-kafel-image {
        height: 150px;
    }
    
    .rejestr-kafel-bar {
        padding: 12px 20px;
        height: 55px;
    }
}

@media (max-width: 480px) {
    .rejestr-kafel-content {
        padding: 15px;
    }
    
    .rejestr-kafel-header {
        gap: 10px;
    }
    
    .rejestr-kafel-icon {
        width: 40px;
        height: 40px;
        padding: 8px;
        border-radius: 8px;
    }
    
    .rejestr-kafel-title {
        font-size: 16px;
    }
    
    .rejestr-kafel-desc,
    .rejestr-kafel-desc p,
    .rejestr-kafel-desc ul,
    .rejestr-kafel-desc ol {
        font-size: 11px;
    }
    
    .rejestr-kafel-image {
        height: 130px;
    }
    
    .rejestr-kafel-bar {
        padding: 10px 15px;
        height: 50px;
    }
    
    .rejestr-kafel-bar-text {
        font-size: 14px;
    }
    
    .rejestr-kafel-arrow {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 768px) {
    .dokument-kafel-card {
        padding: 20px;
        height: 120px;
    }
    
    .dokument-kafel-icon {
        width: 55px;
        height: 55px;
    }
    
    .dokument-kafel-title {
        font-size: 16px;
    }
    
    .dokument-kafel-desc {
        font-size: 11px;
    }

    .rejestr-nav-section {
        padding-top: 5px;
        padding-bottom: 50px;
    }
    
    .dokument-kafel-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .rejestr-kafel-card {
        min-height: 300px;
    }
    
    .rejestr-kafel-content {
        padding: 15px;
    }
    
    .rejestr-kafel-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .rejestr-kafel-desc {
        font-size: 11px;
        margin-bottom: 12px;
    }
    
    .rejestr-kafel-bar {
        padding: 10px 15px;
        height: 50px;
    }
    
    .rejestr-kafel-card:hover .rejestr-kafel-bar {
        height: 65px;
        padding: 12px 15px;
    }
    
    .rejestr-kafel-bar-text {
        font-size: 14px;
    }
    
    .rejestr-kafel-arrow {
        width: 35px;
        height: 35px;
    }
    
    .rejestr-kafel-card:hover .rejestr-kafel-arrow {
        width: 40px;
        height: 40px;
    }
    
    /* Dokumenty kafle */
    .dokument-kafel-card {
        padding: 15px;
        height: auto;
        min-height: 100px;
    }
    
    .dokument-kafel-text {
        flex: 1 1 calc(100% - 80px);
    }
    
    .dokument-kafel-arrow {
        margin-left: auto;
    }
}

.rejestry-wybor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rejestr-wybor-card {
    position: relative;
    display: block;
    text-decoration: none;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform var(--transition-ease), box-shadow var(--transition-ease);
}

.rejestr-wybor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.rejestr-wybor-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    transition: background var(--transition-ease);
}

.rejestr-wybor-card:hover .rejestr-wybor-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
}

.rejestr-wybor-content {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
}

.rejestr-wybor-herb {
    margin-bottom: var(--spacing-lg);
}

.rejestr-wybor-herb img {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    transition: transform var(--transition-ease);
}

.rejestr-wybor-card:hover .rejestr-wybor-herb img {
    transform: scale(1.05);
}

.rejestr-wybor-name {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    font-family: var(--font-primary);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform var(--transition-ease);
}

.rejestr-wybor-card:hover .rejestr-wybor-name {
    transform: translateY(-4px);
}

.no-rejestry {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-size: 18px;
    color: var(--color-paragraph);
}

/* Responsive */
@media (max-width: 968px) {
    .rejestr-wybor-card {
        min-height: 350px;
    }
    
    .rejestr-wybor-content {
        min-height: 350px;
    }
    
    .rejestr-wybor-herb img {
        width: 100px;
    }
    
    .rejestr-wybor-name {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .rejestry-wybor-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .rejestr-wybor-card {
        min-height: 300px;
    }
    
    .rejestr-wybor-content {
        min-height: 300px;
    }
    
    .rejestr-wybor-herb img {
        width: 80px;
    }
    
    .rejestr-wybor-name {
        font-size: 20px;
    }
}

/* Portale Section */
.portale-section {
    margin-top: 30px;
    padding: 40px var(--spacing-lg);
    background: white;
}

.portale-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.portale-main-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin-bottom: 40px;
}

/* Layout - Main i Sidebar */
.portale-layout {
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: 40px;
    align-items: start;
}

/* Main Content - Lista portali */
.portale-main {
    width: 100%;
}

.portale-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.portal-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.portal-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Overlay z gradientem */
.portal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: all 0.4s ease;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Hover - tylko rozmycie, kolor pozostaje bez zmian */
.portal-item:hover .portal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.portal-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.portal-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(15px); /* Zwiększone rozmycie */
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.portal-info {
    flex: 1;
}

.portal-name {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0 0 8px 0;
    font-family: var(--font-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Dodane dla lepszej czytelności */
}

.portal-description {
    color: rgba(255,255,255,0.95);
    font-size: 15px;
    line-height: 1.6;
    font-family: var(--font-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Dodane dla lepszej czytelności */
}

.portal-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.portal-category-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    color: white;
    font-weight: 500;
    font-family: var(--font-primary);
    backdrop-filter: blur(10px); /* Zwiększone rozmycie */
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .portal-category-tag {
        font-size: 11px;
        padding: 3px 10px;
    }
}

.portal-description p {
    margin: 0;
    color: rgba(255,255,255,0.95) !important;
}

.portal-arrow {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px); /* Zwiększone rozmycie */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.portal-item:hover .portal-arrow {
    transform: translateX(5px);
}

.portal-arrow i {
    color: white;
    font-size: 18px;
}

.portal-item {
    position: relative;
    overflow: hidden;
}

.portal-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: transform 0.4s ease;
}

.portal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.portal-item:hover .portal-bg-image {
    transform: scale(1.05);
}

.portal-item:hover .portal-overlay {
    opacity: 0.85;
}

/* Upewnij się że content jest nad overlay */
.portal-content-wrapper,
.portal-hover-content,
.portal-arrow {
    position: relative;
    z-index: 2;
}

/* Sidebar */
.portale-sidebar {
    top: 100px;
}

.sidebar-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-headers);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* Categories Box */
.portale-categories-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.categories-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Category Filter Buttons */
.category-filter-btn {
    width: 100%;
    padding: 14px 20px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-paragraph);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-filter-btn:hover {
    background: #e9ecef;
    border-color: var(--color-button);
    transform: translateX(3px);
}

.category-filter-btn.active {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
}

.category-filter-btn.active .category-count {
    color: rgba(255,255,255,0.8);
}

.category-count {
    font-size: 14px;
    color: #adb5bd;
    font-weight: 400;
}

/* Responsive */
@media (max-width: 1024px) {
    .portale-layout {
        grid-template-columns: 1fr;
    }
    
    .portale-sidebar {
        position: static;
        order: -1;
    }
    
    .portale-categories-box {
        margin-bottom: 30px;
    }
    
    .categories-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .category-filter-btn {
        width: auto;
        flex: 1;
        min-width: 150px;
    }
}

/* ============================================
   POPRAWKI MOBILE DLA PORTAL-ITEM
   ============================================ */

@media (max-width: 768px) {
    .portale-section {
        padding: 40px var(--spacing-md);
    }
    
    .portale-main-title {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .portal-item {
        padding: 20px;
        height: auto;
        min-height: 160px;
        justify-content: flex-start !important;
    }
    
    /* Wymuszamy 100% szerokości */
    .portal-content-wrapper {
        gap: 15px;
        width: calc(100% - 40px) !important; /* 100% minus padding portal-item */
        max-width: none !important;
        flex: 1 1 100% !important;
        align-items: center;
    }
    
    .portal-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        padding: 12px;
        flex-shrink: 0;
    }
    
    /* Wymuszamy szerokość info */
    .portal-info {
        flex: 1 1 0% !important;
        width: 0 !important; /* Trick - flex-grow przejmuje */
        min-width: 0 !important;
        max-width: none !important;
    }
    
    .portal-name {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .portal-categories {
        margin-bottom: 8px;
    }
    
    .portal-category-tag {
        font-size: 11px;
        padding: 3px 10px;
    }
    
    .portal-description {
        font-size: 13px;
        line-height: 1.5;
    }
    
    .portal-arrow {
        display: none !important;
    }
    
    .portal-hover-content {
        display: none !important;
    }
    
    .category-filter-btn {
        font-size: 14px;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .portal-item {
        padding: 15px;
        min-height: 140px;
    }
    
    .portal-content-wrapper {
        gap: 12px;
        width: calc(100% - 30px) !important;
    }
    
    .portal-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        padding: 10px;
    }
    
    .portal-name {
        font-size: 16px;
    }
    
    .portal-description {
        font-size: 12px;
    }
    
    .categories-buttons {
        flex-direction: column;
    }
    
    .category-filter-btn {
        width: 100%;
    }
}

/* Rejestry Grid */
.rejestry-site-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 40px;
}

.rejestr-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border-radius: 12px;
    text-decoration: none;
    min-height: 180px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.rejestr-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Tło ze zdjęciem */
.rejestr-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.5s ease, filter 0.4s ease;
}

/* Hover - powiększenie + delikatny blur */
.rejestr-card:hover .rejestr-bg-image {
    transform: scale(1.1);
    filter: blur(3px);
}

/* Overlay z gradientem */
.rejestr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Delikatne rozjaśnienie przy hover */
.rejestr-card:hover .rejestr-overlay {
    opacity: 0.75;
}

/* Default Content */
.rejestr-default-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Content */
.rejestr-content {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.rejestr-herb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.rejestr-herb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
    transition: transform 0.3s ease;
}

.rejestr-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rejestr-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

.rejestr-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
    font-family: var(--font-primary);
    line-height: 1.2;
}

/* Strzałka */
.rejestr-arrow {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.rejestr-arrow i {
    color: white;
    font-size: 18px;
}

/* Hover na całym item powiększa strzałkę */
.rejestr-card:hover .rejestr-arrow {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.3);
}

.rejestr-hover-text {
    font-size: 20px;
    font-weight: 700;
    color: white;
    font-family: var(--font-primary);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.rejestr-hover-arrow i {
    color: white;
    font-size: 18px;
}

/* No results message */
.no-rejestry {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    font-size: 18px;
    color: var(--color-paragraph);
}
/* Responsive */
@media (max-width: 1024px) {
    .rejestry-site-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .rejestry-site-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .rejestr-card {
        padding: 25px;
        min-height: 180px;
    }
    
    .rejestr-content {
        gap: 15px;
    }
    
    .rejestr-herb {
        width: 50px;
        height: 50px;
        padding: 10px;
    }
    
    .rejestr-title {
        font-size: 18px;
    }
    
    .rejestr-hover-text {
        font-size: 20px;
    }
    
    .rejestr-arrow,
    .rejestr-hover-arrow {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .rejestr-card {
        padding: 20px;
        min-height: 160px;
    }
    
    .rejestr-hover-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .rejestr-hover-text {
        font-size: 18px;
    }
}
/* Sekcje Zbiory i Usługi */
.zbiory-section,
.uslugi-section {
    margin-top: 30px;
    padding: 40px 0;
    background-color: white;
}

.uslugi-section {
    background-color: white;
}

.section-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 40px 0;
    font-family: var(--font-primary);
}

/* Filtry */
.zbiory-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 15px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: var(--border-radius);
    color: var(--color-paragraph);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-ease);
}

.filter-btn:hover {
    background: #f8f9fa;
    border-color: var(--color-button);
    color: var(--color-button);
}

.filter-btn.active {
    background: var(--color-button);
    border-color: var(--color-button);
    color: white;
}

/* ============================================
   TABELE - RESPONSIVE NA MOBILE
   ============================================ */

/* Tabele */
.zbiory-table-wrapper,
.uslugi-table-wrapper {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow: hidden;
}

.zbiory-table,
.uslugi-table {
    width: 100%;
    border-collapse: collapse;
}

.zbiory-table thead,
.uslugi-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.zbiory-table th,
.uslugi-table th {
    padding: 20px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-headers);
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zbiory-table tbody tr,
.uslugi-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background var(--transition-ease);
}

.zbiory-table tbody tr:hover,
.uslugi-table tbody tr:hover {
    background: #dcdddd;
}

.zbiory-table tbody tr:last-child,
.uslugi-table tbody tr:last-child {
    border-bottom: none;
}

.zbiory-table td,
.uslugi-table td {
    padding: 20px;
    font-size: 15px;
    color: var(--color-headers);
    font-family: var(--font-primary);
}

.zbior-name,
.usluga-name {
    font-weight: 600;
    color: var(--color-headers);
}

/* Linki w tabeli */
.table-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--color-button);
    color: white;
    border: none !important;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-primary);
    transition: all var(--transition-ease);
}

.table-link:hover {
    background: var(--color-hover);
}

.table-link i {
    font-size: 14px;
}

.no-link {
    color: #adb5bd;
    font-style: italic;
}

/* Fade Overlay Effect */
.table-fade-overlay {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
    z-index: 1;
}

/* Load More Button */
.load-more-wrapper {
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.load-more-btn {
    padding: 14px 40px;
    background: transparent;
    color: black;
    border: 2px solid #e2e2e2;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-ease);
}

.load-more-btn:hover {
    background: #e2e2e2;
}

.load-more-btn:disabled {
    background: #adb5bd;
    cursor: not-allowed;
    transform: none;
}

.load-more-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Hidden rows for filtering */
.zbiory-table tbody tr.hidden {
    display: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .zbiory-section,
    .uslugi-section {
        padding: 10px 5px;
    }

    .zbiory-section {
        margin-top: 25px;
    }
    
    .section-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .zbiory-section,
    .uslugi-section {
        padding: 10px 5px;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    /* Ukryj thead na mobile */
    .zbiory-table thead,
    .uslugi-table thead {
        display: none;
    }
    
    .zbiory-table,
    .uslugi-table {
        display: block;
    }
    
    .zbiory-table tbody,
    .uslugi-table tbody {
        display: block;
    }
    
    /* Każdy wiersz jako karta */
    .zbiory-table tbody tr,
    .uslugi-table tbody tr {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        background: white;
    }
    
    .zbiory-table tbody tr:last-child,
    .uslugi-table tbody tr:last-child {
        margin-bottom: 0;
    }
    
    /* Komórki jako bloki */
    .zbiory-table td,
    .uslugi-table td {
        display: block;
        padding: 8px 0;
        font-size: 13px;
        white-space: normal;
        border: none;
    }
    
    /* Styl etykiet */
    .zbiory-table td::before,
    .uslugi-table td::before {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    
    /* ============================================
       ZBIORY - nagłówki
       ============================================ */
    .zbiory-table td:nth-child(1)::before {
        content: "Gmina";
    }
    .zbiory-table td:nth-child(2)::before {
        content: "Nazwa zbioru";
    }
    .zbiory-table td:nth-child(3)::before {
        content: "Wyszukiwanie CSW";
    }
    .zbiory-table td:nth-child(4)::before {
        content: "Przeglądanie WMS";
    }
    .zbiory-table td:nth-child(5)::before {
        content: "Pobieranie WFS";
    }
    
    /* ============================================
       USLUGI - nagłówki
       ============================================ */
    .uslugi-table td:nth-child(1)::before {
        content: "Nazwa usługi";
    }
    .uslugi-table td:nth-child(2)::before {
        content: "Link";
    }
    
    /* Nazwa zbioru/usługi */
    .zbior-name,
    .usluga-name {
        font-size: 15px;
        font-weight: 700;
    }
    
    /* Linki w tabeli na mobile */
    .table-link {
        padding: 10px 16px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
        margin-top: 5px;
    }
    
    .no-link {
        font-size: 12px;
    }
    
    .filter-btn {
        font-size: 14px;
        padding: 10px 20px;
    }
}

@media (max-width: 480px) {
    .zbiory-filters {
        flex-direction: column;
    }
    
    .filter-btn {
        width: 100%;
        text-align: center;
    }
    
    .load-more-btn {
        width: 100%;
    }
    
    .zbiory-table td,
    .uslugi-table td {
        font-size: 12px;
    }
    
    .zbior-name,
    .usluga-name {
        font-size: 14px;
    }
}

.e-uslugi-section {
    margin-bottom: 50px;
}

/* Sekcja Opis e-Usług */
.e-uslugi-opis-section {
    margin-top: 30px;
    padding: 40px var(--spacing-lg) 10px;
    background-color: white;
}

.e-uslugi-opis-content {
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-paragraph);
    font-family: var(--font-primary);
}

.e-uslugi-opis-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-headers);
    margin: 0 0 var(--spacing-lg) 0;
    font-family: var(--font-primary);
}

.e-uslugi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.e-usluga-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border-radius: 12px;
    text-decoration: none;
    min-height: 180px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.e-usluga-item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Grafika w tle */
.e-usluga-image,
.e-usluga-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ddd;
    z-index: 0;
    transition: transform 0.5s ease, filter 0.4s ease;
}

/* Hover - powiększenie + delikatny blur */
.e-usluga-item:hover .e-usluga-image,
.e-usluga-item:hover .e-usluga-bg-image {
    transform: scale(1.1);
    filter: blur(3px);
}

/* Overlay z gradientem */
.e-usluga-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transition: background 0.3s ease, opacity 0.3s ease;
}

/* Delikatne rozjaśnienie przy hover */
.e-usluga-item:hover .e-usluga-overlay {
    opacity: 0.75;
}

/* Default Content */
.e-usluga-default-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Content - ikona i tekst */
.e-usluga-content {
    display: flex;
    align-items: center;
    gap: 25px;
    flex: 1;
}

.e-usluga-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.e-usluga-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.e-usluga-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.e-usluga-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

.e-usluga-title {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
    font-family: var(--font-primary);
    line-height: 1.2;
}

/* Strzałka */
.e-usluga-arrow {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.e-usluga-arrow i {
    color: white;
    font-size: 18px;
}

/* Hover na całym item powiększa strzałkę */
.e-usluga-item:hover .e-usluga-arrow {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.3);
}

/* No e-uslugi message */
.no-e-uslugi {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.no-e-uslugi p {
    font-size: 18px;
    color: var(--color-paragraph);
    margin: 0;
}

@media (max-width: 1024px) {
    .e-uslugi-opis-section,
    .e-uslugi-section {
        padding: 50px var(--spacing-lg);
    }
    
    .e-uslugi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .e-uslugi-opis-content {
        font-size: 16px;
    }
    
    .e-uslugi-opis-content h2 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .e-uslugi-opis-section,
    .e-uslugi-section {
        padding: 10px 5px;
    }
    
    .e-uslugi-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .e-usluga-item {
        padding: 25px;
        min-height: 180px;
    }
    
    .e-usluga-content-wrapper {
        gap: 15px;
    }
    
    .e-usluga-icon {
        width: 50px;
        height: 50px;
        padding: 10px;
    }
    
    .e-usluga-name {
        font-size: 18px;
    }
    
    .e-usluga-description {
        font-size: 13px;
    }
    
    .e-usluga-hover-text {
        font-size: 20px;
    }
    
    .e-usluga-arrow,
    .e-usluga-hover-arrow {
        width: 40px;
        height: 40px;
    }
    
    .e-uslugi-opis-content {
        font-size: 15px;
    }
    
    .e-uslugi-opis-content h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .e-usluga-item {
        padding: 20px;
        min-height: 160px;
    }
    
    .e-usluga-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .e-usluga-arrow {
        align-self: flex-end;
    }
    
    .e-usluga-hover-content {
        flex-direction: column;
        gap: 12px;
    }
    
    .e-usluga-hover-text {
        font-size: 18px;
    }
}

.geoportal-btn {
    padding: 14px 40px;
    background: var(--color-button);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-ease);
    text-decoration: none;
}

.geoportal-btn:hover {
    background: var(--color-hover);
}

/* Kafle nawigacyjne */
.plany-kafle-section {
    padding: 30px 0;
    background: #f8f9fa;
}

.plany-kafle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.plany-kafel-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 200px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plany-kafel-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.plany-kafel-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.plany-kafel-card:hover .plany-kafel-bg {
    transform: scale(1.1);
}

.plany-kafel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.plany-kafel-card:hover .plany-kafel-overlay {
    opacity: 1;
}

.plany-kafel-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 100%;
    padding: 20px;
    text-align: left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.plany-kafel-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plany-kafel-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.plany-kafel-action {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.plany-kafel-card:hover .plany-kafel-action {
    opacity: 1;
    transform: translateY(0);
}

.plany-kafel-action-text {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.plany-kafel-arrow {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plany-kafel-arrow i {
    font-size: 18px;
    color: #18555b;
}

/* Hover dla kafli */
.plany-kafel-card {
    transition: box-shadow 0.3s ease;
}

.plany-kafel-card:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
}

/* Powiększenie tła */
.plany-kafel-bg {
    transition: transform 0.5s ease;
}

.plany-kafel-card:hover .plany-kafel-bg {
    transform: scale(1.1);
}

/* Rozjaśnienie overlay */
.plany-kafel-overlay {
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.plany-kafel-card:hover .plany-kafel-overlay {
    filter: brightness(1.2);
    opacity: 0.85;
}

/* Powiększenie strzałki */
.plany-kafel-arrow {
    transition: transform 0.3s ease, background 0.3s ease;
}

.plany-kafel-card:hover .plany-kafel-arrow {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.3);
}

.plany-section-title {
    font-size: 28px;
    font-weight: 700;
    color: black;
    margin-top: 0;
    position: relative;
}

/* Sekcje tekstowe */
.plany-tekst-section {
    padding: 0;
}

.plany-tekst-bottom {
    margin-top: 40px;
}

.plany-tekst-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.plany-tekst-content p {
    margin-bottom: 15px;
}

.plany-tekst-content p:last-child {
    margin-bottom: 0;
}

.plany-expandable-section {
    padding: 20px 0;
}

.plany-expandable-section:last-of-type {
    padding-bottom: 20px;
}

.plany-expandable-wrapper {
    position: relative;
}

.plany-expandable-content {
    position: relative;
    transition: max-height 0.5s ease;
}

.plany-expandable-content.is-collapsed {
    max-height: 150px;
    overflow: hidden;
}

/* Efekt wyszarzania / fade */
.plany-expand-fade {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.plany-expandable-wrapper.is-expanded .plany-expand-fade {
    opacity: 0;
}

/* Przycisk rozwijania */
.plany-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    color: black;
    border: 2px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}


.plany-expand-btn i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.plany-expand-btn.is-expanded i {
    transform: rotate(180deg);
}

.plany-expandable-section.bg-alternate {
    background: #f8f9fa;
    padding: 20px 0;
}

.plany-expandable-section.bg-alternate .plany-expand-fade {
    background: linear-gradient(
        to bottom,
        rgba(248, 249, 250, 0) 0%,
        rgba(248, 249, 250, 0.8) 50%,
        rgba(248, 249, 250, 1) 100%
    );
}

.plany-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: transparent;
    color: black;
    border: 2px solid #e2e2e2;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.plany-toggle-btn:hover {
    background: #e2e2e2;
}

.plany-toggle-btn i {
    transition: transform 0.3s ease;
}

.plany-toggle-btn.is-open i {
    transform: rotate(180deg);
}

.plany-no-etapy {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 10px;
}

/* Responsywność */
@media (max-width: 992px) {
    .plany-kafle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plany-kafle-grid .plany-kafel-card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .plany-hero-title-single {
        font-size: 32px !important;
    }
    
    .plany-kafle-grid {
        grid-template-columns: 1fr;
    }
    
    .plany-kafle-grid .plany-kafel-card:last-child {
        grid-column: span 1;
    }
    
    .plany-kafel-card {
        height: 160px;
    }
    
    .plany-section-title {
        font-size: 24px;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .plany-hero-title-single {
        font-size: 26px !important;
    }
    
    .plany-kafle-section {
        padding: 5px 0;
    }
    
    .plany-tekst-section {
        padding: 5px 0;
    }
    
    .plany-toggle-btn {
        width: 100%;
        justify-content: center;
    }
}

.plany-informator-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 2px solid #e2e2e2;
    border-radius: 12px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

.plany-informator-box:hover {
    border-color: var(--color-button);
    box-shadow: 0 5px 25px rgba(214, 54, 56, 0.15);
}

.plany-informator-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #d63638 0%, #b32d2e 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plany-informator-icon i {
    font-size: 28px;
    color: #fff;
}

.plany-informator-content {
    flex: 1;
}

.plany-informator-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 5px 0;
}

.plany-informator-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.plany-informator-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.plany-informator-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.plany-informator-open {
    background: var(--color-button);
    color: #fff;
}

.plany-informator-open:hover {
    background: var(--color-hover);
    box-shadow: 0 5px 15px rgba(24, 85, 91, 0.3);
}

.plany-informator-download {
    background: #fff;
    color: black;
    border: 2px solid #e2e2e2;
}

.plany-informator-download:hover {
    background: #e2e2e2;
}

/* Responsywność */
@media (max-width: 768px) {
    .plany-informator-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }
    
    .plany-informator-icon {
        width: 50px;
        height: 50px;
    }
    
    .plany-informator-icon i {
        font-size: 24px;
    }
    
    .plany-informator-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .plany-informator-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .plany-informator-title {
        font-size: 18px;
    }
    
    .plany-informator-desc {
        font-size: 13px;
    }
}

/* Oś czasu - pełna szerokość, wyrównanie do lewej */
.plany-timeline-section {
    padding: 20px 0;
}

.plany-timeline-section .container {
    max-width: var(--max-width);
    padding: 0;
}

.plany-timeline-section .plany-section-title {
    text-align: left;
    margin-top: 15px;
}

.plany-timeline-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
    text-align: left;
    padding: 20px;
    background: linear-gradient(135deg, #f0f6fc 0%, #e8f4f8 100%);
    border-radius: 10px;
    border-left: 4px solid #18555b;
}

/* Oś czasu */
.plany-timeline {
    position: relative;
    padding-left: 60px;
    max-width: none;
    margin: 0;
}

.plany-timeline-line {
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e0e0e0;
    border-radius: 2px;
}

/* Element osi czasu */
.plany-timeline-item {
    text-align: left;
    position: relative;
    margin-bottom: 30px;
}

.plany-timeline-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Punkt na osi - wyrównany z blokiem */
.plany-timeline-dot {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 4px solid #f8f9fa;
    box-shadow: 0 0 0 3px #e0e0e0;
    z-index: 2;
    transition: all 0.3s ease;
}

.plany-timeline-item.is-active .plany-timeline-dot {
    background: #18555b;
    box-shadow: 0 0 0 3px #18555b;
}

/* Zawartość elementu */
.plany-timeline-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    transition: all 0.3s ease;
    min-height: 80px;
}

.plany-timeline-item.is-inactive .plany-timeline-content {
    opacity: 0.5;
    filter: grayscale(100%);
}

.plany-timeline-item.is-active .plany-timeline-content {
    background: #fff;
    border-color: #18555b;
    box-shadow: 0 5px 20px rgba(24, 85, 91, 0.1);
}

.plany-timeline-item:hover .plany-timeline-content {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateX(5px);
}

/* Ikona etapu */
.plany-timeline-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #18555b 0%, #1a6a72 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plany-timeline-item.is-inactive .plany-timeline-icon {
    background: #ccc;
}

.plany-timeline-icon img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.plany-timeline-icon .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #fff;
}

/* Info etapu */
.plany-timeline-info {
    flex: 1;
}

.plany-timeline-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.plany-timeline-item.is-inactive .plany-timeline-name {
    color: #888;
}

/* Style dla HTML w opisie etapu */
.plany-timeline-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0 0 12px 0;
}

.plany-timeline-desc p {
    margin: 0 0 10px 0;
}

.plany-timeline-desc p:last-child {
    margin-bottom: 0;
}

.plany-timeline-desc ul,
.plany-timeline-desc ol {
    margin: 10px 0 10px 20px;
    padding: 0;
}

.plany-timeline-desc li {
    margin-bottom: 5px;
}

.plany-timeline-desc a {
    color: #18555b;
    text-decoration: underline;
}

.plany-timeline-desc a:hover {
    color: #1a6a72;
}

.plany-timeline-item.is-inactive .plany-timeline-desc {
    color: #999;
}

.plany-timeline-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #18555b;
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(24, 85, 91, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.plany-timeline-link:hover {
    background: #18555b;
    color: #fff;
}

.plany-timeline-link i {
    font-size: 12px;
}

.plany-no-etapy {
    text-align: left;
    color: #888;
    font-style: italic;
    padding: 40px;
    background: #fff;
    border-radius: 10px;
}

/* Responsywność osi czasu */
@media (max-width: 768px) {
    .plany-timeline-section .container {
        padding: 0 20px;
    }
    
    .plany-timeline {
        padding-left: 50px;
    }
    
    .plany-timeline-line {
        left: 15px;
    }
    
    .plany-timeline-dot {
        left: -43px;
        width: 16px;
        height: 16px;
    }
    
    .plany-timeline-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }
    
    .plany-timeline-icon {
        width: 40px;
        height: 40px;
    }
    
    .plany-timeline-icon .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
    
    .plany-timeline-name {
        font-size: 16px;
    }
    
    .plany-timeline-title {
        font-size: 20px;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .plany-timeline-section {
        padding: 40px 0;
    }
    
    .plany-timeline-section .container {
        padding: 0 15px;
    }
    
    .plany-timeline {
        padding-left: 40px;
    }
    
    .plany-timeline-line {
        left: 10px;
        width: 3px;
    }
    
    .plany-timeline-dot {
        left: -36px;
        width: 14px;
        height: 14px;
        border-width: 3px;
    }
    
    .plany-timeline-content {
        padding: 15px;
    }
}

/* Responsywność */
@media (max-width: 768px) {
    .plany-expandable-section {
        padding: 10px 5px;
    }
    
    .plany-expandable-content.is-collapsed {
        max-height: 120px;
    }
    
    .plany-expand-fade {
        height: 60px;
        bottom: 45px;
    }
    
    .plany-expand-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        margin-top: 25px;
    }
    
    .plany-timeline-section {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .plany-expandable-content.is-collapsed {
        max-height: 100px;
    }
    
    .plany-expand-fade {
        height: 50px;
        bottom: 50px;
    }
}

.plany-kafel-icon img {
    width: 35px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.dokumenty-sekcja-section {
    padding: 0 0 40px;
    background: #fff;
}

.dokumenty-sekcja-section.dokumenty-sekcja-alt {
    background: #f8f9fa;
}

.dokumenty-sekcja-title {
    font-size: 28px;
    font-weight: 700;
    color: black;
    margin: 0 0 15px 0;
    position: relative;
    padding-bottom: 15px;
}

.dokumenty-sekcja-opis {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    max-width: 800px;
}

.dokumenty-sekcja-opis p {
    margin-bottom: 10px;
}

.dokumenty-sekcja-opis p:last-child {
    margin-bottom: 0;
}

/* Table wrapper */
.dokumenty-table-wrapper {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #e8e8e8;
}

.dokumenty-sekcja-alt .dokumenty-table-wrapper {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Tabela dokumentów */
.dokumenty-table {
    width: 100%;
    border-collapse: collapse;
}

.dokumenty-table thead {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.dokumenty-table th {
    padding: 18px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dokumenty-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.3s ease;
}

.dokumenty-table tbody tr:hover {
    background: #f8f9fa;
}

.dokumenty-table tbody tr:last-child {
    border-bottom: none;
}

.dokumenty-table td {
    padding: 18px 20px;
    font-size: 15px;
    color: #444;
}

/* Nazwa pliku z ikoną */
.dokumenty-file-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.file-type-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.file-type-icon.file-type-pdf {
    color: #d63638;
}

.file-type-icon.file-type-doc,
.file-type-icon.file-type-docx {
    color: #2271b1;
}

.file-type-icon.file-type-xls,
.file-type-icon.file-type-xlsx {
    color: #00a32a;
}

.file-type-icon.file-type-jpg,
.file-type-icon.file-type-jpeg,
.file-type-icon.file-type-png,
.file-type-icon.file-type-gif {
    color: #9b59b6;
}

.file-type-icon.file-type-zip,
.file-type-icon.file-type-rar,
.file-type-icon.file-type-7z {
    color: #f39c12;
}

/* Przycisk pobierz */
.dokumenty-table .table-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #18555b;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.dokumenty-table .table-link:hover {
    background: #1a6a72;
    box-shadow: 0 4px 12px rgba(24, 85, 91, 0.3);
}

.dokumenty-table .table-link i {
    font-size: 14px;
}

/* Ukryte wiersze */
.dokumenty-table tbody tr.hidden-row {
    display: none;
}

/* Fade overlay */
.dokumenty-table-wrapper.has-more-files {
    padding-bottom: 0;
}

.dokumenty-table-wrapper .table-fade-overlay {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
    z-index: 1;
}

.dokumenty-sekcja-alt .dokumenty-table-wrapper .table-fade-overlay {
    background: linear-gradient(to bottom, transparent, #fff);
}

/* Load more button */
.dokumenty-table-wrapper .load-more-wrapper {
    padding: 25px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 35px;
    background: transparent;
    color: black;
    border: 2px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    background: #e2e2e2;
}

.load-more-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.load-more-btn:hover i {
    transform: rotate(90deg);
}

/* Brak plików */
.dokumenty-no-files {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.dokumenty-no-files i {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 15px;
    display: block;
}

.dokumenty-no-files p {
    font-size: 16px;
    color: #888;
    margin: 0;
}

/* Responsywność */
@media (max-width: 768px) {
    .dokumenty-sekcja-section {
        padding: 35px 0;
    }
    
    .dokumenty-sekcja-title {
        font-size: 24px;
    }
    
    .dokumenty-table th,
    .dokumenty-table td {
        padding: 14px 15px;
    }
    
    .dokumenty-table th:last-child,
    .dokumenty-table td:last-child {
        width: auto !important;
        text-align: right;
    }
    
    .dokumenty-file-name {
        font-size: 14px;
    }
    
    .dokumenty-table .table-link {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .dokumenty-table .table-link span {
        display: none;
    }
}

@media (max-width: 576px) {
    .dokumenty-sekcja-section {
        padding: 25px 0;
    }
    
    .dokumenty-sekcja-title {
        font-size: 20px;
    }
    
    .dokumenty-sekcja-opis {
        font-size: 14px;
    }
    
    .dokumenty-table thead {
        display: none;
    }
    
    .dokumenty-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 15px;
        gap: 12px;
    }
    
    .dokumenty-table td {
        padding: 0;
    }
    
    .dokumenty-table td:last-child {
        text-align: left !important;
    }
    
    .dokumenty-file-name {
        flex-wrap: wrap;
    }
    
    .load-more-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   INTRO SEKCJA
   ======================================== */
.dokumenty-intro-section {
    padding: 0;
    background: #fff;
}

.dokumenty-intro-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.dokumenty-intro-content p {
    margin-bottom: 15px;
}

.dokumenty-intro-content p:last-child {
    margin-bottom: 0;
}

/* ========================================
   SEKCJE DOKUMENTÓW
   ======================================== */
.dokumenty-sekcja-section {
    padding: 40px 0;
    background: #fff;
}

.dokumenty-sekcja-section.dokumenty-sekcja-alt {
    background: #f8f9fa;
}

.dokumenty-sekcja-title {
    font-size: 28px;
    font-weight: 700;
    color: black;
    margin: 0 0 25px 0;
}

.dokumenty-sekcja-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.dokumenty-sekcja-opis-wrapper {
    flex: 0 0 60%;
    max-width: 60%;
}

.dokumenty-sekcja-zdjecie {
    flex: 0 0 38%;
    max-width: 38%;
}

.dokumenty-sekcja-zdjecie img {
    width: auto;
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.dokumenty-sekcja-expandable {
    position: relative;
}

.dokumenty-sekcja-opis {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    transition: max-height 0.5s ease;
}

.dokumenty-sekcja-opis.is-collapsed {
    max-height: 200px;
    overflow: hidden;
}

.dokumenty-sekcja-opis p {
    margin-bottom: 12px;
}

.dokumenty-sekcja-opis p:last-child {
    margin-bottom: 0;
}

/* Fade overlay dla opisu */
.dokumenty-opis-fade {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.dokumenty-sekcja-alt .dokumenty-opis-fade {
    background: linear-gradient(to bottom, transparent, #f8f9fa);
}

.dokumenty-sekcja-expandable.is-expanded .dokumenty-opis-fade {
    opacity: 0;
}

/* Przycisk rozwijania opisu */
.dokumenty-opis-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    color: black;
    border: 2px solid #e2e2e2;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.dokumenty-opis-btn:hover {
    background: #e2e2e2;
}

.dokumenty-opis-btn i {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.dokumenty-opis-btn.is-expanded i {
    transform: rotate(180deg);
}

.dokumenty-table th:first-child {
}

@media (max-width: 992px) {
    .dokumenty-sekcja-header {
        flex-direction: column;
        gap: 30px;
    }
    
    .dokumenty-sekcja-opis-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .dokumenty-sekcja-zdjecie {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .dokumenty-sekcja-zdjecie img {
        width: 100%;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .dokumenty-sekcja-title {
        font-size: 24px;
    }
    
    .dokumenty-sekcja-opis {
        font-size: 15px;
    }
    
    .dokumenty-sekcja-opis.is-collapsed {
        max-height: 150px;
    }
    
    .dokumenty-opis-fade {
        height: 60px;
        bottom: 45px;
    }
    
    .dokumenty-sekcja-zdjecie img {
        height: 250px;
    }
    
    .dokumenty-opis-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dokumenty-sekcja-section {
        padding: 30px 0;
    }
    
    .dokumenty-sekcja-title {
        font-size: 20px;
    }
    
    .dokumenty-sekcja-opis {
        font-size: 14px;
    }
    
    .dokumenty-sekcja-opis.is-collapsed {
        max-height: 120px;
    }
    
    .dokumenty-sekcja-zdjecie img {
        height: 200px;
    }
}

/* Wrapper */
.plany-rejestr-wrapper {
    max-width: var(--max-width);
    margin-top: 50px;
}

.plany-rejestr-title {
    font-size: 24px;
    font-weight: 700;
    color: black;
    text-align: center;
    margin-bottom: 30px;
}

/* Responsywność tabeli */
.table-responsive {
    margin: 0 -15px 50px;
    padding: 0 5px;
}

/* Nagłówki lat w tabeli */
.plany-rejestr-table .rok-header td {
    background: #e9ecef;
    text-align: center;
    font-weight: 700;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px;
    color: #333;
}

.plany-rejestr-table td {
    padding: 1px;
    font-size: 8px;
}

/* Wyrównanie do środka */
.plany-rejestr-table .text-center {
    text-align: center;
}

/* Linki w tabeli */
.plany-rejestr-table td a {
    font-size: 8px;
    color: var(--color-button);
    text-decoration: none;
    transition: color 0.3s ease;
}

.plany-rejestr-table td a:hover {
    color: var(--color-hover);
    text-decoration: underline;
}

/* Ikony w tabeli */
.plany-rejestr-table td i {
    font-size: 8px;
}

/* Ikony bez linku (nieaktywne) */
.plany-rejestr-table td > i:not(a i) {
    color: #adb5bd;
}

/* Ikony z linkiem */
.plany-rejestr-table td a i {
    color: var(--color-button);
    transition: color 0.3s ease, transform 0.2s ease;
}

.plany-rejestr-table td a:hover i {
    color: var(--color-hover);
    transform: scale(1.1);
}

/* Wielokrotne linki w jednej komórce */
.plany-rejestr-table td a + a {
    margin-left: 8px;
}

/* Małe informacje dodatkowe */
.plany-rejestr-table .small-info {
    display: block;
    font-size: 8px;
    color: #6c757d;
    margin-top: 4px;
    line-height: 1.3;
}

.plany-rejestr-table th {
    font-size: 8px;
}

/* Minimalna szerokość kolumn */
.plany-rejestr-table th:nth-child(1),
.plany-rejestr-table td:nth-child(1) {
    min-width: 10px;
    text-align: center;
}

.plany-rejestr-table th:nth-child(2),
.plany-rejestr-table td:nth-child(2) {
    min-width: 20px;
}

.plany-rejestr-table th:nth-child(3),
.plany-rejestr-table td:nth-child(3) {
    min-width: 20px;
}

.plany-rejestr-table th:nth-child(4),
.plany-rejestr-table td:nth-child(4),
.plany-rejestr-table th:nth-child(6),
.plany-rejestr-table td:nth-child(6) {
    min-width: 20px;
}

/* Responsywność */
@media (max-width: 992px) {
    .plany-rejestr-title {
        font-size: 20px;
    }
    
    .plany-rejestr-table th,
    .plany-rejestr-table td {
        padding: 12px 10px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .plany-rejestr-wrapper {
        margin-top: 30px;
    }
    
    .plany-rejestr-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .table-responsive {
        margin: 0 -20px;
        padding: 0 20px;
    }
}

/* Styl przycisku do rejestru */
.plany-rejestr-btn-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.plany-rejestr-btn {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 32px;
    border: 2px solid #e2e2e2;
    background: transparent;
    color: black;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.plany-rejestr-btn:hover {
    background: #e2e2e2;
}

.plany-rejestr-btn i {
    font-size: 18px;
}

/* Scroll offset dla kotwicy */
#rejestr-planow {
    scroll-margin-top: 100px;
}

@media (max-width: 768px) {
    .plany-rejestr-btn {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 32px;
    width: 100%;
    border: 2px solid #e2e2e2;
    background: transparent;
    color: black;
    text-decoration: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.plany-rejestr-btn:hover {
    background: #e2e2e2;
}

.plany-rejestr-btn i {
    font-size: 14px;
}
}