/*
Theme Name: KinderGarten
Author: Gemini
Version: 1.0
*/

/* --- CSS Variables (Consolidated from Samples) --- */
:root {
    /* 🌿 Фінальна палітра "Природна освіта" */
    --color-primary: #5C6BC0;      /* Indigo - мудрість */
    --color-secondary: #66BB6A;    /* Lime - природа */
    --color-accent: #FFA726;       /* Amber - тепло */
    --color-success: #43A047;      /* Deep green - успіх */
    --color-warning: #FB8C00;      /* Deep orange - увага */
    --color-danger: #E53935;       /* Deep red - важливість */
    --color-info: #1E88E5;         /* Blue - інформація */
    --color-creativity: #8E24AA;   /* Purple - творчість */
    --color-happiness: #EC407A;    /* Pink - радість */
    --color-energy: #F4511E;       /* Deep orange - активність */
    --color-calm: #26A69A;         /* Teal - спокій */

    /* 🌈 Додаткова палітра для футера */
    --color-footer-primary: #2C3E50;   /* Dark blue-gray - професіоналізм */
    --color-footer-secondary: #34495E;   /* Medium blue-gray - довіра */
    --color-footer-accent: #3498DB;     /* Bright blue - яскравість */
    --color-footer-light: #ECF0F1;      /* Light gray - чистота */
    --color-footer-text: #BDC3C7;       /* Light text - читабельність */
    --color-footer-divider: #95A5A6;     /* Divider - розділення */

    /* Нейтральна палітра */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-border: #e2e8f0;

    /* Система відступів */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Закруглення */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;

    /* Тіні */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Переходи */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Шрифти */
    --font-primary: 'Poppins', sans-serif; /* Dynamic from ACF */
    --font-secondary: 'Roboto', sans-serif; /* Dynamic from ACF */

    /* Розміри шрифтів */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Вага шрифтів */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}

/* --- Dark Theme --- */
[data-theme="dark"] {
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-bg-primary: #1e293b;
    --color-bg-secondary: #334155;
    --color-bg-tertiary: #475569;
    --color-border: #475569;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}

/* --- Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    transition: all var(--transition-normal);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl); /* Changed vertical padding */
}

/* Special padding for header container */
.kg-header .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-lg); /* Header-specific padding */
    background: var(--color-primary); /* Solid background for the header container */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); /* Lighter shadow for the container */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    line-height: 1.2;
}

/* --- Header (Glass Morphism based) --- */
.kg-header {
    padding: var(--spacing-md) 0;
    position: relative;
    z-index: 1000;
}

.kg-header__main {
    /* Background moved to container */
}

.kg-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}

.kg-header__logo {
    flex-basis: 20%;
    text-align: left;
}

.kg-header__logo a {
    color: var(--color-text-inverse);
    text-decoration: none;
    font-weight: var(--font-bold);
    transition: opacity var(--transition-fast);
}

.kg-header__logo a:hover {
    opacity: 0.8;
}

.kg-header__navigation {
    flex-basis: 60%;
    display: flex;
    justify-content: center;
}

.kg-header__actions {
    flex-basis: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
}

.kg-header__search-toggle, .kg-header__account-link, .kg-header__mobile-toggle {
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.kg-header__search-toggle:hover, .kg-header__account-link:hover, .kg-header__mobile-toggle:hover {
    color: var(--color-white);
    opacity: 0.8;
}

/* --- Primary Navigation (Glass Morphism) --- */
.kg-header__nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-header__nav-menu li {
    position: relative;
}

.kg-header__nav-menu a {
    background: rgba(255, 255, 255, 0.1); /* Slightly more transparent glass */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-inverse); /* White text by default */
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-sm);
}

.kg-header__nav-menu a:hover,
.kg-header__nav-menu .current-menu-item > a,
.kg-header__nav-menu .current-menu-ancestor > a {
    background: rgba(255, 255, 255, 0.4); /* Brighter glass on hover/active */
    color: var(--color-primary); /* Indigo text on hover/active */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* --- Sub-menu (Glass Morphism) --- */
.kg-header__nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    list-style: none;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    min-width: 220px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.kg-header__nav-menu li:hover > .sub-menu {
    display: block;
}

.kg-header__nav-menu .sub-menu li {
    width: 100%;
}

.kg-header__nav-menu .sub-menu a {
    background: transparent; /* Sub-menu items are transparent by default */
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
    transform: none;
    backdrop-filter: none; /* No extra blur on sub-menu items themselves */
    -webkit-backdrop-filter: none;
}

.kg-header__nav-menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

/* --- Hero Section --- */
.hero-section {
    color: var(--color-white);
    text-align: center;
    padding: 100px var(--spacing-xl);
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    opacity: 0.9;
    z-index: 0;
}
.hero-section .hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}
.hero-section h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}
.hero-section p {
    font-size: var(--text-xl);
    opacity: 0.9;
    margin-bottom: var(--spacing-xl);
}
.hero-section .button {
    background-color: var(--color-accent); /* Use accent for CTA button */
    color: var(--color-black);
    padding: var(--spacing-md) var(--spacing-xl);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-bold);
    display: inline-block;
    transition: all var(--transition-fast);
}
.hero-section .button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --- Hero Section "Теплий привіт" --- */
.kg-hero-warm {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-energy) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.kg-hero-warm::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-warm::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-warm .hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.kg-hero-warm .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-warm h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.kg-hero-warm p {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.kg-hero-warm .hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.kg-hero-warm .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-warm .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-warm .btn-primary:hover,
.kg-hero-warm .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Hero Buttons Styling for Staff Archive */
.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    flex-wrap: wrap;
}

.hero-buttons .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hero-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hero-buttons .btn-primary:hover,
.hero-buttons .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-primary:hover {
    background: var(--color-accent);
    color: var(--color-black);
}

.hero-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--color-primary);
}

/* Responsive for hero buttons */
@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Decorative icons for hero */
.kg-hero-warm .hero-icon {
    position: absolute;
    opacity: 0.1;
    color: var(--color-white);
    font-size: 8rem;
    z-index: 1;
}

.kg-hero-warm .hero-icon.icon-1 { top: 10%; left: 5%; }
.kg-hero-warm .hero-icon.icon-2 { top: 20%; right: 15%; }
.kg-hero-warm .hero-icon.icon-3 { bottom: 15%; left: 20%; }
.kg-hero-warm .hero-icon.icon-4 { bottom: 10%; right: 10%; }

/* Responsive for hero */
@media (max-width: 768px) {
    .kg-hero-warm {
        padding: var(--spacing-2xl) 0;
    }

    .kg-hero-warm h1 {
        font-size: var(--text-3xl);
    }

    .kg-hero-warm p {
        font-size: var(--text-lg);
    }

    .kg-hero-warm .hero-buttons {
        flex-direction: column;
    }

    .kg-hero-warm .btn-primary,
    .kg-hero-warm .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .kg-hero-warm .hero-icon {
        font-size: 4rem;
    }
}

