/**
 * Blog archive + sidebar + single article layout (design system).
 */

.ssa-blog-archive,
.ssa-single-post {
	background: var(--ssa-bg);
}

.ssa-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
	gap: var(--ssa-space-6);
	align-items: start;
	padding-block: var(--ssa-space-6) var(--ssa-space-8);
}

.ssa-blog-layout__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ssa-space-6);
}

/* Featured */
.ssa-blog-featured__card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	background: var(--ssa-bg);
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius);
	overflow: hidden;
}

.ssa-blog-featured__media-link {
	display: block;
	min-height: 100%;
	cursor: pointer;
	overflow: hidden;
}

.ssa-blog-featured__media-link .ssa-post-media {
	height: 100%;
	border-radius: 0;
	min-height: 220px;
	max-height: 320px;
}

.ssa-blog-featured__media-link img,
.ssa-blog-featured__media-link .ssa-post-media__img {
	transition: transform 0.25s ease;
}

.ssa-blog-featured__media-link:hover img,
.ssa-blog-featured__media-link:hover .ssa-post-media__img {
	transform: scale(1.03);
}

.ssa-blog-featured__media-link:focus-visible,
.ssa-blog-featured__title a:focus-visible {
	outline: 2px solid var(--ssa-accent, #ee4036);
	outline-offset: 2px;
}

.ssa-blog-layout {
	padding-block: var(--ssa-space-5) var(--ssa-space-7);
}

.ssa-blog-layout__main {
	gap: var(--ssa-space-5);
}

.ssa-blog-sidebar {
	gap: var(--ssa-space-3);
}

.ssa-media-fallback--card .ssa-media-fallback__mark,
.ssa-media-fallback .ssa-media-fallback__mark {
	font-size: 0.95rem;
	opacity: 0.9;
}

.ssa-blog-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--ssa-space-5);
	gap: var(--ssa-space-3);
}

.ssa-blog-featured__title {
	margin: 0;
	font-size: var(--ssa-fs-lg);
	line-height: var(--ssa-lh-tight);
}

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

.ssa-blog-featured__title a:hover {
	color: var(--ssa-accent);
}

.ssa-blog-featured__excerpt {
	margin: 0;
	color: var(--ssa-text);
	font-size: var(--ssa-fs-sm);
	line-height: var(--ssa-lh-body);
}

.ssa-blog-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem;
	font-size: var(--ssa-fs-xs);
	color: var(--ssa-text-muted);
}

/* Grid — natural heights, consistent media ratio */
.ssa-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ssa-space-5);
	align-items: stretch;
}

/* Sidebar */
.ssa-blog-sidebar {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: var(--ssa-space-4);
}

.ssa-side-box {
	background: var(--ssa-bg);
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius);
	padding: var(--ssa-space-4);
	box-shadow: none;
	margin-bottom: 0;
}

.ssa-side-box__title {
	font-weight: 700;
	font-size: var(--ssa-fs-sm);
	color: var(--ssa-primary);
	margin: 0 0 var(--ssa-space-3);
	padding-bottom: var(--ssa-space-2);
	border-bottom: 2px solid var(--ssa-accent);
}

.ssa-small-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: var(--ssa-space-3);
	align-items: center;
	padding: var(--ssa-space-3) 0;
	border-bottom: 1px solid var(--ssa-border);
}

.ssa-small-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ssa-small-card:first-of-type {
	padding-top: 0;
}

.ssa-small-card__img {
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: var(--ssa-radius-sm);
	background: var(--ssa-bg-tint);
	flex-shrink: 0;
	position: relative;
}

.ssa-small-card__img img,
.ssa-small-card__img .ssa-media-fallback {
	width: 100%;
	height: 100%;
	display: block;
}

.ssa-small-card__img img {
	object-fit: cover;
}

.ssa-small-card__img--fit-contain img {
	object-fit: contain;
	background: #eef1f7;
}

