/* =========================================================================
   SPIVMIR — каркас внутренней страницы, зелёный баннер и стили контента
   классического редактора.

   Геометрия старого сайта (theme-design.md §1.3, замеры analysis/baseline):
     .container            960 px, белый фон
     .main__inner          960 − 2×10 = 940 px  (#center)
     .ja-masthead          960 px (во всю ширину .container), padding 20px 0,
                           margin-bottom 30px
     .section-description  940 − 2×30 = 880 px  (текст страницы)
   Типографика (h1–h6, p, ul/ol, таблицы, .check-list, .btn) уже задана
   в base.css — здесь только то, чего там нет, и область .content.
   ========================================================================= */

/* --- 1. Каркас страницы -------------------------------------------------- */

/* Белым на старом сайте был только контейнер 960 px (.container{background:#fff},
   template.css:3444), поля страницы оставались серыми #f2f2f2. */
.main {
	background: transparent;
}

/* Контейнер контента: 940 px внутри 960 (на старом сайте — padding 10px
   у .wrapper.main-container). Правило перекрывает .container из base.css,
   поэтому во всех медиазапросах ниже задаётся заново. */
.main__inner {
	/* Боковое поле контейнера. В переменной, а не числом: баннер .masthead
	   выбирает ровно его отрицательным марджином, и два значения не разъедутся. */
	--main-inner-pad: 10px;
	background: var(--c-white);
	padding-left: var(--main-inner-pad);
	padding-right: var(--main-inner-pad);
	padding-bottom: 5rem;            /* #center .section-description margin-bottom: 50px */
}

.main__article {
	margin: 0;
}

/* --- 2. Зелёный баннер с H1 (.ja-masthead) ------------------------------- */

.masthead {
	position: relative;
	/* Отрицательный марджин съедает боковые поля .main__inner — те самые белые
	   полоски по краям зелёного. Баннер встаёт во всю ширину белого контейнера
	   (960 px), за его край не выходит: марджин равен полю ровно. */
	margin: 0 calc(-1 * var(--main-inner-pad, 0px)) 3rem;
	padding: 20px 0;
	/* Позиция фона — как на старом сайте: left top + cover (template.css:2517) */
	background: var(--c-green) url("../img/masthead-bg.jpg") no-repeat left top;
	background-size: cover;
	text-align: left;
}

.masthead * {
	line-height: 1;
}

/* 40 px = 10 (поле .main__inner) + 30 (отступ .content): заголовок и крошки
   встают в одну вертикаль с текстом страницы, хотя баннер шире его колонки. */
.masthead__inner {
	position: relative;
	z-index: 2;
	padding: 0 40px;
}

.masthead__title {
	margin: 0;
	font-family: var(--font-head);
	font-size: 4rem;                 /* 40px */
	font-weight: 300;
	line-height: 1;
	color: var(--c-white);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	overflow-wrap: break-word;
}

/* Хлебные крошки внутри баннера (разметка и база — footer.css, полосу над
   подвалом они больше не рисуют: spivmir_breadcrumbs() печатает их один раз).
   Селектор через .masthead, а не модификатором: он специфичнее одиночного
   .breadcrumbs и не зависит от порядка подключения footer.css и content.css. */
.masthead .breadcrumbs {
	margin: 0 0 12px;
	background: none;
	font-size: 1.3rem;               /* на полпункта крупнее полосы над подвалом */
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.masthead .breadcrumbs,
.masthead .breadcrumbs * {
	line-height: 1.4;                /* .masthead * жмёт строку до 1 — крошкам нужен перенос */
}

.masthead .breadcrumbs__inner {
	padding: 0;
}

/* На зелёном фоне баннера светло-серый цвет полосы (#c9d2bc) не читается —
   крошки белые, как заголовок. Белое на #568d0d даёт 4,03:1, столько же,
   сколько весь текст подвала (см. footer.css): приглушать цвет ниже нельзя. */
.masthead .breadcrumbs__link,
.masthead .breadcrumbs__current {
	color: var(--c-white);
}

/* Раз цвет у ссылки и у текущей страницы один, ссылку отличает подчёркивание:
   опознавать её только по цвету нельзя (WCAG 1.4.1) — то же решение, что
   у юридических ссылок подвала. */
.masthead .breadcrumbs__link {
	text-decoration: underline;
}

.masthead .breadcrumbs__sep {
	color: var(--c-white);
	opacity: 0.6;                    /* разделитель декоративный (aria-hidden) */
}

/* Описание баннера на старом сайте скрыто (style.css:1270) — сохраняем. */
.jamasshead-description {
	display: none;
}

/* --- 3. Контент страницы (вывод классического редактора) ----------------- */

.content {
	padding: 0 30px;
}

/* Старые страницы верстались float-блоками (.services-item, картинки) */
.content::after {
	content: "";
	display: table;
	clear: both;
}

.content > *:first-child {
	margin-top: 0;
}

.content > *:last-child {
	margin-bottom: 0;
}

/* Вертикальный ритм контента — по вычисленным стилям живого сайта
   (замер 07.09.2026, /departments/otolaringologiya/):
   h2  margin 0 0 20px, line-height 35px;
   p   margin 15px 0;
   ul  margin 0 0 25px, padding-left 30px.
   Без этого заголовки уезжают вверх на ~10 px после каждого списка. */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	margin: 0 0 2rem;
	line-height: 1.25;
}

