/* ==========================================================================
   1) КОНТЕЙНЕР И БЛОК ЗАПИСИ
   Здесь всё — только раскладка (ширина колонок, сетка), никакой типографики.
   Заголовку (.entry-title), фото (.post-thumbnail) и тексту (.entry-content)
   плагин намеренно НЕ навязывает свои шрифты/отступы/цвета — эти элементы
   стилизует тема, как и для любой другой записи сайта. Ниже — только
   :where()-фоллбэки нулевой специфичности: они применяются лишь если тема
   вообще не задала для них никаких стилей, и никогда не перебивают правила
   темы, даже при одинаковой специфичности.
   ========================================================================== */

.od-single-wrap {
	padding: 30px 20px;
}

/* Единая колонка чтения (расположение блока атрибутов = "top", по умолчанию). */
.od-single-container {
	max-width: 820px;
	margin: 0 auto;
}

/* Расположение блока атрибутов = "right": контент слева, атрибуты в боковой
   колонке справа (sticky). Ширина контейнера шире, т.к. занята двумя колонками. */
.od-single-container.od-single-container-with-sidebar {
	max-width: 1200px;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	align-items: start;
}

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

.od-single-sidebar-wrap {
	position: sticky;
	top: 20px;
}

/* Фоллбэки нулевой специфичности — сработают только если тема сама
   не стилизует .entry-title / .post-thumbnail img / .entry-content. */
:where(.od-single-title) {
	margin: 0 0 20px;
}

:where(.od-single-thumb) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 24px;
}

/* ==========================================================================
   2) БЛОК АТРИБУТОВ ОРГАНИЗАЦИИ — полностью свой, самостоятельный стиль.
   Не связан с типографикой/цветами темы: своя палитра (через CSS-переменные),
   свой шрифтовой стек, свои отступы — `all: initial` сбрасывает всё, что
   могло бы просочиться из темы. Палитра переопределяется в тёмном режиме
   (см. блок "3) ТЁМНАЯ ТЕМА" ниже), поэтому текст/иконки не сливаются с фоном
   при переключении темы оформления сайта.

   Раскладка "Над описанием" (.od-info-panel без модификатора) и раскладка
   "Справа" (.od-info-panel-vertical) используют РАЗНУЮ разметку внутри —
   секции в обоих случаях просто идут одна под другой в естественном потоке
   (без CSS Grid/Flex на уровне всей карточки), поэтому общий разделитель
   между соседними секциями задан один раз, на уровне прямых потомков.
   ========================================================================== */

.od-info-panel {
	--od-ink: #0f172a;
	--od-ink-soft: #5b6472;
	--od-ink-faint: #94a0b1;
	--od-surface: rgba(255, 255, 255, 0.5);
	--od-surface-muted: #f6f7f9;
	--od-line: #e6e9ee;
	--od-accent: #2563eb;
	--od-accent-soft: #eef3ff;
	--od-radius: 16px;
	--od-radius-sm: 10px;

	all: initial;
	display: block;
	box-sizing: border-box;
	background: var(--od-surface);
	/* Фон полупрозрачный (50%) — добавляем лёгкое размытие того, что просвечивает
	   сквозь панель, иначе текст на пёстром/тёмном фоне страницы читается хуже.
	   Если браузер не поддерживает backdrop-filter — просто остаётся прозрачный фон. */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--od-line);
	border-radius: var(--od-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -18px rgba(15, 23, 42, 0.25);
	margin-bottom: 32px;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--od-ink);
}

.od-info-panel.od-info-panel-vertical {
	margin-bottom: 0;
}

.od-info-panel * {
	box-sizing: border-box;
	font-family: inherit;
}

/* Разделитель между секциями — общий для обеих раскладок: секции (шапка,
   карта, контакты, график — либо колонки лого/график/карта в сайдбаре)
   всегда идут одна под другой, разделённые тонкой линией. */
.od-info-panel > * + * {
	border-top: 1px solid var(--od-line);
}

.od-info-panel > div {
	padding: 22px;
}

/* Карта всегда без внутренних отступов — заливает секцию от края до края. */
.od-info-map-row,
.od-info-col-map {
	padding: 0 !important;
	min-height: 200px;
}

.od-info-map-row .od-single-map,
.od-info-col-map .od-single-map {
	width: 100%;
	height: 100%;
	min-height: 200px;
}

/* ---------- Логотип ---------- */

.od-info-logo img {
	display: block;
	max-width: 96px;
	max-height: 96px;
	width: auto;
	height: auto;
	border-radius: var(--od-radius-sm);
	background: var(--od-surface);
	padding: 6px;
	border: 1px solid var(--od-line);
}

.od-info-col-main .od-info-logo {
	margin-bottom: 16px;
}

/* ---------- Бейджи (тип / регион / статус) ---------- */

.od-info-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.od-info-col-main .od-info-badges {
	margin-bottom: 18px;
}

.od-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
	line-height: 1.4;
}

.od-badge-region {
	background: var(--od-ink-soft);
}

