/*
   Noworudzki Kurier - Premium Design System v2.0
   Design: Modern News Portal / High-End Aesthetics
   Colors: Nowa Ruda Heritage (Terracotta, Wood, Copper)
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Color Palette - Curated HSL for maximum vibrancy and harmony */
    --h-primary: 25;
    /* Terracotta base */
    --s-primary: 85%;
    --l-primary: 45%;

    --h-secondary: 15;
    /* Deep Wood base */
    --s-secondary: 25%;
    --l-secondary: 15%;

    --primary: hsl(var(--h-primary), var(--s-primary), var(--l-primary));
    --primary-light: hsl(var(--h-primary), var(--s-primary), 60%);
    --primary-dark: hsl(var(--h-primary), var(--s-primary), 35%);

    --secondary: hsl(var(--h-secondary), var(--s-secondary), var(--l-secondary));
    --secondary-light: hsl(var(--h-secondary), var(--s-secondary), 25%);

    --accent: hsl(210, 80%, 45%);
    /* Regional Blue Accent */

    --bg-main: hsl(30, 20%, 98%);
    --bg-card: hsl(0, 0%, 100%);
    --bg-alt: hsl(25, 15%, 94%);

    --text-main: hsl(var(--h-secondary), 20%, 12%);
    --text-muted: hsl(var(--h-secondary), 15%, 40%);
    --text-on-dark: hsl(0, 0%, 100%);

    /* Design Tokens */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 12px 40px rgba(var(--h-secondary), 20%, 15%, 0.1);
    --shadow-premium: 0 20px 60px rgba(var(--h-primary), 80%, 40%, 0.15);

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    --container-max: 1920px;
    --gutter: 2rem;
}

/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.65;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--secondary);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    display: block;
}

