/**
 * WLRE Theme - Shared Carousel Styles
 *
 * Reusable header + nav arrows + scroll container + edge fades.
 */

/* === Section wrapper ===
 * Horizontal padding lives on header + track (not section) so the track can
 * scroll cards into the gutter with proper scroll-snap behavior.
 */
.wlre-carousel-section {
	/* Section padding is the "outer" gap. The track below adds another 32px
	 * of padding-block so card drop-shadows don't get cropped by its
	 * overflow-x: auto (which implicitly clips the vertical axis too).
	 * These values are chosen so section+track padding matches the original
	 * visual rhythm before the shadow fix. */
	padding-block: var(--wlre-space-48);
	background: var(--wlre-color-surface-50);
	overflow: hidden;
}

@media (max-width: 767px) {
	.wlre-carousel-section {
		padding-block: var(--wlre-space-20);
	}
}

/* === Section header row === */
.wlre-carousel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--wlre-space-24);
	max-width: 1440px;
	margin-inline: auto;
	gap: var(--wlre-space-16);
	padding-inline: var(--wlre-space-20);
}

@media (min-width: 768px) {
	.wlre-carousel-header {
		padding-inline: var(--wlre-space-40);
	}
}

@media (min-width: 1024px) {
	.wlre-carousel-header {
		padding-inline: var(--wlre-space-100);
	}
}

.wlre-carousel-header__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

.wlre-carousel-header__action {
	min-width: 92px;
	height: 52px;
	padding-inline: var(--wlre-space-24);
	flex-shrink: 0;
	font-size: 14px;
}

/* Heading with inline dropdown (Top Deals) — city renders in the same H1 as
 * the prefix "Explore Top Deals in"; chevron sits next to it.
 */
.wlre-carousel-header__title-inline {
	display: flex;
	align-items: center;
	gap: var(--wlre-space-8);
	flex-wrap: wrap;
}

/* Empty-city state: when the carousel section reports data-active-city=""
 * (no filter applied or "All cities" picked), drop the " in " separator and
 * the dropdown's accent color so the heading reads cleanly as "Explore Top
 * Deals". The dropdown trigger itself stays visible because the user can
 * still open it to pick a city — but the implied "in {city}" suffix is gone
 * since there's nothing to be "in." Keeps the visual logic out of pattern
 * PHP per the design-system-first cascade rule. */
.wlre-carousel-section[data-active-city=""] [data-title-in] {
	display: none;
}

/* Compound selector beats .wlre-dropdown__trigger which loads later
 * (otherwise its color:inherit + gap:4px + font:inherit win on equal specificity).
 */
.wlre-carousel-header__dropdown.wlre-dropdown__trigger,
.wlre-carousel-header__dropdown {
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-8);
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.2;
	color: var(--wlre-color-accent-500);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.wlre-carousel-header__dropdown-icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	transition: transform 0.2s ease;
}

.wlre-carousel-header__dropdown-icon svg {
	width: 100%;
	height: 100%;
}

/* === Navigation arrows === */
.wlre-carousel-nav {
	display: flex;
	gap: var(--wlre-space-8);
}

.wlre-carousel-nav__btn {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--wlre-color-text-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	padding: 0;
	flex-shrink: 0;
	line-height: 0;
}

.wlre-carousel-nav__btn:hover {
	transform: translateY(-1px);
}

.wlre-carousel-nav__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wlre-carousel-nav__btn svg {
	width: 52px;
	height: 52px;
	display: block;
	flex-shrink: 0;
}

/* === Scroll container wrapper (with edge fades) === */
.wlre-carousel-wrap {
	position: relative;
}

/* Edge fade overlays */
.wlre-carousel-wrap::before,
.wlre-carousel-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.wlre-carousel-wrap::before {
	left: 0;
	background: linear-gradient(to right, var(--wlre-color-surface-50), transparent);
}

.wlre-carousel-wrap::after {
	right: 0;
	background: linear-gradient(to left, var(--wlre-color-surface-50), transparent);
}

/* White background variant */
.wlre-carousel-section--white {
	background: var(--wlre-color-white);
}

.wlre-carousel-section--white .wlre-carousel-wrap::before {
	background: linear-gradient(to right, var(--wlre-color-white), transparent);
}

