/**
 * Blog: index, article cards and the reading layout.
 *
 * The catalog is a grid of equal things, so it gets an even grid. Editorial
 * content is not equal — one article leads and the rest support — so the index
 * gives the lead a full row and lets the others sit smaller beneath it. That
 * asymmetry is the whole design; everything below is in service of it.
 *
 * Colour comes from the brand tokens in base.css. No new colours are introduced
 * here: warmth comes from Warm Sand grounds and the Natural Wood accent used
 * sparingly, per the 50/25/15/10 balance in PRD Section 3.1.
 */

/* -------------------------------------------------------------------------- */
/* Masthead                                                                    */
/* -------------------------------------------------------------------------- */

.basaran-blog__masthead {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.75rem, 3vw, 2.75rem);
	background: var(--basaran-sand, #EFE8DC);
	border-bottom: 1px solid rgb(72 75 61 / 0.1);
}

.basaran-blog__title {
	margin: 0.25rem 0 0;
	font-size: clamp(2rem, 4.6vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
}

.basaran-blog__lede {
	max-width: 58ch;
	margin: 0.9rem 0 0;
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.6;
	color: rgb(37 39 33 / 0.76);
}

.basaran-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

/* -------------------------------------------------------------------------- */
/* Filter chips                                                                */
/* -------------------------------------------------------------------------- */

.basaran-chip--filter {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.42rem 0.9rem;
	border: 1px solid rgb(72 75 61 / 0.2);
	border-radius: 999px;
	background: transparent;
	font-size: 0.82rem;
	line-height: 1;
	color: var(--basaran-forest, #484B3D);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.basaran-chip--filter:hover,
.basaran-chip--filter:focus-visible {
	border-color: var(--basaran-forest, #484B3D);
	background: rgb(72 75 61 / 0.07);
}

.basaran-chip--filter.is-active {
	border-color: var(--basaran-forest, #484B3D);
	background: var(--basaran-forest, #484B3D);
	color: var(--basaran-ivory, #F5F1E8);
}

.basaran-chip__count {
	font-size: 0.72rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Grid                                                                        */
/* -------------------------------------------------------------------------- */

/* 16.5rem rather than a rounder figure so the four articles that follow the
 * lead land in one clean row at desktop width instead of three plus an orphan. */
.basaran-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

/* -------------------------------------------------------------------------- */
/* Card                                                                        */
/* -------------------------------------------------------------------------- */

.basaran-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* The lead spans the full row and turns horizontal, so the first thing on the
 * page is one article at a readable size rather than three at a glance.
 *
 * Declared *after* the base card, not with the grid rules where it reads more
 * naturally: the base sets `display: flex`, and a lead rule placed earlier lost
 * to it on source order and stacked the card vertically. */
.basaran-article-card--lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.25rem);
	padding-bottom: clamp(0.5rem, 2vw, 1.25rem);
	border-bottom: 1px solid rgb(72 75 61 / 0.12);
}

@media (max-width: 860px) {
	.basaran-article-card--lead {
		display: flex;
		flex-direction: column;
	}
}

.basaran-article-card__media {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: rgb(216 203 183 / 0.4);
	aspect-ratio: 16 / 10;
}

.basaran-article-card--lead .basaran-article-card__media {
	aspect-ratio: 3 / 2;
}

.basaran-article-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A slow, small scale on hover. Anything faster reads as a web-template
	 * flourish; this reads as the image responding. */
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.basaran-article-card:hover .basaran-article-card__media img {
	transform: scale(1.035);
}

.basaran-article-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.basaran-article-card__category {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basaran-wood, #9A6A43);
	text-decoration: none;
	/* Above the card's click layer, so the category is separately clickable. */
	position: relative;
	z-index: 2;
}

.basaran-article-card__title {
	margin: 0;
	font-size: 1.16rem;
	line-height: 1.28;
	letter-spacing: -0.005em;
}

.basaran-article-card--lead .basaran-article-card__title {
	font-size: clamp(1.5rem, 2.9vw, 2.25rem);
	line-height: 1.14;
}

.basaran-article-card__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.28s ease;
}

.basaran-article-card__title a::after {
	/* Card-wide hit area. The underline still belongs to the link itself, so
	 * keyboard focus lands on something visible rather than on the whole card. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.basaran-article-card:hover .basaran-article-card__title a,
.basaran-article-card__title a:focus-visible {
	background-size: 100% 1px;
}

.basaran-article-card__excerpt {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.62;
	color: rgb(37 39 33 / 0.72);
}

.basaran-article-card--lead .basaran-article-card__excerpt {
	font-size: 1.02rem;
	max-width: 46ch;
}

.basaran-article-card__meta {
	margin: 0.15rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: rgb(37 39 33 / 0.5);
}

.basaran-blog__empty {
	margin: clamp(2.5rem, 6vw, 4.5rem) 0;
	font-size: 1.05rem;
	color: rgb(37 39 33 / 0.66);
}

/* -------------------------------------------------------------------------- */
/* Article                                                                     */
/* -------------------------------------------------------------------------- */

/* Masthead: the headline and the photograph share one row.
 *
 * Two earlier attempts failed differently. A full-bleed band with the intro card
 * overlapping it sliced the image with the card's corners. Moving the card below
 * the band fixed the slicing and produced a new fault: the title is capped at
 * 22ch for readability, so on a wide screen it left a large blank field to its
 * right, and the image was a letterbox strip carrying no detail.
 *
 * Side by side, the cap on the title becomes the reason the layout works instead
 * of the reason it looks unfinished — the space beside it is occupied, and the
 * photograph gets a portrait-ish frame it can actually fill. */
.basaran-article__masthead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
	.basaran-article__header--media .basaran-article__masthead {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.basaran-article__hero {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--basaran-radius);
	background: var(--basaran-sand, #EFE8DC);
	aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
	.basaran-article__hero {
		aspect-ratio: 5 / 4;
	}
}

/* Class repeated to outrank `.elementor img { height: auto }` — the same
   same-specificity collision documented in base.css. */
.basaran-article__hero.basaran-article__hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.basaran-article__intro {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.basaran-chip--category {
	display: inline-block;
	margin-bottom: 0.85rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basaran-wood, #9A6A43);
	text-decoration: none;
}

.basaran-article__title {
	margin: 0;
	font-size: clamp(1.85rem, 4.2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.012em;
	max-width: 22ch;
}

.basaran-article__lede {
	max-width: 54ch;
	margin: 1rem 0 0;
	font-size: clamp(1.02rem, 1.6vw, 1.2rem);
	line-height: 1.58;
	color: rgb(37 39 33 / 0.75);
}

.basaran-article__meta {
	margin: 1.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: rgb(37 39 33 / 0.5);
}

/* -------------------------------------------------------------------------- */
/* Reading column                                                              */
/* -------------------------------------------------------------------------- */

.basaran-article__body {
	max-width: 68ch;
	margin: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 4rem);
	font-size: clamp(1.02rem, 1.35vw, 1.115rem);
	line-height: 1.75;
}

.basaran-article__body > * + * {
	margin-top: 1.35em;
}

.basaran-article__body h2 {
	margin-top: 2.4em;
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	line-height: 1.25;
	letter-spacing: -0.005em;
}

/* A short rule above each section heading. Cheaper than a border on the whole
 * block and it marks the section break without drawing a box around it. */
.basaran-article__body h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 0.9rem;
	background: var(--basaran-wood, #9A6A43);
}

.basaran-article__body h3 {
	margin-top: 1.9em;
	font-size: 1.14rem;
}

.basaran-article__body strong {
	font-weight: 600;
	color: var(--basaran-forest, #484B3D);
}

.basaran-article__body a {
	color: var(--basaran-forest, #484B3D);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.basaran-article__body ul,
.basaran-article__body ol {
	padding-inline-start: 1.35rem;
}

.basaran-article__body li + li {
	margin-top: 0.5em;
}

.basaran-article__body blockquote {
	margin-inline: 0;
	padding-inline-start: 1.4rem;
	border-inline-start: 3px solid var(--basaran-wood, #9A6A43);
	font-size: 1.12em;
	line-height: 1.55;
	color: var(--basaran-forest, #484B3D);
}

/* -------------------------------------------------------------------------- */
/* Related                                                                     */
/* -------------------------------------------------------------------------- */

.basaran-article__related {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem);
	background: var(--basaran-sand, #EFE8DC);
}

.basaran-blog__grid--related {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.basaran-article__related .basaran-article-card__media {
	background: rgb(245 241 232 / 0.6);
}

/* -------------------------------------------------------------------------- */
/* RTL                                                                         */
/* -------------------------------------------------------------------------- */

/* The lead card's column ratio is directional: the wider text column must stay
 * beside the image, not jump across it, when the grid flips. */
[dir="rtl"] .basaran-article-card--lead {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

[dir="rtl"] .basaran-article__body h2::before {
	margin-inline-start: 0;
}

/* Arabic sets denser than Latin at the same size; a little extra leading keeps
 * the reading column comfortable rather than cramped. */
[dir="rtl"] .basaran-article__body {
	line-height: 1.95;
}

/* -------------------------------------------------------------------------- */
/* Motion                                                                      */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.basaran-article-card__media img,
	.basaran-article-card__title a {
		transition: none;
	}

	.basaran-article-card:hover .basaran-article-card__media img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Article layout: prose column + sidebar                                      */
/* -------------------------------------------------------------------------- */

/* `minmax(0, 1fr)` rather than `1fr`: a grid item's default minimum is its
   content, so one long code block or unbroken URL in an article would otherwise
   push the column wider than its track and shove the sidebar off-screen. */
.basaran-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.basaran-article__layout {
		grid-template-columns: minmax(0, 1fr) 18rem;
	}
}

/* The measure is protected here, not by the absence of a sidebar — which is why
   adding one costs the reader nothing. */
.basaran-article__body {
	max-width: 42rem;
}

.basaran-article__aside {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 0.9375rem;
}

@media (min-width: 1000px) {
	/* Follows the reader down a long article without detaching from the column. */
	.basaran-article__aside {
		position: sticky;
		top: calc(var(--basaran-logo-h, 44px) + 3.5rem);
	}
}

.basaran-aside__title {
	margin: 0 0 0.85rem;
	font-family: var(--basaran-font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basaran-text-muted);
}

.basaran-aside__block {
	padding-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
	border-block-end: 1px solid var(--basaran-hairline);
}

.basaran-aside__block:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.basaran-aside__list,
.basaran-aside__posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-aside__list li + li {
	margin-block-start: 0.55rem;
}

.basaran-aside__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	color: var(--basaran-text);
	text-decoration: none;
}

.basaran-aside__list a:hover {
	color: var(--basaran-olive-700);
}

.basaran-aside__count {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--basaran-text-muted);
}

.basaran-aside__post {
	display: flex;
	gap: 0.75rem;
}

.basaran-aside__post + .basaran-aside__post {
	margin-block-start: 1rem;
}

.basaran-aside__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--basaran-radius);
}

/* Repeated class to outrank `.elementor img { height: auto }`, the same
   same-specificity collision documented in base.css. */
.basaran-aside__thumb.basaran-aside__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basaran-aside__post-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.basaran-aside__post-body a {
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--basaran-heading);
	text-decoration: none;
}

.basaran-aside__post-body a:hover {
	color: var(--basaran-olive-700);
}

.basaran-aside__post-body time {
	font-size: 0.75rem;
	color: var(--basaran-text-muted);
}

.basaran-aside__cta {
	padding: var(--basaran-space-3);
	background: var(--basaran-sand-100);
	border-radius: var(--basaran-radius);
	border-block-end: 0;
}

.basaran-aside__cta p {
	margin: 0 0 var(--basaran-space-2);
	color: var(--basaran-text-muted);
}

/* Widgets the client adds get the same rhythm as the fallback blocks. */
.basaran-article__aside .basaran-widget__title {
	margin: 0 0 0.85rem;
	font-family: var(--basaran-font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--basaran-text-muted);
}

.basaran-article__aside ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sidebar: product rail -------------------------------------------------- */

.basaran-aside__products {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.9rem;
}

.basaran-aside__product-link {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;

	padding: 0.5rem;
	margin: -0.5rem;
	border-radius: var(--basaran-radius);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--basaran-transition);
}

.basaran-aside__product-link:hover {
	background-color: var(--basaran-sand-100);
}

.basaran-aside__product-media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: calc(var(--basaran-radius) - 2px);
	background: var(--basaran-sand-100);
}

.basaran-aside__product-media.basaran-aside__product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basaran-aside__product-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.basaran-aside__product-title {
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--basaran-heading);
}

.basaran-aside__product-meta {
	font-size: 0.75rem;
	color: var(--basaran-text-muted);
}

.basaran-aside__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 1rem;

	font-family: var(--basaran-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--basaran-olive-700);
	text-decoration: none;
}

.basaran-aside__more:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The arrow points along the reading direction. */
[dir="rtl"] .basaran-aside__more span {
	transform: scaleX(-1);
}