/**
 * Blog Archive — Almutaheda Pack
 *
 * Loaded only on: is_home(), is_category(), is_tag(), is_date()
 * Depends on: tokens, base, buttons, badges, cards (all globally loaded)
 */

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

.alm-blog-main {
	overflow-x: hidden;
}

.alm-blog-hero {
	background: var(--alm-color-surface-dark, #0E223A);
	color: var(--alm-color-text-inverse, #fff);
	padding-block: clamp(3rem, 8vw, 5.5rem);
}

.alm-blog-hero .alm-section-label {
	color: var(--alm-color-sand, #C79A56);
	opacity: 1;
}

.alm-blog-hero .alm-section-label a {
	color: inherit;
	text-decoration: none;
}

.alm-blog-hero .alm-section-label a:hover {
	text-decoration: underline;
}

.alm-blog-hero__title {
	font-family: var(--alm-font-display, 'Cairo', sans-serif);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: var(--alm-weight-bold, 700);
	line-height: var(--alm-leading-tight, 1.2);
	color: #fff;
	margin-block: var(--alm-space-3, 12px) 0;
	text-wrap: balance;
}

.alm-blog-hero__sub {
	font-size: var(--alm-text-lg, 1.25rem);
	color: rgba(255, 255, 255, 0.78);
	margin-block-start: var(--alm-space-4, 16px);
	max-width: 55ch;
	line-height: var(--alm-leading-relaxed, 1.75);
}

.alm-blog-hero__desc {
	font-size: var(--alm-text-base, 1rem);
	color: rgba(255, 255, 255, 0.78);
	margin-block-start: var(--alm-space-4, 16px);
	max-width: 60ch;
	line-height: var(--alm-leading-body, 1.65);
}

.alm-blog-hero__desc p {
	margin-block-end: 0;
}

/* ── Category filter bar ──────────────────────────────────────────────────── */

.alm-blog-filter-sentinel {
	height: 1px;
	visibility: hidden;
	pointer-events: none;
}

.alm-blog-filter {
	position: sticky;
	top: 0;
	z-index: var(--alm-z-sticky, 200);
	background: var(--alm-color-surface-page, #FCFBF9);
	border-block-end: 1px solid var(--alm-color-border, #E6E8EC);
	transition: box-shadow var(--alm-motion-functional, 190ms) var(--alm-ease-standard);
}

.alm-blog-filter.is-stuck {
	box-shadow: var(--alm-shadow-sm, 0 2px 8px rgba(14, 34, 58, 0.07));
}

.alm-blog-filter .alm-container {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.alm-blog-filter .alm-container::-webkit-scrollbar {
	display: none;
}

.alm-blog-filter__list {
	display: flex;
	align-items: center;
	gap: var(--alm-space-2, 8px);
	padding-block: var(--alm-space-3, 12px);
	list-style: none;
	margin: 0;
	padding-inline: 0;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
}

.alm-blog-filter__pill {
	display: inline-flex;
	align-items: center;
	padding: var(--alm-space-1-5, 6px) var(--alm-space-4, 16px);
	border: 1.5px solid var(--alm-color-border, #E6E8EC);
	border-radius: var(--alm-radius-full, 9999px);
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: var(--alm-weight-semibold, 600);
	color: var(--alm-color-text-secondary, #46566A);
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition:
		background-color var(--alm-motion-functional, 190ms) var(--alm-ease-standard),
		border-color var(--alm-motion-functional, 190ms) var(--alm-ease-standard),
		color var(--alm-motion-functional, 190ms) var(--alm-ease-standard);
}

.alm-blog-filter__pill:hover,
.alm-blog-filter__pill:focus-visible {
	background: var(--alm-color-navy-primary-10, #E9EEF3);
	border-color: var(--alm-color-navy-primary, #0E223A);
	color: var(--alm-color-navy-primary, #0E223A);
	outline: none;
}

.alm-blog-filter__pill:focus-visible {
	outline: var(--alm-focus-ring-width, 3px) solid var(--alm-focus-ring-color, #C79A56);
	outline-offset: var(--alm-focus-ring-offset, 2px);
}

.alm-blog-filter__pill--active {
	background: var(--alm-color-navy-primary, #0E223A);
	border-color: var(--alm-color-navy-primary, #0E223A);
	color: #fff;
}

.alm-blog-filter__pill--active:hover {
	background: var(--alm-color-navy-secondary, #1B2F4A);
	border-color: var(--alm-color-navy-secondary, #1B2F4A);
	color: #fff;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.alm-blog-layout {
	padding-block: var(--alm-section-space-sm, clamp(2.5rem, 6vw, 4rem));
}

.alm-blog-grid-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-10, 40px);
	min-width: 0;
}

/* ── Post card overrides ──────────────────────────────────────────────────── */

.alm-post-card {
	display: flex;
	flex-direction: column;
}

.alm-post-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.alm-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--alm-motion-interface, 270ms) var(--alm-ease-emphasized);
}

.alm-post-card:hover .alm-post-card__img,
.alm-post-card:focus-within .alm-post-card__img {
	transform: scale(1.03);
}

.alm-post-card--hidden {
	display: none;
}

.alm-post-card__meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alm-space-1-5, 6px);
	margin-block-end: var(--alm-space-3, 12px);
}

/* Stretch the title link to cover the entire card */
.alm-post-card__title-link {
	color: inherit;
	text-decoration: none;
}

.alm-post-card__title-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.alm-post-card {
	position: relative;
}

.alm-post-card__footer {
	display: flex;
	align-items: center;
	gap: var(--alm-space-3, 12px);
	flex-wrap: wrap;
}

.alm-post-card__readtime {
	display: inline-flex;
	align-items: center;
	gap: var(--alm-space-1, 4px);
}

/* Read-more link sits above the stretch overlay */
.alm-post-card__footer .alm-btn {
	position: relative;
	z-index: 1;
	margin-inline-start: auto;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.alm-blog-empty {
	padding-block: var(--alm-space-16, 64px);
	text-align: center;
	color: var(--alm-color-text-muted, #6C7888);
}

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

.alm-blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-6, 24px);
}

.alm-sidebar-widget {
	background: var(--alm-color-surface-raised, #fff);
	border: 1px solid var(--alm-color-border, #E6E8EC);
	border-radius: var(--alm-radius-xl, 16px);
	padding: var(--alm-space-5, 20px);
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-4, 16px);
}

.alm-sidebar-widget__title {
	font-size: var(--alm-text-md, 1.125rem);
	font-weight: var(--alm-weight-semibold, 600);
	color: var(--alm-color-text-primary, #0E223A);
	padding-block-end: var(--alm-space-3, 12px);
	border-block-end: 1px solid var(--alm-color-border, #E6E8EC);
	margin-block-end: 0;
}

/* Recent posts */
.alm-sidebar-recent__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-3, 12px);
}

.alm-sidebar-recent__item {
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-1, 4px);
	padding-block-end: var(--alm-space-3, 12px);
	border-block-end: 1px solid var(--alm-color-border, #E6E8EC);
}

.alm-sidebar-recent__item:last-child {
	border-block-end: none;
	padding-block-end: 0;
}

.alm-sidebar-recent__link {
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: var(--alm-weight-medium, 500);
	color: var(--alm-color-text-primary, #0E223A);
	text-decoration: none;
	line-height: var(--alm-leading-snug, 1.375);
}

.alm-sidebar-recent__link:hover {
	color: var(--alm-color-sand-dark, #A97839);
}

/* Categories */
.alm-sidebar-cats__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--alm-space-1-5, 6px);
}

.alm-sidebar-cats__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--alm-space-2, 8px);
}

.alm-sidebar-cats__link {
	font-size: var(--alm-text-sm, 0.875rem);
	color: var(--alm-color-text-secondary, #46566A);
	text-decoration: none;
	flex: 1;
}

.alm-sidebar-cats__link:hover {
	color: var(--alm-color-navy-primary, #0E223A);
}

/* Product CTA widget */
.alm-sidebar-product-cta {
	background: var(--alm-color-surface-subtle, #F5F1EA);
	text-align: center;
}

.alm-sidebar-product-cta__text {
	font-size: var(--alm-text-sm, 0.875rem);
	color: var(--alm-color-text-secondary, #46566A);
	line-height: var(--alm-leading-relaxed, 1.75);
}

.alm-sidebar-product-cta .alm-btn {
	width: 100%;
}

.alm-sidebar-product-cta .alm-btn + .alm-btn {
	margin-block-start: var(--alm-space-2, 8px);
}

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

.alm-pagination {
	display: flex;
	justify-content: center;
}

.alm-pagination__list {
	display: flex;
	align-items: center;
	gap: var(--alm-space-1-5, 6px);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.alm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: var(--alm-space-1-5, 6px) var(--alm-space-3, 12px);
	border: 1.5px solid var(--alm-color-border, #E6E8EC);
	border-radius: var(--alm-radius-full, 9999px);
	font-size: var(--alm-text-sm, 0.875rem);
	font-weight: var(--alm-weight-semibold, 600);
	color: var(--alm-color-text-secondary, #46566A);
	text-decoration: none;
	transition:
		background-color var(--alm-motion-functional, 190ms) var(--alm-ease-standard),
		border-color var(--alm-motion-functional, 190ms) var(--alm-ease-standard),
		color var(--alm-motion-functional, 190ms) var(--alm-ease-standard);
}

.alm-pagination .page-numbers:hover {
	background: var(--alm-color-navy-primary-10, #E9EEF3);
	border-color: var(--alm-color-navy-primary, #0E223A);
	color: var(--alm-color-navy-primary, #0E223A);
}

.alm-pagination .page-numbers:focus-visible {
	outline: var(--alm-focus-ring-width, 3px) solid var(--alm-focus-ring-color, #C79A56);
	outline-offset: var(--alm-focus-ring-offset, 2px);
}

.alm-pagination .current {
	background: var(--alm-color-navy-primary, #0E223A);
	border-color: var(--alm-color-navy-primary, #0E223A);
	color: #fff;
}

.alm-pagination .dots {
	border: none;
	background: none;
	cursor: default;
	color: var(--alm-color-text-muted, #6C7888);
}

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

@media (max-width: 47.99rem) {
	.alm-blog-sidebar {
		display: none;
	}

	/* Bleed filter pills edge-to-edge on small screens */
	.alm-blog-filter .alm-container {
		padding-inline: 0;
	}

	.alm-blog-filter__list {
		padding-inline: var(--alm-space-4, 16px);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.alm-blog-filter,
	.alm-post-card__img {
		transition: none;
	}
}