/* --- Hero Section "Творча енергія" --- */
.kg-hero-creative {
    background: linear-gradient(135deg, var(--color-creativity) 0%, var(--color-happiness) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.kg-hero-creative::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-creative::after {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 5%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-creative .hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.kg-hero-creative .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-creative h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.kg-hero-creative p {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

/* Decorative icons for creative hero */
.kg-hero-creative .hero-icon {
    position: absolute;
    opacity: 0.1;
    color: var(--color-white);
    font-size: 8rem;
    z-index: 1;
}

.kg-hero-creative .hero-icon.icon-1 { top: 10%; left: 5%; }
.kg-hero-creative .hero-icon.icon-2 { top: 20%; right: 15%; }
.kg-hero-creative .hero-icon.icon-3 { bottom: 15%; left: 20%; }
.kg-hero-creative .hero-icon.icon-4 { bottom: 10%; right: 10%; }

/* Responsive for creative hero */
@media (max-width: 768px) {
    .kg-hero-creative {
        padding: var(--spacing-2xl) 0;
    }

    .kg-hero-creative h1 {
        font-size: var(--text-3xl);
    }

    .kg-hero-creative p {
        font-size: var(--text-lg);
    }

    .kg-hero-creative .hero-icon {
        font-size: 4rem;
    }
}

/* --- Hero Section "Довіра та стабільність" --- */
.kg-hero-about {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.kg-hero-about::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 8%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-about::after {
    content: '';
    position: absolute;
    bottom: 12%;
    left: 8%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-about .hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.kg-hero-about .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-about h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.kg-hero-about p {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.kg-hero-about .hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.kg-hero-about .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-about .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-about .btn-primary:hover,
.kg-hero-about .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Decorative icons for about hero */
.kg-hero-about .hero-icon {
    position: absolute;
    opacity: 0.1;
    color: var(--color-white);
    font-size: 8rem;
    z-index: 1;
}

.kg-hero-about .hero-icon.icon-1 { top: 8%; left: 6%; }
.kg-hero-about .hero-icon.icon-2 { top: 22%; right: 18%; }
.kg-hero-about .hero-icon.icon-3 { bottom: 18%; left: 22%; }
.kg-hero-about .hero-icon.icon-4 { bottom: 6%; right: 12%; }

/* Make hero icons more visible */
.kg-hero-about .hero-icon {
    opacity: 0.15; /* Increased from 0.1 to 0.15 */
}

/* --- Hero Section "Професійний підхід" --- */
.kg-hero-professional {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.kg-hero-professional::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(255, 255, 255, 0.03) 40%, transparent 60%);
}

.kg-hero-professional .hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.kg-hero-professional .hero-content {
    position: relative;
    z-index: 2;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.kg-hero-professional .hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-professional .hero-title {
    font-family: var(--font-primary);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.kg-hero-professional .hero-description {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.kg-hero-professional .hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.kg-hero-professional .btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-professional .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.kg-hero-professional .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.kg-hero-professional .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.kg-hero-professional .hero-icon {
    position: absolute;
    opacity: 0.1;
    color: var(--color-white);
    font-size: 8rem;
    z-index: 1;
}

.kg-hero-professional .hero-icon.icon-1 { top: 10%; left: 5%; }
.kg-hero-professional .hero-icon.icon-2 { top: 20%; right: 15%; }
.kg-hero-professional .hero-icon.icon-3 { bottom: 15%; left: 20%; }
.kg-hero-professional .hero-icon.icon-4 { bottom: 10%; right: 10%; }

/* Responsive for professional hero */
@media (max-width: 768px) {
    .kg-hero-professional {
        padding: var(--spacing-2xl) 0;
    }

    .kg-hero-professional .hero-title {
        font-size: var(--text-3xl);
    }

    .kg-hero-professional .hero-description {
        font-size: var(--text-base);
    }

    .kg-hero-professional .hero-buttons {
        flex-direction: column;
    }

    .kg-hero-professional .btn {
        width: 100%;
        justify-content: center;
    }

    .kg-hero-professional .hero-icon {
        font-size: 4rem;
    }
}

/* Responsive for about hero */
@media (max-width: 768px) {
    .kg-hero-about {
        padding: var(--spacing-2xl) 0;
    }

    .kg-hero-about h1 {
        font-size: var(--text-3xl);
    }

    .kg-hero-about p {
        font-size: var(--text-lg);
    }

    .kg-hero-about .hero-buttons {
        flex-direction: column;
    }

    .kg-hero-about .btn-primary,
    .kg-hero-about .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .kg-hero-about .hero-icon {
        font-size: 4rem;
    }
}

/* --- Staff Enhanced Cards System --- */
.kg-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.kg-staff-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    position: relative;
}

.kg-staff-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* Enhanced Staff Header - Professional Hero Style */
.kg-staff-header {
    position: relative;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: var(--color-white);
    overflow: hidden;
}

.kg-staff-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(255, 255, 255, 0.03) 40%, transparent 60%);
    z-index: 1;
}

.kg-staff-position-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2;
}

.kg-staff-position-icon {
    font-size: 1.2rem;
    opacity: 0.9;
}

.kg-staff-name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

/* Enhanced Staff Image - Fixed Proportions */
.kg-staff-image {
    position: relative;
    width: 100%;
    height: 320px; /* Fixed height for consistent card structure */
    background: var(--color-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
    box-shadow: var(--shadow-sm);
}

.kg-staff-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain - no cropping */
    object-position: center;
    transition: transform var(--transition-normal);
    background: var(--color-white);
}

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

/* Staff Image Placeholder */
.kg-staff-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    color: var(--color-text-muted);
    background: var(--color-bg-tertiary);
}

/* Staff Card Image Enhancements */
.kg-staff-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Enhanced Staff Content - Fixed Structure */
.kg-staff-content {
    padding: var(--spacing-lg);
    min-height: 200px; /* Fixed minimum height for consistent structure */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kg-staff-role {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    font-weight: var(--font-medium);
}

.kg-staff-role-icon {
    font-size: var(--text-lg);
    opacity: 0.8;
}

.kg-staff-bio {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
    min-height: 80px; /* Fixed minimum height for bio section */
    font-size: var(--text-sm);
}

/* Enhanced Staff Footer */
.kg-staff-footer {
    padding: var(--spacing-lg);
    background: var(--color-bg-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.kg-staff-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.kg-staff-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.kg-staff-socials {
    display: flex;
    gap: var(--spacing-md);
}

.kg-staff-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.kg-staff-social-link:hover {
    background: var(--color-accent);
    transform: scale(1.1);
}

/* Enhanced Staff Category System */
.kg-staff-card.administrative {
    border-left: 4px solid var(--color-danger);
}

.kg-staff-card.administrative .kg-staff-position-badge {
    background: rgba(229, 57, 53, 0.2);
    color: var(--color-danger);
}

.kg-staff-card.educational {
    border-left: 4px solid var(--color-info);
}

.kg-staff-card.educational .kg-staff-position-badge {
    background: rgba(30, 136, 229, 0.2);
    color: var(--color-info);
}

.kg-staff-card.support {
    border-left: 4px solid var(--color-success);
}

.kg-staff-card.support .kg-staff-position-badge {
    background: rgba(67, 160, 71, 0.2);
    color: var(--color-success);
}

/* --- Card Structure Stability Enhancements --- */

/* Ensure consistent card height regardless of content */
.kg-staff-grid {
    grid-auto-rows: 1fr; /* All cards in a row have the same height */
}

/* Staff card wrapper for stable structure */
.kg-staff-card {
    display: flex;
    flex-direction: column;
    min-height: 600px; /* Fixed minimum height for all cards */
}

/* Force consistent content layout */
.kg-staff-header {
    flex-shrink: 0; /* Header never shrinks */
}

.kg-staff-image {
    flex-shrink: 0; /* Image area never shrinks */
}

.kg-staff-content {
    flex: 1; /* Content area grows to fill available space */
    display: flex;
    flex-direction: column;
}

.kg-staff-bio {
    flex: 1; /* Bio section grows to fill available space */
    min-height: 80px; /* Minimum height ensures space */
    display: flex;
    align-items: flex-start;
}

/* Handle empty bio gracefully */
.kg-staff-bio:empty::before {
    content: "Професіонал з великим досвідом роботи з дітьми";
    color: var(--color-text-muted);
    font-style: italic;
}

.kg-staff-footer {
    flex-shrink: 0; /* Footer never shrinks */
    margin-top: auto; /* Footer always at bottom */
}

.kg-staff-more {
    flex-shrink: 0; /* More button area never shrinks */
}

/* Handle missing contact info */
.kg-staff-contact:empty {
    display: none;
}

.kg-staff-socials:empty {
    display: none;
}

/* Ensure proper spacing when sections are missing */
.kg-staff-contact:not(:empty) + .kg-staff-socials:not(:empty) {
    margin-left: var(--spacing-lg);
}

/* Mobile responsiveness for stable structure */
@media (max-width: 768px) {
    .kg-staff-card {
        min-height: 550px; /* Slightly smaller on mobile */
    }

    .kg-staff-image {
        height: 240px;
    }

    .kg-staff-content {
        min-height: 160px;
    }

    .kg-staff-bio {
        min-height: 60px;
    }
}

/* Position Icons */
.kg-staff-icon-crown {
    color: #FFD700; /* Gold */
}

.kg-staff-icon-hat {
    color: #795548; /* Brown */
}

.kg-staff-icon-graduation {
    color: #1E88E5; /* Blue */
}

.kg-staff-icon-medal {
    color: #FB8C00; /* Orange */
}

/* Enhanced Responsive */
@media (max-width: 1024px) {
    .kg-staff-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-xl);
    }
}

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

    .kg-staff-header {
        padding: var(--spacing-md);
    }

    .kg-staff-position-badge {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .kg-staff-name {
        font-size: var(--text-lg);
    }

    .kg-staff-content {
        padding: var(--spacing-md);
    }

    .kg-staff-image img {
        height: 250px;
    }
}

/* --- Generic Content Section --- */
.kg-content-section {
    padding: var(--spacing-3xl) 0; /* Consistent vertical padding */
    margin-bottom: var(--spacing-3xl); /* Spacing between sections */
    background-color: var(--color-bg-primary); /* Default background */
}

/* Alternate background for some sections to break monotony */
.kg-content-section:nth-of-type(even) {
    background-color: var(--color-bg-secondary);
}

/* Staff Archive Content Spacing */
.kg-staff-grid {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
}

.kg-content-section .section-title {
    margin-bottom: var(--spacing-2xl);
}

/* --- Our Story Section Specific Styles --- */
.kg-about-story .kg-story-content {
    display: flex;
    flex-wrap: wrap; /* Allows image and text to wrap on smaller screens */
    gap: var(--spacing-2xl);
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
}

.kg-about-story .kg-story-text {
    flex: 1; /* Takes up available space */
    min-width: 300px; /* Ensures text doesn't get too narrow */
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.kg-about-story .kg-story-image {
    flex: 0 0 400px; /* Fixed width for the image, adjust as needed */
    max-width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.kg-about-story .kg-story-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .kg-about-story .kg-story-content {
        flex-direction: column;
        text-align: center;
    }
    .kg-about-story .kg-story-image {
        flex: 0 0 auto;
        order: -1; /* Image appears above text on mobile */
    }
}

/* --- Info Columns (About, Benefits, Activities) --- */
.info-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
}
.info-column {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--color-primary); /* Accent line like cards */
}
.info-column h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
}
.info-column ul {
    list-style: none;
    padding: 0;
}
.info-column li {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
}
.info-column li img {
    width: 24px;
    height: 24px;
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
}

/* --- Gallery Section --- */
.gallery-section {
    margin-bottom: var(--spacing-3xl);
}
.gallery-section h2 {
    text-align: center;
    font-size: var(--text-3xl);
    margin-bottom: var(--spacing-2xl);
    color: var(--color-primary);
}
.kg-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
}
.kg-gallery-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    overflow: hidden;
    padding: var(--spacing-sm); /* Add some padding around the image */
}
.kg-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.kg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md); /* Slightly smaller radius for inner image */
}

