/* Раздел 5.6 ТЗ: собственное пространство классов a21-tdih-*, не зависит от разметки
   темы вокруг. Общий файл для виджета и архивной страницы по тегу-дате. Цвета — через
   переменные темы (--accent/--text/--text-muted из style.css), чтобы блок не выделялся
   среди остального сайта (Этап 6: перенос из плагина в тему). */

.a21-tdih-list,
.a21-tdih-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Сбрасываем маркер по умолчанию — кроме карточек с нашим ЖЕ маркером
   (.a21-tdih-list__item--marker, раздел 5.7, доработка) — там нужен настоящий
   системный list-style-type, а не подавленный. */
.a21-tdih-list li:not(.a21-tdih-list__item--marker)::before,
.a21-tdih-list li:not(.a21-tdih-list__item--marker)::marker {
	content: none;
	display: none;
}

/* Маркер — обычный системный список (list-style-type), а не картинка/декор:
   выбирается в настройках (точка/круг/квадрат/треугольник), показывается только
   когда превью нет или она выключена. */
.a21-tdih-list .a21-tdih-list__item--marker {
	list-style-position: outside;
	margin-left: 1.1em;
}

.a21-tdih-marker-disc .a21-tdih-list__item--marker {
	list-style-type: disc;
}

.a21-tdih-marker-circle .a21-tdih-list__item--marker {
	list-style-type: circle;
}

.a21-tdih-marker-square .a21-tdih-list__item--marker {
	list-style-type: square;
}

.a21-tdih-marker-triangle .a21-tdih-list__item--marker {
	list-style-type: '▸  ';
}

.a21-tdih-list__item + .a21-tdih-list__item {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border, #e2e2e2);
}

.a21-tdih-list__link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.a21-tdih-list__thumb {
	display: block;
	flex: 0 0 auto;
	width: 90px;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-radius: 4px;
}

.a21-tdih-list__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a21-tdih-list__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

/* Отдельная ссылка на страницу тега (доработка после приёмки — раньше дата не
   была кликабельна). Подчёркивание держим постоянным (не только на hover) —
   короткая дата плохо читается как ссылка, если полагаться только на цвет. */
.a21-tdih-list__date {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
}

a.a21-tdih-list__date {
	text-decoration: underline;
}

a.a21-tdih-list__date:hover {
	color: var(--text);
}

.a21-tdih-list__title {
	font-size: 14px;
	line-height: 1.35;
	color: var(--accent);
}

.a21-tdih-list__link:hover .a21-tdih-list__title {
	color: var(--text);
}

/* Анонс в карточке виджета (раздел 5.7, доработка) — отдельно от превью,
   можно включать/выключать независимо. */
.a21-tdih-list__excerpt {
	font-size: 12px;
	line-height: 1.4;
	color: var(--text-muted);
}

/* Вид «список» — крупнее, ближе к результатам поиска (раздел 5.4, 5.5). */
.a21-tdih-list--list .a21-tdih-list__thumb {
	width: 140px;
}

.a21-tdih-list--list .a21-tdih-list__date {
	font-size: 13px;
}

.a21-tdih-list--list .a21-tdih-list__title {
	font-size: 16px;
}

.a21-tdih-list--list .a21-tdih-list__excerpt {
	font-size: 13px;
}

/* Архивная страница по тегу-дате (раздел 5.5). Заголовок страницы («Этот день в
   истории: 16 августа») выводится через .section-head h2 самой темы — здесь только
   пустое состояние и список статей. */
.a21-tdih-archive__empty {
	color: var(--text-muted);
}

.a21-tdih-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.a21-tdih-archive-list li:not(.a21-tdih-archive-list__item--marker)::before,
.a21-tdih-archive-list li:not(.a21-tdih-archive-list__item--marker)::marker {
	content: none;
	display: none;
}

.a21-tdih-archive-list__item--marker {
	list-style-position: outside;
	margin-left: 1.2em;
}

.a21-tdih-marker-disc .a21-tdih-archive-list__item--marker {
	list-style-type: disc;
}

.a21-tdih-marker-circle .a21-tdih-archive-list__item--marker {
	list-style-type: circle;
}

.a21-tdih-marker-square .a21-tdih-archive-list__item--marker {
	list-style-type: square;
}

.a21-tdih-marker-triangle .a21-tdih-archive-list__item--marker {
	list-style-type: '▸  ';
}

.a21-tdih-archive-list__item + .a21-tdih-archive-list__item {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border, #e2e2e2);
}

.a21-tdih-archive-list__row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.a21-tdih-archive-list__thumb {
	display: block;
	flex: 0 0 auto;
	width: 240px;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	border-radius: 4px;
}

.a21-tdih-archive-list__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a21-tdih-archive-list__body {
	min-width: 0;
	flex: 1 1 auto;
}

.a21-tdih-archive-list__title {
	font-size: 19px;
	line-height: 1.15;
	margin: 0 0 6px;
}

.a21-tdih-archive-list__title a {
	color: var(--text);
	text-decoration: none;
}

.a21-tdih-archive-list__title a:hover {
	color: var(--accent);
}

/* Дата тега (а не дата публикации!) — это и есть суть страницы, нарочно выделяем
   её среди прочего. */
.a21-tdih-archive-list__date {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.a21-tdih-archive-list__excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	margin: 0 0 8px;
}

.a21-tdih-archive-list__terms {
	margin: 12px 0 0;
	padding: 0.5em 0.8em;
	font-size: 14px;
	color: var(--text);
	border-top: 1px solid var(--border, #ddd);
	border-bottom: 1px solid var(--border, #ddd);
}

.a21-tdih-archive-list__terms a {
	color: var(--text);
}

@media ( max-width: 480px ) {
	.a21-tdih-archive-list__row {
		flex-direction: column;
	}

	.a21-tdih-archive-list__thumb {
		width: 100%;
	}
}

/* Блок для главной (Этап B): дата выделена — жирным и акцентным цветом, тем же,
   что и везде в модуле — иначе теряется среди обычного текста темы. */
.a21-tdih-boxed__date {
	font-weight: 700;
	color: var(--accent);
}

/* Блок для главной (Этап B, доработка после приёмки): на узких экранах — единый
   список карточек одного размера, без увеличенной первой (с анонсом). Порядок
   «дата → заголовок» меняем через flex-order, не переставляя разметку — на десктопе
   она остаётся «заголовок → дата». Порог 35em (560px) — тот же, на котором тема
   сама уменьшает превью у .medium-post. Специфичность селекторов поднята
   компаундом .a21-tdih-boxed.widget-category-posts-boxed — иначе проигрывает
   более специфичным правилам темы для того же класса .large-post. */
@media only screen and ( max-width: 35em ) {
	.a21-tdih-boxed.widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .wp-post-image {
		float: none;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 0 0.6em 0;
		padding: 0;
	}

	.a21-tdih-boxed.widget-category-posts-boxed .category-posts-boxed-horizontal .large-post .post-content {
		float: none;
		width: auto;
		padding: 0;
	}

	.a21-tdih-boxed.widget-category-posts-boxed .large-post .entry-header {
		display: flex;
		flex-direction: column;
	}

	.a21-tdih-boxed.widget-category-posts-boxed .large-post .entry-header .entry-meta {
		order: -1;
	}

	.a21-tdih-boxed.widget-category-posts-boxed .large-post .entry-title {
		font-size: 16px;
		font-size: 1rem;
	}

	.a21-tdih-boxed.widget-category-posts-boxed .large-post .entry-content {
		display: none;
	}
}