/* Glassmorphism Utilities */
.glass-widget {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Layout */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.page-container {
    padding-top: 40px;
    /* Reduced to align with sticky header space */
    padding-bottom: 80px;
}

.page-container.with-sidebar {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    /* Left Sidebar | Content | Right Sidebar */
    gap: 0;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 120px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.article-content {
    min-width: 0;
    /* Prevent grid blowout */
}

/* Responsive Layout */
@media (min-width: 1650px) {
    .left-sidebar {
        position: sticky;
        left: 0;
        top: 140px;
        width: 250px;
        z-index: 10;
        height: min-content;
    }

    .right-sidebar {
        position: sticky;
        right: 0;
        top: 140px;
        width: 250px;
        z-index: 10;
        height: min-content;
    }

    .page-container.with-sidebar {
        display: grid;
        grid-template-columns: 250px 1fr 250px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        gap: 2.5rem;
        /* Slightly reduced gap for narrower layout */
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 1649px) and (min-width: 1401px) {

    /* Transition range */
    .page-container.with-sidebar {
        grid-template-columns: 240px 1fr 250px;
        gap: 0;
    }
}

@media (max-width: 1400px) {
    .page-container.with-sidebar {
        grid-template-columns: 200px 1fr 250px;
        gap: 0;
    }
}

@media (max-width: 1200px) {
    .page-container.with-sidebar {
        grid-template-columns: 1fr 250px;
        /* Sidebar Left moves to bottom or hidden? User wants it visible. Let's stack it at bottom if space allows, or keep specific logic. For now, let's keep Right Sidebar and hide Left on tablet to save space, BUT enable it on Mobile stack if needed. */
        /* Actually, let's keep Left Sidebar visible but smaller? Or stack. */
        /* Let's follow common pattern: One sidebar (Right) on Tablet. */
    }

    .left-sidebar {
        display: none;
        /* Keep hidden on Tablet (900-1200) to avoid clutter, as requested "empty space on left" mainly refers to Desktop. */
    }
}

@media (max-width: 900px) {
    .page-container.with-sidebar {
        grid-template-columns: 1fr;
    }

    .left-sidebar,
    .right-sidebar {
        display: block;
        /* Show them stacked on mobile */
        width: 100%;
        margin-top: 2rem;
    }

    .main-content {
        order: 1;
    }

    .sidebar {
        order: 2;
        /* Sidebars below content */
        position: static;
        /* No longer sticky */
    }

    .page-container {
        padding-top: 100px;
    }
}

/* Sidebar Links Premium Styling */
.sidebar-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-links-list li {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 0.8rem;
}

.sidebar-links-list li:last-child {
    border-bottom: none;
}

.sidebar-links-list a {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.sidebar-links-list a::before {
    content: '›';
    color: var(--primary);
    font-weight: 800;
    margin-right: 0.5rem;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sidebar-links-list a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.sidebar-links-list a:hover::before {
    transform: translateX(2px);
}

/* Premium Navigation Header */
.site-header {
    background: hsla(0, 0%, 100%, 0.85);
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    border-bottom: 1px solid hsla(var(--h-primary), 20%, 90%, 0.3);
    position: sticky;
    top: 0;
    z-index: 2000;
    padding: 0;
    height: 100px;
    display: flex;
    align-items: center;
    transition: all 0.5s var(--transition-smooth);
}

.site-header.scrolled {
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Logo Adjustment */
.logo {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px 0;
    margin-right: 2rem;
    /* Ensure distinct separation from nav */
}

.logo img {
    height: auto;
    max-height: 70px;
    /* Reduced for better breathing room */
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    transition: var(--transition-smooth);
}

.site-header.scrolled .logo img {
    max-height: 55px;
    /* Proportional reduction on scroll */
}

/* Elegant Menu Layout */
.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    /* Center for balance */
    padding: 0 2rem;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

/* ... existing code ... */

.reel-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 4px solid #fff;
    width: 280px;
    height: 500px;
    /* Fixed height to match standard reel aspect */
    display: flex;
    /* Removes inline spacing */
    transform: translateZ(0);
    /* Fix for Safari/Chrome borderRadius clipping */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    /* Force clipping */
}

.main-navigation>ul>li {
    position: relative;
    padding: 1.5rem 0;
}

.main-navigation a {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.main-navigation li:hover>a {
    color: var(--primary);
    transform: translateY(-1px);
}

/* Dropdown Menu */
.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    min-width: 220px;
    box-shadow: var(--shadow-premium);
    border-radius: var(--radius-md);
    padding: 1rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 3000;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.main-navigation li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.submenu li {
    display: block;
    width: 100%;
}

.submenu a {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-main);
    display: block;
    white-space: nowrap;
}

.submenu a:hover {
    background: var(--bg-alt);
    color: var(--primary);
}

/* HERO SECTION (Main + 4 tiles) */
.homepage-head-section {
    display: flex;
    align-items: stretch;
    /* Height synchronization */
    gap: 2rem;
    margin-bottom: 4rem;
}

.hero-left-wrapper {
    flex: 2.7;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.latest-news-column {
    flex: 1.3;
    display: flex;
    flex-direction: column;
}

.sidebar-news-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hero-main-article {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    aspect-ratio: 16 / 9.5;
    /* Increased for dominant professional presence */
    display: block;
}

.hero-main-article img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-main-article:hover img {
    transform: scale(1.03);
}

.hero-sub-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.hero-sub-tile {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    aspect-ratio: 16 / 9.5;
    /* Adjusted for better proportion with taller hero */
    background: #fff;
    transition: all 0.3s ease;
}

.hero-sub-tile:hover {
    transform: translateY(-5px);
}

.hero-sub-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-sub-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    color: #fff;
}

.hero-sub-overlay h3 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    color: var(--text-on-dark);
}

.hero-title {
    color: #fff !important;
    font-size: 2.5rem;
    margin: 0.5rem 0 1rem;
    line-height: 1.1;
}

.hero-excerpt {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Side Grid (4 vertical tiles next to hero) */
.hero-side-grid {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 1rem;
}

.hero-side-item {
    display: flex;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.hero-side-item .img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-side-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-mini-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 1rem;
    color: #fff;
}

.hero-mini-overlay h4 {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .homepage-head-section {
        grid-template-columns: 1fr;
    }

    .hero-side-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}

/* SECTIONS & GRIDS */
.section-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
    border-left: 5px solid var(--primary);
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Article Card Standard */
.article-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.article-image-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.article-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-image-wrapper img {
    transform: scale(1.1);
}

.article-category {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    background: var(--primary);
    color: #fff;
    padding: 0.3rem 0.8rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 2;
}

.article-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
    line-height: 1.4;
}

/* Latest Sidebar Enhancement (Next to Hero) */
.latest-sidebar {
    background: #fff;
    /* White background for clean look */
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-soft);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.latest-sidebar h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section: Inwestycje (Technical/Blue) */
.section-investments {
    --bg-inv: hsla(210, 30%, 96%, 0.5);
    background-color: var(--bg-inv);
    padding: 2rem;
    border-radius: var(--radius-lg);
    margin: 2rem 0;
}

.section-investments .section-title {
    border-left-color: var(--accent);
    color: var(--accent);
}

.section-investments .article-category {
    background: var(--accent);
}

.section-investments .news-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Section: Turystyka (Nature/Green) */
.section-tourism {
    padding: 2rem 0;
}

.section-tourism .section-title {
    border-left-color: #27AE60;
    color: #27AE60;
}

.section-tourism .news-grid {
    grid-template-columns: repeat(2, 1fr);
}

.section-tourism .article-image-wrapper {
    aspect-ratio: 21/9;
}

/* Section: Kultura */
.section-culture .section-title {
    border-left-color: #9B59B6;
    color: #9B59B6;
}

.section-culture .article-category {
    background: #9B59B6;
}

/* Section: Transport */
.section-transport {
    border-top: 4px solid #E74C3C;
    padding-top: 1rem;
}

.section-transport .news-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Gallery Section */
.gallery-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.gallery-card .article-image-wrapper {
    aspect-ratio: 1/1;
    /* Square for gallery */
}

/* Realizacje (Professional Tiles Grid) */
.realizacje-gallery-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.realizacja-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    height: 100%;
    transition: var(--transform-smooth), box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.realizacja-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

.realizacja-media {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.realizacja-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.realizacja-card:hover .realizacja-media img {
    transform: scale(1.08);
}

.realizacja-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.realizacja-title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.realizacja-title a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.realizacja-title a:hover {
    color: var(--primary);
}

.realizacja-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.realizacja-fb-embed {
    position: relative;
    height: 450px;
    overflow: hidden;
    background: #f0f2f5;
}

.realizacja-card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
}

/* Facebook Reels */
.fb-reels-section {
    margin: 4rem 0;
    text-align: center;
}

.reels-grid {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.reel-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    border: 4px solid #fff;
    width: 280px;
    height: 500px;
    /* Fixed height to match standard reel aspect */
    display: flex;
    /* Removes inline spacing */
}

.reel-card iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* WIDGETS */
#fixed-widgets-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 9999;
    align-items: flex-end;
}

/* Chatbot */
#chat-toggle-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#chat-toggle-button:hover {
    transform: scale(1.1);
}

#chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

#chat-window.hidden {
    display: none;
}

#chat-header {
    background: var(--secondary);
    color: #fff;
    padding: 1rem;
    font-weight: 700;
}