/* Gallery Archive Grid */
.gallery-archive-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on small screens */
    gap: var(--spacing-xl); /* Use existing theme variable for spacing */
    margin-bottom: var(--spacing-3xl); /* Add bottom margin for separation */
}

@media (min-width: 768px) { /* On screens wider than 768px (tablets) */
    .gallery-archive-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (min-width: 992px) { /* On screens wider than 992px (desktops) */
    .gallery-archive-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

/* Specific styles for individual gallery cards */
.gallery-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    height: 100%; /* Ensure cards in a grid have equal height */
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.gallery-card .gallery-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0;
}

.gallery-card .card-cpt-thumbnail {
    width: 100%;
    height: 200px; /* Fixed height for the image area */
    overflow: hidden;
    display: flex; /* Use flexbox to center the image */
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--color-border); /* Separator between image and content */
    background-color: var(--color-bg-secondary); /* Add background color for empty space */
}

.gallery-card .card-cpt-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Contain the image, no cropping */
    transition: transform var(--transition-slow);
}

.gallery-card:hover .card-cpt-thumbnail img {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

.gallery-card .card-cpt-content {
    flex-grow: 1; /* Allow content to take remaining height */
    padding: 8px 12px; /* Compact padding for better space utilization */
    text-align: center; /* Center all text content */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space */
    gap: 8px; /* Consistent gap with archive-gallery.php */
}

.gallery-card .gallery-category {
    font-size: var(--text-xs); /* Smaller font size */
    color: var(--color-text-muted); /* Muted color */
    margin-bottom: 0; /* Remove bottom margin */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    order: -1; /* Place category at the top */
    line-height: 1.2;
}

.gallery-card .card-cpt-title {
    font-size: var(--text-lg); /* Slightly smaller title */
    margin-bottom: var(--spacing-xs); /* Reduced margin */
    line-height: 1.3;
}

.gallery-card .card-cpt-title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.gallery-card .card-cpt-title a:hover {
    color: var(--color-primary);
}

.gallery-card .gallery-image-count {
    font-size: var(--text-sm); /* Smaller font size */
    color: var(--color-text-secondary); /* Secondary color */
    margin-bottom: var(--spacing-sm); /* Reduced margin */
    line-height: 1.2;
}

.gallery-card .button.btn-outline {
    margin-top: auto; /* Push button to the bottom */
    display: inline-block; /* Ensure button styling */
    padding: var(--spacing-xs) var(--spacing-md); /* Smaller button padding */
    font-size: var(--text-sm); /* Smaller button font size */
}

/* --- Content & Sidebar Layout --- */
.content-sidebar-wrap {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--spacing-xl); /* Spacing between content and sidebar */
    align-items: flex-start; /* Align content to the top */
    padding-top: var(--spacing-2xl); /* Add some padding to the top of the content area */
    padding-bottom: var(--spacing-2xl); /* Add some padding to the bottom of the content area */
}

.main-content {
    flex: 1; /* Allow main content to grow */
    min-width: 0; /* Important for flex items in some cases */
}

.sidebar-right {
    width: 20%; /* 20% width for the sidebar */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
    padding: calc(var(--spacing-xl) / 3); /* Reduced padding - 3x smaller */
    background-color: var(--color-primary); /* Use header background color */
    border-radius: var(--radius-xl); /* Consistent with other cards */
    box-shadow: var(--shadow-lg); /* More prominent shadow */
    border: 1px solid var(--color-border); /* Subtle border */
    position: sticky; /* Make sidebar sticky */
    top: var(--spacing-xl); /* Offset from top */
    align-self: flex-start; /* Ensure sticky behavior works with flex-start */
    color: var(--color-text-inverse); /* Ensure text is visible on dark background */
}

/* Adjust main content width to account for sidebar */
@media (min-width: 992px) { /* Adjust breakpoint as needed, often for desktop view */
    .main-content {
        width: calc(80% - var(--spacing-xl)); /* 80% minus the gap */
    }
}

@media (max-width: 991px) { /* On smaller screens, stack content and sidebar */
    .content-sidebar-wrap {
        flex-direction: column;
    }
    .main-content {
        width: 100%;
    }
    .sidebar-right {
        width: 100%;
        margin-top: var(--spacing-2xl); /* Add space between stacked content */
        position: static; /* Disable sticky on mobile */
    }
}

/* Styling for sidebar widgets */
.sidebar-widget-area .widget,
.sidebar-widget-area .widget_block {
    margin-bottom: calc(var(--spacing-2xl) / 3); /* Reduced space between widgets - 3x smaller */
    padding-bottom: calc(var(--spacing-2xl) / 3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Lighter border for contrast */
}

.sidebar-widget-area .widget:last-child,
.sidebar-widget-area .widget_block:last-child {
    margin-bottom: 0;
    padding-bottom: calc(var(--spacing-sm) / 2); /* Small padding for last widget - ~4px */
    border-bottom: none;
}

.sidebar-widget-area .widget-title {
    font-family: var(--font-primary); /* Use primary font for titles */
    font-size: var(--text-2xl); /* Larger title */
    font-weight: var(--font-semibold); /* Explicitly semi-bold */
    color: var(--color-white); /* White title for contrast */
    margin-bottom: calc(var(--spacing-lg) / 3); /* Reduced margin - 3x smaller */
    border-bottom: 2px solid var(--color-accent); /* Keep accent border */
    padding-bottom: calc(var(--spacing-sm) / 3); /* Reduced padding - 3x smaller */
}

.sidebar-widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget-area ul li {
    margin-bottom: var(--spacing-sm); /* Tighter spacing for list items */
}

.sidebar-widget-area ul li:last-child {
    margin-bottom: 0;
}

.sidebar-widget-area ul li a {
    background: rgba(255, 255, 255, 0.1); /* Header glass background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-inverse); /* White text by default */
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-normal);
    display: flex; /* Use flex for alignment and spacing */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-sm);
}

.sidebar-widget-area ul li a:hover,
.sidebar-widget-area ul li.current-menu-item > a,
.sidebar-widget-area ul li.current_page_item > a {
    background: rgba(255, 255, 255, 0.4); /* Brighter glass on hover/active */
    color: var(--color-primary); /* Indigo text on hover/active */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Remove previous pseudo-element styling for menu links to avoid conflict */
.sidebar-widget-area ul li a::before {
    content: none;
}

/* --- Testimonial Section --- */
.testimonials-section {
    margin-bottom: var(--spacing-3xl);
    background: var(--color-bg-secondary);
    padding: var(--spacing-3xl) 0;
}
.testimonials-section h2 {
    text-align: center;
    font-size: var(--text-3xl);
    margin-bottom: var(--spacing-2xl);
    color: var(--color-primary);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
}
.testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary); /* Default accent line */
    z-index: 1;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.testimonial-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-bg-primary);
    box-shadow: var(--shadow-sm);
}
.testimonial-name {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
}
.testimonial-role {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}
.testimonial-content p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
    position: relative;
}
.testimonial-rating .star {
    color: var(--color-accent);
    font-size: var(--text-lg);
}

/* --- Statistics Cards Section --- */
.stats-cards-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-secondary);
}

.section-title {
    text-align: center;
    font-size: var(--text-3xl);
    margin-bottom: var(--spacing-2xl);
    color: var(--color-primary);
}

.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
}

.card-stat {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-stat .card-cpt-content {
    flex-grow: 1;
    margin-bottom: var(--spacing-md);
}

.stat-number {
    font-family: var(--font-primary);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.card-cpt-footer {
    margin-top: auto;
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

.card-stat:hover .card-cpt-footer {
    color: var(--color-accent);
}

/* --- Upcoming Events Section --- */
.upcoming-events-section {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-primary);
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.event-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.event-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.event-date {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    line-height: 1;
}

.event-date__day {
    font-size: var(--text-3xl);
}

.event-date__month {
    font-size: var(--text-base);
    text-transform: uppercase;
}

.event-details {
    flex-grow: 1;
}

.event-title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.event-excerpt {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.event-arrow {
    font-size: var(--text-2xl);
    color: var(--color-primary);
    transition: transform var(--transition-fast);
}

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

/* --- Final CTA Section --- */
.final-cta-section {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
    margin-top: var(--spacing-3xl);
}

.cta-title {
    font-size: var(--text-3xl);
    color: var(--color-white);
    margin-bottom: var(--spacing-md);
}

.cta-text {
    font-size: var(--text-lg);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--spacing-xl) auto;
}

.cta-button {
    background-color: var(--color-accent);
    color: var(--color-black);
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta-buttons .button {
    margin: 0;
}

/* Professional Testimonial Styles */
.single-testimonial-professional {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-3xl);
}

.testimonial-professional-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    border-bottom: 4px solid var(--color-primary);
}

.testimonial-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 4px solid var(--color-white);
    flex-shrink: 0;
}

.testimonial-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.testimonial-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    font-size: var(--text-3xl);
    box-shadow: var(--shadow-md);
    border: 4px solid var(--color-white);
    flex-shrink: 0;
}

.hero-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 4px solid var(--color-white);
    margin: var(--spacing-xl) auto;
    background: var(--color-white);
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.testimonial-info {
    flex-grow: 1;
}

.testimonial-name {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.testimonial-role {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    color: var(--color-info);
    margin-bottom: var(--spacing-md);
}

.testimonial-rating-professional {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xl);
}

.testimonial-rating-professional .star {
    font-size: var(--text-xl);
    color: var(--color-accent);
    transition: all var(--transition-fast);
}

.testimonial-rating-professional .star.active {
    color: var(--color-accent);
    transform: scale(1.1);
}

