/*
 * SECTION:  Journal list pages: the posts page, category, tag, author and date archives
 * File:     assets/css/pages/sol-blog.css
 * Used by:  home.php, archive.php (cards: sections/sol-post-card.css)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-blog").
 *
 * Mobile first. The main story and the "Latest" list sit side by side from 900px.
 * Colors come only from the tokens, so light and dark mode follow the theme switch.
 * Text colors are !important on purpose: the Elementor kit colors paragraphs and links with stronger
 * selectors, and the journal text must always follow the theme tokens.
 */

.sol-blog {
	max-width: var(--sol-container);
	margin-inline: auto;
	padding: clamp(32px, 6vw, 72px) var(--sol-gutter) clamp(56px, 8vw, 104px);
	color: var(--sol-text) !important;
}

/* ---- Header ---- */
.sol-blog__head {
	display: grid;
	justify-items: start;
	gap: 16px;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.sol-blog__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--sol-gold-text) !important;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sol-blog__eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	background: var(--sol-accent);
}

.sol-blog__title {
	max-width: 18ch;
	margin: 0;
	font-family: var(--sol-font-serif);
	font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
	font-weight: 500;
	line-height: 1.05;
}

.sol-blog__lead,
.sol-blog__lead p {
	max-width: 58ch;
	margin: 0;
	color: var(--sol-muted) !important;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
}

/* Author archive: picture beside the name. */
.sol-blog__author {
	display: flex;
	align-items: center;
	gap: 20px;
}

.sol-blog__avatar {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
}

/* ---- Category chips ---- */
.sol-blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.sol-blog .sol-blog-chips__chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1.5px solid var(--sol-line);
	border-radius: 999px;
	background: var(--sol-surface);
	color: var(--sol-text) !important;
	font: 600 0.9375rem var(--sol-font-sans);
	text-decoration: none;
	transition: border-color var(--sol-fast) ease, background-color var(--sol-fast) ease;
}

.sol-blog .sol-blog-chips__chip:hover {
	border-color: var(--sol-muted);
}

.sol-blog .sol-blog-chips__chip.is-active {
	border-color: var(--sol-accent);
	background: var(--sol-accent);
	color: var(--sol-accent-ink) !important;
}

/* ---- Main story and the Latest list ---- */
.sol-blog__top {
	display: grid;
	gap: 24px;
	margin-bottom: clamp(40px, 6vw, 72px);
}

@media (min-width: 900px) {
	.sol-blog__top {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 32px;
	}
}

.sol-blog__latest {
	display: grid;
	align-content: start;
	gap: 0;
	padding: 24px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-lg);
	background: var(--sol-surface);
}

.sol-blog__latest-title {
	margin: 0 0 12px;
	font-family: var(--sol-font-serif);
	font-size: 1.25rem;
	font-weight: 500;
}

.sol-blog__latest .sol-card-post--compact {
	padding-block: 18px;
	border-top: 1px solid var(--sol-line);
}

/* ---- Grid of cards ---- */
.sol-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

/* ---- Pagination ---- */
.sol-blog .navigation.pagination {
	margin-top: clamp(40px, 6vw, 64px);
}

.sol-blog .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.sol-blog .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--sol-line);
	border-radius: 999px;
	background: var(--sol-surface);
	color: var(--sol-text) !important;
	font: 600 0.9375rem var(--sol-font-sans);
	text-decoration: none;
}

.sol-blog .pagination a.page-numbers:hover {
	border-color: var(--sol-gold-text);
}

.sol-blog .pagination .page-numbers.current {
	border-color: var(--sol-accent);
	background: var(--sol-accent);
	color: var(--sol-accent-ink) !important;
}

.sol-blog .pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: transparent;
}

.sol-blog .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}