/**
 * RC34: compact two-row swipe rails for the mobile homepage.
 *
 * Featured variations, Direct Top-Up and Game Cards retain their saved desktop
 * row order while becoming two-row horizontal rails. Categories fill down two
 * rows, two visible cards per row, then continue horizontally.
 */

/* This stylesheet is loaded only on the homepage. Clip decorative/card
 * overflow at the page boundary so it can never create a desktop side-drift. */
html,
body.home {
	overflow-x: clip;
}

/* Keep the category heading and tiles on the same desktop content line as the
 * featured and product sections. */
@media (min-width: 641px) {
	body.home .grz-cat-section {
		padding-inline: var(--grz-home-gutter, 22px);
	}

	body.home .grz-cat-section > .grz-container {
		width: min(calc(100% - (2 * var(--grz-home-gutter, 22px))), var(--grz-container, var(--grz-shell-max, 1440px)));
		max-width: none;
		margin-inline: auto;
		padding-inline: 0;
	}
}

@media (max-width: 640px) {
	/* Keep the merchant's saved variation ranking in desktop row order. */
	body.home .grz-home-section--featured-offers .grz-fx-grid {
		grid-template-columns: repeat(var(--grz-fx-mobile-columns, 5), min(82vw, 320px)) !important;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: row !important;
		scrollbar-width: none;
	}

	body.home .grz-home-section--featured-offers .grz-fx-grid::-webkit-scrollbar {
		display: none;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__grid,
	body.home .grz-cat-section .grz-cat-grid {
		box-sizing: border-box;
		width: calc(100% + 32px);
		max-width: none;
		margin-inline: -16px;
		overflow-x: auto;
		overflow-y: hidden;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
		scroll-snap-type: inline mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-inline: contain;
		touch-action: pan-x pan-y pinch-zoom;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__grid::-webkit-scrollbar,
	body.home .grz-cat-section .grz-cat-grid::-webkit-scrollbar {
		display: none;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__grid {
		--grz-mobile-product-card: clamp(104px, 25vw, 116px);
		grid-template-columns: repeat(4, var(--grz-mobile-product-card));
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: row;
		gap: 16px 12px;
		padding-block: 4px 11px;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__product,
	body.home .grz-product-library--curated-rows .grz-product-library__product:nth-child(7n + 1),
	body.home .grz-product-library--curated-rows .grz-product-library__product:nth-child(7n),
	body.home .grz-product-library--curated-rows .grz-product-library__product:nth-child(8n + 1),
	body.home .grz-product-library--curated-rows .grz-product-library__product:nth-child(8n) {
		grid-template-rows: calc(var(--grz-mobile-product-card) - 6px) minmax(38px, auto);
		justify-items: center;
		width: var(--grz-mobile-product-card);
		min-width: var(--grz-mobile-product-card);
		min-height: calc(var(--grz-mobile-product-card) + 32px);
		text-align: center;
		scroll-snap-align: start;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__media {
		width: calc(var(--grz-mobile-product-card) - 10px);
		height: calc(var(--grz-mobile-product-card) - 10px);
		border-radius: 17px;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__image,
	body.home .grz-product-library--curated-rows .grz-product-library__placeholder {
		border-radius: 16px;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__copy {
		width: 100%;
		padding-top: 7px;
	}

	body.home .grz-product-library--curated-rows .grz-product-library__copy strong {
		max-height: 2.5em;
		font-size: .75rem;
		line-height: 1.25;
	}

	body.home .grz-cat-section .grz-cat-grid {
		--grz-mobile-category-card: calc((100% - 10px) / 2);
		--grz-mobile-category-height: clamp(92px, 22vw, 112px);
		width: calc(100% + 28px);
		margin-inline: -14px;
		grid-template-columns: none;
		grid-template-rows: repeat(2, var(--grz-mobile-category-height));
		grid-auto-columns: var(--grz-mobile-category-card);
		grid-auto-flow: column dense;
		gap: 10px;
		padding: 3px 14px 9px;
		scroll-padding-inline: 14px;
	}

	body.home .grz-cat-section .grz-cat-tile,
	body.home .grz-cat-section .grz-home .grz-cat-tile {
		width: 100%;
		min-width: 0;
		min-height: var(--grz-mobile-category-height);
		height: var(--grz-mobile-category-height);
		padding: 0;
		border-radius: 14px;
		scroll-snap-align: start;
	}

	/* Keep each four-item category group row-major: the first two stay on
	 * the upper row and the following two sit directly beneath them. */
	body.home .grz-cat-section .grz-cat-tile:nth-child(4n + 1),
	body.home .grz-cat-section .grz-cat-tile:nth-child(4n + 2) {
		grid-row: 1;
	}

	body.home .grz-cat-section .grz-cat-tile:nth-child(4n + 3),
	body.home .grz-cat-section .grz-cat-tile:nth-child(4n + 4) {
		grid-row: 2;
	}

	body.home .grz-cat-section .grz-cat-tile__go {
		right: 7px;
		bottom: 7px;
		width: 26px;
		height: 26px;
	}
}

@media (forced-colors: active) and (max-width: 640px) {
	body.home .grz-home-section--featured-offers .grz-fx-grid,
	body.home .grz-product-library--curated-rows .grz-product-library__grid,
	body.home .grz-cat-section .grz-cat-grid {
		scrollbar-width: auto;
	}
}