/* ============================================================
   Адаптив: планшет / десктоп / мобильный
   ============================================================ */

/* ============================================================
   От 760px — планшет и десктоп
   ============================================================ */

@media (min-width: 760px) {
	:root {
		--page-gutter: 32px;
		--header-height: 80px;
	}

	.header-grid {
		grid-template-columns: 1fr auto auto;
		gap: 32px;
	}

	.desktop-nav {
		display: flex;
		align-items: center;
		gap: 27px;
	}

	.desktop-nav a {
		color: var(--muted);
		font-size: 13px;
	}

	.desktop-nav a:hover { color: var(--text); }

	.category-trigger {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: 10px 0;
		border: 0;
		background: transparent;
		font-size: 13px;
	}

	.chevron {
		width: 7px;
		height: 7px;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		transition: transform var(--ease);
	}

	.category-trigger.is-open .chevron {
		transform: rotate(225deg) translate(-1px, -1px);
	}

	.mobile-trigger,
	.mobile-panel { display: none; }

	.heading-cell { padding-block: 76px 62px; }

	.blog-heading h1 { font-size: clamp(70px, 8vw, 106px); }

	.featured-post { padding-block: 30px 44px; }

	.featured-layout {
		grid-template-columns: minmax(0, 1fr) 38%;
		gap: 70px;
		align-items: start;
	}

	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post {
		padding: 42px 34px 46px;
	}

	.post:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--line);
	}

	.post:nth-child(even) {
		padding-right: 0;
	}

	.post:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.newsletter-inner {
		grid-template-columns: 1fr 1fr;
		align-items: end;
		gap: 80px;
	}

	.newsletter-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.newsletter-form input { flex: 1; min-width: 0; }

	.newsletter-form .subscription-message {
		flex-basis: 100%;
		margin-top: 6px;
	}

	.footer-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ============================================================
   От 1180px — широкие экраны
   ============================================================ */

@media (min-width: 1180px) {
	:root { --page-gutter: 48px; }

	.page-grid::before,
	.page-grid::after {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		width: 1px;
		pointer-events: none;
		background-image: radial-gradient(circle, #dfe2e5 1px, transparent 1px);
		background-size: 7px 7px;
		opacity: .7;
	}

	.page-grid::before {
		left: max(0px, calc((100vw - var(--page-max)) / 2));
		transform: translateX(-1px);
	}

	.page-grid::after {
		right: max(0px, calc((100vw - var(--page-max)) / 2));
		transform: translateX(1px);
	}

	.post { min-height: 330px; }
}

/* ============================================================
   До 759px — мобильные
   ============================================================ */

@media (max-width: 759px) {
	/* --- Защита от горизонтального скролла --- */

	html,
	body {
		max-width: 100%;
		overflow-x: clip;
	}

	body {
	overflow-x: hidden;
	}
	
/* Контейнеры — на всю ширину, с внутренними отступами */
.content-width,
.page-grid,
.header-grid,
.mobile-panel-inner,
.newsletter-inner,
.footer-grid,
.post-grid,
.featured-layout {
	width: 100%;
	max-width: 100%;
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
	box-sizing: border-box;
}

/* Медиа не вылезает */
img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

	/* --- Заголовки: переносим длинные слова --- */

	.blog-heading h1,
	.featured-title,
	.post-title,
	.single-title {
		font-size: 2rem;
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
	}

	/* --- Featured: картинка сверху, текст снизу --- */

	.featured-layout {
		grid-template-columns: 1fr;
	}

	.featured-media {
		order: -1;
		overflow: hidden;
	}

	/* --- Сетка статей: 1 колонка --- */

	.post-grid {
		grid-template-columns: 1fr;
	}

	/* --- Подписка: 1 колонка --- */

	.newsletter-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.newsletter-form {
		flex-direction: column;
	}

	.newsletter-form input {
		width: 100%;
		min-width: 0;
	}

	.newsletter-form button {
		width: 100%;
	}

	/* --- Подвал: 1 колонка --- */

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 6px;
	}

	/* --- Мобильное меню: не вылезать --- */

	.mobile-panel {
		max-width: 100%;
		overflow-x: hidden;
	}

	.accordion-content a,
	.mobile-links a {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

/* ============================================================
   Уважение к настройкам системы
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}