.testimonial-date {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-md);
}

.testimonial-professional-content {
    padding: var(--spacing-2xl);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    position: relative;
    margin-bottom: var(--spacing-2xl);
    border-left: 4px solid var(--color-primary);
}

.testimonial-professional-content::before {
    content: '"';
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    font-size: var(--text-4xl);
    color: var(--color-accent);
    font-family: var(--font-primary);
    line-height: 1;
    opacity: 0.8;
}

.testimonial-text {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-text-primary);
    font-style: italic;
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.testimonial-quote-icon {
    color: var(--color-primary);
    opacity: 0.1;
    font-size: var(--text-xl);
    margin-right: var(--spacing-md);
}

.testimonial-metadata {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.metadata-label {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metadata-value {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.rating-stars {
    display: flex;
    gap: var(--spacing-xs);
}

.testimonial-actions {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.testimonial-actions .btn-primary,
.testimonial-actions .btn-secondary {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.testimonial-actions .btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.testimonial-actions .btn-secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.testimonial-actions .btn-primary:hover,
.testimonial-actions .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.testimonial-actions .btn-primary:hover {
    background: var(--color-accent);
    color: var(--color-black);
}

.testimonial-actions .btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.testimonial-contact-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--color-bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.contact-item i {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    font-size: var(--text-lg);
}

/* Related Testimonials */
.related-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.related-testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.related-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.related-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.related-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-avatar-placeholder {
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
}

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

.related-content h4 {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.related-content a:hover h4 {
    color: var(--color-primary);
}

.related-role {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Testimonial Form Section */
#testimonial-form {
    background: var(--color-bg-secondary);
    padding: var(--spacing-3xl) 0;
}

.testimonial-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-lg);
}

.testimonial-form .acf-field {
    margin-bottom: var(--spacing-xl);
}

.testimonial-form .acf-label label {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.testimonial-form input,
.testimonial-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}

.testimonial-form input:focus,
.testimonial-form textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(92, 107, 192, 0.1);
}

.testimonial-form .acf-button {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.testimonial-form .acf-button:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Responsive for Professional Testimonial */
@media (max-width: 1024px) {
    .testimonial-professional-header {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-metadata {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .testimonial-professional-header {
        flex-direction: column;
        padding: var(--spacing-xl);
    }

    .hero-avatar {
        width: 120px;
        height: 120px;
    }

    .testimonial-avatar-large {
        width: 100px;
        height: 100px;
    }

    .testimonial-metadata {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .testimonial-professional-content {
        padding: var(--spacing-xl);
    }

    .testimonial-professional-content::before {
        font-size: var(--text-3xl);
    }

    .testimonial-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .testimonial-actions .btn-primary,
    .testimonial-actions .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .related-testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

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

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .cta-buttons .button {
        width: 100%;
        text-align: center;
    }
}

/* --- Archive Testimonial Page --- */
.archive-header-custom {
    padding: var(--spacing-3xl) var(--spacing-xl);
    background-color: var(--color-bg-secondary);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.archive-title {
    font-size: var(--text-4xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.archive-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl) auto;
}

.testimonial-form-wrapper {
    padding: var(--spacing-3xl) 0;
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-3xl);
}

/* --- ACF Form Styling --- */
.acf-form {
    max-width: 700px;
    margin: 0 auto;
}

.acf-form .acf-field {
    border: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
}

.acf-form .acf-label {
    margin-bottom: var(--spacing-sm);
}

.acf-form .acf-label label {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="number"],
.acf-form textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
}

.acf-form input[type="text"]:focus,
.acf-form input[type="email"]:focus,
.acf-form input[type="number"]:focus,
.acf-form textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.acf-form .acf-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border: none;
}

.acf-form .acf-button:hover {
    background-color: var(--color-accent);
    color: var(--color-black);
}

.acf-form .updated-message {
    background-color: var(--color-success);
    color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

/* --- Star Rating UI for ACF Form --- */
.star-rating-ui {
    display: inline-flex;
    flex-direction: row-reverse; /* Important for the hover effect */
    justify-content: flex-end;
}

.star-rating-ui .star {
    font-size: var(--text-3xl);
    color: var(--color-border);
    cursor: pointer;
    transition: color var(--transition-fast);
}

/* Hover effect: all stars to the left of the hovered one turn yellow */
.star-rating-ui .star:hover,
.star-rating-ui .star:hover ~ .star {
    color: var(--color-accent);
}

/* Keep selected stars yellow */
.star-rating-ui.is-rated .star.is-selected,
.star-rating-ui.is-rated .star.is-selected ~ .star {
    color: var(--color-accent);
}


/* --- Archive Group Page --- */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.card-group {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.card-group__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-group__image .placeholder-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-text-muted);
}

.card-group__content {
    padding: var(--spacing-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-group__title {
    font-size: var(--text-2xl);
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-primary);
}

.card-group__meta {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}
.card-group__meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.card-group__slogan {
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    flex-grow: 1;
}

.card-group__footer {
    margin-top: auto;
    text-align: right;
}

.button.button--small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--text-sm);
}

/* --- Utility Classes (for CPT Archives/Singles, etc.) --- */
.card-cpt { /* Generic card for CPTs based on accent line card style */
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.card-cpt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-primary); /* Default primary accent */
    z-index: 1;
}
.card-cpt:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.card-cpt-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.card-cpt-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-white);
    flex-shrink: 0;
    background: var(--color-secondary); /* Example */
}
.card-cpt-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
}
.card-cpt-content {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* --- Utility classes --- */
.text-center {
    text-align: center;
}

.mt-xl {
    margin-top: var(--spacing-xl);
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-lg);
    }
    .hero-section h1 {
        font-size: var(--text-4xl);
    }
    .hero-section p {
        font-size: var(--text-lg);
    }
    #site-header .kg-header__wrapper {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .kg-header__nav-menu, .kg-header__quick-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .kg-header__nav-menu li, .kg-header__quick-links li {
        margin-left: 0;
    }
    .info-columns, .testimonials-grid {
        grid-template-columns: 1fr;
    }
}
/* --- News Archive Styles --- */
.kg-news-archive {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    min-height: 60vh;
}

.kg-news-archive__header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.kg-news-archive__title {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xl) 0;
    position: relative;
    display: inline-block;
}

.kg-news-archive__title::after {
    content: '';
    position: absolute;
    bottom: -var(--spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--color-secondary);
    border-radius: var(--radius-full);
}

.kg-news-archive__description {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
    line-height: 1.7;
}

/* --- Filter Section в лівій колонці --- */
.kg-news-filters-section {
    background: var(--color-bg-secondary);
    padding: var(--spacing-lg) var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--color-border);
}

.kg-news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: flex-start;
    margin: 0;
}

.news-grid-container {
    /* Контейнер для сітки новин */
}

.kg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.kg-filter-chip:hover,
.kg-filter-chip--active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kg-filter-chip i {
    font-size: var(--text-sm);
}

/* --- News Grid --- */
.kg-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
}

.kg-news-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kg-news-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* --- News Card Image --- */
.kg-news-card__image-link {
    display: block;
    overflow: hidden;
    position: relative;
    height: 200px;
}

.kg-news-card__image-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(92, 107, 192, 0.1) 100%);
    z-index: 1;
    transition: opacity var(--transition-fast);
    opacity: 0;
}

.kg-news-card__image-link:hover::before {
    opacity: 1;
}

.kg-news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.kg-news-card__image-link:hover .kg-news-card__img {
    transform: scale(1.05);
}

.kg-news-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: var(--text-2xl);
}

.kg-news-card__date {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--color-accent);
    color: var(--color-black);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    z-index: 2;
}

/* --- News Card Content --- */
.kg-news-card__content {
    padding: var(--spacing-xl);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.kg-news-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
}

.kg-category-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kg-category-badge--announcement {
    background: var(--color-danger);
    color: var(--color-white);
}

.kg-category-badge--event {
    background: var(--color-energy);
    color: var(--color-white);
}

.kg-category-badge--update {
    background: var(--color-info);
    color: var(--color-white);
}

.kg-category-badge--holiday {
    background: var(--color-success);
    color: var(--color-white);
}

.kg-news-card__title {
    flex-grow: 1;
    margin: 0;
}

.kg-news-card__title-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.kg-news-card__title-link:hover {
    color: var(--color-primary);
}

