/*
Theme Name: Джаз Арт Клуб
Description: Сайт джазового клуба: светлая компактная шапка, афиша с карточками концертов, крупный текст для чтения. Рассчитан на читателей старшего возраста и просмотр с компьютера.
Version: 2.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jazzart
*/

/* Шрифты лежат в папке темы и не загружаются со сторонних серверов.
   PT Serif (ParaType) и Playfair Display распространяются по лицензии SIL Open Font License 1.1. */
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-cyrillic-ext-400-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-cyrillic-ext-400-italic.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-cyrillic-400-italic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 400; src: url(assets/fonts/pt-serif-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-cyrillic-ext-700-normal.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: normal; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-cyrillic-ext-700-italic.woff2) format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-cyrillic-700-italic.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-latin-ext-700-italic.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-display: swap; font-weight: 700; src: url(assets/fonts/pt-serif-latin-700-italic.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(assets/fonts/playfair-display-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(assets/fonts/playfair-display-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(assets/fonts/playfair-display-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ------------------------------------------------------------
   1. Переменные
   ------------------------------------------------------------ */
:root {
	/* Цвета логотипа: бордовый и кремовый. Золотистый только для крупных акцентов. */
	--bg: #fbf5ea;
	--card: #ffffff;
	--tint: #f5ead8;
	--ink: #2a171b;
	--muted: #5d4a4e;
	--maroon: #6d0a16;
	--maroon-deep: #4f050d;
	--cream: #fdf0d6;
	--gold: #7a5c1e;
	--visited: #5b2a86;
	--line: #e7dac4;

	--serif: 'PT Serif', Georgia, 'Times New Roman', serif;
	--display: 'Playfair Display', 'PT Serif', Georgia, serif;

	--gutter: clamp(1rem, 2.7vw, 2.2rem);
	--page: 66rem;
	--radius: 12px;
	--shadow: 0 1px 2px rgba(79, 5, 13, 0.06), 0 10px 28px rgba(79, 5, 13, 0.07);
}

/* Размер текста: 18px, по кнопкам «А» 20px и 23px. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
html[data-size="l"] { font-size: 125%; }
html[data-size="xl"] { font-size: 143.75%; }

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1rem;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }

a { color: var(--maroon); text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
a:hover { color: var(--maroon-deep); text-decoration-thickness: 0.14em; }

:focus-visible { outline: 3px solid var(--maroon); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.18; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0 0 1em; }

.visually-hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 100; padding: 0.8rem 1.2rem; background: var(--maroon); color: #fff; font-weight: 700; border-radius: 8px; }
.skip:focus { top: 1rem; color: #fff; }

.wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------
   2. Кнопки, поля, ссылки «дальше»
   ------------------------------------------------------------ */
.button, button, input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.6rem 1.35rem;
	border: 2px solid var(--maroon);
	border-radius: 9px;
	background: var(--maroon);
	color: #fff;
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: #fff; }
.button.is-quiet { background: var(--card); color: var(--maroon); }
.button.is-quiet:hover { background: var(--cream); color: var(--maroon-deep); border-color: var(--maroon-deep); }

input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.9rem;
	border: 2px solid #b9a78f;
	border-radius: 9px;
	background: var(--card);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1rem;
}
input:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--maroon); }
::placeholder { color: var(--muted); opacity: 1; }

.more-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; white-space: nowrap; }
.more-link::after {
	content: ''; width: 0.5em; height: 0.5em; margin-top: 0.1em;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}

.site-search { display: flex; gap: 0.5rem; }
.site-search input { flex: 1; min-width: 0; }

/* ------------------------------------------------------------
   3. Шапка: логотип, меню в одну строку, телефон, поиск
   ------------------------------------------------------------ */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 0.6rem 1.5rem; padding-block: 0.75rem; }
.brand { display: block; flex: none; }
.brand-logo { display: block; height: 3.5rem; width: auto; }

