/**
 * Blog — Styles
 *
 * Styles for the blog archive page, single post, and acf/blog-posts block.
 * All values use CSS variables from css/style-global.css.
 *
 * @package Socios
 */

/* ═════════════════════════════════════════════════════════════════════════════
 * Post card component
 * Shared by: archive listing, single post (related), acf/blog-posts block.
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-blog-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

/* ─── Thumbnail ────────────────────────────────────────────────────────────── */

.sc-blog-card__thumbnail-link {
	display: block;
}

.sc-blog-card__thumbnail {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 24px;
}

.sc-blog-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.15s ease;
}

.sc-blog-card:hover .sc-blog-card__thumbnail img {
	transform: scale(1.04);
}

/* ─── Body ─────────────────────────────────────────────────────────────────── */

.sc-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	flex: 1;
}

/* ─── Category pill ────────────────────────────────────────────────────────── */

.sc-blog-card__category {
	display: inline-block;
	font-family: var(--font-family-display);
	font-size: var(--font-size-12);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--orange-500);
	text-decoration: none;
	line-height: 1;
}

.sc-blog-card__category:hover {
	color: var(--orange-700);
	text-decoration: none;
}

.sc-blog-card__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.sc-blog-card__categories a:not(:last-child)::after {
	content: ',';
	color: var(--orange-500);
}

/* ─── Title ────────────────────────────────────────────────────────────────── */

.sc-blog-card__title {
	font-family: var(--font-family-display);
	font-weight: 500;
	line-height: 1.2;
	margin: 0;
	color: var(--text-main-enabled);
}

.sc-blog-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.sc-blog-card__title a:hover {
	color: var(--text-brand-enabled);
}

/* ─── Excerpt ──────────────────────────────────────────────────────────────── */

.sc-blog-card__excerpt {
	font-size: var(--font-size-18);
	color: var(--text-main-enabled);
	line-height: 1.4;
	margin: 0;
	flex: 1;
	overflow: hidden;
}

/* ─── Meta (date) ──────────────────────────────────────────────────────────── */

.sc-blog-card__meta {
	margin-top: auto;
}

.sc-blog-card__date {
	font-size: var(--font-size-16);
	color: var(--text-main-secondary);
	font-weight: 500;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Blog archive page
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-blog-archive {
	margin: 0 auto;
	padding: var(--padding-screen);
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ─── Category filter links ────────────────────────────────────────────────── */

.sc-blog-archive__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sc-blog-archive__filter-link {
	display: inline-block;
	font-family: var(--font-family-text);
	font-size: var(--font-size-16);
	font-weight: 500;
	padding: var(--spacing-16);
	color: var(--text-main-enabled);
	text-decoration: none;
	transition: 0.15s ease;
	line-height: 1;
	border-bottom: solid 1px #D6D7D7;
}

.sc-blog-archive__filter-link:hover,
.sc-blog-archive__filter-link--active {
	border-color: var(--bg-brand-enabled);
	color: var(--bg-brand-enabled);
	text-decoration: none;
}

/* ─── Post grid ────────────────────────────────────────────────────────────── */

.sc-blog-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-24);
	transition: opacity 0.2s ease;
}

/* ─── Fallback archive header (non-category archives) ─────────────────────── */

.sc-blog-archive__fallback-header {
	margin-bottom: var(--spacing-40);
}

.sc-blog-archive__fallback-title {
	font-family: var(--font-family-display);
	font-weight: 600;
	color: var(--text-main-enabled);
	margin: 0 0 var(--spacing-16);
}

.sc-blog-archive__fallback-desc {
	font-size: var(--font-size-18);
	color: var(--text-main-secondary);
	line-height: 1.5;
}

/* ─── Section title (e.g. "More from Category") ────────────────────────────── */

.sc-blog-archive__section-title {
	font-family: var(--font-family-display);
	font-weight: 500;
	font-size: 32px;
	color: var(--text-main-enabled);
	margin: 0;
}

/* ─── No results ───────────────────────────────────────────────────────────── */

.sc-blog-archive__no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-80) 0;
	color: var(--text-main-secondary);
	font-size: var(--font-size-18);
	margin: 0;
}

/* ─── Pagination ───────────────────────────────────────────────────────────── */

.sc-blog-archive__pagination {
	display: flex;
	justify-content: center;
	gap: var(--spacing-8);
	margin-top: var(--spacing-40);
	flex-wrap: wrap;
}

.sc-blog-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--spacing-12);
	border-radius: var(--radius-8);
	font-size: var(--font-size-14);
	font-weight: 500;
	text-decoration: none;
	color: var(--text-main-enabled);
	background-color: var(--bg-main-container);
	border: var(--border-width-1) solid var(--border-main-enabled);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sc-blog-archive__pagination .page-numbers.current,
