/* ── Blog Archive ─────────────────────────────────────── */

.section-archive-post {
	background-color: var(--color-bg-light-50);
	background-blend-mode: multiply;}

.section-archive-post > .container {
	padding-block: var(--size-v-pad-md) var(--size-v-pad-sm);
}

/* Header container: strip bottom padding when grid follows */
.section-archive-post > .container:has(+ .container) {
	padding-bottom: 0;
}

/* Grid container: strip top padding */
.section-archive-post > .container + .container {
	padding-top: 0;
}

/* Zero breadcrumb bottom margin — spacing handled by .blog-header */
.section-archive-post .breadcrumb,
.section-archive-case-study .breadcrumb {
	margin-bottom: 0;
}

/* Header: heading stacked above category tabs */
.blog-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-pad-sm2);
	padding-block: var(--size-pad-xs) var(--size-section-title-mb);
}

.blog-header__title {
	color: var(--color-text-pri-dark);
	max-width: var(--size-max-heading-left-md);
	margin: 0;
}

/* ── Category tabs ──────────────────────────────────── */

.blog-tabs {
	display: flex;
	align-items: center;
	gap: 2rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-right: var(--size-global-padding-h);
	box-sizing: content-box;
	width: 100%;
}

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


.blog-tab {
	display: flex;
	align-items: center;
	gap: var(--size-icon-gap);
	color: var(--color-text-ter-dark);
	text-decoration: none;
	transition: var(--transition-fast);
	flex-shrink: 0;
}

.blog-tab:last-child {
	margin-right: var(--size-global-padding-h);
}

@media (hover: hover) {
    .blog-tab:hover {
        color: var(--color-accent-green);
    }
}

.blog-tab.is-active {
	color: var(--color-text-pri-dark);
}

.blog-tab__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--color-accent-green);
	flex-shrink: 0;
	display: none;
}

.blog-tab.is-active .blog-tab__dot {
	display: block;
}

/* ── Card grid ──────────────────────────────────────── */

/* Smart grid: 3 cols → 2 cols → 1 col based on available width */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
	column-gap: var(--size-gap-cards);
	row-gap: 4rem;
}

/* ── Card ───────────────────────────────────────────── */

.blog-card__cats {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75em;
}

.blog-card__cat {
	color: var(--color-accent-green);
	letter-spacing: var(--ls-lg);
	font-weight: var(--fw-semibold);
}

.blog-card__cat-sep {
	color: var(--color-accent-green);
	transform: translateY(0.1rem);
}

.blog-card__inner {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Image: full width, 16:9 ratio */
.blog-card__img-wrap {
	overflow: hidden;
	border-radius: var(--radius-media);
	aspect-ratio: 16 / 9;
	background: var(--color-bg-light-50);
	border: 1px solid var(--color-border-light-100);
}

.blog-card__img {
	width: 100%;
	height: 100%;
}

.blog-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-reveal);
}

.blog-card__img--placeholder {
	width: 100%;
	height: 100%;
}

.blog-card__body {
	padding-block: var(--size-pad-2xs) 0;
}

.blog-card__body > * {
	margin-top: 0;
}

.blog-card__title {
	color: var(--color-text-pri-dark);
	margin: 0 0 0.75rem;
	padding-right: 2rem;
	transition: var(--transition-fast);
}

.blog-card__meta {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}

.blog-card__author {
	color: var(--color-text-pri-dark);
	font-weight: var(--fw-semibold);
}

.blog-card__date {
	color: var(--color-text-ter-dark);
}

/* Hover — desktop only */
@media (hover: hover) {
	.blog-card__inner:hover .blog-card__img img {
		transform: scale(1.05);
	}

	.blog-card__inner:hover .blog-card__title {
		color: var(--color-text-sec-dark);
	}
}

/* ── Pagination — light background overrides ─────────── */

.section-archive-post .archive-post-pagination {
	margin-top: var(--size-section-cta-mt);
}

.section-archive-post .pagination {
	align-items: center;
	gap: 2.5rem;
}

.section-archive-post .page-numbers {
	border: none;
	background: none;
	color: var(--color-text-ter-dark);
	font-size: var(--fs-body-l);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-md);
	min-width: auto;
	aspect-ratio: auto;
	border-radius: 0;
	padding: 0;
	text-decoration: none;
	transition: var(--transition-fast);
}

@media (hover: hover) {
    .section-archive-post .page-numbers:hover {
        color: var(--color-text-pri-dark);
    }
}

.section-archive-post .page-numbers.current {
	color: var(--color-text-pri-dark);
	font-weight: var(--fw-semibold);
}

.section-archive-post .page-numbers.prev,
.section-archive-post .page-numbers.next {
	width: var(--size-icon-slider-btn);
	height: var(--size-icon-slider-btn);
	background-color: var(--color-bg-dark-200);
	border-radius: var(--radius-btn);
	display: flex;
	align-items: center;
	justify-content: center;
}

.section-archive-post .page-numbers.prev img,
.section-archive-post .page-numbers.next img {
	width: var(--size-icon-widget);
	height: var(--size-icon-widget);
	object-fit: contain;
	display: block;
}

/* Flip the arrow for "next" */
.section-archive-post .page-numbers.next img {
	transform: scaleX(-1);
}

.section-archive-post .page-item.disabled {
	opacity: 0.35;
}

/* ── Instagram section ──────────────────────────────── */

/* ── Responsive ─────────────────────────────────────── */

@media only screen and (max-width: 991.98px) {
	.blog-header {
		padding-block: var(--size-pad-xxs) var(--size-section-title-mb);
		gap: var(--size-pad-2xs);
	}

	.blog-tabs {
		gap: 0.75rem;
	}

	.blog-tab {
		font-size: var(--fs-body-s);
		border: 1px solid var(--color-border-light-100);
		border-radius: var(--radius-pill);
		padding: var(--btn-sm-pad-v) var(--btn-sm-pad-h);
		white-space: nowrap;
	}

	.blog-grid {
		row-gap: 2.5rem;
	}

	.blog-card__title {
		padding-right: 1rem;
	}

	.blog-tab {
		min-height: unset;
	}

	.blog-card__cats {
		flex-wrap: wrap;
		row-gap: 0;
		margin-bottom: 1rem;
	}

	.blog-card__date {
		font-weight: var(--fw-semibold);
	}

	.section-archive-post .pagination {
		gap: 1rem;
	}

	.section-archive-post .page-numbers {
		min-height: 2.75rem;
		display: flex;
		align-items: center;
	}

	.section-archive-post .page-numbers.prev,
	.section-archive-post .page-numbers.next {
		min-height: unset;
	}
}