/*
 * Homepage VVIP section
 *
 * A placement, not a filter result: a horizontal rail of spotlight cards above
 * VIP. Cards are the shared loop-show-profile.php markup in its `vvip`
 * variant (.escort-card--vvip); this file only recomposes them.
 *
 * Every width uses the same photo-left spotlight card; only its scale changes.
 * Phones: a compact ~160px row (small portrait, name, place, two-line intro,
 * call) so the placement is noticed without taking over the first screen —
 * a full-width portrait card there was taller than the viewport allowed.
 * Tablet/desktop: ~300px-tall cards with a fixed photo column, about two
 * and a half to a laptop row; rail controls only when there is more to
 * scroll. One or two VVIPs get capped widths so a small roster never
 * stretches into an empty billboard.
 */

.vvip-section {
	--vvip-gap: 10px;
	--vvip-hairline: rgba(218, 180, 135, 0.2);
	--vvip-photo: 108px;
	position: relative;
	/* A lead-in to VIP, not a separate block: half the usual section tail. */
	padding-bottom: var(--spacing-3, 12px);
}

.vvip-section[hidden] {
	display: none !important;
}

.vvip-section__header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.vvip-section__heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vvip-section__heading .section-heading {
	margin: 0;
}

.vvip-section__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.vvip-section__controls[hidden] {
	display: none !important;
}

.vvip-section__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(248, 239, 233, 0.14);
	border-radius: var(--home-ui-radius, 10px);
	background: rgba(24, 23, 24, 0.92);
	color: #f6f1ee;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.vvip-section__nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vvip-section__nav:hover:not(:disabled) {
	border-color: rgba(248, 239, 233, 0.3);
	background: rgba(38, 36, 37, 0.96);
}

.vvip-section__nav:disabled {
	opacity: 0.36;
	cursor: default;
}

.vvip-section__nav:focus-visible {
	outline: 3px solid #e6c46a;
	outline-offset: 2px;
}

/* Rail */
.vvip-rail {
	--vvip-fade-start: 0px;
	--vvip-fade-end: 0px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(86%, 360px);
	gap: var(--vvip-gap);
	margin: 0 -2px;
	padding: 4px 2px 10px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.vvip-rail[data-count="1"] {
	grid-auto-columns: 100%;
}

.vvip-rail::-webkit-scrollbar {
	display: none;
}

/* Soft edges only where there is more content to reach. */
.vvip-rail.is-scrollable {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--vvip-fade-start), #000 calc(100% - var(--vvip-fade-end)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--vvip-fade-start), #000 calc(100% - var(--vvip-fade-end)), transparent 100%);
}

.vvip-rail.is-scrollable:not(.is-at-start) {
	--vvip-fade-start: 24px;
}

.vvip-rail.is-scrollable:not(.is-at-end) {
	--vvip-fade-end: 32px;
}

.vvip-rail > .escort-card {
	height: auto;
	scroll-snap-align: start;
}

/* Spotlight card: photo left, details right, at every width. */
.vvip-rail .escort-card--vvip {
	--profile-card-radius: 12px;
	--profile-card-control-radius: 10px;
	--profile-card-utility-radius: 7px;
	border-color: var(--vvip-hairline);
}

.vvip-rail .escort-card--vvip:hover {
	border-color: rgba(218, 180, 135, 0.34);
}

.vvip-rail .escort-card--vvip .thumb {
	flex-direction: row;
	align-items: stretch;
}

/*
 * The photo column keeps its 3:4 proportion as the card's minimum height;
 * when the details run longer, the photo grows and stays covered.
 */
.vvip-rail .escort-card--vvip .thumbwrapper {
	flex: 0 0 var(--vvip-photo);
	width: var(--vvip-photo);
	aspect-ratio: 3 / 4;
	border-radius: var(--profile-card-radius) 0 0 var(--profile-card-radius);
}

.vvip-rail .escort-card--vvip .escort-card__media {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	border-radius: var(--profile-card-radius) 0 0 var(--profile-card-radius);
}

.vvip-rail .escort-card--vvip .mobile-ready-img {
	height: 100%;
	aspect-ratio: auto;
}

.vvip-rail .escort-card--vvip .escort-card__media::after {
	height: 34%;
	background: linear-gradient(180deg, rgba(14, 12, 13, 0) 0, rgba(14, 12, 13, 0.42) 100%);
}

.vvip-rail .escort-card--vvip .escort-card__status-badge {
	top: 8px;
	left: 8px;
}

/* The intro already sits beside the photo; the legacy hover overlay would repeat it over her face. */
.vvip-rail .escort-card--vvip .girl-overlay {
	display: none !important;
}

/* A small photo carries the tier badge only; the profile shows the media. */
.vvip-rail .escort-card--vvip .escort-card__media-badges {
	display: none;
}

.vvip-rail .escort-card--vvip .thumbwrapper > .mx-save {
	right: 6px;
	bottom: 6px;
}

.vvip-rail .escort-card--vvip .escort-card__body {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-width: 0;
	margin-top: 0;
	padding: 12px 12px 12px 14px;
	gap: 8px;
	border-left: 1px solid rgba(248, 239, 233, 0.06);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 60%), #121112;
}

