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

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

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

.videos-home__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 37.1875rem)); /* lint-ok: 595px Figma card width, a cap */
	justify-content: center;
	gap: var(--space-fluid-xl) var(--space-video-grid);
	padding-inline: var(--gutter);
}

/* ---- Card (Figma "כרטיסיית וידאו") ---- */

.videos-home__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-caption);
	padding-block-end: var(--space-8);
	border-radius: var(--radius-lg);
	background: var(--color-white);
	box-shadow: var(--shadow-photo);
}

.videos-home__media {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 595 / 396; /* the shape lives on the container (R7) */
	overflow: hidden; /* radius mask */
	border-start-start-radius: var(--radius-md);
	border-start-end-radius: var(--radius-md);
}

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

/* Horizontal crop per card: inline object-position from the focus_x field
   (Figma fill offsets: 20.5% / 66.6%). */

.videos-home__card {
	position: relative; /* anchor for the stretched YouTube trigger */
}

.videos-home__card.has-video {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.videos-home__card.has-video:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

/* 130px badge centred on the image — decoration (R3). */
.videos-home__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--color-white);
	pointer-events: none;
}

.videos-home__card.is-light .videos-home__play {
	color: var(--color-ink); /* Figma: navy badge on the light thumbnail */
}

.videos-home__play svg {
	inline-size: var(--size-play);
	block-size: auto;
}

.videos-home__caption {
	font-size: var(--fs-600);
	font-weight: var(--fw-regular);
	text-align: center;
}

/* ---- Phone plan: one video per screen, swipe ---- */

@media (max-width: 767px) { /* bp: --bp-md */
	.videos-home__grid {
		display: flex;
		gap: var(--space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-block: var(--space-2) var(--space-4);
	}
	.videos-home__caption {
		padding-inline: var(--space-4);
	}
	.videos-home__card {
		flex: none;
		inline-size: 82%;
		scroll-snap-align: center;
	}
}