/**
 * Komorebi Photo strip (inc/elementor/widgets/photo-strip.php), Figma "V3 Photo strip" and
 * "V4 Offer cards": heading, then a row of photos with a title and a line under each. The
 * Elementor sliders write the --km-strip-* variables; the fallbacks are Home "Buckwheat, water,
 * hands".
 */

/* Heading: title (with the link beside it on desktop), then the text. */
.km-strip__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 24px;
	margin-bottom: var(--km-strip-head-gap, var(--km-heading-gap));
}

.km-strip__title {
	grid-column: 1;
}

.km-strip .km-strip__more {
	grid-column: 2;
	grid-row: 1;
	white-space: nowrap;
}

.km-strip__text {
	grid-column: 1 / -1;
	max-width: 1000px;
	margin-top: var(--km-strip-text-gap, 16px);
	color: var(--km-muted);
}

/* The row: tiles share the width in proportion to their relative width (--km-w). */
.km-strip__row {
	display: flex;
	gap: var(--km-strip-gap, var(--km-gap));
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-strip__tile {
	flex: var(--km-w, 1) 1 0;
	min-width: 0;
}

.km-strip__media {
	height: var(--km-strip-h, 460px);
	overflow: hidden;
	border-radius: var(--km-radius);
	background: var(--km-c-sage);
}

/* On the sage palette (Offer cards) a missing photo shows paper. */
.km--sage .km-strip__media {
	background: var(--km-c-paper);
}

.km-strip .km-strip__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.km-strip .km-strip__name {
	margin-top: var(--km-strip-tile-gap, 12px);
	font-size: var(--km-strip-name, var(--km-fs-tile));
}

.km-strip__line {
	margin-top: var(--km-strip-line-gap, 4px);
	color: var(--km-muted);
	font-size: var(--km-fs-small);
	line-height: var(--km-lh-text);
}

.km-strip--data .km-strip__line {
	font-size: var(--km-fs-button);
}

/* ------------------------------------------------------------------ */
/* Tablet (834): the link moves under the text                        */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.km-strip .km-strip__more {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		margin-top: 8px;
	}

	/* The link's 44 high hit area already leaves room under it. */
	.km-strip--has-link .km-strip__head {
		margin-bottom: var(--km-strip-head-gap, 16px);
	}

	/* Rows that scroll from the tablet frame on (Whole counter "At your table"). */
	.km-strip--scroll-tablet .km-strip__row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--km-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--km-gutter));
		padding-inline: var(--km-gutter);
	}

	.km-strip--scroll-tablet .km-strip__row::-webkit-scrollbar {
		display: none;
	}

	.km-strip--scroll-tablet .km-strip__tile {
		flex: none;
		width: calc(var(--km-strip-tile, 300px) * var(--km-r, 1));
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390): the row scrolls sideways to the screen edge            */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.km-strip__text {
		margin-top: var(--km-strip-text-gap, 12px);
	}

	.km-strip--data .km-strip__line {
		font-size: 14px;
	}

	.km-strip--scroll-phone .km-strip__row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--km-gutter);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--km-gutter));
		padding-inline: var(--km-gutter);
	}

	.km-strip--scroll-phone .km-strip__row::-webkit-scrollbar {
		display: none;
	}

	.km-strip--scroll-phone .km-strip__tile {
		flex: none;
		width: calc(var(--km-strip-tile, 260px) * var(--km-r, 1));
		scroll-snap-align: start;
	}
}