.kg-news-card__excerpt {
    color: var(--color-text-secondary);
    font-family: var(--font-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: var(--spacing-lg) 0;
    flex-grow: 1;
}

.kg-news-card__excerpt p:last-child {
    margin-bottom: 0;
}

.kg-news-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.kg-news-card__meta {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.kg-news-card__author,
.kg-news-card__comments {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.kg-news-card__read-more {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: all var(--transition-fast);
}

.kg-news-card__read-more:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

.kg-news-card__read-more i {
    transition: transform var(--transition-fast);
}

.kg-news-card__read-more:hover i {
    transform: translateX(3px);
}

/* --- About Us Specific Card Styles --- */
.kg-value-card,
.kg-feature-card {
    /* Inherit base card styles from kg-news-card */
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-xl); /* Add padding for content */
    text-align: center;
    border: 1px solid var(--color-border);
}

.kg-value-card:hover,
.kg-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.kg-value-icon,
.kg-feature-icon {
    font-size: var(--text-4xl);
    color: var(--color-primary); /* Use primary color for icons */
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-fast);
}

.kg-value-card:hover .kg-value-icon,
.kg-feature-card:hover .kg-feature-icon {
    color: var(--color-accent); /* Accent color on hover */
}

.kg-value-title,
.kg-feature-title {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.kg-value-description,
.kg-feature-description {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    flex-grow: 1;
}

/* --- Empty State --- */
.kg-news-empty {
    text-align: center;
    padding: var(--spacing-3xl) 0;
}

.kg-news-empty__icon {
    font-size: 4rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
}

.kg-news-empty__title {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.kg-news-empty__text {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.6;
}

.kg-news-empty__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.kg-news-empty__button:hover {
    background: var(--color-accent);
    color: var(--color-black);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* --- News Pagination --- */
.kg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-3xl);
}

.kg-pagination .page-numbers {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-pagination .page-numbers a,
.kg-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.kg-pagination .page-numbers a {
    background: var(--color-white);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
    text-decoration: none;
}

.kg-pagination .page-numbers a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.kg-pagination .page-numbers span {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.kg-pagination .prev,
.kg-pagination .next {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
    gap: var(--spacing-sm);
}

.kg-pagination .prev:hover,
.kg-pagination .next:hover {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

/* --- Footer Styles --- */
.kg-footer {
    background: linear-gradient(135deg, var(--color-footer-primary) 0%, var(--color-footer-secondary) 100%);
    color: var(--color-footer-light);
    padding-top: var(--spacing-3xl);
    border-top: 4px solid var(--color-footer-accent);
    position: relative;
    overflow: hidden;
}

.kg-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="footer-pattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(45)"><rect width="10" height="10" fill="white" opacity="0.02"/></pattern></defs><rect width="100%" height="100%" fill="url(%23footer-pattern)"/></svg>');
    pointer-events: none;
}

.kg-footer__row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    gap: var(--spacing-3xl);
    position: relative;
    z-index: 1;
}

.kg-footer__main .container {
    padding-bottom: var(--spacing-3xl);
}

.kg-footer__block {
    margin-bottom: var(--spacing-2xl);
}

.kg-footer__block--logo {
    grid-column: span 1;
}

.kg-footer__block--contact {
    grid-column: span 1;
}

.kg-footer__block--nav,
.kg-footer__block--quick-links,
.kg-footer__block--subscribe {
    grid-column: span 1;
}

.kg-footer__main .container {
    padding-bottom: var(--spacing-3xl);
}

.kg-footer__block {
    margin-bottom: var(--spacing-2xl); /* Spacing between blocks on smaller screens */
}

.kg-footer__logo {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
}

.kg-footer__logo-img {
    max-width: 150px;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

.kg-footer__logo-img:hover {
    transform: translateY(-3px);
}

.kg-footer__description {
    color: var(--color-footer-light);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.kg-footer__contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kg-footer__contact-info li {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-footer-light);
    font-size: var(--text-base);
    transition: transform var(--transition-fast);
}

.kg-footer__contact-info li:hover {
    transform: translateX(5px);
}

.kg-footer__contact-info li i {
    margin-right: var(--spacing-md);
    font-size: var(--text-lg);
    width: 20px;
    text-align: center;
}

.kg-footer__contact-info a {
    color: var(--color-footer-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.kg-footer__contact-info a:hover {
    color: var(--color-footer-accent);
}

.kg-footer__heading {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    color: var(--color-footer-light);
    margin-bottom: var(--spacing-xl);
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    padding-bottom: var(--spacing-sm);
}

.kg-footer__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-footer-accent);
    border-radius: var(--radius-full);
}

.kg-footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kg-footer__menu li {
    margin-bottom: var(--spacing-sm);
}

.kg-footer__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kg-footer__menu-list li {
    margin-bottom: var(--spacing-sm);
}

.kg-footer__menu a {
    color: var(--color-footer-light);
    text-decoration: none;
    font-size: var(--text-base);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    position: relative;
}

.kg-footer__menu a::before {
    content: '→';
    margin-right: var(--spacing-sm);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-fast);
    color: var(--color-footer-accent);
}

.kg-footer__menu a:hover {
    color: var(--color-footer-accent);
    transform: translateX(5px);
}

.kg-footer__menu a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.kg-footer__social-icons {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.kg-footer__social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: var(--color-footer-light);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.kg-footer__social-icon:hover {
    background: var(--color-footer-accent);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
}

.kg-footer__subscribe-text {
    color: var(--color-footer-light);
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.kg-footer__subscribe-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.kg-footer__subscribe-input {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: var(--color-footer-light);
    font-size: var(--text-base);
    transition: all var(--transition-fast);
}

.kg-footer__subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.kg-footer__subscribe-input:focus {
    border-color: var(--color-footer-accent);
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.kg-footer__subscribe-button {
    background: var(--color-footer-accent);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: var(--text-base);
}

.kg-footer__subscribe-button:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.kg-footer__subscribe-notice {
    padding: var(--spacing-md);
    background: rgba(67, 160, 71, 0.1);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    color: var(--color-white);
    text-align: center;
    font-size: var(--text-sm);
    margin-top: var(--spacing-md);
}

.kg-footer__bottom-bar {
    background: var(--color-footer-primary);
    border-top: 1px solid var(--color-footer-divider);
    color: var(--color-footer-light);
    padding: var(--spacing-lg) 0;
    text-align: center;
    backdrop-filter: blur(10px);
}

.kg-footer__bottom-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.kg-footer__copyright {
    margin: 0;
    font-size: var(--text-sm);
    opacity: 0.9;
    flex: 1;
    text-align: left;
}

.kg-footer__bottom-nav {
    margin: 0;
    padding: 0;
}

.kg-footer__bottom-menu-list {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    margin: 0;
    padding: 0;
}

.kg-footer__bottom-menu-list a {
    color: var(--color-footer-light);
    text-decoration: none;
    font-size: var(--text-sm);
    opacity: 0.8;
    transition: all var(--transition-fast);
}

.kg-footer__bottom-menu-list a:hover {
    opacity: 1;
    color: var(--color-footer-accent);
}

/* Responsive adjustments for footer */
@media (max-width: 1200px) {
    .kg-footer__row {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: var(--spacing-2xl);
    }
    .kg-footer__block--logo {
        grid-column: span 2;
        grid-row: 1;
    }
    .kg-footer__block--contact {
        grid-column: span 1;
    }
    .kg-footer__block--nav,
    .kg-footer__block--quick-links,
    .kg-footer__block--subscribe {
        grid-column: span 1;
        grid-row: auto;
    }
}

@media (max-width: 991px) { /* Adjust for medium devices (Bootstrap 'md' breakpoint) */
    .kg-footer__row {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }
    .kg-footer__block--logo {
        grid-column: span 2;
        grid-row: 1;
        text-align: center;
    }
    .kg-footer__block--contact,
    .kg-footer__block--nav {
        grid-column: span 1;
        grid-row: 2;
    }
    .kg-footer__block--quick-links,
    .kg-footer__block--subscribe {
        grid-column: span 1;
        grid-row: 3;
    }

    .kg-footer__social-icons {
        justify-content: center;
    }

    .kg-footer__bottom-bar .container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .kg-footer__copyright {
        text-align: center;
    }

    .kg-footer__bottom-menu-list {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) { /* Adjust for small devices (Bootstrap 'sm' breakpoint) */
    .kg-footer__main .container {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }

    .kg-footer__row {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .kg-footer__block--logo,
    .kg-footer__block--contact,
    .kg-footer__block--nav,
    .kg-footer__block--quick-links,
    .kg-footer__block--subscribe {
        grid-column: span 1;
        grid-row: auto;
        text-align: center;
    }

    .kg-footer__block--contact {
        text-align: left;
    }

    .kg-footer__heading::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .kg-footer__contact-info li i {
        margin-right: var(--spacing-sm);
    }

    .kg-footer__bottom-menu-list {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
}

@media (max-width: 480px) { /* Extra small devices */
    .kg-footer__social-icons {
        gap: var(--spacing-sm);
    }

    .kg-footer__subscribe-button {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .kg-footer__contact-info li {
        font-size: var(--text-sm);
    }
}
/* Gallery Styles from template part */
.gallery-carousel-container {
    position: relative;
    margin-bottom: 30px;
}

.gallery-carousel {
    overflow: hidden;
}

.carousel-item {
    position: relative;
    display: none;
}

.carousel-item.active {
    display: block;
}

.carousel-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 30px;
    text-align: center;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    z-index: 10;
}

.carousel-control:hover {
    background: rgba(0,0,0,0.7);
}

.carousel-control-prev {
    left: 20px;
}

.carousel-control-next {
    right: 20px;
}

.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    cursor: pointer;
}

.carousel-indicators button.active {
    background: white;
}

.single-image-container img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.gallery-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.gallery-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    text-align: center;
}

.gallery-grid-item:hover .image-overlay {
    opacity: 1;
}

.overlay-content h5 {
    margin-bottom: 10px;
}

.related-gallery-card {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.related-gallery-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.related-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Стилі для модального вікна галереї */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.gallery-modal .image-slider {
    position: relative;
    text-align: center;
}

.gallery-modal .slide {
    display: none;
}

.gallery-modal .slide:not(.hidden) {
    display: block;
}

.gallery-modal .slide img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.gallery-modal .modal-nav {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.gallery-modal .modal-nav button {
    background: rgba(255,255,255,0.1);
    border: 2px solid white;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.gallery-modal .modal-nav button:hover {
    background: rgba(255,255,255,0.2);
}

.gallery-modal .modal-nav .close-btn {
    background: rgba(220, 53, 69, 0.8);
    border-color: #dc3545;
}

.gallery-modal .modal-nav .close-btn:hover {
    background: rgba(220, 53, 69, 1);
}

.gallery-modal .counter {
    font-size: 18px;
    color: white;
    min-width: 80px;
    text-align: center;
}

/* Підписи в lightbox */
.gallery-modal .lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 30px 20px 20px;
    text-align: center;
}

.gallery-modal .lightbox-caption h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

.gallery-modal .lightbox-caption p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* Запобігання прокрутки коли lightbox відкритий */
body.lightbox-open {
    overflow: hidden;
}

/* Курсор для фото в каруселі */
.carousel-item {
    cursor: pointer;
}

.carousel-item:hover img {
    filter: brightness(0.95);
}

/* --- Single Staff Page Styles --- */
.single-staff-profile {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-xl); /* Reduced margin for tighter spacing */
}

/* Staff Profile Header - Professional Style */
.staff-profile-header {
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-width: 800px; /* Same width as info blocks */
    margin-left: auto;
    margin-right: auto;
}

.staff-profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 20%, rgba(255, 255, 255, 0.03) 40%, transparent 60%);
    z-index: 1;
}

.staff-profile-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.staff-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed from cover to contain - no cropping */
    object-position: center;
    transition: transform var(--transition-normal);
    background: var(--color-white);
}

.staff-profile-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.staff-profile-overlay {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 2;
}

.staff-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-white);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
}

.staff-profile-badge.administrative {
    color: var(--color-danger);
}

.staff-profile-badge.educational {
    color: var(--color-info);
}

.staff-profile-badge.support {
    color: var(--color-success);
}

.staff-profile-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.9) 100%);
    color: var(--color-white);
    padding: var(--spacing-2xl);
    z-index: 1;
}