.ssa-small-card__img .ssa-media-fallback {
	min-height: 100%;
	border-radius: inherit;
}

.ssa-small-card__img .ssa-media-fallback__mark {
	font-size: 0.65rem;
}

.ssa-small-card__img--empty {
	width: 72px;
	height: 72px;
	background: linear-gradient(145deg, var(--ssa-primary), #3a3680);
	border-radius: var(--ssa-radius-sm);
}

.ssa-post-media--fit-contain .ssa-post-media__img {
	object-fit: contain;
	background: #eef1f7;
}

.ssa-post-media--fit-cover .ssa-post-media__img {
	object-fit: cover;
}

.ssa-media-fallback--thumb .ssa-media-fallback__mark {
	font-size: 0.62rem;
}

@media (max-width: 767px) {
	.ssa-small-card {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.ssa-small-card__img,
	.ssa-small-card__img--empty {
		width: 64px;
		height: 64px;
	}
}

.ssa-small-card__title {
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--ssa-primary);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ssa-small-card__title:hover {
	color: var(--ssa-accent);
}

.ssa-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}

.ssa-cat-list li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--ssa-border);
}

.ssa-cat-list li:last-child {
	border-bottom: 0;
}

.ssa-cat-list a {
	color: var(--ssa-text);
	text-decoration: none;
	font-size: var(--ssa-fs-sm);
}

.ssa-cat-list a:hover {
	color: var(--ssa-accent);
}

/* Pagination */
.ssa-pagination {
	margin-top: var(--ssa-space-2);
}

.ssa-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ssa-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.ssa-pagination .page-numbers li {
	margin: 0;
}

.ssa-pagination .page-numbers a,
.ssa-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius-sm);
	color: var(--ssa-primary);
	text-decoration: none;
	font-size: var(--ssa-fs-sm);
	font-weight: 600;
	background: #fff;
}

.ssa-pagination .page-numbers .current {
	background: var(--ssa-primary);
	border-color: var(--ssa-primary);
	color: #fff;
}

.ssa-pagination .page-numbers a:hover {
	border-color: var(--ssa-accent);
	color: var(--ssa-accent);
}

/* Single article */
.ssa-article {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius);
	padding: var(--ssa-space-5);
}

.ssa-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ssa-space-2);
	margin-bottom: var(--ssa-space-4);
	font-size: var(--ssa-fs-xs);
	color: var(--ssa-text-muted);
}

.ssa-article__featured {
	margin: 0 0 var(--ssa-space-5);
}

.ssa-article__featured .ssa-post-media {
	border-radius: var(--ssa-radius-sm);
}

.ssa-article__content {
	font-size: clamp(1rem, 1.05vw, 1.0625rem);
	line-height: 1.85;
	color: var(--ssa-text);
}

.ssa-article__content > *:first-child {
	margin-top: 0;
}

.ssa-article__content h2,
.ssa-article__content h3 {
	color: var(--ssa-primary);
	margin-top: 1.6em;
}

/* Override legacy fixed card image heights that create blank space */
.ssa-blog-archive .ssa-blog-card img,
.ssa-blog-archive .ssa-post-media__img {
	height: 100% !important;
}

.elementor-page-2392 .elementor {
	/* Blog page now uses PHP template — Elementor canvas unused on front */
}

@media (max-width: 1024px) {
	.ssa-blog-layout {
		grid-template-columns: 1fr;
		gap: var(--ssa-space-5);
	}

	.ssa-blog-sidebar {
		position: static;
		order: 2;
	}

	.ssa-blog-layout__main,
	.ssa-article {
		order: 1;
	}

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

	.ssa-blog-featured__card {
		grid-template-columns: 1fr;
	}

	.ssa-blog-featured__media-link .ssa-post-media {
		min-height: 200px;
		aspect-ratio: var(--ssa-ratio-featured);
	}
}