.wlre-carousel-section--white .wlre-carousel-wrap::after {
	background: linear-gradient(to left, var(--wlre-color-white), transparent);
}

/* Centered-peek carousel variant — cards bleed into section gutters on both
 * sides. padding-block matches Figma node 6640:293524 (pt-80 pb-40).
 * scroll-padding-inline-start mirrors content-area offset at each breakpoint
 * so snap aligns the active card with the heading after navigation. */
.wlre-carousel-section--centered {
	padding-block: var(--wlre-space-80) var(--wlre-space-40);
}

.wlre-carousel-section--centered .wlre-carousel-track {
	padding-inline-start: 0;
	scroll-padding-inline-start: var(--wlre-space-20);
}

@media (min-width: 768px) {
	.wlre-carousel-section--centered .wlre-carousel-track {
		padding-inline-start: 0;
		scroll-padding-inline-start: var(--wlre-space-40);
	}
}

@media (min-width: 1024px) {
	.wlre-carousel-section--centered .wlre-carousel-track {
		padding-inline-start: 0;
		scroll-padding-inline-start: var(--wlre-space-100);
	}
}

@media (min-width: 1441px) {
	.wlre-carousel-section--centered .wlre-carousel-track {
		padding-inline-start: 0;
		scroll-padding-inline-start: calc(50vw - 620px);
	}
}

/* === Scroll track ===
 * Padding-inline matches header so the first card aligns with the heading;
 * cards beyond viewport scroll into view.
 */
.wlre-carousel-track {
	display: flex;
	gap: var(--wlre-space-20);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* overflow-x: auto implicitly clips the Y axis — the block padding must
	 * cover the full extent of the card shadow (0 8px 24px → ~32px below)
	 * and the lifted hover state (translateY(-4px) + taller shadow). */
	padding-block: var(--wlre-space-28);
	/* Left aligns with container; right is minimal so cards bleed to viewport edge */
	padding-inline-start: var(--wlre-space-20);
	padding-inline-end: var(--wlre-space-20);
	/* scroll-padding-inline-start must match padding-inline-start at every breakpoint
	 * so scroll-snap-align:start on child cards snaps to the correct visual position
	 * rather than scrolling the padding off-screen. */
	scroll-padding-inline-start: var(--wlre-space-20);
}

.wlre-carousel-track::-webkit-scrollbar {
	display: none;
}

.wlre-carousel-track > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* Empty-state row inside a track — used by top-deals-carousel.js when a
 * city refetch returns 0 items. Spans the full track so it doesn't sit
 * card-width-narrow against an otherwise empty rail. Loading skeleton uses
 * the same hook for the future. */
.wlre-carousel-track__empty {
	flex: 1 1 100%;
	min-width: 100%;
	scroll-snap-align: none;
}

/* Infinite continuous-scroll mode — snap must be off so rAF scrollLeft
 * updates aren't fought by the browser snapping to card boundaries. */
.wlre-carousel-track--infinite {
	scroll-snap-type: none;
	scroll-behavior: auto;
	will-change: scroll-position;
}

.wlre-carousel-track[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 120ms ease-out;
}

@media (min-width: 768px) {
	.wlre-carousel-track {
		padding-inline-start: var(--wlre-space-40);
		padding-inline-end: var(--wlre-space-20);
		scroll-padding-inline-start: var(--wlre-space-40);
	}
}

@media (min-width: 1024px) {
	.wlre-carousel-track {
		/* Align first card with container boundary (matches .wlre-container at 100px). */
		padding-inline-start: var(--wlre-space-100);
		padding-inline-end: var(--wlre-space-20);
		scroll-padding-inline-start: var(--wlre-space-100);
	}
}

@media (min-width: 1441px) {
	.wlre-carousel-track {
		/* On viewports wider than 1440px the container gains auto margins:
		 * keep first card aligned with the heading by mirroring the auto-margin offset. */
		padding-inline-start: calc(50vw - 620px);
		scroll-padding-inline-start: calc(50vw - 620px);
	}
}