#chat-messages {
    flex: 1;
    background: #f9f9f9;
    padding: 1rem;
}

#chat-input-container {
    padding: 1rem;
    border-top: 1px solid #eee;
    display: flex;
    gap: 0.5rem;
}

#chat-input-container input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 20px;
}

#chat-send-button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
}

/* YouTube Widget */
#youtube-toggle-button {
    width: 60px;
    height: 60px;
    background: #ff0000;
    border: none;
    border-radius: 50%;
    color: white;
    padding: 15px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#youtube-widget-container {
    display: none;
    /* Add JS toggle logic needed */
    width: 400px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Sidebar Widgets (Right) */
.sidebar-widget {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    /* Reduced from 1.5rem for better fit in 250px */
    margin-bottom: 2rem;
    box-shadow: var(--shadow-soft);
}

.sidebar-title {
    font-size: 1.2rem;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* ==========================================================================
   SUBPAGES & ARTICLE TEMPLATES
   ========================================================================== */

/* Single Article Styling (.premium-article) */
.premium-article {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-bottom: 3rem;
}

.article-headline {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--secondary);
}

.article-meta-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.meta-text a {
    color: var(--primary);
    font-weight: 600;
}

.featured-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.featured-image-attribution {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 2rem;
    font-style: italic;
}