@media (max-width: 767px) {
	.ssa-blog-layout {
		padding-block: var(--ssa-space-5) var(--ssa-space-6);
	}
}

/* Blog archives (Elementor loop grid — categories/tags):
 * Template 2394: desktop=2, tablet=2. Elementor’s mobile breakpoint is 767px;
 * keep 2 columns through 600–767 even if the widget emits grid-mobile-1.
 * Below 600px → 1 column for both PHP and Elementor grids. */
@media (max-width: 767px) {
	.archive .elementor-loop-container.elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	.ssa-blog-grid,
	.archive .elementor-loop-container.elementor-grid {
		grid-template-columns: 1fr !important;
		gap: var(--ssa-space-4);
	}
}

@media (max-width: 767px) {
	.ssa-article {
		padding: var(--ssa-space-4);
		border: 0;
		border-radius: 0;
	}

	.ssa-page-hero {
		padding-block: var(--ssa-space-5);
	}

	.ssa-side-box {
		padding: var(--ssa-space-3);
	}
}

/* ---- Search results ---- */
.ssa-search-results .ssa-search-results__layout {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--ssa-container);
	width: var(--ssa-content-width, min(calc(100% - 2 * var(--ssa-container-pad, 1.25rem)), var(--ssa-container)));
	margin-inline: auto;
	padding-inline: 0;
	padding-block: 1rem 2.25rem;
	box-sizing: border-box;
}

.ssa-search-results .ssa-blog-layout__main {
	gap: 1rem;
}

.ssa-search-results__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius);
}

/*
 * Important: do NOT use flex-basis: 18rem on the form.
 * On mobile the toolbar is column-direction, so a large flex-basis
 * becomes a ~270px HEIGHT and creates a huge empty white gap.
 */
.ssa-search-results__toolbar .ssa-blog-search {
	flex: 1 1 auto;
	min-width: min(100%, 18rem);
	max-width: 40rem;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	align-self: center;
}

.ssa-search-results__count {
	margin: 0;
	font-size: var(--ssa-fs-sm);
	color: var(--ssa-text-muted, #6b7280);
	font-weight: 600;
	line-height: 1.3;
	flex: 0 0 auto;
}

/* Search grid — independent from blog (blog stays 2 cols).
 * Desktop ≥1024: 3 · Tablet 600–1023: 2 · Mobile <600: 1 */
.ssa-search-results .ssa-blog-grid {
	align-items: stretch;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.ssa-search-results .ssa-blog-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.ssa-search-results .ssa-blog-grid {
		grid-template-columns: 1fr !important;
	}
}

.ssa-search-empty {
	text-align: center;
	padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
	background: #fff;
	border: 1px solid var(--ssa-border);
	border-radius: var(--ssa-radius);
}

.ssa-search-empty__title {
	margin: 0 0 0.65rem;
	color: var(--ssa-primary);
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}

.ssa-search-empty__text {
	margin: 0 auto 1.35rem;
	max-width: 34rem;
	line-height: 1.7;
	color: var(--ssa-text);
}

.ssa-search-empty__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.ssa-search-results__toolbar {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.65rem;
		padding: 0.75rem 0.85rem;
	}

	.ssa-search-results__toolbar .ssa-blog-search {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
		max-width: none;
		min-width: 0;
		height: auto;
		min-height: 0;
		gap: 0.45rem;
	}

	.ssa-search-results__toolbar .ssa-blog-search input[type="search"],
	.ssa-search-results__toolbar .ssa-blog-search button {
		height: 48px;
		min-height: 48px;
		max-height: 48px;
	}

	.ssa-search-results__toolbar .ssa-blog-search button {
		min-width: 4.5rem;
		padding-inline: 0.85rem;
		flex: 0 0 auto;
	}

	.ssa-search-results__count {
		width: 100%;
		text-align: start;
	}

	/* ~16–24px between toolbar and first card */
	.ssa-search-results .ssa-blog-layout__main {
		gap: 1.15rem;
	}
}