/*
 * The blog section: hero, category tabs, featured article, card grid.
 *
 * Card counts follow the brief's recommended parameters — four across on a
 * wide screen, three on a laptop, two on a tablet, one on a phone — and every
 * card in a row is the same height whatever its title runs to.
 */

/* Padding rather than margin: WordPress zeroes the top margin of the first
   child of a block group, which this is. See the same note in article.css. */
/*
 * One column rhythm for the whole section.
 *
 * The card grid is four columns with a 24px gutter; everything else on the page
 * that has a right-hand column has to land on those same lines. Before this,
 * three different edges ran down the same stretch of page — the featured card
 * ended at 1056, the search box began at 1065, the sidebar at 1080 — because
 * each block had picked its own width.
 *
 * --sx-blog-col is exactly one grid column, so a sidebar set to it lines up
 * with the last card below it at any container width.
 */
.sx-blog-page {
	--sx-blog-gap: 24px;
	--sx-blog-cols: 4;
	--sx-blog-col: calc( ( 100% - ( var( --sx-blog-cols ) - 1 ) * var( --sx-blog-gap ) ) / var( --sx-blog-cols ) );

	padding-top: var( --wp--preset--spacing--50 );
}

/* ---- Hero ---- */

/* The layout and the cube's size are shared with the Проєкти and About
   headers — see "Page headers" in home-sections.css. */

.sx-blog-hero__text {
	max-width: 560px;
}

.sx-blog-hero__title {
	margin: 0 0 12px;
	font-size: var( --sx-title-page );
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.sx-blog-hero__lead {
	margin: 0;
	color: var( --sx-text-secondary );
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ---- Tabs and search ---- */

.sx-blog-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var( --wp--preset--spacing--50 );
	padding-bottom: 14px;
	border-bottom: 1px solid var( --sx-border );
}

/* Sideways rather than wrapping: a row of tabs that breaks onto three ragged
   lines stops reading as one control. The bar is hidden — the tabs themselves
   are the affordance. */
.sx-blog-tabs {
	display: flex;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.sx-blog-tabs::-webkit-scrollbar {
	display: none;
}

.sx-blog-tab {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 999px;
	color: var( --sx-text-secondary );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease ),
		color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-blog-tab:hover {
	background: var( --sx-surface );
	color: var( --sx-text );
}

.sx-blog-tab.is-active {
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

/* Exactly one grid column wide, so it sits directly over the sidebar under it.
   min-width: 0 is what lets it reach that width — without it the row's own
   content (field plus button) sets a floor of 327px and it overhangs by 15. */
.sx-blog-search {
	position: relative;
	display: flex;
	flex: 0 0 var( --sx-blog-col );
	min-width: 0;
}

.sx-blog-search input {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Room for the magnifier on the left and for the browser's own clear button on
 * the right, exactly as on the projects archive.
 *
 * The attribute is in the selector on purpose: the shared field styling in
 * tokens.css matches input[type="search"], which outweighs a plain class, and
 * a padding written without it loses and the text runs under the icon.
 */
.sx-blog-search input[type="search"] {
	padding: 0 14px 0 40px;
}

.sx-blog-search__icon {
	position: absolute;
	top: 50%;
	left: 13px;
	display: flex;
	color: var( --sx-text-muted );
	pointer-events: none;
	transform: translateY( -50% );
}

.sx-blog-search__icon svg {
	width: 17px;
	height: 17px;
}

.sx-blog-found,
.sx-blog-empty {
	margin: 0 0 var( --wp--preset--spacing--50 );
	color: var( --sx-text-secondary );
}

/* ---- Featured row ---- */

.sx-blog-top {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --sx-blog-col );
	gap: var( --sx-blog-gap );
	align-items: stretch;
	margin-bottom: var( --wp--preset--spacing--60 );
}

/* ---- Cards ---- */

.sx-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-white );
	transition: transform var( --sx-transition-base ) var( --sx-ease ),
		box-shadow var( --sx-transition-base ) var( --sx-ease ),
		border-color var( --sx-transition-base ) var( --sx-ease );
}

/* The title's link is stretched over the whole card, so the card is clickable
   without nesting a second link inside it — which is what would happen if the
   picture were a link too, and what makes a card confusing to tab through. */
.sx-post__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sx-post:hover {
	transform: translateY( -3px );
	border-color: var( --sx-brand-200 );
	box-shadow: var( --sx-shadow-card-hover );
}

/*
 * The ratio lives on the wrapper, not the picture. On the <img> itself it was
 * declared but never used: WordPress writes width and height attributes on
 * every image, and with those present the element kept its own proportions —
 * a 768x1195 banner came out 479px tall in a 308px column. A plain block
 * element has no such natural size to fall back on, so the ratio always holds
 * and the picture is cropped into it.
 */
.sx-post__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var( --sx-surface );
}

