/* courses-home — Figma 243:72. Every value from tokens (R8), logical props (R9).
   Card heights come from content; Figma's fixed 519px text area becomes a
   spacing token between the text and the button (R4). */

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

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

.courses-home__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr; /* every row as tall as the tallest card — Figma's equal 942px cards, content-driven */
	gap: var(--space-fluid-xl) var(--space-grid-gap);
}

/* ---- Card (Figma "כרטיס קורסים") ---- */

.courses-home__card {
	display: flex;
	flex-direction: column;
	overflow: hidden; /* radius mask — decorative clip */
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.courses-home__media {
	aspect-ratio: 631 / 419; /* the shape lives on the container (R7) */
	overflow: hidden; /* crop mask: without it the 4:3 photo's natural height stretches the box */
}

.courses-home__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.courses-home__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: right edge */
	gap: var(--space-card-gap);
	padding-block: var(--space-card-pad-block);
	padding-inline: var(--space-card-pad-inline);
}

.courses-home__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-fluid-sm);
	padding: var(--space-2);
}

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

/* The design truncates the description at two lines with an ellipsis. */
.courses-home__desc {
	max-inline-size: 31.125rem; /* lint-ok: 498px — Figma text width, a measure cap */
	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 */
	margin-block-end: var(--space-6); /* Figma reserves a 3-line box (117px) for the 2 visible lines */
	font-size: var(--fs-400);
	text-box: trim-both cap alphabetic;
}

.courses-home__desc p,
.courses-home__desc li {
	text-box: none;
}

.courses-home__desc ul {
	padding-inline-start: 1.5em;
	list-style: disc;
}

.courses-home__card.is-expanded .courses-home__desc {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
}

.courses-home__more {
	align-self: flex-end; /* Figma: the link sits on the visual LEFT of the text column */
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--fs-100);
	text-decoration: underline;
	text-underline-position: from-font;
	cursor: pointer;
	text-box: trim-both cap alphabetic;
}

.courses-home__btn {
	margin-block-start: auto; /* buttons line up at the bottom across a row */
}

/* ---- Phone plan: single column, image above text ---- */

@media (max-width: 767px) { /* bp: --bp-md */
	.courses-home__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-fluid-lg);
	}
	.courses-home__btn {
		align-self: stretch;
	}
}