.staff-profile-name {
    font-family: var(--font-primary);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

.staff-profile-position,
.staff-profile-experience {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-sm);
    opacity: 0.95;
}

.staff-profile-quick-contact {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.quick-contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.quick-contact-item:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.staff-profile-socials {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    color: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px) scale(1.1);
}

/* Staff Profile Sections */
.staff-profile-section {
    padding: var(--spacing-2xl);
    border-bottom: 1px solid var(--color-border);
}

.staff-profile-section:last-child {
    border-bottom: none;
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent);
}

.staff-profile-bio {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
}

/* Info Blocks */
.info-block {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.info-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.info-block-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.info-block-content {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.contact-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.contact-details h4 {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.contact-details a {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-details a:hover {
    color: var(--color-primary);
}

/* Related Staff Grid */
.related-staff-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
}

.related-staff-card-link {
    text-decoration: none;
    display: block;
    width: 200px;
    flex-shrink: 0;
}

.related-staff-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    text-align: center;
    height: 100%;
}

.related-staff-card-link:hover .related-staff-card {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.related-staff-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-staff-image img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center;
    transition: transform var(--transition-normal);
}

.related-staff-card:hover .related-staff-image img {
    transform: scale(1.02);
}

.related-staff-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
    color: var(--color-text-muted);
    font-size: var(--text-3xl);
}

.related-staff-info {
    padding: var(--spacing-md);
}

.related-staff-info h4 {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    transition: color var(--transition-fast);
}

.related-staff-card:hover .related-staff-info h4 {
    color: var(--color-primary);
}

.related-staff-position {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Single Staff Page Widgets */
.sidebar-widget-area .widget {
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: calc(var(--spacing-xl) / 3);
    margin-bottom: calc(var(--spacing-2xl) / 3);
    box-shadow: var(--shadow-lg);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent);
}

.widget-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-white);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.widget-button:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.widget-button.secondary {
    background: rgba(255, 255, 255, 0.1);
}

.widget-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-sm);
}

.widget-social-links {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.widget-social-link {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: var(--text-lg);
}

.widget-social-link:hover {
    background: var(--color-accent);
    transform: translateY(-2px) scale(1.1);
}

/* Responsive for Single Staff Page */
@media (max-width: 1024px) {
    .staff-profile-header {
        border-radius: var(--radius-xl);
    }

    .staff-profile-image {
        height: 300px;
    }

    .staff-profile-info {
        padding: var(--spacing-xl);
    }

    .staff-profile-name {
        font-size: var(--text-2xl);
    }

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

    .related-staff-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .staff-profile-image {
        height: 250px;
    }

    .staff-profile-overlay {
        top: var(--spacing-md);
        right: var(--spacing-md);
    }

    .staff-profile-info {
        padding: var(--spacing-lg);
    }

    .staff-profile-name {
        font-size: var(--text-xl);
    }

    .staff-profile-position,
    .staff-profile-experience {
        font-size: var(--text-base);
    }

    .staff-profile-quick-contact {
        gap: var(--spacing-md);
    }

    .quick-contact-item {
        font-size: var(--text-sm);
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .staff-profile-socials {
        gap: var(--spacing-sm);
    }

    .social-link {
        width: 38px;
        height: 38px;
    }

    .staff-profile-section {
        padding: var(--spacing-lg);
    }

    .section-title {
        font-size: var(--text-xl);
        flex-wrap: wrap;
    }

    .info-block {
        padding: var(--spacing-lg);
    }

    .info-block-title {
        font-size: var(--text-lg);
    }

    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        font-size: var(--text-lg);
    }

    .related-staff-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .related-staff-image {
        height: 150px;
    }

    .sidebar-widget-area .widget {
        padding: calc(var(--spacing-lg) / 3);
    }

    .widget-title {
        font-size: var(--text-lg);
        flex-wrap: wrap;
    }

    .widget-button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--text-sm);
    }

    .widget-social-link {
        width: 44px;
        height: 44px;
        font-size: var(--text-base);
    }
}

/* --- Staff "Детальніше" Button Styling --- */
.kg-staff-more {
    padding: var(--spacing-lg);
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    margin-top: auto;
}

.kg-staff-read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.kg-staff-read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left var(--transition-slow);
    z-index: 1;
}

.kg-staff-read-more:hover::before {
    left: 100%;
}

.kg-staff-read-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(92, 107, 192, 0.4);
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    color: var(--color-white);
    text-decoration: none;
}

.kg-staff-read-more i {
    transition: transform var(--transition-normal);
    font-size: 0.9rem;
    z-index: 2;
    position: relative;
}

.kg-staff-read-more:hover i {
    transform: translateX(4px);
}

/* Active state */
.kg-staff-read-more:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);
}

/* Focus state for accessibility */
.kg-staff-read-more:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* --- Staff Category Filter Buttons --- */
.filter-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.filter-btn.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.filter-btn:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.filter-btn i {
    font-size: var(--text-base);
}

/* Staff filtering */
.kg-staff-card[data-category="administrative"],
.kg-staff-card[data-category="educational"],
.kg-staff-card[data-category="support"] {
    display: none;
}

/* Show selected category cards */
.kg-staff-card[data-category="all"],
.kg-staff-grid[data-active-filter="administrative"] .kg-staff-card[data-category="administrative"],
.kg-staff-grid[data-active-filter="educational"] .kg-staff-card[data-category="educational"],
.kg-staff-grid[data-active-filter="support"] .kg-staff-card[data-category="support"] {
    display: block;
}

/* Mobile responsive for filter buttons */
@media (max-width: 768px) {
    .filter-buttons {
        justify-content: center;
        margin-bottom: var(--spacing-md);
    }

    .filter-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--text-sm);
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .kg-staff-more {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
    }

    .kg-staff-read-more {
        width: 100%;
        justify-content: center;
        padding: var(--spacing-lg) var(--spacing-xl);
        font-size: var(--text-base);
    }
}

/* --- Enhanced Single Staff Page Styles --- */

/* Staff Profile Sections */
.staff-profile-section {
    margin-bottom: var(--spacing-3xl);
    background: var(--color-bg-secondary); /* Changed from white to page background */
    border-radius: var(--radius-md); /* Much smaller radius */
    padding: var(--spacing-lg); /* Further reduced padding */
    box-shadow: var(--shadow-sm); /* Even softer shadow */
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border); /* Add subtle border */
    max-width: 800px; /* Constrain width for better readability */
    margin-left: auto;
    margin-right: auto;
}

/* First section after photo with better spacing */
.staff-profile-section:first-of-type {
    margin-top: var(--spacing-2xl); /* Add more space after photo */
}

.staff-profile-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
}

.section-title {
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.section-title i {
    font-size: var(--text-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: var(--color-white);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

/* Enhanced Biography Section */
.staff-profile-bio {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-text-secondary);
    background: var(--color-white); /* White background for readability */
    padding: var(--spacing-md); /* Further reduced padding */
    border-radius: var(--radius-sm); /* Even smaller radius */
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    max-width: 700px; /* Constrain width */
    margin-left: auto;
    margin-right: auto;
}

/* Information Blocks */
.info-block {
    margin-bottom: var(--spacing-lg); /* Reduced margin */
    background: var(--color-white); /* White background for better contrast */
    border-radius: var(--radius-sm); /* Even smaller radius */
    padding: var(--spacing-md); /* Further reduced padding */
    border-left: 3px solid var(--color-accent); /* Thinner accent line */
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    border: 1px solid var(--color-border); /* Subtle border */
    max-width: 650px; /* Constrain width */
    margin-left: auto;
    margin-right: auto;
}

.info-block:last-child {
    margin-bottom: 0;
}

.info-block-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.info-block-title i {
    color: var(--color-accent);
    font-size: var(--text-lg);
}

.info-block-content {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Enhanced Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md); /* Further reduced gap */
    padding: var(--spacing-md); /* Further reduced padding */
    background: var(--color-white); /* White background */
    border-radius: var(--radius-sm); /* Even smaller radius */
    border: 1px solid var(--color-border);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm); /* Subtle shadow */
    max-width: 320px; /* Constrain width */
    margin-left: auto;
    margin-right: auto;
}

