/*
 * Feature Carousel — section header on the right + horizontal scroll-snap tile track
 * with outlined arrow buttons below.
 *
 * Design source: Figma file o2Fw8rOZW4xOIEcs13IWzo, "Group 15" / Frame 17 carousel
 * (homepage Section 4 — "למה דווקא אנחנו"). Section bg #FFFEF9, tiles 480×332 image
 * + heading/body below, 15px radius, green gradient overlay at bottom of each image.
 *
 * RTL: native scroll direction handled by the browser when the parent has dir="rtl".
 */

.greengrass-feature-carousel {
	padding-block: clamp(64px, 7vw, 120px);
	background: #FFFEF9;
	font-family: 'Polin', sans-serif;
	overflow: hidden; /* contain the carousel track from spilling */
	direction: rtl; /* widget owns its direction — independent of page direction */
}

/*
 * Two-column full-width layout: header on logical-start (visual-right in RTL),
 * carousel column on logical-end. Container spans the full section width so the
 * tile track can use the full available horizontal space.
 */
.greengrass-feature-carousel__container {
	max-width: 100%;
	margin-inline: 0;
	padding-inline: clamp(16px, 2vw, 48px);
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 3vw, 64px);
}

/* ── Header column — wider per Figma, with a vertical divider to the carousel ─ */
.greengrass-feature-carousel__header {
	flex: 0 0 38%;
	max-width: 600px;
	text-align: start;
	border-inline-end: 1px solid #D0D7D9;
	padding-inline-end: clamp(24px, 3vw, 56px);
}

/* ── Carousel column ────────────────────────────────────── */
.greengrass-feature-carousel__column {
	flex: 1 1 0;
	min-width: 0; /* allow the column to shrink below content width so the track can scroll */
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 32px);
}

/* Mobile / narrow viewports: stack the columns */
@media (max-width: 960px) {
	.greengrass-feature-carousel__container {
		flex-direction: column;
		gap: clamp(20px, 2.4vw, 36px);
	}
	.greengrass-feature-carousel__header {
		flex: none;
		max-width: none;
		width: 100%;
		border-inline-end: 0;
		padding-inline-end: 0;
		border-block-end: 1px solid #D0D7D9; /* horizontal divider when stacked */
		padding-block-end: clamp(20px, 3vw, 32px);
	}
	.greengrass-feature-carousel__column {
		flex: none;
		width: 100%;
	}
}

.greengrass-feature-carousel__title {
	margin: 0 0 12px;
	font-family: 'Polin', sans-serif;
	font-size: clamp(28px, 3.5vw, 55px);
	font-weight: 700;
	line-height: 1.05;
	color: #00A3E9;
}

.greengrass-feature-carousel__subtitle {
	margin: 0 0 20px;
	font-family: 'Polin', sans-serif;
	font-size: clamp(20px, 2.2vw, 35px);
	font-weight: 700;
	line-height: 1.1;
	color: #2C3D41;
}

.greengrass-feature-carousel__subtitle .accent {
	color: #00A3E9;
}

.greengrass-feature-carousel__body {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(15px, 1.5vw, 24px);
	font-weight: 400;
	line-height: 1.35;
	color: #2C3D41;
}

/* ── Carousel viewport + track ──────────────────────────── */
.greengrass-feature-carousel__viewport {
	position: relative;
	overflow: hidden;
}

