/*
Theme Name: КДЦ Барвиха
Author: КДЦ «Барвиха»
Version: 1.1.4
*/

:root {
    --red: #d92f2f;
    --blue: #3567c8;
    --purple: #8756c7;
    --orange: #e58b28;
    --text: #17191b;
    --muted: #777;
    --border: #e1e4e7;
    --light: #f5f6f7;
    --container: 970px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #fff;
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
}


/* =========================
   HEADER
   ========================= */

.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
}

.site-header .container {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo {
    width: 42px;
    height: 42px;
    border: 1px solid #f0a0a0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 22px;
}

.brand-text {
    line-height: 1.05;
}

.brand-text small {
    display: block;
    color: #999;
    font-size: 8px;
    text-transform: uppercase;
}

.brand-text strong {
    display: block;
    color: var(--red);
    font-size: 15px;
}

.main-navigation ul,
.primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 18px;
}

.main-navigation a,
.primary-menu a {
    font-size: 11px;
}

.header-button {
    background: var(--red);
    color: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 10px;
}


/* =========================
   HERO
   ========================= */

.hero {
    background: linear-gradient(110deg, #22282a, #4d5551);
    color: #fff;
}

.hero-inner {
    padding: 38px 0 32px;
}

.hero h1 {
    max-width: 500px;
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.08;
}

.hero p {
    margin: 0 0 20px;
    color: #eee;
    font-size: 13px;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.quick-link {
    background: #fff;
    color: #17191b;
    border-radius: 7px;
    padding: 13px;
    font-weight: 700;
    font-size: 11px;
}

.quick-link span {
    display: block;
    margin-top: 5px;
    color: #888;
    font-size: 8px;
    font-weight: 400;
}


/* =========================
   EVENT STRIP
   ========================= */

.event-strip {
    margin: 8px 0 18px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.event-strip > * {
    min-width: 0;
    padding: 10px;
    border-right: 1px solid var(--border);
}

.event-strip > *:last-child {
    border-right: 0;
}

.event-strip-item {
    transition: background .15s ease;
}

.event-strip-item:hover {
    background: #fafafa;
}

.event-time {
    color: #111;
    font-weight: 700;
    font-size: 9px;
}

.event-place {
    margin-top: 4px;
    color: #777;
    font-size: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================
   SECTIONS
   ========================= */

.section {
    padding: 16px 0 28px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.section-head h2 {
    margin: 0;
    font-size: 19px;
}

.section-link {
    color: var(--red);
    font-size: 9px;
    white-space: nowrap;
}


/* =========================
   EVENT CARDS
   ========================= */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.card-media {
    height: 150px;
    background: #dfe2e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 8px;
    overflow: hidden;
}

.card-media-image {
    display: block;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    padding: 10px;
}

.card-date {
    display: inline-block;
    background: var(--red);
    color: #fff;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 8px;
    font-weight: 700;
}

.card h3 {
    margin: 7px 0 4px;
    font-size: 11px;
    line-height: 1.3;
}

.card h3 a:hover {
    color: var(--red);
}

.card p {
    margin: 0;
    color: #888;
    font-size: 8px;
}


/* =========================
   DIRECTIONS
   ========================= */

.direction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.direction {
    min-height: 70px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.direction small {
    display: block;
    margin-top: 4px;
    color: #888;
    font-size: 7px;
    font-weight: 400;
}


/* =========================
   VENUES
   ========================= */

.venue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.venue {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.venue-media {
    height: 120px;
    background: #dfe2e5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: 8px;
    overflow: hidden;
}

.venue-media-image {
    display: block;
}

.venue-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venue-body {
    padding: 8px;
}

.venue-body h3 {
    margin: 0 0 5px;
    font-size: 11px;
}

.venue-body h3 a:hover {
    color: var(--red);
}

.venue-body p {
    margin: 0;
    color: #777;
    font-size: 8px;
    line-height: 1.35;
}


/* =========================
   NEWS / LIFE
   ========================= */

.news-life {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.news-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

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

.news-thumb {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background: #dfe2e5;
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item h3 {
    margin: 2px 0;
    font-size: 9px;
}

.news-item p {
    margin: 0;
    color: #888;
    font-size: 7px;
}

.life-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.life-photo {
    aspect-ratio: 1 / 1;
    background: #dfe2e5;
    border-radius: 5px;
}


/* =========================
   ABOUT
   ========================= */

.about-band {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 25px;
    align-items: center;
}

.about-band h2 {
    font-size: 16px;
}

.footer-text {
    color: #777;
    font-size: 8px;
    line-height: 1.5;
}

.stats {
    display: flex;
    gap: 25px;
}

.stat {
    text-align: center;
}

.stat b {
    display: block;
    color: var(--red);
    font-size: 17px;
}

.stat span {
    display: block;
    margin-top: 3px;
    color: #777;
    font-size: 7px;
}


/* =========================
   FOOTER
   ========================= */

.site-footer {
    margin-top: 15px;
    border-top: 1px solid var(--border);
    padding: 25px 0;
    background: #fff;
}

.site-footer .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.site-footer h3 {
    margin: 0 0 8px;
    font-size: 10px;
}

.site-footer p,
.site-footer a {
    color: #777;
    font-size: 8px;
    line-height: 1.5;
}


/* =========================
   АДАПТИВ
   ========================= */

@media (max-width: 800px) {

    .main-navigation ul,
    .primary-menu {
        gap: 8px;
    }

    .quick-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-strip > * {
        border-bottom: 1px solid var(--border);
    }

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

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

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

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

    .about-band {
        grid-template-columns: 1fr;
    }

    .site-footer .container {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 560px) {

    .site-header .container {
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .main-navigation {
        width: 100%;
        overflow-x: auto;
    }

    .main-navigation ul,
    .primary-menu {
        min-width: max-content;
    }

    .hero h1 {
        font-size: 27px;
    }

    .quick-links {
        grid-template-columns: 1fr;
    }

    .event-strip {
        grid-template-columns: 1fr;
    }

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

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

    .stats {
        gap: 15px;
    }

    .site-footer .container {
        grid-template-columns: 1fr 1fr;
    }
}
/* ===== ШАПКА — ЛОГОТИП ===== */

.site-header .site-brand {
    display: flex;
    align-items: center;
}

.site-header .site-logo {
    display: flex;
    align-items: center;
    width: 190px;
    height: 80px;
}

.site-header .site-logo img {
    display: block;
    width: 190px;
    height: 80px;
    object-fit: contain;
    object-position: left center;
}


/* ===== ШАПКА — БЛОК «ДОМА КУЛЬТУРЫ ПОДМОСКОВЬЯ» ===== */

.site-header .mosreg-brand {
    margin-left: auto;
}

.site-header .mosreg-brand-title {
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
}


/* ===== НЕ ПОКАЗЫВАЕМ СТАРЫЙ ТЕКСТОВЫЙ БРЕНД ===== */

.site-header .site-title-wrap {
    display: none;
}

/* =========================================================
   НОВАЯ ШАПКА
   ========================================================= */

.site-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #ffffff;
}


/* ---------- ВЕРХНЯЯ СТРОКА ---------- */

.site-header-top {
    width: 100%;
    background: #ffffff;
}

.site-header-top-inner {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ---------- ЛОГОТИП ---------- */

.site-header .site-brand {
    display: flex;
    align-items: center;
    height: 86px;
}

.site-header .site-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100px;
    height: 78px;
    overflow: hidden;
}

.site-header .site-logo img {
    display: block;

    width: 78px !important;
    height: 78px !important;

    max-width: 78px !important;
    max-height: 78px !important;

    object-fit: contain;
    object-position: center;
}


/* ---------- ДОМА КУЛЬТУРЫ ПОДМОСКОВЬЯ ---------- */

.site-header .mosreg-brand {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 86px;
}

.site-header .mosreg-brand-title {
    font-size: 13px;
    line-height: 1.25;
    color: #333333;
    text-align: left;
}


/* ---------- ПАНЕЛЬ МЕНЮ ---------- */

.site-header .header-navigation {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}


/* ---------- САМО МЕНЮ ---------- */

.site-header .main-nav {
    position: static !important;

    width: 100%;
    min-height: 44px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;
}


/* Если WordPress создаёт UL */

.site-header .main-nav ul,
.site-header .main-nav .main-menu {
    position: static !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}


/* Пункты меню */

.site-header .main-nav li {
    position: static !important;

    display: block;

    margin: 0;
    padding: 0;
}


/* Ссылки меню */

.site-header .main-nav a {
    position: static !important;

    display: block;

    padding: 13px 17px;

    color: #333333;
    background: transparent;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}


/* Наведение */

.site-header .main-nav a:hover {
    color: #c5162e;
    background: #f7f7f7;
}


/* ---------- FALLBACK-МЕНЮ ---------- */

.site-header .main-nav > a {
    position: static !important;

    display: block;

    padding: 13px 17px;

    color: #333333;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;
}

.site-header .main-nav > a:hover {
    color: #c5162e;
    background: #f7f7f7;
}


/* ---------- УБИРАЕМ СТАРЫЕ СТИЛИ БРЕНДА ---------- */

.site-header .site-title-wrap {
    display: none !important;
}


/* ---------- АДАПТАЦИЯ ДЛЯ НЕБОЛЬШИХ ЭКРАНОВ ---------- */

@media (max-width: 800px) {

    .site-header-top-inner {
        min-height: 72px;
    }

    .site-header .site-brand {
        height: 72px;
    }

    .site-header .site-logo {
        width: 80px;
        height: 68px;
    }

    .site-header .site-logo img {
        width: 65px !important;
        height: 65px !important;
        max-width: 65px !important;
        max-height: 65px !important;
    }

    .site-header .mosreg-brand {
        height: 72px;
    }

    .site-header .mosreg-brand-title {
        font-size: 11px;
    }

    .site-header .main-nav,
    .site-header .main-nav ul,
    .site-header .main-nav .main-menu {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .site-header .main-nav a,
    .site-header .main-nav > a {
        padding: 12px 11px;
        font-size: 12px;
    }

}
/* =========================================================
   СТРАНИЦА КРУЖКА / СТУДИИ
   ========================================================= */
.club-single{padding:34px 0 70px;background:#fff}
.club-breadcrumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#8a8f95;font-size:13px;margin-bottom:18px}
.club-breadcrumb a{color:#59616a;text-decoration:none}.club-breadcrumb a:hover{color:var(--red)}
.club-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.club-direction{color:var(--red);font-size:14px;font-weight:600;margin-bottom:7px}
.club-head h1{margin:0;font-size:36px;line-height:1.1;color:#252a2f}
.club-register{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:5px;background:var(--red);color:#fff;font-size:14px;font-weight:600;text-decoration:none}.club-register:hover{opacity:.9}
.club-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.club-main{min-width:0}.club-image{width:100%;margin-bottom:32px;overflow:hidden;border-radius:8px;background:#f1f2f3}.club-image img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain}
.club-section{margin:0 0 34px}.club-section h2{margin:0 0 15px;font-size:24px;line-height:1.2;color:#252a2f}
.club-content{font-size:16px;line-height:1.65;color:#444}.club-content p{margin:0 0 14px}
.club-list{margin:0;padding:0 0 0 22px;font-size:16px;line-height:1.6;color:#444}.club-list li{margin-bottom:8px}
.club-sidebar{min-width:0}.club-card{margin-bottom:18px;padding:20px;border:1px solid var(--border);border-radius:8px;background:#fff}.club-card h3{margin:0 0 16px;font-size:18px;line-height:1.25;color:#252a2f}
.club-status{display:inline-block;margin-bottom:16px;padding:6px 10px;border-radius:4px;font-size:13px;font-weight:600}.club-status.is-open{background:#eaf7ed;color:#24733b}.club-status.is-closed{background:#f4f4f4;color:#777}
.club-info-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-top:1px solid #eee;font-size:14px;line-height:1.4}.club-info-row:first-of-type{border-top:0}.club-info-row span{color:#777}.club-info-row strong{color:#252a2f;text-align:right}
.club-person-photo{margin-bottom:14px}.club-person-photo img{width:110px;height:110px;object-fit:cover;border-radius:50%}.club-person-name{font-size:16px;font-weight:600;line-height:1.35;color:#252a2f}.club-person-position{margin-top:5px;color:#777;font-size:13px}
.club-contact{margin-top:9px;color:#555;font-size:14px;line-height:1.5}.club-contact a{color:inherit;text-decoration:none}.club-contact a:hover{color:var(--red)}
.club-venue-name{margin-bottom:10px;font-size:16px;font-weight:600;color:#252a2f}.club-route{margin-top:16px;padding-top:15px;border-top:1px solid #eee;font-size:14px;line-height:1.5;color:#555}.club-route strong{display:block;margin-bottom:6px;color:#252a2f}.club-route p{margin:0}.club-access{margin-top:14px;font-size:13px;line-height:1.5;color:#777}
.club-map-link{display:inline-block;margin-top:16px;color:var(--red);font-size:14px;font-weight:600;text-decoration:none}.club-map-link:hover{text-decoration:underline}
.club-schedule-wrap{width:100%;overflow-x:auto}.club-schedule{width:100%;border-collapse:collapse;font-size:14px}.club-schedule th,.club-schedule td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.club-schedule th{color:#252a2f;font-weight:600;background:#f7f7f7}.club-schedule td{color:#555}
@media (max-width:800px){.club-head{align-items:flex-start;flex-direction:column}.club-layout{grid-template-columns:1fr}.club-sidebar{width:100%}.club-head h1{font-size:30px}}
@media (max-width:560px){.club-single{padding:24px 0 50px}.club-head h1{font-size:27px}.club-register{width:100%}.club-schedule{min-width:650px}}

/* Жизнь КДЦ — реальные фотографии из фотогалереи */
.life-photo {
    display: block;
    aspect-ratio: 1 / 1;
    background: #dfe2e5;
    border-radius: 5px;
    overflow: hidden;
}

.life-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.life-photo:hover img {
    transform: scale(1.03);
}