.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.15rem; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu a {
	display: flex; align-items: center;
	min-height: 2.6rem;
	padding: 0.4rem 0.7rem;
	border-radius: 8px;
	color: var(--ink);
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
}
.menu > li > a:hover { background: var(--tint); color: var(--maroon-deep); }
.menu > .current-menu-item > a,
.menu > .current-menu-ancestor > a,
.menu > .current-menu-parent > a,
.menu > .current_page_item > a,
.menu > .current_page_ancestor > a { background: var(--maroon); color: #fff; }

.submenu-toggle {
	min-height: 2.6rem; min-width: 2rem; padding: 0 0.45rem; margin-left: -0.3rem;
	border: 0; background: transparent; color: var(--ink);
}
.submenu-toggle:hover { background: var(--tint); color: var(--maroon-deep); }
.submenu-toggle::before {
	content: ''; display: block; width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 0.25rem; }

.menu .sub-menu {
	position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 30;
	min-width: 14rem; padding: 0.4rem;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow), 0 20px 40px rgba(79, 5, 13, 0.12);
}
.menu .sub-menu a { min-height: 2.7rem; padding: 0.4rem 0.8rem; font-size: 1rem; }
.menu .sub-menu a:hover { background: var(--tint); color: var(--maroon-deep); }
.menu .sub-menu .current-menu-item > a { color: var(--maroon); font-weight: 700; }
/* Со скриптом подменю открывается по нажатию на стрелку, без скрипта по наведению. */
.js .menu .sub-menu { display: none; }
.js .menu li.is-open > .sub-menu { display: block; }
html:not(.js) .menu li:not(:hover):not(:focus-within) > .sub-menu { display: none; }

.nav-toggle { display: none; }

.header-tools { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.header-phone { color: var(--ink); font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--maroon); text-decoration: underline; }
.header-search {
	min-height: 2.6rem; padding: 0.4rem 0.9rem;
	background: transparent; color: var(--maroon); border-color: var(--maroon);
	font-size: 0.95rem;
}
.header-search svg { width: 1.05em; height: 1.05em; flex: none; }
.header-search:hover { background: var(--maroon); color: #fff; }

.search-panel { background: var(--tint); border-top: 1px solid var(--line); padding-block: 0.9rem; }
.search-panel[hidden] { display: none; }
.search-panel .site-search { max-width: 40rem; }

/* ------------------------------------------------------------
   4. Главная
   ------------------------------------------------------------ */
.hero { background: linear-gradient(180deg, var(--tint), var(--bg)); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem; align-items: center; padding-block: 2.2rem 2.6rem; }
.hero-title { color: var(--maroon); font-size: 3.9rem; font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; }
.hero-tagline { margin: 0.9rem 0 0; color: var(--gold); font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.hero-lead { margin: 0.7rem 0 0; max-width: 26rem; font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 0; }

.hero-concert {
	position: relative; display: block; overflow: hidden;
	border-radius: 16px; background: var(--maroon-deep); color: #fff; text-decoration: none;
	box-shadow: var(--shadow);
}
.hero-concert:hover { color: #fff; }
.hero-photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--maroon-deep) url(assets/logo.svg) center / 38% no-repeat; }
.hero-photo img, .card-photo img, .tile-photo img, .row-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-concert-body {
	position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; gap: 1rem;
	padding: 3.5rem 1.3rem 1.2rem;
	background: linear-gradient(180deg, rgba(40, 3, 8, 0), rgba(40, 3, 8, 0.86) 55%);
}
.hero-concert-text { display: block; min-width: 0; }
.hero-concert-label { display: block; color: var(--cream); font-size: 0.9rem; }
.hero-concert-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--display); font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.hero-concert:hover .hero-concert-title { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
.hero-concert-time { display: block; margin-top: 0.25rem; color: var(--cream); }
.hero-logo-panel { display: block; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--maroon-deep) url(assets/logo.svg) center / 46% no-repeat; }

.date-badge {
	display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
	min-width: 4.6rem; padding: 0.5rem 0.6rem 0.55rem;
	border-radius: 10px; background: var(--maroon); color: #fff; text-align: center; line-height: 1.15;
}
.date-day { font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1; }
.date-month { margin-top: 0.15rem; font-size: 0.9rem; font-weight: 700; }
.date-weekday { font-size: 0.78rem; opacity: 0.92; }
.hero-concert .date-badge { background: var(--cream); color: var(--maroon-deep); }