/*
 * Fitted, not cropped. The covers are posters, screenshots and photographs of
 * every shape, and filling a 16:9 frame with them cut the sides off whatever
 * was in the middle — the headline baked into one, the heads off the team
 * photo in another. What the picture does not cover shows the frame's own
 * light background.
 */
.sx-post__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var( --sx-transition-base ) var( --sx-ease );
}

.sx-post:hover .sx-post__media img {
	transform: scale( 1.03 );
}

.sx-post__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var( --sx-brand );
	color: var( --sx-white );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.sx-post__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 18px 20px 20px;
}

.sx-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	color: var( --sx-text-secondary );
	font-size: 0.75rem;
}

.sx-post__cat {
	color: var( --sx-brand-text );
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sx-post__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.sx-post__title a {
	color: inherit;
	text-decoration: none;
}

.sx-post:hover .sx-post__title a {
	color: var( --sx-brand-text );
}

.sx-post__excerpt {
	margin: 10px 0 0;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Pinned to the bottom so the reading times line up across a row however
   unevenly the titles run. */
.sx-post__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --sx-border );
	color: var( --sx-text-secondary );
	font-size: 0.75rem;
	margin-block-start: auto;
}

.sx-post__arrow,
.sx-post__more {
	color: var( --sx-brand-text );
	font-weight: 600;
	white-space: nowrap;
}

.sx-post__more {
	font-size: 0.875rem;
}

/* ---- Featured card ---- */

.sx-post--featured {
	flex-direction: row;
}

/* The featured picture fills the card's height instead of holding a ratio,
   so the row keeps a single clean edge whatever the text beside it runs to. */
.sx-post--featured .sx-post__media {
	flex: 0 0 46%;
	aspect-ratio: auto;
}

.sx-post--featured .sx-post__body {
	padding: 28px 30px;
	justify-content: center;
}

.sx-post--featured .sx-post__title {
	font-size: 1.375rem;
	line-height: 1.25;
}

/* ---- Popular topics ---- */

