/**
 * Roots & Routes Core — Soft UI layer for Home (TASK-122).
 *
 * Softens the "boxed" feel of the public Home without touching its
 * structure: full-bleed color bands, rounded band edges where a colored
 * band meets white, a search card that straddles the hero seam, tonal
 * surfaces + low-alpha teal shadows instead of 1px borders, one radius
 * scale, one elevation scale, and a 2-column category grid on phones.
 *
 * Rules of this file (same contract as brand-visuals.css, TASK-121):
 *  - every selector already exists in templates/frontend/home.php or is
 *    Listeo's own featured-card markup scoped under `.rrc-home-featured`;
 *  - every rule is additive/override-only: no new markup, no JS;
 *  - mobile-first: the base rules ARE the phone version, `@media
 *    (min-width: ...)` only scales things up;
 *  - loaded only on the front page, after `rrc-home` (dependency) and
 *    after `rrc-brand-visuals` (hook priority), so it may override both.
 *  - removing this feature = delete this file + SoftUiAssets.php + its
 *    two lines in Bootstrap.php. home.css/brand-visuals.css stay intact.
 *
 * Full-bleed note: Listeo renders the page inside
 * `.container.content-container` (max 1360px, 15px padding) so every
 * `.rrc-home-*` band stopped with a hard vertical cut on wide screens.
 * `margin-inline: calc(50% - 50vw)` stretches a band to the viewport.
 * The 100vw box is ~15px wider than the scrollable area on Windows
 * (scrollbar), symmetric on both sides; Listeo's own `body { overflow-x:
 * hidden }` clips that overhang, so no horizontal scroll and no shift
 * (verified in the DOM before writing this, see
 * docs/SOFT_UI_CONTAINERS_STRATEGY.md §3).
 */

/* ---------------------------------------------------------------------
 * Tokens (extend the palette from home.css, never rename it).
 * ------------------------------------------------------------------- */

.rrc-home {
	--rr-radius-sm: 12px;
	--rr-radius-md: 20px;
	--rr-radius-lg: 28px;
	--rr-radius-xl: 36px;

	/* Elevation: teal-tinted, low alpha — brand-colored shadows read as
	 * light, not dirt. Three levels only (M3: "less is more"). */
	--rr-shadow-1: 0 1px 2px rgba(27, 75, 74, 0.05), 0 6px 18px rgba(27, 75, 74, 0.07);
	--rr-shadow-2: 0 2px 4px rgba(27, 75, 74, 0.06), 0 14px 32px rgba(27, 75, 74, 0.12);
	--rr-shadow-3: 0 24px 48px rgba(27, 75, 74, 0.22);

	--rr-bleed: calc(50% - 50vw);
	--rr-band-radius: var(--rr-radius-lg);
	--rr-search-overlap: 48px;
}

/* ---------------------------------------------------------------------
 * Full-bleed color bands + soft edges where a band meets white.
 * ------------------------------------------------------------------- */

/* The 100vw bands overhang the scrollable width by the scrollbar width
 * (~15px on Windows, 0 on phones). Listeo's `body { overflow-x: hidden }`
 * hides the scrollbar but `documentElement.scrollWidth` still grows and
 * older iOS could pan sideways. `clip` on the root forbids any horizontal
 * scrolling without creating a scroll container; `hidden` first as the
 * fallback for engines without `clip`. This stylesheet only loads on the
 * front page, so nothing else is affected. */
html {
	overflow-x: hidden;
	overflow-x: clip;
}

.rrc-home-hero,
.rrc-home-categories,
.rrc-home-how,
.rrc-home-provider-cta {
	margin-left: var(--rr-bleed);
	margin-right: var(--rr-bleed);
}

.rrc-home-hero {
	overflow: visible; /* brand-visuals.css sets hidden; the search card must be allowed to hang below the band */
	border-radius: 0 0 var(--rr-band-radius) var(--rr-band-radius);
	padding-bottom: var(--rr-search-overlap);
}

.rrc-home-categories {
	border-radius: 0 0 var(--rr-band-radius) var(--rr-band-radius);
	/* warm continuity under the hero's sun glow, fading to the page tone */
	background: linear-gradient(180deg, var(--rr-cream) 0%, var(--rr-bg-page) 45%);
}

.rrc-home-how {
	border-radius: var(--rr-band-radius);
}

.rrc-home-provider-cta {
	border-radius: var(--rr-band-radius) var(--rr-band-radius) 0 0;
}

/* ---------------------------------------------------------------------
 * Search card straddles the hero/categories seam.
 * ------------------------------------------------------------------- */

.rrc-home-hero-search {
	position: relative;
	z-index: 2;
	margin-bottom: calc(-2 * var(--rr-search-overlap));
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-3);
}

.rrc-home-categories .rrc-home-section-inner {
	padding-top: calc(60px + var(--rr-search-overlap) + 16px);
}

/* ---------------------------------------------------------------------
 * Cards: tonal surface + elevation instead of a 1px outline.
 * ------------------------------------------------------------------- */

.rrc-home-category-card,
.rrc-home-how-steps li {
	border-color: transparent;
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
}

.rrc-home-category-card:hover,
.rrc-home-category-card:focus-visible {
	border-color: rgba(46, 156, 143, 0.35);
	box-shadow: var(--rr-shadow-2);
}

.rrc-home-category-card:focus-visible {
	outline: 3px solid var(--rr-teal);
	outline-offset: 2px;
}

/* Phones: 2 columns instead of 6 stacked cards (297px usable width could
 * not fit two 150px minmax tracks, so auto-fit collapsed to one column). */
.rrc-home-categories-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.rrc-home-category-card {
	padding: 20px 10px;
}

/* Listeo's featured cards (its own markup, scoped to this section only):
 * drop the gray outline, align to the radius/elevation scale, and keep
 * the image corners concentric with the card (radius minus border). */
.rrc-home-featured .listing-card-nl {
	border-color: transparent;
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-1);
	transition: box-shadow 0.2s ease;
}

.rrc-home-featured .listing-card-nl:hover {
	box-shadow: var(--rr-shadow-2);
}

.rrc-home-featured .listing-image-container-nl {
	border-radius: calc(var(--rr-radius-md) - 1px) calc(var(--rr-radius-md) - 1px) 0 0;
}

/* ---------------------------------------------------------------------
 * Scale up.
 * ------------------------------------------------------------------- */

@media (min-width: 640px) {
	.rrc-home-categories-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 16px;
	}

	.rrc-home-category-card {
		padding: 28px 12px;
	}
}

@media (min-width: 768px) {
	/* The hiker silhouette (brand-visuals.css) was anchored at -30px/-20px
	 * relying on overflow:hidden; with overflow visible it must sit fully
	 * inside the rounded band. */
	.rrc-home-hero::before {
		left: 12px;
		bottom: 0;
	}
}

@media (min-width: 1024px) {
	.rrc-home {
		--rr-band-radius: var(--rr-radius-xl);
		--rr-search-overlap: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rrc-home-category-card,
	.rrc-home-featured .listing-card-nl {
		transition: none;
	}
}