.section { padding-block: 2.8rem; }
.section-tint { background: var(--tint); border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.section-title { color: var(--maroon-deep); font-size: 2.1rem; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.card-link:hover { color: var(--ink); }
.card-photo { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--maroon-deep) url(assets/logo.svg) center / 34% no-repeat; }
.card-photo .date-badge { position: absolute; left: 0.8rem; top: 0.8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.card-body { display: flex; flex-direction: column; flex: 1; gap: 0.35rem; padding: 1rem 1.15rem 1.15rem; }
.card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--display); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.card-link:hover .card-title { color: var(--maroon); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
.card-meta { color: var(--muted); }
.card-cta { margin-top: auto; padding-top: 0.6rem; color: var(--maroon); font-weight: 700; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.tile a {
	display: flex; align-items: center; gap: 1rem; height: 100%;
	padding: 0.85rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
}
.tile a:hover { border-color: var(--maroon); box-shadow: var(--shadow); color: var(--ink); }
.tile-photo { position: relative; display: block; flex: none; width: 5.2rem; height: 5.2rem; border-radius: 10px; overflow: hidden; background: var(--maroon-deep) url(assets/logo.svg) center / 70% no-repeat; }
.tile-text { display: block; min-width: 0; }
.tile-title { display: block; font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.tile a:hover .tile-title { color: var(--maroon); }
.tile-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.2rem; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }

.news .meta { display: none; }
.news .row:nth-child(2) { border-top: 0; }
.news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; list-style: none; margin: 0; padding: 0; }

.visit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.visit li { display: flex; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.visit-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--maroon); color: #fff; }
.visit-icon svg { width: 1.35rem; height: 1.35rem; }
.visit li > div { min-width: 0; }
.visit a { overflow-wrap: anywhere; }
.visit-title { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.visit p { margin: 0.25rem 0 0; line-height: 1.45; }
.visit .big { font-size: 1.2rem; font-weight: 700; }

/* ------------------------------------------------------------
   5. Внутренние страницы: лист с текстом и колонка справа
   ------------------------------------------------------------ */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 16.5rem; gap: 2.2rem; align-items: start; padding-block: 1.6rem 3.5rem; }
.sheet { min-width: 0; padding: 2rem 2.6rem 2.6rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }

.crumbs { margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
.crumbs a { display: inline-block; padding-block: 0.2rem; }
.crumbs .sep { margin-inline: 0.5rem; }

.page-title { color: var(--maroon-deep); font-size: 2.6rem; line-height: 1.1; }
.page-intro { margin: 0.6rem 0 0; color: var(--gold); font-size: 1.2rem; font-weight: 700; }
.page-intro p { margin: 0; }
.page-head { margin-bottom: 1.6rem; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.3rem; margin: 0.9rem 0 0; color: var(--muted); font-size: 0.92rem; }
.meta a { display: inline-block; padding-block: 0.2rem; }

.text-size { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.text-size-label { margin-right: 0.3rem; }
.text-size button {
	min-width: 2.3rem; min-height: 2.3rem; padding: 0;
	background: var(--card); color: var(--ink); border: 1.5px solid #b9a78f; font-weight: 700; line-height: 1;
}
.text-size button:hover { background: var(--tint); color: var(--ink); border-color: var(--maroon); }
.text-size button[aria-pressed="true"] { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.text-size button:nth-of-type(1) { font-size: 0.85rem; }
.text-size button:nth-of-type(2) { font-size: 1.05rem; }
.text-size button:nth-of-type(3) { font-size: 1.3rem; }
.print-button { min-height: 2.3rem; padding: 0.2rem 0.8rem; background: var(--card); color: var(--maroon); border: 1.5px solid #b9a78f; font-size: 0.92rem; }
.print-button:hover { background: var(--tint); color: var(--maroon-deep); border-color: var(--maroon); }

.chips { margin: 0 0 1.4rem; }
.chips ul { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.chips a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.25rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-size: 0.95rem; text-decoration: none; }
.chips a:hover { border-color: var(--maroon); color: var(--maroon-deep); }
.chips a.is-current { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.chips .count { opacity: 0.75; font-size: 0.85em; }

/* Список статей */
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 0 1.2rem; align-items: start; padding-block: 1.15rem; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.no-image { grid-template-columns: minmax(0, 1fr); }
.row-image { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--tint); }
.row-title { font-size: 1.35rem; line-height: 1.22; }
.row-title a { color: var(--ink); text-decoration: none; }
.row-title a:hover { color: var(--maroon); text-decoration: underline; text-decoration-thickness: 0.06em; }
.row-title a:visited { color: var(--visited); }
.row-excerpt { margin: 0.35rem 0 0; color: var(--muted); line-height: 1.5; }
.row .meta { margin: 0 0 0.2rem; }
.list-count { margin: 0 0 0.3rem; color: var(--muted); }

.more { margin-top: 1.8rem; }
.pagination { margin-top: 1.8rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; min-height: 2.7rem; padding: 0.3rem 0.9rem; border: 1.5px solid #b9a78f; border-radius: 9px; background: var(--card); font-weight: 700; text-decoration: none; }
.pagination a.page-numbers:hover { border-color: var(--maroon); background: var(--tint); }
.pagination .page-numbers.current { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* Колонка справа */
.side { display: grid; gap: 1.1rem; }
.side-block { padding: 1.1rem 1.2rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.side-title { margin: 0 0 0.6rem; color: var(--maroon-deep); font-size: 1.2rem; }
.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li + li { border-top: 1px solid var(--line); }
.side-links a { display: block; padding: 0.55rem 0; color: var(--ink); line-height: 1.3; text-decoration: none; }
.side-links a:hover { color: var(--maroon); text-decoration: underline; }
.side-links .is-current a { color: var(--maroon); font-weight: 700; }
.side-block p { margin: 0.5rem 0 0; line-height: 1.45; }
.side-concert-link { display: flex; align-items: center; gap: 0.8rem; color: var(--ink); text-decoration: none; }
.side-concert-link:hover .side-concert-title { color: var(--maroon); text-decoration: underline; }
.side-concert-text { display: block; min-width: 0; }
.side-concert-title { display: block; font-weight: 700; line-height: 1.25; }
.side-concert-time { display: block; color: var(--muted); font-size: 0.92rem; }
.side .date-badge { min-width: 4rem; }
.side .date-day { font-size: 1.7rem; }

/* ------------------------------------------------------------
   6. Текст статьи
   ------------------------------------------------------------ */
.article-head { margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.article-image { margin: 0 0 1.6rem; }
.article-image img { display: block; width: 100%; border-radius: 10px; }

.prose { font-size: 1.17rem; line-height: 1.65; overflow-wrap: break-word; }
.prose > * { margin-block: 0 1.15em; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.8em; margin-bottom: 0.55em; font-size: 1.5em; color: var(--maroon-deep); }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.5em; font-size: 1.25em; }
.prose h4 { margin-top: 1.4em; margin-bottom: 0.4em; font-family: var(--serif); font-size: 1em; line-height: 1.45; }
.prose a { text-decoration: underline; }
.prose a:visited { color: var(--visited); }
.prose u { text-decoration: none; font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--maroon); font-weight: 700; }
.prose blockquote { margin-inline: 0; padding: 0.2em 0 0.2em 1.2em; border-left: 5px solid var(--maroon); font-size: 1.08em; font-style: italic; line-height: 1.5; }
.prose blockquote p { margin: 0 0 0.6em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: 0.6em; font-size: 0.82em; font-style: normal; color: var(--muted); }
.prose hr { height: 3px; border: 0; background: var(--maroon); width: 4.5rem; margin-inline: 0; margin-block: 2em; }
.prose img { border-radius: 8px; }
.prose figure { margin-inline: 0; }
.prose figcaption, .prose .wp-caption-text { margin-top: 0.5em; font-size: 0.82em; color: var(--muted); line-height: 1.4; }
.prose .wp-caption { max-width: 100%; }
/* Текст не обтекает крупные картинки: рядом с фото строки получаются слишком короткими.
   Обтекание оставлено только для миниатюр. */
.prose .alignleft, .prose .alignright, .prose .alignnone { display: block; margin: 0.4em 0 0.9em; }
.prose img.size-thumbnail.alignleft { float: left; clear: left; max-width: 30%; margin: 0.3em 1.2em 0.6em 0; }
.prose img.size-thumbnail.alignright { float: right; clear: right; max-width: 30%; margin: 0.3em 0 0.6em 1.2em; }
.prose h2, .prose h3, .prose h4 { clear: both; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose::after { content: ''; display: table; clear: both; }
.prose iframe { display: block; width: 100%; border: 0; }
.prose .video, .prose iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; background: var(--ink); border-radius: 10px; overflow: hidden; }
.prose .video iframe { width: 100%; height: 100%; }
.prose audio { width: 100%; }
.prose .table-scroll, .prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.88em; line-height: 1.4; }
.prose th, .prose td { padding: 0.55em 0.75em; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose thead th, .prose table > tr:first-child th { background: var(--tint); border-bottom: 2px solid var(--maroon); }
.prose .has-large-font-size { font-size: 1.2em; }

/* Тексты со старого сайта и вставки из Word несут свои цвета и размеры. Приводим к единому
   виду: красные оттенки становятся бордовым выделением, остальное наследует оформление сайта. */
.prose [style*="color"] { color: inherit !important; }
.prose [style*="#800000"], .prose [style*="#ff0000"], .prose [style*="#993300"],
.prose [style*="#d53234"], .prose [style*="#c00000"], .prose [style*="color: red"], .prose [style*="color:red"] { color: var(--maroon) !important; }
.prose a[style*="color"], .prose a [style*="color"] { color: var(--maroon) !important; }
.prose [style*="font-size"] { font-size: inherit !important; }
.prose [style*="font-family"] { font-family: inherit !important; }
.prose [style*="justify"] { text-align: left !important; }
.prose h2[style*="center"], .prose h3[style*="center"] { text-align: left !important; }
.prose object, .prose embed { display: none; }
.prose h2 strong, .prose h3 strong, .prose h4 strong { font-weight: inherit; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.6rem; }
.photo-grid a { display: block; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.article-foot { margin-top: 2rem; font-size: 0.95rem; }
.tags { margin: 0 0 1rem; color: var(--muted); }
.edit-link a { font-weight: 700; }

.neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.neighbors a { display: block; padding: 0.85rem 1rem; border: 1.5px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.neighbors a:hover { border-color: var(--maroon); background: var(--bg); }
.neighbors .label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.neighbors .title { font-weight: 700; }
.neighbors .next { grid-column: 2; }

.children-list { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.children-list h2 { font-size: 1.3rem; color: var(--maroon-deep); }
.children-list ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.children-list li + li { border-top: 1px solid var(--line); }
.children-list a { display: block; padding: 0.7rem 0; font-weight: 700; text-decoration: none; }
.children-list a:hover { text-decoration: underline; }

.notice { padding: 1.1rem 1.3rem; background: var(--tint); border-left: 5px solid var(--maroon); border-radius: 0 10px 10px 0; }
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.search-again { margin: 1.3rem 0; }
.search-again .site-search { max-width: 32rem; }

/* ------------------------------------------------------------
   7. Афиша: концерты с датой слева
   ------------------------------------------------------------ */
.afisha-month { margin: 2.2rem 0 0.4rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--maroon); color: var(--maroon-deep); font-size: 1.6rem; }
.afisha-month:first-of-type { margin-top: 0.4rem; }
.afisha-item { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0 1.5rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.afisha-item:target { margin-inline: -1rem; padding-inline: 1rem; background: var(--bg); border-radius: 12px; border-bottom-color: transparent; box-shadow: 0 0 0 2px var(--maroon); }
.afisha-date { text-align: center; }
.afisha-date .date-badge { width: 100%; }
.afisha-time { display: block; margin-top: 0.5rem; font-weight: 700; line-height: 1.25; }
.afisha-title { font-size: 1.7rem; color: var(--ink); }
.afisha-photo { display: block; margin: 0.9rem 0 0; }
.afisha-photo img { display: block; max-width: min(100%, 26rem); max-height: 19rem; border-radius: 10px; }
.afisha-body .prose { margin-top: 0.8rem; }
.afisha-item.is-past .date-badge { background: #8a7a7c; }
.afisha-past { display: inline-block; margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; }

/* Комментарии */
.comments { margin-top: 2.5rem; }
.comments ol { list-style: none; margin: 0; padding: 0; }
.comments .comment-body { padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.comments .children { padding-left: 2rem; }
.comments .comment-meta { font-size: 0.9rem; color: var(--muted); }
.comments .avatar { display: none; }
.comment-respond { margin-top: 1.8rem; }
.comment-respond label { display: block; margin-bottom: 0.3rem; font-weight: 700; }
.comment-respond p { margin: 0 0 1rem; }

/* ------------------------------------------------------------
   8. Подвал
   ------------------------------------------------------------ */
.site-footer { background: var(--maroon-deep); color: var(--cream); }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 2rem 2.2rem; padding-block: 2.6rem 2rem; }
.footer-logo { display: block; height: 4.4rem; width: auto; margin-bottom: 0.9rem; }
.footer-grid p { margin: 0 0 0.4rem; line-height: 1.45; }
.footer-grid > * { min-width: 0; }
.footer-grid a { overflow-wrap: anywhere; }
.footer-title { margin: 0 0 0.6rem; font-family: var(--display); font-size: 1.15rem; color: #fff; }
.footer-menu, .footer-menu ul { list-style: none; margin: 0; padding: 0; }
.footer-menu a { display: inline-block; padding-block: 0.28rem; text-decoration: none; }
.footer-menu a:hover { text-decoration: underline; }
.site-footer .site-search input { border-color: transparent; }
.site-footer .site-search button { background: var(--cream); border-color: var(--cream); color: var(--maroon-deep); }
.site-footer .site-search button:hover { background: #fff; border-color: #fff; color: var(--maroon-deep); }
.site-footer .text-size { margin-top: 1.1rem; }
.site-footer .text-size button { background: transparent; color: var(--cream); border-color: rgba(253, 240, 214, 0.55); }
.site-footer .text-size button:hover { background: rgba(253, 240, 214, 0.14); color: #fff; border-color: var(--cream); }
.site-footer .text-size button[aria-pressed="true"] { background: var(--cream); color: var(--maroon-deep); border-color: var(--cream); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.1rem 1.6rem; border-top: 1px solid rgba(253, 240, 214, 0.28); font-size: 0.9rem; }
.footer-bottom p { margin: 0; }

/* ------------------------------------------------------------
   9. Узкие экраны и крупный текст
   ------------------------------------------------------------ */
/* Шапка подстраивается сама (см. assets/site.js): если меню не помещается рядом с логотипом
   и телефоном, оно уходит на вторую строку (is-stacked); если не помещается и там,
   сворачивается в кнопку «Меню» (is-collapsed). Пункты никогда не наезжают друг на друга. */
.site-header.is-stacked .header-row { flex-wrap: wrap; }
.site-header.is-stacked .header-tools { margin-left: auto; }
.site-header.is-stacked .site-nav { order: 3; flex-basis: 100%; }
.site-header.is-collapsed .nav-toggle { display: inline-flex; width: 100%; justify-content: space-between; background: var(--card); color: var(--maroon); }
.site-header.is-collapsed .nav-toggle::after { content: 'открыть'; font-weight: 400; }
.site-header.is-collapsed .nav-toggle[aria-expanded="true"]::after { content: 'закрыть'; }
.site-header.is-collapsed .menu { display: none; }
.site-header.is-collapsed .site-nav.is-open .menu { display: block; padding-top: 0.4rem; }
.site-header.is-collapsed .menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.site-header.is-collapsed .menu > li > a { flex: 1; min-height: 3rem; font-size: 1rem; }
.site-header.is-collapsed .menu .sub-menu { position: static; width: 100%; min-width: 0; padding: 0 0 0.4rem 0.8rem; border: 0; box-shadow: none; background: none; }
/* Без скриптов: то же самое по ширине экрана. */
@media (max-width: 1140px) { html:not(.js) .header-row { flex-wrap: wrap; } html:not(.js) .header-tools { margin-left: auto; } html:not(.js) .site-nav { order: 3; flex-basis: 100%; } html:not(.js) .menu { flex-wrap: wrap; } }
@media (max-width: 420px) { .header-phone { display: none; } }
@media (max-width: 1000px) {
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
	.hero-title { font-size: 3rem; }
	.cards, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layout { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1300px) { html[data-size="xl"] .layout { grid-template-columns: minmax(0, 1fr); } html[data-size="xl"] .cards, html[data-size="xl"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.hero-title { font-size: 2.4rem; }
	.section { padding-block: 2rem; }
	.section-title { font-size: 1.7rem; }
	.cards, .tiles, .news, .visit { grid-template-columns: minmax(0, 1fr); }
	.sheet { padding: 1.3rem 1.1rem 1.6rem; border-radius: 12px; }
	.page-title { font-size: 2rem; }
	.row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 0.9rem; }
	.afisha-item { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
	.afisha-date { display: flex; align-items: center; gap: 0.9rem; text-align: left; }
	.afisha-date .date-badge { width: auto; }
	.neighbors { grid-template-columns: 1fr; }
	.neighbors .next { grid-column: 1; }
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.prose img.size-thumbnail.alignleft, .prose img.size-thumbnail.alignright { max-width: 40%; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ------------------------------------------------------------
   10. Печать: только текст
   ------------------------------------------------------------ */
@media print {
	html, html[data-size] { font-size: 12pt; }
	.site-header, .side, .site-footer, .crumbs, .neighbors, .print-button, .text-size, .edit-link, .more, .pagination, .skip, .comments, .chips { display: none !important; }
	body { background: #fff; }
	.layout { display: block; padding: 0; }
	.sheet { padding: 0; border: 0; box-shadow: none; }
	body, a { color: #000; }
}