/*
 * Blog lists: posts page /statti/ (home.php), archives, search (parts/blog-list.php).
 * Figma «Блог: корінь» 9:2256 desktop, 8:841 mobile.
 * DOM order is the mobile order; from 1024 px the wizard banner moves below the grid.
 */

.blog {
	display: flex;
	flex-direction: column;
}

/* ---------- Intro: H1, lead, count on a dimension line, search, chips ---------- */
.blog-intro {
	padding: 32px 0 32px;
}

.blog-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"title"
		"lead"
		"count"
		"search"
		"chips";
	gap: 20px;
}

.blog-intro__title {
	grid-area: title;
	margin: 0;
}

.blog-intro__lead {
	grid-area: lead;
	color: var(--c-graphite-soft);
}

.blog-intro__lead > * {
	margin: 0;
}

.blog-intro__lead > * + * {
	margin-top: var(--space-3);
}

.blog-intro__count {
	grid-area: count;
	margin: 0;
}

.blog-intro__search {
	grid-area: search;
}

.blog-intro__chips {
	grid-area: chips;
	min-width: 0;
	margin-top: 4px;
	scroll-margin-top: var(--sticky-top);
}

/* ---------- Featured article ---------- */
.blog-featured {
	padding-bottom: 40px;
}

.blog-featured__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.blog-featured .bti-measured-photo {
	height: 260px;
}

.blog-featured__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	min-width: 0;
}

.blog-featured__text > * {
	margin: 0;
}

.blog-featured__title a {
	color: var(--c-graphite);
	text-decoration: none;
}

.blog-featured__title a:hover {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.blog-featured__lead {
	color: var(--c-graphite-soft);
}

.blog-featured .bti-stamp {
	width: 100%;
}

.blog-featured__more {
	display: none;
}

/* Photo with dimension lines (bti_measured_post_photo()): phones show the width line only. */
.bti-measured-photo--featured .bti-dim--h {
	top: 28px;
	left: 44px;
	right: 44px;
}

.bti-measured-photo--featured .bti-dim--v {
	display: none;
}

/* ---------- Article grid ---------- */
.blog-list {
	padding: 40px 0 16px;
}

.blog-list__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.blog-list__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.blog-list__title {
	margin: 0;
}

.blog-list__all {
	display: none;
}

.blog-list__grid {
	margin: 0;
}

.blog-more {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
}

.blog-more .btn--secondary {
	width: 100%;
}

.blog-more__prev {
	align-self: center;
}

.blog-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--c-hatch);
}

.blog-empty__text {
	margin: 0;
	color: var(--c-graphite-soft);
}

@media (min-width: 768px) {
	.blog-list__all {
		display: inline-flex;
	}

	.blog-more {
		align-items: center;
	}

	.blog-more .btn--secondary {
		width: auto;
	}
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
	.blog-banner--wizard {
		order: 1;
	}

	.blog-banner--orgs {
		order: 2;
	}

	.blog-intro {
		padding: 72px 0 32px;
	}

	.blog-intro__inner {
		grid-template-columns: 700px minmax(0, 1fr);
		grid-template-rows: 1fr auto auto auto;
		grid-template-areas:
			"title lead"
			"title search"
			"count count"
			"chips chips";
		column-gap: 64px;
		row-gap: 24px;
	}

	.blog-intro__title {
		align-self: end;
	}

	.blog-intro__lead {
		align-self: end;
	}

	.blog-intro__count,
	.blog-intro__chips {
		margin-top: 8px;
	}

	.blog-featured {
		padding: 32px 0 72px;
	}

	.blog-featured__inner {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.blog-featured .bti-measured-photo {
		flex: none;
		width: 700px;
		height: 460px;
	}

	.blog-featured__text {
		flex: 1 1 auto;
		gap: 20px;
	}

	.blog-featured__more {
		display: inline-flex;
	}

	.bti-measured-photo--featured .bti-dim--h {
		top: 40px;
		left: 90px;
		right: 90px;
	}

	.bti-measured-photo--featured .bti-dim--v {
		display: flex;
		top: 90px;
		right: 44px;
		height: 300px;
	}

	.blog-list {
		padding: 0 0 56px;
	}

	/* Lists without the featured article: the grid follows the intro. */
	.blog-intro + .blog-banner + .blog-list {
		padding-top: 24px;
	}

	.blog-list__inner {
		gap: 32px;
	}

	.blog-list__grid {
		row-gap: 32px;
	}
}

@media (min-width: 1024px) and (max-width: 1247.98px) {
	.blog-intro__inner {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		column-gap: 48px;
	}

	.blog-featured .bti-measured-photo {
		flex: 0 0 58%;
		width: auto;
	}
}