/* =============================================================================
   Bio Lotus — Magazine blog landing (home.php)
   Masthead, featured article, card grid, pagination.

   Uses design tokens from theme.css. Written with CSS logical properties
   (margin-inline, border-block…) so the same file serves the LTR (FR) and
   RTL (AR) forks; only the arrow icons need a dir-specific flip at the end.
   ============================================================================= */


/* ── Layout shell ──────────────────────────────────────────────────────────── */
.bl-mag {
	padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 128px);
}


/* ── 01. Masthead ──────────────────────────────────────────────────────────── */
.bl-mag__masthead {
	max-width: 780px;
	margin-inline: auto;
	margin-block-end: clamp(48px, 7vw, 88px);
	padding-inline: var(--bl-padding-x);
	text-align: center;
}

.bl-mag__eyebrow {
	display: block;
	margin-block-end: 18px;
	font: 500 12px/1 var(--bl-font-sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bl-accent);
}

.bl-mag__title {
	margin: 0 0 16px;
	font: 300 clamp(46px, 7vw, 88px)/1.04 var(--bl-font-serif);
	color: var(--bl-text);
}

.bl-mag__lead {
	margin: 0;
	font: 300 17px/1.65 var(--bl-font-sans);
	color: var(--bl-text-mid);
}


/* ── Shared meta bits ──────────────────────────────────────────────────────── */
.bl-mag__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bl-mag__flag {
	padding: 5px 12px;
	font: 600 10px/1 var(--bl-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bl-bold);
	background: var(--bl-bold-soft);
	border-radius: 999px;
}

.bl-mag__cat {
	font: 500 11px/1 var(--bl-font-sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bl-accent);
}

.bl-mag__read,
.bl-mag__date {
	font: 400 12px/1 var(--bl-font-sans);
	color: var(--bl-text-faint);
}

.bl-mag__excerpt {
	margin: 0;
	font: 300 16px/1.7 var(--bl-font-sans);
	color: var(--bl-text-mid);
}

.bl-mag__ph {
	width: 100%;
	height: 100%;
}


/* ── 02. Featured article ──────────────────────────────────────────────────── */
.bl-mag__featured {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(28px, 4.5vw, 64px);
	align-items: center;
	padding-block-end: clamp(44px, 6vw, 72px);
	margin-block-end: clamp(44px, 6vw, 72px);
	border-block-end: 1px solid var(--bl-line);
}

.bl-mag__featured-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--bl-bg-alt);
	border-radius: 2px;
}

.bl-mag__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--bl-ease);
}

.bl-mag__featured:hover .bl-mag__featured-media img {
	transform: scale(1.045);
}

.bl-mag__featured-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.bl-mag__featured-title {
	margin: 0;
	font: 400 clamp(28px, 3.4vw, 46px)/1.14 var(--bl-font-serif);
}

.bl-mag__featured-title a {
	color: var(--bl-text);
}

.bl-mag__featured-title a:hover {
	color: var(--bl-bold);
}

.bl-mag__byline {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bl-mag__byline > * + *::before {
	content: '·';
	margin-inline-end: 10px;
	color: var(--bl-text-faint);
}

.bl-mag__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block-end: 5px;
	font: 500 12px/1 var(--bl-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bl-text);
	border-block-end: 1px solid var(--bl-accent);
	transition: color 180ms var(--bl-ease), border-color 180ms var(--bl-ease);
}

.bl-mag__more:hover {
	color: var(--bl-bold);
	border-color: var(--bl-bold);
}


/* ── 03. Article grid ──────────────────────────────────────────────────────── */
.bl-mag__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(36px, 5vw, 56px) clamp(24px, 3vw, 36px);
}

.bl-mag__card-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--bl-bg-alt);
	border-radius: 2px;
}

.bl-mag__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--bl-ease);
}

.bl-mag__card:hover .bl-mag__card-media img {
	transform: scale(1.05);
}

.bl-mag__card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-block-start: 18px;
}

.bl-mag__card-title {
	margin: 0;
	font: 400 22px/1.3 var(--bl-font-serif);
}

.bl-mag__card-title a {
	color: var(--bl-text);
}

.bl-mag__card-title a:hover {
	color: var(--bl-bold);
}

.bl-mag__excerpt--card {
	font-size: 14px;
	line-height: 1.65;
}

.bl-mag__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-start: 4px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--bl-line);
}

.bl-mag__arrow {
	color: var(--bl-accent);
	transition: transform 250ms var(--bl-ease);
}

.bl-mag__card:hover .bl-mag__arrow {
	transform: translateX(4px);
}


/* ── 04. Pagination (core .navigation.pagination markup) ──────────────────── */
.bl-mag .navigation.pagination {
	margin-block-start: clamp(52px, 7vw, 80px);
}

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

.bl-mag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 16px;
	font: 500 13px/1 var(--bl-font-sans);
	color: var(--bl-text-mid);
	border: 1px solid var(--bl-line);
	border-radius: 999px;
	transition: color 180ms var(--bl-ease),
	            border-color 180ms var(--bl-ease),
	            background-color 180ms var(--bl-ease);
}

.bl-mag .page-numbers:hover {
	color: var(--bl-accent);
	border-color: var(--bl-accent);
}

.bl-mag .page-numbers.current {
	color: var(--bl-surface);
	background: var(--bl-accent);
	border-color: var(--bl-accent);
}

.bl-mag .page-numbers.dots {
	border: 0;
}


/* ── Empty state ───────────────────────────────────────────────────────────── */
.bl-mag__empty {
	margin: 0;
	font: 300 17px/1.7 var(--bl-font-sans);
	color: var(--bl-text-mid);
	text-align: center;
}


/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
	.bl-mag__featured {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.bl-mag__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 639px) {
	.bl-mag__grid {
		grid-template-columns: 1fr;
	}
	.bl-mag__featured-title {
		font-size: 30px;
	}
}


/* ── RTL: flip directional arrows + card hover direction ──────────────────── */
[dir="rtl"] .bl-mag .bl-icon-arrow {
	transform: scaleX(-1);
}

[dir="rtl"] .bl-mag__card:hover .bl-mag__arrow {
	transform: translateX(-4px);
}