/* === Recent searches card (carousel item) ===
 * Figma 6006-75005 — 400×175, no image, chips + Save Search inside the body
 * column (NOT a side-by-side row). The whole card is a stretched link; the
 * Save Search button is a secondary affordance that sits above the link.
 */
.wlre-search-card {
	position: relative;
	width: 400px;
	height: 175px;
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	padding: var(--wlre-space-16);
	display: flex;
	align-items: flex-start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wlre-search-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(10, 36, 56, 0.16);
}

.wlre-search-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

.wlre-search-card__link:focus { outline: none; }

.wlre-search-card__body {
	position: relative;
	z-index: 2;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-16);
	pointer-events: none;
}

.wlre-search-card__head {
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
	color: var(--wlre-color-text-900);
}

.wlre-search-card__title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: inherit;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wlre-search-card__count {
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.48;
	color: inherit;
	margin: 0;
}

.wlre-search-card__chips {
	display: flex;
	gap: var(--wlre-space-8);
	flex-wrap: wrap;
}

/* Figma: Success 2 (#F3FAF4) — a very pale green tint, NOT the site Cream
 * surface-50. Matches node 6006:74962 / 6006:74967 fills. */
.wlre-search-card__chip {
	display: inline-flex;
	align-items: center;
	background: #f3faf4;
	border-radius: var(--wlre-radius-sm);
	padding: var(--wlre-space-4) var(--wlre-space-8);
	font-family: var(--wlre-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.48;
	color: var(--wlre-color-text-900);
	white-space: nowrap;
}

/* Live above the stretched link so the button is independently clickable. */
.wlre-search-card__cta {
	pointer-events: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wlre-space-4);
	height: 32px;
	padding: 0 var(--wlre-space-16);
	border: 1px solid var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-sm);
	color: var(--wlre-color-text-900);
	background: transparent;
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.48;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.wlre-search-card__cta:hover {
	background: var(--wlre-color-text-900);
	color: var(--wlre-color-white);
}

.wlre-search-card__cta svg {
	width: 16px;
	height: 16px;
}

/* Saved-search variant — two affordances (unsave + rename) live above the
 * stretched link, mirroring the /account/saved-searches/ card so callers
 * can heart-toggle and rename inline without leaving the home page. */
.wlre-search-card__actions {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--wlre-space-12);
	align-self: flex-start;
}

.wlre-search-card__cta--saved {
	cursor: pointer;
}

.wlre-search-card__heart-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #95231f;
}

.wlre-search-card__heart-icon svg {
	width: 16px;
	height: 16px;
}

.wlre-search-card__icon-btn {
	pointer-events: auto;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--wlre-color-text-900);
	border-radius: var(--wlre-radius-sm);
	color: var(--wlre-color-text-900);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wlre-search-card__icon-btn svg {
	width: 13px;
	height: 13px;
}

.wlre-search-card__icon-btn:hover {
	background: var(--wlre-color-surface-50);
}

/* Mirror the .wlre-saved-search.is-removing fade so the carousel card
 * gets the same 220ms slide-out transition that saved-searches.js times. */
.wlre-search-card.is-removing {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* === Responsive === */
@media (max-width: 767px) {
	.wlre-carousel-header {
		align-items: center;
		gap: var(--wlre-space-16);
	}

	.wlre-carousel-header__title {
		font-size: 32px;
		flex: 1;
		min-width: 0;
	}

	.wlre-carousel-header__dropdown {
		font-size: 32px;
	}

	.wlre-carousel-nav {
		display: none;
	}

	.wlre-carousel-header__action {
		height: 44px;
		min-width: 84px;
	}

	.wlre-carousel-wrap::before,
	.wlre-carousel-wrap::after {
		width: 40px;
	}

	/* Figma 6640:308171 — show 1 full card + peek of the next. At 375px
	 * viewport with 20px track padding-start and 20px card gap, a 303px card
	 * leaves ~32px of the second card visible. */
	.wlre-search-card {
		width: 303px;
		height: auto;
		min-height: 175px;
	}

	.wlre-search-card__cta {
		height: var(--wlre-tap-target);
		padding: 0 var(--wlre-space-20);
		font-size: 14px;
	}

	.wlre-search-card__icon-btn {
		width: var(--wlre-tap-target);
		height: var(--wlre-tap-target);
	}
}