/* Article Content Typography */
.premium-article p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

.premium-article h2 {
    font-size: 1.8rem;
    margin: 2.5rem 0 1rem;
}

.premium-article ul,
.premium-article ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.premium-article li {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   ARTICLES LIST PAGE (.artykuly-page) - Ultra-Wide Elite Grid
   ========================================================================== */

/* Force page to full width by overriding the sidebar grid in base.njk */
.artykuly-page .page-container.with-sidebar {
    display: block;
    /* Break the 3-column grid */
    max-width: 1600px;
    margin: 0 auto;
}

.artykuly-page .sidebar {
    display: none;
    /* Sidebars are empty but still might take space */
}

.artykuly-page .article-content {
    width: 100%;
    padding: 2rem 0;
}

.articles-page-wrapper h1 {
    font-size: 3.8rem;
    font-weight: 900;
    color: var(--secondary);
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.articles-intro {
    text-align: center;
    margin: 0 auto 4rem;
    font-size: 1.25rem;
    max-width: 850px;
    color: var(--text-muted);
}

/* Wide Premium Search Bar */
.article-search-container {
    max-width: 800px;
    margin: 0 auto 5rem;
    position: relative;
    z-index: 10;
}

#article-search-input {
    width: 100%;
    padding: 1.5rem 3rem 1.5rem 4.5rem;
    font-size: 1.25rem;
    border-radius: 100px;
    border: 2px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.article-search-container::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.6;
    z-index: 11;
}

/* Grid of Elite Tiles (Kafelki) */
#articles-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 3rem;
    margin-bottom: 6rem;
}

.article-summary-link {
    display: block;
    text-decoration: none;
    height: 100%;
}

