/* articles-home — Figma 243:205. Tokens only (R8), logical props (R9). */

.articles-home {
	padding-block-end: var(--space-articles-bottom);
}

.articles-home__title {
	margin-block: var(--space-title-gap) var(--space-fluid-xl);
}

/* ---- The strip (Figma 243:212: p-32, gap 36, full-bleed) ---- */

.articles-home__carousel {
	position: relative;
}

.articles-home__track {
	--carousel-gap: var(--space-article-gap);
	align-items: stretch; /* all cards as tall as the tallest, as in Figma */
	padding: var(--space-8);
	scroll-snap-type: none; /* free scroll so the strip can rest centred on a gap (Figma) */
}

.articles-home__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	inline-size: var(--size-article);
	padding-block-end: var(--space-8);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-article);
}

.articles-home__media {
	aspect-ratio: 672 / 516; /* the shape lives on the container (R7) */
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-md);
}

.articles-home__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover; /* vertical crop per card: inline object-position from Figma */
}

.articles-home__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: right edge */
	gap: var(--space-10);
	padding-inline: var(--space-8);
}

.articles-home__card-title {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
}

/* The design truncates the excerpt at two lines with an ellipsis. */
.articles-home__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden; /* part of the line clamp — the design's own truncation */
	font-size: var(--fs-400);
}

.articles-home__more {
	align-self: flex-end; /* Figma: on the visual LEFT */
	font-size: var(--fs-100);
	text-decoration: underline;
	text-underline-position: from-font;
	text-box: trim-both cap alphabetic;
}

/* Floating arrows over the strip's edges (the design shows none; without
   them a mouse cannot move the strip). */
.articles-home__arrow {
	position: absolute;
	inset-block-start: calc(var(--size-article) * 0.384); /* centred on the photo row */
	z-index: 2;
	inline-size: var(--space-14);
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.articles-home__arrow.carousel__arrow--prev {
	inset-inline-start: var(--gutter);
}

.articles-home__arrow.carousel__arrow--next {
	inset-inline-end: var(--gutter);
}

/* ---- "לעמוד המאמרים המלא" row (Figma 243:349): gold line · navy pill · gold line ---- */

.articles-home__all {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	margin-block-start: var(--space-fluid-xl);
	padding-block: var(--space-4);
}

.articles-home__all-line {
	flex: 1 1 0;
	border-block-start: 2px solid var(--color-primary);
}

.articles-home__all-btn {
	flex: 0 1 44.5rem; /* lint-ok: 712px Figma pill width, flex-basis cap */
}

/* ---- Phone plan: one card per screen with the next one peeking ---- */

@media (max-width: 767px) { /* bp: --bp-md */
	.articles-home__track {
		padding-inline: var(--gutter);
		scroll-snap-type: x mandatory;
	}
	.articles-home__card {
		inline-size: 82%;
	}
	.articles-home__arrow {
		display: none; /* swipe on phones */
	}
	.articles-home__all-line {
		flex-basis: var(--space-6);
	}
}