/**
 * Шаблон «Самые просматриваемые» (template-popular-page.php):
 * вкладки периода, TOP-10 карточками и таблица остальных мест.
 * Слой pages объявлен в style.css: эти правила встают в тот же порядок каскада.
 */
@layer pages {
	.sc-top-tabs {
		margin-block-end: 24px;

		/* Телефон: все 4 вкладки видны сразу — сеткой 2×2, без прокрутки */
		@media (width < 600px) {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			inline-size: 100%;
			border-radius: var(--radius-m);

			& .sc-tabs__link {
				justify-content: center;
				border-radius: 12px;
				text-align: center;
			}
		}
	}

	/* ---------- TOP-10: 5 колонок на широком экране, 2 — на телефоне ---------- */
	.sc-top10 {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
		gap: 12px;

		@media (width >= 1100px) {
			grid-template-columns: repeat(5, minmax(0, 1fr));
		}
	}

	.sc-topcard {
		display: grid;
		grid-template-rows: auto auto auto 1fr auto;
		gap: 4px;
		block-size: 100%;
		min-inline-size: 0;
		padding: 16px 16px 12px;

		@media (width < 600px) {
			padding: 14px 12px 10px;

			& .sc-topcard__number {
				font-size: 18px;
			}
		}
		border: 2px solid var(--line);
		border-radius: var(--radius-l);
		background: var(--white);
		color: var(--ink);
		transition: border-color 0.15s, translate 0.15s;

		&:hover {
			border-color: var(--ink);
			color: var(--ink);

			@media (prefers-reduced-motion: no-preference) {
				translate: 0 -2px;
			}
		}

		/* Первые три места — на розовом фоне */
		li:nth-child(-n + 3) > & {
			border-color: var(--ink);
			background: var(--accent);

			& .sc-topcard__rank {
				background: var(--ink);
				color: var(--white);
			}

			/* На розовом только графит: серый, красный и бирюзовый не дотягивают до контраста 4,5:1.
			   Направление тренда и так видно по стрелке ↑/↓. */
			& .sc-topcard__cat,
			& .sc-topcard__views,
			& .sc-topcard__trend {
				color: var(--ink);
			}

			& .sc-spark polyline {
				stroke: var(--ink);
			}
		}
	}

	.sc-topcard__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-block-size: 28px;
		margin-block-end: 6px;
	}

	.sc-topcard__rank {
		display: grid;
		place-items: center;
		inline-size: 28px;
		block-size: 28px;
		border-radius: 9px;
		background: var(--grey-bg);
		font-size: 14px;
		font-weight: 800;
	}

	.sc-topcard__number {
		font-size: 21px;
		font-weight: 800;
		letter-spacing: -0.01em;
		line-height: 1.1;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.sc-topcard__cat {
		color: var(--muted);
		font-size: 13px;
	}

	.sc-topcard__stats {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
		margin-block-start: 10px;
	}

	.sc-topcard__views {
		color: var(--muted);
		font-size: 12px;

		& strong {
			margin-inline-end: 3px;
			color: var(--ink);
			font-size: 20px;
			font-weight: 800;
			font-variant-numeric: tabular-nums;
		}
	}

	.sc-topcard__trend {
		font-size: 12px;
		font-weight: 800;
		white-space: nowrap;

		&.is-up {
			color: #b3261e;
		}

		&.is-down {
			color: var(--teal);
		}
	}

	/* Мини-график просмотров за 14 дней */
	.sc-spark {
		inline-size: 100%;
		block-size: 32px;
		margin-block-start: 6px;
		overflow: visible;

		& polyline {
			fill: none;
			stroke: var(--teal);
			stroke-width: 2;
			stroke-linejoin: round;
			stroke-linecap: round;
			vector-effect: non-scaling-stroke;
		}
	}

	/* ---------- Таблица: места 11–50 ---------- */
	.sc-toptable-wrap {
		margin-block-start: 24px;
		border: 2px solid var(--ink);
		border-radius: var(--radius-l);
		overflow-x: auto;
	}

	.sc-toptable {
		inline-size: 100%;
		border-collapse: collapse;
		font-variant-numeric: tabular-nums;

		& th {
			padding: 14px 20px;
			background: var(--grey-bg);
			color: var(--muted);
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-align: start;
			text-transform: uppercase;
		}

		& td {
			padding: 12px 20px;
			border-block-start: 1px solid var(--line);
			vertical-align: middle;
		}

		& tbody tr {
			/* До 115 строк: строки ниже экрана браузер рисует, только когда до них дошла прокрутка */
			content-visibility: auto;
			contain-intrinsic-size: auto 58px;

			&:hover {
				background: var(--mint-soft);
			}
		}
	}

	.sc-toptable__rank {
		inline-size: 3.5rem;
		color: var(--muted);
		font-weight: 700;
	}

	.sc-toptable__number {
		color: var(--ink);
		font-size: 17px;
		font-weight: 800;
		white-space: nowrap;

		&:hover {
			color: var(--teal);
		}
	}

	.sc-toptable__cat {
		display: block;
		color: var(--muted);
		font-size: 13px;
	}

	/* th тоже: правило «.sc-toptable th» специфичнее одного класса */
	.sc-toptable :is(td, th).sc-toptable__num {
		font-weight: 800;
		text-align: end;
		white-space: nowrap;
	}

	.sc-toptable th.sc-toptable__num {
		font-weight: 700;
	}

	@media (width < 600px) {
		.sc-toptable {
			& th,
			& td {
				padding-inline: 12px;
			}
		}

		.sc-toptable__rank {
			inline-size: 2.5rem;
		}
	}
}