.article-summary {
    display: flex;
    flex-direction: column;
    /* Vertical tile layout */
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

.article-summary:hover {
    transform: translateY(-15px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.12);
}

/* Tile Image - Full Width */
.summary-image-link {
    width: 100%;
    height: 260px;
    flex: 0 0 auto;
    border-radius: 0;
}

.summary-image-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.article-summary:hover .summary-image-link img {
    transform: scale(1.1);
}

/* Tile Text Content */
.summary-content {
    padding: 2.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.summary-content h2 {
    font-size: 1.65rem;
    margin-bottom: 1.2rem;
    line-height: 1.25;
    color: var(--secondary);
    min-height: 3.8em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summary-content .article-meta {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.summary-content p:not(.article-meta) {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.summary-content .read-more {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ad Full Width inside Grid */
.ad-container-centered {
    grid-column: 1 / -1;
    margin: 3rem 0;
}

/* Badge Premium Position */
.is-szkolenie-article .article-summary::after {
    top: 1.5rem;
    right: 1.5rem;
}

@media (max-width: 1400px) {
    #articles-list-container {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

@media (max-width: 900px) {
    .articles-page-wrapper h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    #articles-list-container {
        grid-template-columns: 1fr;
    }

    .artykuly-page .page-container.with-sidebar {
        padding: 0 1.5rem;
    }
}

/* Realizacje Gallery Specific Adjustments */
.realizacje-gallery-section {
    padding: 2rem 0;
}

.realizacje-intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-main);
    max-width: 800px;
    margin-bottom: 3rem;
}

/* Sequential Page Layout Refinements */
.sequential-page-section {
    padding-bottom: 5rem;
    margin-bottom: 5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sequential-page-section h1 {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1.1;
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
}

.sequential-page-section h2 {
    font-size: 2.2rem;
    color: var(--secondary);
    margin: 3.5rem 0 1.5rem;
    padding-left: 1.25rem;
    border-left: 5px solid var(--primary);
}

.sequential-page-section h3 {
    font-size: 1.6rem;
    color: var(--secondary);
    margin: 2.5rem 0 1rem;
}

/* Figure & Image Styling for Pages */
.article-content figure {
    margin: 3.5rem 0;
    clear: both;
}

.article-content figure img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    display: block;
    width: 100%;
}

.article-content figcaption {
    font-size: 0.95rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 1.25rem;
    font-style: italic;
    line-height: 1.5;
}

.trigger-container {
    text-align: center;
    padding: 3rem 0;
}

/* Contact Form Premium Styling */
.contact-form {
    background: #fff;
    padding: 3.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    margin: 2.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--secondary);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1.1rem 1.4rem;
    border: 2px solid #edeff2;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
    background: #fcfdfe;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(44, 87, 160, 0.1);
    outline: none;
}

.form-group textarea {
    resize: vertical;
}

/* ==========================================================================
   ELITE BUTTONS & CTA (Ultra-Premium System)
   ========================================================================== */

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 2.8rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Cinematic Shine Effect */
.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.6s ease;
    z-index: -1;
}

.cta-button:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:active {
    transform: translateY(-2px) scale(1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Secondary / Glassmorphism Button */
.cta-button-outline {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid var(--primary);
    color: var(--primary) !important;
    box-shadow: none;
}

.cta-button-outline:hover {
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Small / Compact Variant */
.cta-button-small {
    padding: 0.8rem 2.2rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    border-radius: 50px;
}

/* Unique Footer CTA Style (Light Theme) */
.cta-footer-sales {
    background: #fff;
    color: var(--secondary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.cta-footer-sales:hover {
    background: var(--primary);
    color: #fff !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Card 'Read More' Premium Interaction */
.read-more,
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    padding-bottom: 2px;
}

.read-more::after,
.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.4s ease;
}

.read-more:hover,
.read-more-link:hover {
    gap: 1rem;
    color: var(--primary-dark);
}

.read-more:hover::after,
.read-more-link:hover::after {
    width: 100%;
}

/* Update Contact Form Button to use elite structure */
.contact-form .cta-button {
    width: 100%;
    margin-top: 1.5rem;
}

/* Responsive Subpages */
@media (max-width: 900px) {
    .article-summary {
        flex-direction: column;
    }

    .summary-image-link {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }

    .realizacje-gallery-container {
        grid-template-columns: 1fr;
    }

    .article-headline {
        font-size: 2rem;
    }
}

/* Tag Page Specifics */
.tag-page h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--secondary);
    border-bottom: 3px solid var(--primary);
    display: inline-block;
    padding-bottom: 0.5rem;
}

.back-to-all-articles {
    margin-top: 3rem;
    text-align: center;
}

.sidebar-news-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Professional vertical distribution */
}

.sidebar-news-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sidebar-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sidebar-news-thumb {
    flex: 0 0 70px;
    height: 70px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-alt);
}

.sidebar-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sidebar-news-item:hover .sidebar-news-thumb img {
    transform: scale(1.1);
}

.sidebar-news-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sidebar-news-item h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.2rem 0;
    line-height: 1.3;
    color: var(--secondary);
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-news-item:hover h4 {
    color: var(--primary);
}

.news-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Base Mobile Adjustments */
@media (max-width: 768px) {
    .site-header {
        height: 70px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .realizacje-gallery-container {
        grid-template-columns: 1fr;
    }

    .realizacja-card {
        grid-template-columns: 1fr;
        height: auto;
    }

    .realizacja-media {
        height: 200px;
    }

    .section-investments,
    .section-tourism,
    .section-transport .news-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   INTERACTIVE WIDGETS (Elite UI)
   ========================================================================== */

#fixed-widgets-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    z-index: 10000;
}

#chat-toggle-button,
#youtube-toggle-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

#chat-toggle-button {
    background: linear-gradient(135deg, #27AE60 0%, #1e8449 100%);
}

#youtube-toggle-button {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
}

#chat-toggle-button:hover,
#youtube-toggle-button:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

#chat-window {
    width: 380px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: absolute;
    bottom: 80px;
    right: 0;
    z-index: 10001;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

#chat-header {
    background: var(--secondary);
    color: #fff;
    padding: 1.5rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chat-input-container {
    padding: 1.2rem;
    display: flex;
    gap: 0.8rem;
    background: #f9fafb;
}

#chat-input {
    flex: 1;
    padding: 0.8rem 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    outline: none;
}

#chat-send-button {
    padding: 0.8rem 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

#chat-send-button:hover {
    background: var(--primary-dark);
}