.contact-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-info) 100%);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.contact-details h4 {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-details a {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-details a:hover {
    color: var(--color-primary);
}

/* Enhanced Quick Contact */
.staff-profile-quick-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.quick-contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-white);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-normal);
    font-size: var(--text-sm);
}

.quick-contact-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(5px);
}

.quick-contact-item i {
    font-size: var(--text-base);
}

/* Enhanced Social Links */
.staff-profile-socials {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-normal);
    font-size: var(--text-lg);
}

.social-link:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}




.related-staff-info h4 a:hover {
    color: var(--color-primary);
}

.related-staff-position {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Mobile responsiveness for single staff */
@media (max-width: 768px) {
    .staff-profile-section {
        padding: var(--spacing-md); /* Further reduced for mobile */
        margin-bottom: var(--spacing-2xl);
    }

    .section-title {
        font-size: var(--text-xl);
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .section-title i {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }

    .staff-profile-bio {
        padding: var(--spacing-md); /* Further reduced for mobile */
        font-size: var(--text-base);
    }

    .info-block {
        padding: var(--spacing-md); /* Further reduced for mobile */
        margin-bottom: var(--spacing-lg); /* Slightly reduced margin */
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .contact-item {
        padding: var(--spacing-md); /* Further reduced for mobile */
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .related-staff-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .related-staff-card {
        padding: var(--spacing-sm); /* Further reduced for mobile */
    }

    .staff-profile-header {
        border-radius: var(--radius-lg);
    }

    .staff-profile-image {
        height: 300px;
    }
}

/* ========================================
   SECONDARY MENU - SLIDE OUT WITH COLOR ACCENT
   ======================================== */

/* Secondary Menu Toggle Button */
.kg-header__secondary-toggle {
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.kg-header__secondary-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translate(-50%, -50%);
    transition: width var(--transition-normal), height var(--transition-normal);
    z-index: -1;
}

.kg-header__secondary-toggle:hover {
    color: var(--color-text-inverse);
    transform: scale(1.1);
}

.kg-header__secondary-toggle:hover::before {
    width: 40px;
    height: 40px;
}

/* Secondary Menu Container */
.kg-secondary-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    transition: left var(--transition-slow);
}

.kg-secondary-menu.active {
    left: 0;
}

/* Overlay */
.kg-secondary-menu__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity var(--transition-normal);
    backdrop-filter: blur(5px);
}

.kg-secondary-menu.active .kg-secondary-menu__overlay {
    opacity: 1;
}

/* Main Content with Color Accent */
.kg-secondary-menu__content {
    position: relative;
    width: 360px;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    box-shadow: var(--shadow-2xl);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.kg-secondary-menu.active .kg-secondary-menu__content {
    transform: translateX(0);
}

/* Header */
.kg-secondary-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.kg-secondary-menu__header h3 {
    color: var(--color-white);
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

.kg-secondary-menu__close {
    background: none;
    border: none;
    font-size: var(--text-xl);
    cursor: pointer;
    color: var(--color-white);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.kg-secondary-menu__close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Navigation */
.kg-secondary-menu__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) 0;
}

.kg-secondary-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kg-secondary-menu__list li {
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInMenuItem 0.4s ease forwards;
}

.kg-secondary-menu__list li:nth-child(1) { animation-delay: 0.1s; }
.kg-secondary-menu__list li:nth-child(2) { animation-delay: 0.15s; }
.kg-secondary-menu__list li:nth-child(3) { animation-delay: 0.2s; }
.kg-secondary-menu__list li:nth-child(4) { animation-delay: 0.25s; }
.kg-secondary-menu__list li:nth-child(5) { animation-delay: 0.3s; }
.kg-secondary-menu__list li:nth-child(n+6) { animation-delay: 0.35s; }

@keyframes slideInMenuItem {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.kg-secondary-menu__list a {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    margin: 0 var(--spacing-sm);
    border-radius: var(--radius-lg);
}

.kg-secondary-menu__list a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: left var(--transition-normal);
}

.kg-secondary-menu__list a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    transform: translateX(5px);
}

.kg-secondary-menu__list a:hover::before {
    left: 0;
}

/* Menu Icons */
.kg-secondary-menu__icon {
    font-size: var(--text-lg);
    width: 24px;
    text-align: center;
    margin-right: var(--spacing-md);
    opacity: 0.8;
    transition: var(--transition-fast);
}

.kg-secondary-menu__list a:hover .kg-secondary-menu__icon {
    opacity: 1;
    transform: scale(1.1);
}

.kg-secondary-menu__text {
    font-weight: var(--font-medium);
    font-size: var(--text-base);
}

/* Submenu */
.kg-secondary-menu__sub-menu {
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0 0 var(--spacing-xl);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.kg-secondary-menu__list li:hover > .kg-secondary-menu__sub-menu {
    max-height: 500px;
}

.kg-secondary-menu__sub-menu li {
    margin-bottom: var(--spacing-xs);
    animation: none;
    opacity: 1;
    transform: none;
}

.kg-secondary-menu__sub-menu a {
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: 0 var(--spacing-md) 0 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.kg-secondary-menu__sub-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

.kg-secondary-menu__sub-menu .kg-secondary-menu__icon {
    font-size: var(--text-sm);
    width: 18px;
}

/* Footer with Theme Toggle */
.kg-secondary-menu__footer {
    padding: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kg-theme-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: var(--text-sm);
    backdrop-filter: blur(10px);
}

.kg-theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.kg-theme-toggle-btn i {
    font-size: var(--text-lg);
    transition: var(--transition-fast);
}

.kg-theme-toggle-btn:hover i {
    transform: rotate(180deg);
}

/* Dark Theme Integration */
[data-theme="dark"] .kg-secondary-menu__content {
    background: linear-gradient(135deg, #1a237e 0%, #2e7d32 100%);
}

[data-theme="dark"] .kg-secondary-menu__overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Active Menu Items */
.kg-secondary-menu__list .current-menu-item > a,
.kg-secondary-menu__list .current-menu-ancestor > a {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-weight: var(--font-semibold);
}

.kg-secondary-menu__list .current-menu-item > a::before,
.kg-secondary-menu__list .current-menu-ancestor > a::before {
    left: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .kg-secondary-menu__content {
        width: 100%;
        max-width: 320px;
    }

    .kg-secondary-menu__header {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .kg-secondary-menu__header h3 {
        font-size: var(--text-lg);
    }

    .kg-secondary-menu__list a {
        padding: var(--spacing-sm) var(--spacing-lg);
        margin: 0 var(--spacing-xs);
    }

    .kg-secondary-menu__icon {
        font-size: var(--text-base);
        width: 20px;
        margin-right: var(--spacing-sm);
    }

    .kg-secondary-menu__text {
        font-size: var(--text-sm);
    }

    .kg-secondary-menu__sub-menu a {
        padding: var(--spacing-xs) var(--spacing-md);
        margin: 0 var(--spacing-xs) 0 0;
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .kg-secondary-menu__content {
        max-width: 280px;
    }

    .kg-secondary-menu__list a {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .kg-secondary-menu__icon {
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
    }
}

/* ========================================
   SIDEBAR SECONDARY MENU
   ======================================== */

/* Main Container */
.kg-sidebar-menu {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.kg-sidebar-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="90" cy="30" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

/* Menu Title */
.kg-sidebar-menu__title {
    color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.kg-sidebar-menu__title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    margin: var(--spacing-sm) auto 0;
    border-radius: var(--radius-full);
}

/* Menu List */
.kg-sidebar-menu__list {
    list-style: none;
    padding: var(--spacing-sm) 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Menu Items */
.kg-sidebar-menu__item {
    margin: 2px var(--spacing-sm);
}

.kg-sidebar-menu__link {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.kg-sidebar-menu__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: left var(--transition-normal);
    z-index: -1;
}

.kg-sidebar-menu__link:hover {
    color: var(--color-white);
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.15);
}

.kg-sidebar-menu__link:hover::before {
    left: 0;
}

/* Current/Active Items */
.kg-sidebar-menu__item--current > .kg-sidebar-menu__link,
.kg-sidebar-menu__item--ancestor > .kg-sidebar-menu__link {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    font-weight: var(--font-semibold);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.kg-sidebar-menu__item--current > .kg-sidebar-menu__link::before,
.kg-sidebar-menu__item--ancestor > .kg-sidebar-menu__link::before {
    left: 0;
}

/* Menu Icons */
.kg-sidebar-menu__icon {
    font-size: var(--text-base);
    width: 20px;
    text-align: center;
    margin-right: var(--spacing-md);
    opacity: 0.8;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.kg-sidebar-menu__link:hover .kg-sidebar-menu__icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Menu Text */
.kg-sidebar-menu__text {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

/* Submenu Toggle */
.kg-sidebar-menu__toggle {
    font-size: var(--text-xs);
    margin-left: var(--spacing-sm);
    transition: var(--transition-fast);
    opacity: 0.6;
}

.kg-sidebar-menu__item:hover .kg-sidebar-menu__toggle {
    opacity: 1;
    transform: rotate(180deg);
}

/* Submenu */
.kg-sidebar-menu__sub-menu {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xs) 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
}

.kg-sidebar-menu__item:hover > .kg-sidebar-menu__sub-menu {
    max-height: 300px;
}

.kg-sidebar-menu__sub-menu .kg-sidebar-menu__item {
    margin: 1px var(--spacing-md);
}

.kg-sidebar-menu__sub-menu .kg-sidebar-menu__link {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--text-xs);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.8);
}

.kg-sidebar-menu__sub-menu .kg-sidebar-menu__link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(3px);
}

.kg-sidebar-menu__sub-menu .kg-sidebar-menu__icon {
    font-size: var(--text-xs);
    width: 16px;
    margin-right: var(--spacing-sm);
}

/* Hover Animation */
.kg-sidebar-menu__item {
    opacity: 0;
    transform: translateX(-10px);
    animation: slideInSidebarItem 0.4s ease forwards;
}

.kg-sidebar-menu__item:nth-child(1) { animation-delay: 0.1s; }
.kg-sidebar-menu__item:nth-child(2) { animation-delay: 0.15s; }
.kg-sidebar-menu__item:nth-child(3) { animation-delay: 0.2s; }
.kg-sidebar-menu__item:nth-child(4) { animation-delay: 0.25s; }
.kg-sidebar-menu__item:nth-child(5) { animation-delay: 0.3s; }
.kg-sidebar-menu__item:nth-child(n+6) { animation-delay: 0.35s; }

@keyframes slideInSidebarItem {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dark Theme Integration */
[data-theme="dark"] .kg-sidebar-menu {
    background: linear-gradient(135deg, #1a237e 0%, #2e7d32 100%);
}

[data-theme="dark"] .kg-sidebar-menu::before {
    opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .kg-sidebar-menu {
        margin-bottom: var(--spacing-md);
    }

    .kg-sidebar-menu__title {
        font-size: var(--text-base);
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
    }

    .kg-sidebar-menu__link {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .kg-sidebar-menu__icon {
        font-size: var(--text-sm);
        width: 18px;
        margin-right: var(--spacing-sm);
    }

    .kg-sidebar-menu__text {
        font-size: var(--text-xs);
    }
}

@media (max-width: 992px) {
    .content-sidebar-wrap {
        flex-direction: column;
    }

    .sidebar-right {
        order: 2;
        margin-top: var(--spacing-xl);
    }

    .kg-sidebar-menu {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .kg-sidebar-menu {
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-md);
    }

    .kg-sidebar-menu__title {
        font-size: var(--text-base);
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .kg-sidebar-menu__link {
        padding: var(--spacing-md);
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .kg-sidebar-menu__icon {
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
        font-size: var(--text-base);
        width: auto;
    }

    .kg-sidebar-menu__toggle {
        display: none;
    }

    .kg-sidebar-menu__sub-menu {
        display: none;
    }

    .kg-sidebar-menu__item:hover > .kg-sidebar-menu__sub-menu {
        max-height: 0;
    }
}

/* Special Context Styles */
.kg-sidebar-menu--compact .kg-sidebar-menu__link {
    padding: var(--spacing-sm) var(--spacing-md);
}

.kg-sidebar-menu--compact .kg-sidebar-menu__text {
    font-size: var(--text-xs);
}

.kg-sidebar-menu--minimal {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.kg-sidebar-menu--minimal .kg-sidebar-menu__title {
    color: var(--color-text-primary);
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}

.kg-sidebar-menu--minimal .kg-sidebar-menu__title::after {
    background: var(--color-primary);
}

.kg-sidebar-menu--minimal .kg-sidebar-menu__link {
    color: var(--color-text-secondary);
}

.kg-sidebar-menu--minimal .kg-sidebar-menu__link:hover {
    color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.kg-sidebar-menu--minimal .kg-sidebar-menu__link::before {
    background: var(--color-primary);
    opacity: 0.1;
}

/* --- Hero Sections for News --- */

/* Базові стилі для hero секцій */
.kg-hero-section {
    padding: var(--spacing-xl) 0;
    min-height: 300px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.kg-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    position: relative;
    z-index: 2;
}

.kg-hero-content {
    max-width: 800px;
}

.kg-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-title {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--color-white);
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
}

.kg-hero-description {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.kg-hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.kg-hero-btn {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-btn-primary {
    background: var(--color-white);
    color: var(--color-info);
}

.kg-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.kg-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Декоративні іконки */
.kg-hero-icon {
    position: absolute;
    opacity: 0.1;
    color: var(--color-white);
    font-size: 6rem;
    z-index: 1;
}

.kg-hero-icon.icon-1 { top: 10%; left: 5%; }
.kg-hero-icon.icon-2 { top: 25%; right: 15%; }
.kg-hero-icon.icon-3 { bottom: 20%; left: 15%; }
.kg-hero-icon.icon-4 { bottom: 8%; right: 8%; }

/* 📰 Hero для архіву новин: "Інформаційний потік" */
.kg-hero-news {
    background: linear-gradient(135deg, var(--color-info) 0%, #1976D2 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-3xl) 0;
}

.kg-hero-news::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.kg-hero-news::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

/* Фільтри категорій в hero секції */
.kg-hero-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
    justify-content: center;
    align-items: center;
}

.kg-hero-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.kg-hero-filter-chip:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.kg-hero-filter-chip i {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* 📄 Hero для одиночної новини: адаптивний */
.kg-hero-single {
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-primary) 100%);
    position: relative;
    overflow: hidden;
    padding: var(--spacing-2xl) 0;
    min-height: 200px;
}

.kg-hero-single::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

.kg-hero-single .kg-hero-icon {
    position: absolute;
    opacity: 0.08;
    color: var(--color-white);
    font-size: 4rem;
    z-index: 1;
}

.kg-hero-single .kg-hero-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--spacing-md);
}

.kg-hero-single .kg-hero-description {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    margin-bottom: var(--spacing-lg);
}

.kg-hero-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.kg-hero-category-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

/* Responsive для hero секцій */
@media (max-width: 768px) {
    .kg-hero-news,
    .kg-hero-single {
        padding: var(--spacing-2xl) 0;
    }

    .kg-hero-news .kg-hero-icon,
    .kg-hero-single .kg-hero-icon {
        font-size: 3rem;
    }

    .kg-hero-title {
        font-size: var(--text-2xl);
    }

    .kg-hero-single .kg-hero-title {
        font-size: var(--text-xl);
    }

    .kg-hero-description {
        font-size: var(--text-base);
    }

    .kg-hero-single .kg-hero-description {
        font-size: var(--text-sm);
    }

    .kg-hero-filters {
        gap: var(--spacing-xs);
        margin: var(--spacing-md) 0;
    }

    .kg-hero-filter-chip {
        font-size: var(--text-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .kg-hero-buttons {
        flex-direction: column;
    }

    .kg-hero-btn {
        width: 100%;
        justify-content: center;
    }

    .kg-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .kg-hero-news::before,
    .kg-hero-news::after {
        display: none;
    }
}

/* === MODERN EVENTS ARCHIVE STYLES === */

/* Hero Section */
.kg-events-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: var(--color-text-inverse);
    padding: var(--spacing-3xl) 0;
    position: relative;
    overflow: hidden;
}

.kg-events-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.kg-events-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.kg-events-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.kg-events-hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: var(--spacing-2xl);
    opacity: 0.9;
}

.kg-events-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-3xl);
    flex-wrap: wrap;
}

.kg-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.1rem;
    font-weight: 600;
}

.kg-stat-item i {
    font-size: 1.5rem;
}

/* Filters Section */
.kg-events-filters {
    background: var(--color-bg-secondary);
    padding: var(--spacing-xl) 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(248, 250, 252, 0.95);
}

.kg-filter-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    flex-wrap: wrap;
}

.kg-filter-select, .kg-search-input {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 1rem;
    min-width: 150px;
    transition: all 0.3s ease;
}

.kg-filter-select:focus, .kg-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
}

.kg-search-input {
    min-width: 250px;
    flex: 1;
}

/* Event Cards */
.kg-upcoming-events {
    padding: var(--spacing-3xl) 0;
    background: var(--color-bg-secondary);
}

.kg-upcoming-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.kg-event-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    position: relative;
}

.kg-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.kg-event-card.holiday {
    border-left: 5px solid var(--color-happiness);
}

.kg-event-card.educational {
    border-left: 5px solid var(--color-info);
}

.kg-event-card.parent {
    border-left: 5px solid var(--color-secondary);
}

.kg-event-card.sports {
    border-left: 5px solid var(--color-energy);
}

.kg-event-card.performance {
    border-left: 5px solid var(--color-accent);
}

.kg-event-icon {
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
}

.kg-event-card.holiday .kg-event-icon {
    background: var(--color-happiness);
}

.kg-event-card.educational .kg-event-icon {
    background: var(--color-info);
}

.kg-event-card.parent .kg-event-icon {
    background: var(--color-secondary);
}

.kg-event-card.sports .kg-event-icon {
    background: var(--color-energy);
}

.kg-event-card.performance .kg-event-icon {
    background: var(--color-creativity);
}

.kg-event-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.kg-event-meta i {
    color: var(--color-primary);
}

.kg-event-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.kg-btn-details, .kg-btn-register {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.kg-btn-details {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.kg-btn-details:hover {
    background: var(--color-border);
}

.kg-btn-register {
    background: var(--color-primary);
    color: var(--color-white);
}

.kg-btn-register:hover {
    background: var(--color-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .kg-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .kg-filter-select, .kg-search-input {
        width: 100%;
        min-width: unset;
    }

    .kg-upcoming-events-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .kg-events-stats {
        gap: var(--spacing-lg);
    }
}

@media (max-width: 480px) {
    .kg-events-hero {
        padding: var(--spacing-2xl) 0;
    }

    .kg-event-actions {
        flex-direction: column;
    }
}