/* =========================================================================
   CLUTCHES — Layout primitives
   ========================================================================= */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); margin-inline: auto; }
.container--narrow { max-width: 820px; }

.section { padding-block: clamp(40px, 6vw, 88px); }
.section--tight { padding-block: clamp(28px, 4vw, 56px); }
.section--soft { background: var(--c-bg-soft); }

/* Section heading row */
.section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sp-4); margin-block-end: var(--sp-5);
	flex-wrap: wrap;
}
.section-head h2 {
	font-size: var(--fs-xl); font-weight: var(--fw-medium);
	letter-spacing: .01em; margin: 0;
}
.section-head .section-link {
	font-size: var(--fs-sm); letter-spacing: var(--ls-wide);
	text-transform: uppercase; color: var(--c-ink);
	border-block-end: 1px solid currentColor; padding-block-end: 2px;
}

/* Generic responsive grid */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

/* Horizontal scroll rail (carousels).
   Flex with explicit flex-basis — NOT grid-auto-columns percentages, which
   collapse to zero-width columns in iOS Safari scroll containers. LTR
   direction gives every browser the same scroll origin (first item shown). */
.rail {
	display: flex;
	direction: ltr;
	gap: var(--gutter);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block-end: var(--sp-2);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
	flex: 0 0 calc((100% - (var(--gutter) * 3)) / 4);
	min-inline-size: 0;
	direction: rtl; /* restore Hebrew flow inside each card */
	scroll-snap-align: start;
}

.rail-wrap { position: relative; }
.rail-arrow {
	position: absolute; inset-block-start: 38%;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--c-white); border: 1px solid var(--c-line);
	box-shadow: var(--shadow-sm); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	z-index: 3; transition: background var(--dur-fast) var(--ease);
}
.rail-arrow:hover { background: var(--c-black); color: #fff; }
.rail-arrow[hidden] { display: none; }
.rail-arrow--prev { inset-inline-start: -10px; }
.rail-arrow--next { inset-inline-end: -10px; }

.divider { height: 1px; background: var(--c-line); border: 0; margin: 0; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(3, 1fr); }
	.grid--6 { grid-template-columns: repeat(4, 1fr); }
	.rail > * { flex-basis: calc((100% - (var(--gutter) * 2)) / 2.4); }
}
@media (max-width: 768px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--6 { grid-template-columns: repeat(3, 1fr); }
	.rail > * { flex-basis: calc((100% - var(--gutter)) / 1.6); }
	.rail-arrow { display: none; }
}
@media (max-width: 480px) {
	.grid--6 { grid-template-columns: repeat(2, 1fr); }
	.section-head h2 { font-size: var(--fs-lg); }
}