.sc-blog-archive__pagination .page-numbers:hover {
	background-color: var(--bg-brand-enabled);
	border-color: var(--bg-brand-enabled);
	color: var(--text-on-dark-enabled);
}

.sc-blog-archive__pagination .page-numbers.dots {
	border: none;
	background: none;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Featured post hero (2-col: content left, image right)
 * Used on blog home (latest overall) and category archive (latest in category).
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-blog-featured {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-40);
	align-items: center;
}

.sc-blog-featured__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

.sc-blog-featured__category {
	display: inline-block;
	font-family: var(--font-family-display);
	font-size: var(--font-size-12);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--orange-500);
	text-decoration: none;
	line-height: 1;
}

.sc-blog-featured__category:hover {
	color: var(--orange-700);
	text-decoration: none;
}

.sc-blog-featured__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

.sc-blog-featured__categories a:not(:last-child)::after {
	content: ',';
	color: var(--orange-500);
}

.sc-blog-featured__title {
	font-family: var(--font-family-display);
	font-weight: 600;
	line-height: 1.15;
	color: var(--text-main-enabled);
	margin: 0;
	font-size: 48px;
}

.sc-blog-featured__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.sc-blog-featured__title a:hover {
	color: var(--text-brand-enabled);
}

.sc-blog-featured__excerpt {
	font-size: var(--font-size-18);
	color: var(--text-main-enabled);
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sc-blog-featured__cta {
	align-self: flex-start;
}

.sc-blog-featured__image {
	border-radius: var(--radius-20);
	overflow: hidden;
}

.sc-blog-featured__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.sc-blog-featured__image:hover img {
	transform: scale(1.04);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Per-category sections (blog home)
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-blog-categories {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-32);
}

.sc-blog-category-section {
	margin-bottom: 0;
}

.sc-blog-category-section__header {
	margin-bottom: var(--spacing-24);
}

.sc-blog-category-section__title {
	font-family: var(--font-family-display);
	font-weight: 600;
	color: var(--text-main-enabled);
	margin: 0;
}

.sc-blog-category-section__title a {
	color: inherit;
	text-decoration: none;
	font-size: 32px;
	font-weight: 500;
	transition: color 0.15s ease;
}

.sc-blog-category-section__title a:hover {
	color: var(--text-brand-enabled);
}

.sc-blog-category-section__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-24);
}

.sc-blog-category-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-24);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Blog single post page
 * ═════════════════════════════════════════════════════════════════════════════ */

.sc-blog-single {
	max-width: var(--layout-width);
	margin: 0 auto;
	padding: var(--padding-screen);
}

/* ─── Breadcrumbs ──────────────────────────────────────────────────────────── */

.sc-blog-single__breadcrumbs,
.sc-blog-archive__breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex-wrap: wrap;
	font-size: var(--font-size-14);
	color: var(--text-main-secondary);
}

.sc-blog-single__breadcrumbs {
	margin-bottom: var(--spacing-24);
}

.sc-blog-single__breadcrumbs a,
.sc-blog-archive__breadcrumbs a {
	color: var(--text-main-secondary);
	text-decoration: none;
}

.sc-blog-single__breadcrumbs a:hover,
.sc-blog-archive__breadcrumbs a:hover {
	color: var(--text-brand-enabled);
}

.sc-blog-single__breadcrumb-sep,
.sc-blog-archive__breadcrumb-sep {
	color: var(--text-main-disabled);
}

.sc-blog-single__breadcrumb-current,
.sc-blog-archive__breadcrumb-current {
	color: var(--bg-brand-enabled);
	font-weight: 500;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 40ch;
}

/* ─── Hero image ───────────────────────────────────────────────────────────── */

.sc-blog-single__hero {
	overflow: hidden;
	margin-bottom: var(--spacing-40);
}

.sc-blog-single__hero img{
	border-radius: var(--radius-20);
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ─── Post header ──────────────────────────────────────────────────────────── */

.sc-blog-single__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-40);
}

.sc-blog-single__category {
	display: inline-block;
	font-family: var(--font-family-display);
	font-size: var(--font-size-12);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--orange-500);
	text-decoration: none;
	line-height: 1;
}

.sc-blog-single__category:hover {
	color: var(--orange-700);
}

.sc-blog-single__categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

.sc-blog-single__categories a:not(:last-child)::after {
	content: ',';
	color: var(--orange-500);
}

.sc-blog-single__title {
	font-family: var(--font-family-display);
	font-weight: 600;
	line-height: 1.1;
	color: var(--text-main-enabled);
	margin: 0;
}

.sc-blog-single__meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	font-size: var(--font-size-14);
	color: var(--text-main-secondary);
}

.sc-blog-single__meta-sep {
	background-color: var(--orange-500);
	height: 8px;
	width: 8px;
	border-radius: var(--radius-full);
	display: inline-block;
}

/* ─── Two-column layout (article + sidebar) ────────────────────────────────── */