.od-badge-open {
	background: #16803d;
}

.od-badge-open::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	margin-right: 6px;
}

.od-badge-closed {
	background: #6b7686;
}

/* ---------- Список атрибутов (вариант "Справа") ---------- */

.od-info-attrs {
	margin: 0;
}

.od-attr-row {
	padding: 10px 0;
	border-bottom: 1px solid var(--od-line);
}

.od-info-col-main .od-attr-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.od-attr-row dt {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--od-ink-faint);
	margin-bottom: 4px;
}

.od-attr-row dd {
	margin: 0;
	font-size: 14px;
	color: var(--od-ink);
	word-break: break-word;
}

.od-attr-row dd a {
	color: var(--od-accent);
	text-decoration: none;
	font-weight: 500;
}

.od-attr-row dd a:hover {
	text-decoration: underline;
}

/* ---------- Заголовок блока (вариант "Над описанием"): лого + бейджи + сайт ---------- */

.od-info-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.od-info-header .od-info-logo {
	flex-shrink: 0;
}

.od-info-header-main {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.od-info-website-link {
	color: var(--od-accent);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	word-break: break-word;
}

.od-info-website-link:hover {
	text-decoration: underline;
}

/* ---------- Адрес и телефон рядом (вариант "Над описанием") ---------- */

.od-info-contact-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.od-info-contact-item {
	flex: 1 1 200px;
	min-width: 180px;
}

.od-info-contact-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--od-ink-faint);
	margin-bottom: 4px;
}

.od-info-contact-value {
	display: block;
	font-size: 15px;
	color: var(--od-ink);
	word-break: break-word;
}

.od-info-contact-value a {
	color: var(--od-accent);
	text-decoration: none;
	font-weight: 500;
}

.od-info-contact-value a:hover {
	text-decoration: underline;
}

/* ---------- График работы: таблица (вариант "Справа") ---------- */

.od-info-schedule h4,
.od-info-schedule-row h4 {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--od-ink-faint);
}

.od-schedule-display {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.od-schedule-display th,
.od-schedule-display td {
	padding: 6px 8px;
	text-align: left;
	font-weight: 400;
	color: var(--od-ink);
}

.od-schedule-display th {
	font-weight: 500;
	width: 55%;
}

.od-schedule-display td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.od-schedule-off th,
.od-schedule-off td {
	color: var(--od-ink-faint);
}

.od-schedule-today th,
.od-schedule-today td {
	background: var(--od-surface-muted);
	font-weight: 600;
}

.od-schedule-today:not(.od-schedule-off) th,
.od-schedule-today:not(.od-schedule-off) td {
	background: var(--od-accent-soft);
	color: var(--od-accent);
}

.od-schedule-today th {
	border-radius: 6px 0 0 6px;
}

.od-schedule-today td {
	border-radius: 0 6px 6px 0;
}

/* ---------- График работы: горизонтальная полоса (вариант "Над описанием") ---------- */

.od-schedule-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.od-schedule-day {
	flex: 1 1 70px;
	min-width: 62px;
	text-align: center;
	background: var(--od-surface-muted);
	border-radius: var(--od-radius-sm);
	padding: 10px 6px;
}

.od-schedule-day-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--od-ink-soft);
	margin-bottom: 4px;
}

.od-schedule-day-hours {
	display: block;
	font-size: 12px;
	color: var(--od-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.od-schedule-day.od-schedule-off .od-schedule-day-label,
.od-schedule-day.od-schedule-off .od-schedule-day-hours {
	color: var(--od-ink-faint);
}

.od-schedule-day.od-schedule-today:not(.od-schedule-off) {
	background: var(--od-accent-soft);
}

.od-schedule-day.od-schedule-today:not(.od-schedule-off) .od-schedule-day-label,
.od-schedule-day.od-schedule-today:not(.od-schedule-off) .od-schedule-day-hours {
	color: var(--od-accent);
}

/* ==========================================================================
   3) ТЁМНАЯ ТЕМА
   Блок атрибутов сознательно изолирован от палитры темы (см. `all: initial`
   выше), поэтому автоматически подхватить тёмный режим темы он не может —
   его тёмный вариант должен быть задан явно. Ниже — реакция на системную/
   браузерную настройку "тёмный режим" (prefers-color-scheme). Если тема
   сайта переключает тёмный режим вручную (кнопкой, а не через системную
   настройку) и добавляет свой класс/атрибут — сообщите его точное название,
   и то же переопределение переменных нужно продублировать под этим селектором.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.od-info-panel {
		--od-ink: #e7eaf0;
		--od-ink-soft: #aab4c2;
		--od-ink-faint: #7c8794;
		--od-surface: rgba(26, 30, 38, 0.5);
		--od-surface-muted: #232834;
		--od-line: #333a47;
		--od-accent: #7fa8ff;
		--od-accent-soft: #1f2c47;

		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -18px rgba(0, 0, 0, 0.6);
	}

	.od-info-logo img {
		background: var(--od-surface-muted);
	}
}