.greengrass-feature-carousel__track {
	display: flex;
	gap: clamp(16px, 1.8vw, 31px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	padding-block-end: 8px; /* room for shadows */
}

.greengrass-feature-carousel__track::-webkit-scrollbar {
	display: none;
}

/*
 * Tile width — show N + 0.5 tiles per viewport for a "peek" effect that signals
 * there's more content to scroll to. Default: 2 + half-peek = 2.5 visible.
 */
.greengrass-feature-carousel__tile {
	flex: 0 0 calc((100% - 2 * clamp(16px, 1.8vw, 31px)) / 2.5);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.greengrass-feature-carousel[data-visible="3"] .greengrass-feature-carousel__tile {
	flex: 0 0 calc((100% - 3 * clamp(16px, 1.8vw, 31px)) / 3.5);
}

.greengrass-feature-carousel[data-visible="4"] .greengrass-feature-carousel__tile {
	flex: 0 0 calc((100% - 4 * clamp(16px, 1.8vw, 31px)) / 4.5);
}

@media (max-width: 960px) {
	/* Columns stacked, carousel becomes full-width — show 2 tiles. */
	.greengrass-feature-carousel__tile,
	.greengrass-feature-carousel[data-visible="3"] .greengrass-feature-carousel__tile,
	.greengrass-feature-carousel[data-visible="4"] .greengrass-feature-carousel__tile {
		flex: 0 0 calc((100% - clamp(16px, 1.8vw, 31px)) / 2);
	}
}

@media (max-width: 640px) {
	.greengrass-feature-carousel__tile,
	.greengrass-feature-carousel[data-visible="3"] .greengrass-feature-carousel__tile,
	.greengrass-feature-carousel[data-visible="4"] .greengrass-feature-carousel__tile {
		flex: 0 0 85%;
	}
}

/* Tile image — 480×332 aspect at 1920, with green gradient overlay bottom */
.greengrass-feature-carousel__tile-image {
	position: relative;
	width: 100%;
	aspect-ratio: 480 / 332;
	border-radius: 15px;
	overflow: hidden;
	background: #e2e8f0;
}

.greengrass-feature-carousel__tile-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.greengrass-feature-carousel__tile-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(161.57deg, transparent -52.37%, rgba(98, 156, 85, 0.5) 99.06%);
}

/* Tile content (heading + body) */
.greengrass-feature-carousel__tile-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: start;
	padding-inline-end: 8px;
}

.greengrass-feature-carousel__tile-title {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(18px, 2vw, 30px);
	font-weight: 700;
	line-height: 1.1;
	color: #2C3D41;
}

.greengrass-feature-carousel__tile-body {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(14px, 1.3vw, 20px);
	font-weight: 400;
	line-height: 1.25;
	color: #2C3D41;
}

/* ── Arrows — Figma Rectangle 18/19: 70×70, 1px solid #2C3D41, 15px radius ───
 * Sit at the bottom-left of the header column (logical-end = visual-left in RTL).
 * `width: fit-content` keeps the box only as wide as the two buttons, then
 * `margin-inline-start: auto` pushes the whole group to the logical-end of the column.
 */
.greengrass-feature-carousel__controls {
	display: flex;
	gap: 12px;
	margin-block-start: clamp(16px, 2vw, 28px);
	width: fit-content;
	margin-inline-start: auto;
}

/* `!important` on background/border/color so the theme's generic button:hover
 * (which is bleeding maroon through on Yuval's setup) can't override us. */
.greengrass-feature-carousel__arrow,
.greengrass-feature-carousel__arrow:link,
.greengrass-feature-carousel__arrow:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 4.5vw, 70px);
	height: clamp(48px, 4.5vw, 70px);
	box-sizing: border-box;
	background-color: transparent !important;
	color: #2C3D41 !important;
	border: 1px solid #2C3D41 !important;
	border-radius: 15px;
	padding: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.greengrass-feature-carousel__arrow:hover,
.greengrass-feature-carousel__arrow:focus {
	background-color: rgba(44, 61, 65, 0.08) !important;
	color: #2C3D41 !important;
	border-color: #2C3D41 !important;
	transform: translateY(-1px);
}

.greengrass-feature-carousel__arrow:focus-visible {
	outline: 2px solid #2C3D41;
	outline-offset: 3px;
}

.greengrass-feature-carousel__arrow[disabled],
.greengrass-feature-carousel__arrow.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}