@media (max-width: 768px) {
    #chat-window {
        width: 320px;
        right: -1rem;
    }
}

/* Professional Footer Styles */
.site-footer {
    position: relative;
    z-index: 500;
    /* Ensure it stays above content but below header */
    background: #1a1a1a;
    color: #fff;
    padding: 6rem 0 3rem;
    /* More professional padding */
    font-size: 0.95rem;
    margin-top: 0;
    /* Let naturally follow the page-container */
    border-top: 5px solid var(--primary);
}

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

.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.footer-core-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-navigation ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
}

.footer-navigation a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.footer-navigation a:hover {
    color: var(--primary);
}

.site-credit a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* Footer Partners & Logo */
.footer-partners {
    text-align: center;
    margin-bottom: 3rem;
}

.footer-partners h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.partner-logos-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Partner logos always colored and visible */
.partner-logos-placeholder img {
    width: 150px !important;
    height: 50px !important;
    object-fit: contain;
    opacity: 1;
    /* Always full opacity */
    filter: none;
    /* No grayscale */
    transition: transform 0.3s ease;
}

.partner-logos-placeholder img:hover {
    transform: scale(1.05);
}

.partner-separator-line {
    height: 30px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.partner-placeholder-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-style: italic;
}

/* Footer CTA */
.footer-sales-cta {
    background: linear-gradient(135deg, var(--secondary), #2a1a10);
    border-radius: var(--radius-md);
    padding: 2.5rem;
    text-align: center;
    max-width: 600px;
    margin: 2rem auto 4rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-sales-cta h4 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.footer-sales-cta p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.cta-button-small.cta-footer-sales {
    background: var(--primary);
    color: #fff;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    transition: transform 0.3s ease, background 0.3s ease;
}

.cta-button-small.cta-footer-sales:hover {
    transform: translateY(-3px);
    background: var(--primary-light);
}

/* Social Share (Premium Refinements) */
.social-share-list {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff;
    color: var(--secondary);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.social-share-link:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.social-share-link.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.social-share-link.twitter:hover {
    background: #000000;
    border-color: #000000;
}

.social-share-link.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
}

.social-share-link.email:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.social-share-link svg {
    width: 20px;
    height: 20px;
}

/* Video Container (Responsive YouTube) */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    margin: 2.5rem 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Social Follow (Sidebar/Footer) */
.social-follow-list {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.social-follow-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
}

.social-follow-link:hover {
    background: var(--primary);
    transform: scale(1.1);
}

.social-follow-link svg {
    width: 18px;
    height: 18px;
}

.social-share-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.social-share-bottom h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* Pagination Professional Styling */
.pagination-container {
    margin: 4rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.ad-container-centered {
    margin: 3rem 0;
    text-align: center;
    padding: 1rem;
    background: #fafafa;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(0, 0, 0, 0.1);
}