.sx-topics {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

.sx-topics__title {
	margin: 0 0 16px;
	font-size: 1rem;
	line-height: 1.3;
}

.sx-topics__list {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

.sx-topics__list li + li {
	margin-top: 4px;
}

.sx-topics__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	color: var( --sx-text );
	font-size: 0.9375rem;
	text-decoration: none;
}

.sx-topics__list a:hover .sx-topics__name {
	color: var( --sx-brand-text );
}

.sx-topics__count {
	flex: 0 0 auto;
	min-width: 28px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
}

.sx-topics__all {
	margin-top: 16px;
	color: var( --sx-brand-text );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

/* ---- Grid ---- */

.sx-blog-grid {
	display: grid;
	grid-template-columns: repeat( var( --sx-blog-cols ), minmax( 0, 1fr ) );
	gap: var( --sx-blog-gap );
}

/* Three across, and the column variable follows — so the sidebar and the search
   box narrow onto the new lines with it rather than staying at the old width. */
@media ( max-width: 1200px ) {
	.sx-blog-page {
		--sx-blog-cols: 3;
	}
}

@media ( max-width: 900px ) {
	.sx-blog-page {
		--sx-blog-cols: 2;
	}

	.sx-blog-top {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-post--featured {
		flex-direction: column;
	}

	.sx-post--featured .sx-post__media {
		aspect-ratio: 16 / 9;
	}
}

@media ( max-width: 600px ) {
	.sx-blog-page {
		--sx-blog-cols: 1;
	}

	.sx-blog-bar {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * Both rows are pinned to the bar's width. Left to size themselves they
	 * took their content width instead — the five category tabs come to 422px
	 * against a 350px column — and pushed the whole page sideways, so every
	 * screen on a phone could be dragged 52px to the right. The tabs still
	 * scroll inside this width; that is what the scroll container is for.
	 */
	.sx-blog-tabs,
	.sx-blog-search {
		width: 100%;
		min-width: 0;
	}

	.sx-blog-search input {
		width: 100%;
		min-width: 0;
	}
}

/* ---- Pagination ---- */

.sx-blog-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var( --wp--preset--spacing--60 );
}

.sx-blog-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var( --sx-border );
	border-radius: 999px;
	color: var( --sx-text );
	font-size: 0.875rem;
	text-decoration: none;
}

.sx-blog-pager .page-numbers:hover {
	border-color: var( --sx-brand-text );
	color: var( --sx-brand-text );
}

.sx-blog-pager .page-numbers.current {
	background: var( --sx-brand );
	border-color: var( --sx-brand-text );
	color: var( --sx-white );
	font-weight: 600;
}

.sx-blog-pager .page-numbers.dots {
	border-color: transparent;
}

/* ---- Newsletter ---- */

.sx-newsletter {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 420px );
	align-items: center;
	gap: 32px;
	margin-top: var( --wp--preset--spacing--70 );
	padding: 32px 36px;
	border-radius: var( --sx-radius-lg );
	background: var( --sx-surface );
}

.sx-newsletter__title {
	margin: 0 0 8px;
	font-size: 1.375rem;
	line-height: 1.25;
}

.sx-newsletter__lead {
	margin: 0;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.55;
}

.sx-newsletter__row {
	display: flex;
	gap: 10px;
}

.sx-newsletter__row input {
	flex: 1 1 auto;
	min-width: 0;
}

.sx-newsletter__row button {
	flex: 0 0 auto;
	min-height: var( --sx-control-height );
	padding-inline: 22px;
	border: 0;
	border-radius: var( --sx-radius-btn );
	background: var( --sx-brand );
	color: var( --sx-white );
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.sx-newsletter__row button:hover {
	background: var( --sx-brand-hover );
}

.sx-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	color: var( --sx-text-secondary );
	font-size: 0.8125rem;
	line-height: 1.45;
}

.sx-newsletter__consent input {
	flex: 0 0 auto;
	margin-top: 2px;
}

.sx-newsletter__consent a {
	color: var( --sx-brand-text );
}

.sx-newsletter__done {
	margin: 0;
	padding: 14px 18px;
	border-radius: var( --sx-radius-md );
	background: var( --sx-white );
	font-weight: 600;
}

.sx-newsletter__error {
	margin: 10px 0 0;
	color: var( --sx-brand-text );
	font-size: 0.8125rem;
}

/* The article rail: one column at any width, and the field above the button
   rather than beside it — 340px minus a "Підписатися" button leaves an email
   field too narrow to read what you typed into it. */
.sx-newsletter--compact {
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
	margin-top: 0;
	padding: 20px;
}

.sx-newsletter--compact .sx-newsletter__title {
	font-size: 1rem;
}

.sx-newsletter--compact .sx-newsletter__lead {
	font-size: 0.8125rem;
}

.sx-newsletter--compact .sx-newsletter__row {
	flex-direction: column;
}

@media ( max-width: 900px ) {
	.sx-newsletter {
		grid-template-columns: minmax( 0, 1fr );
		padding: 28px;
	}

	.sx-newsletter--compact {
		padding: 20px;
	}
}