.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	color: var(--c-heading);
}

.content p {
	margin: 1.5rem 0;
}

.content ul,
.content ol {
	margin: 0 0 2.5rem;
}

.content h1 {
	color: var(--c-heading-h1);
}

/* Ссылки контента — зелёные, но кнопки (.btn / .button) сохраняют свои цвета:
   иначе .btn--cta внутри .content становится зелёным текстом на зелёном фоне. */
.content a:not(.btn):not(.button) {
	color: var(--c-green);
}

.content a:not(.btn):not(.button):hover,
.content a:not(.btn):not(.button):focus {
	color: var(--c-green);
	text-decoration: underline;
}

/* Ссылка на внешний ресурс или PDF внутри текста не должна ломать строку */
.content a[href^="tel:"] {
	white-space: nowrap;
}

.content__pages {
	margin: 2rem 0;
	font-size: 1.4rem;
}

/* --- 4. Картинки и подписи редактора ------------------------------------- */

.content img {
	max-width: 100%;
	height: auto;
}

.content .alignleft,
.content img.alignleft {
	float: left;
	margin: 0.5rem 2rem 1.5rem 0;
}

.content .alignright,
.content img.alignright {
	float: right;
	margin: 0.5rem 0 1.5rem 2rem;
}

.content .aligncenter,
.content img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.content .alignnone {
	display: block;
	margin: 1.5rem 0;
}

.content .wp-caption {
	max-width: 100%;
	margin-bottom: 2rem;
}

.content .wp-caption img {
	display: block;
}

.content .wp-caption-text,
.content figcaption {
	margin: 0.5rem 0 0;
	color: var(--c-text-soft);
	font-size: 1.3rem;
	line-height: 1.4;
	text-align: center;
}

/* --- 5. Таблицы контента ------------------------------------------------- */

/* На старом сайте: #center table {width:90%} — оставляем всю ширину,
   так таблицы прайса и услуг читаются лучше. */
.content table {
	width: 100%;
}

/* --- 6. Кнопка «Записаться на приём» под текстом услуги ------------------ */

.content-cta {
	margin: 3rem 0 0;
	padding: 0 30px;
}

/* --- 7. Адаптив ---------------------------------------------------------- */

@media (max-width: 1199px) {
	/* .container сжимается до 880 (base.css), внутренние отступы те же */
	.main__inner {
		--main-inner-pad: 10px;
	}
}

@media (max-width: 1023px) {
	/* Баннер во всю ширину экрана, текст с отступом 24px.
	   0px, а не 0: значение уходит в calc() марджина баннера, где нужна длина. */
	.main__inner {
		--main-inner-pad: 0px;
	}

	.content,
	.content-cta {
		padding: 0 24px;
	}

	.masthead {
		margin-bottom: 2.5rem;
		padding: 18px 0;
	}

	.masthead__inner {
		padding: 0 24px;             /* в одну вертикаль с .content */
	}

	.masthead__title {
		font-size: 3.4rem;
	}
}

@media (max-width: 767px) {
	.main__inner {
		padding-bottom: 3rem;
	}

	.content,
	.content-cta {
		padding: 0 16px;
	}

	.masthead {
		margin-bottom: 2rem;
		padding: 16px 0;
	}

	.masthead__inner {
		padding: 0 16px;             /* в одну вертикаль с .content */
	}

	.masthead__title {
		font-size: 2.8rem;
	}

	/* Широкие таблицы прокручиваются, а не ломают страницу */
	.content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: normal;
	}

	/* Обтекание на телефоне мешает — картинки в столбик */
	.content .alignleft,
	.content img.alignleft,
	.content .alignright,
	.content img.alignright {
		float: none;
		display: block;
		margin: 1.5rem auto;
	}
}

@media (max-width: 479px) {
	.masthead__title {
		font-size: 2.4rem;
	}
}