.sc-blog-single__layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--spacing-40);
	align-items: start;
}

.sc-blog-single__layout--no-sidebar {
	grid-template-columns: 1fr;
}

.sc-blog-single__layout--no-sidebar .sc-blog-single__sidebar {
	display: none;
}

/* ─── Article body (Gutenberg content resets) ──────────────────────────────── */

.sc-blog-single__body {
	min-width: 0;
}

.sc-blog-single__body .entry-content {
	font-size: var(--font-size-18);
	line-height: 1.7;
	color: var(--text-main-enabled);
	gap: var(--spacing-32);
}

.sc-blog-single__body .entry-content img {
	border-radius: var(--radius-8);
	max-width: 100%;
	height: auto;
}

.sc-blog-single__body .entry-content blockquote {
	border-left: var(--border-width-4) solid var(--blue-500);
	margin: var(--spacing-32) 0;
	padding: var(--spacing-16) var(--spacing-24);
	background-color: var(--bg-main-surface);
	border-radius: 0 var(--radius-8) var(--radius-8) 0;
	font-style: italic;
}

.sc-blog-single__body .entry-content ul,
.sc-blog-single__body .entry-content ol {
	padding-left: var(--spacing-24);
	margin-bottom: var(--spacing-32);
	list-style: initial;
}

.sc-blog-single__body .entry-content p {
	margin-bottom: 0;
}

.sc-blog-single__body .entry-content h2,
.sc-blog-single__body .entry-content h3,
.sc-blog-single__body .entry-content h4,
.sc-blog-single__body .entry-content h5,
.sc-blog-single__body .entry-content h6 {
	margin: var(--spacing-8) 0;
}

/* ─── Social share ─────────────────────────────────────────────────────────── */

.sc-blog-single__share {
	padding-top: var(--spacing-32);
	border-top: var(--border-width-1) solid var(--border-main-enabled);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-16);
}

.sc-blog-single__share-label {
	font-size: var(--font-size-14);
	font-weight: 600;
	color: var(--text-main-secondary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sc-blog-single__share-links {
	display: flex;
	gap: var(--spacing-12);
}

.sc-blog-single__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sizing-48);
	height: var(--sizing-48);
	border-radius: var(--radius-full);
	background-color: var(--dark-neutral-500);
	text-decoration: none;
	transition: transform 0.3s ease;
}

.sc-blog-single__share-link:hover {
	transform: scale(0.95);
}

.sc-blog-single__share-icon {
	width: var(--sizing-24);
	height: var(--sizing-24);
	filter: brightness(0) invert(1);
}

/* ─── Sidebar ──────────────────────────────────────────────────────────────── */

.sc-blog-single__sidebar {
	position: sticky;
	top: calc(var(--sc-header-height, 80px) + var(--ssb-banner-height, 0px) + 24px);
}

.sc-blog-single__sidebar .widget {
	background-color: var(--bg-main-container);
	border-radius: var(--radius-16);
	padding: var(--spacing-24);
	margin-bottom: var(--spacing-24);
}

.sc-blog-single__sidebar .widget-title {
	font-family: var(--font-family-display);
	font-weight: 600;
	color: var(--text-main-enabled);
	margin: 0 0 var(--spacing-16);
}

/* ─── Related posts ────────────────────────────────────────────────────────── */

.sc-blog-single__related {
	margin-top: var(--spacing-80);
	border-top: var(--border-width-1) solid var(--border-main-enabled);
}

.sc-blog-single__related-title {
	font-family: var(--font-family-display);
	font-weight: 600;
	color: var(--text-main-enabled);
	margin: 0 0 var(--spacing-32);
}

.sc-blog-single__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-24);
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Tablet (max-width: 1024px)
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

	.sc-blog-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-blog-featured {
		gap: var(--spacing-24);
	}

	.sc-blog-category-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sc-blog-single__layout {
		grid-template-columns: 1fr;
	}

	.sc-blog-single__sidebar {
		position: static;
	}

	.sc-blog-single__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Responsive — Mobile (max-width: 767px)
 * ═════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	.sc-blog-archive {
		padding: var(--spacing-24) var(--padding-screen) var(--spacing-40);
	}

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

	.sc-blog-featured__image {
		order: -1;
		border-radius: var(--radius-16);
	}

	.sc-blog-archive__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sc-blog-archive__filters::-webkit-scrollbar {
		display: none;
	}

	.sc-blog-archive__grid {
		grid-template-columns: 1fr;
	}

	.sc-blog-category-section__grid {
		grid-template-columns: 1fr;
	}

	.sc-blog-single__sidebar {
		display: none;
	}

	.sc-blog-single__related-grid {
		grid-template-columns: 1fr;
	}

	.sc-blog-single__share {
		gap: var(--spacing-12);
	}

	.sc-blog-featured__title {
		font-size: 32px;
	}
}