.vvip-rail .escort-card--vvip .escort-card__primary-link {
	border-radius: 0 var(--profile-card-radius) var(--profile-card-radius) 0;
}

.vvip-rail .escort-card--vvip .escort-card__meta {
	gap: 4px;
}

.vvip-rail .escort-card--vvip .escort-card__name-row {
	flex-wrap: wrap;
	row-gap: 4px;
}

.vvip-rail .escort-card--vvip .escort-card__meta .girl-name {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.vvip-rail .escort-card--vvip .escort-card__meta .girl-desc-location {
	font-size: 11px;
}

.vvip-rail .escort-card--vvip .escort-card__meta .girl-desc-location__text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	display: block;
}

.vvip-rail .escort-card--vvip .escort-card__last-active,
.vvip-rail .escort-card--vvip .escort-card__trust {
	display: none;
}

.escort-card--vvip .escort-card__excerpt {
	display: -webkit-box;
	margin: 2px 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: rgba(238, 228, 221, 0.66);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	text-wrap: pretty;
}

.vvip-rail .escort-card--vvip .contact-btn {
	min-height: 44px;
	margin-top: auto !important;
	padding: 6px 10px;
	gap: 7px;
	font-size: 12px;
}

.vvip-rail .escort-card--vvip .contact-btn__icon-shell {
	width: 24px;
	height: 24px;
}

.escort-card__presence {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 6px;
	border: 1px solid rgba(16, 185, 129, 0.4);
	border-radius: var(--profile-card-utility-radius, 7px);
	background: rgba(16, 185, 129, 0.12);
	color: var(--success, #34d399);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.escort-card__presence-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

/* Phones: the rail runs to the screen edge so the next card peeks in. */
@media screen and (max-width: 760px) {
	.vvip-section__controls {
		display: none !important;
	}

	.vvip-rail:not([data-count="1"]) {
		margin-inline: calc(var(--spacing-4, 16px) * -1);
		padding-inline: var(--spacing-4, 16px);
		scroll-padding-inline: var(--spacing-4, 16px);
	}
}

/* Tablet and desktop: the same card at spotlight scale. */
@media screen and (min-width: 761px) {
	.vvip-section {
		--vvip-gap: 16px;
		/* A fixed photo column keeps every card ~300px tall, whatever its width. */
		--vvip-photo: clamp(200px, 15vw, 232px);
		padding-bottom: var(--spacing-5, 20px);
	}

	.vvip-rail .escort-card--vvip {
		--profile-card-radius: 16px;
		--profile-card-control-radius: 12px;
		--profile-card-utility-radius: 8px;
	}

	/*
	 * Compact spotlight cards: three across a wide row, about two and a half
	 * on a laptop (the peek signals the rail), and a lone or paired VVIP
	 * capped so the card never stretches into an empty billboard.
	 */
	.vvip-rail {
		grid-auto-columns: max(420px, calc((100% - 2 * var(--vvip-gap)) / 3));
		padding-bottom: 10px;
	}

	.vvip-rail[data-count="1"] {
		grid-auto-columns: min(100%, 620px);
	}

	.vvip-rail[data-count="2"] {
		grid-auto-columns: max(420px, min(580px, calc((100% - var(--vvip-gap)) / 2)));
	}

	.vvip-rail .escort-card--vvip .escort-card__status-badge {
		top: 11px;
		left: 11px;
	}

	.vvip-rail .escort-card--vvip .escort-card__media-badges {
		display: flex;
	}

	.vvip-rail .escort-card--vvip .thumbwrapper > .mx-save {
		right: 8px;
		bottom: 12px;
	}

	.vvip-rail .escort-card--vvip .escort-card__body {
		padding: 18px 18px 16px;
		gap: 8px;
	}

	.vvip-rail .escort-card--vvip .escort-card__meta {
		gap: 5px;
	}

	.vvip-rail .escort-card--vvip .escort-card__name-row {
		row-gap: 6px;
	}

	.vvip-rail .escort-card--vvip .escort-card__meta .girl-name {
		font-size: 19px;
		letter-spacing: -0.025em;
	}

	.vvip-rail .escort-card--vvip .escort-card__meta .girl-desc-location {
		font-size: 12.5px;
	}

	.vvip-rail .escort-card--vvip .escort-card__last-active {
		display: block;
	}

	.escort-card--vvip .escort-card__excerpt {
		margin-top: 6px;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		font-size: 13px;
		line-height: 1.55;
	}

	.vvip-rail .escort-card--vvip .contact-btn {
		min-height: 48px;
		padding: 9px 13px 9px 11px;
		gap: 10px;
		font-size: 13px;
	}

	.vvip-rail .escort-card--vvip .contact-btn__icon-shell {
		width: 28px;
		height: 28px;
	}

	.escort-card__presence {
		height: 22px;
		padding: 0 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vvip-rail {
		scroll-behavior: auto;
	}

	.vvip-section__nav {
		transition: none;
	}
}