/*
 * Homepage VVIP section
 *
 * A placement, not a filter result: equal portrait cards above VIP. Cards
 * are the shared loop-show-profile.php markup in its `vvip` variant
 * (.escort-card--vvip); this file only recomposes them.
 *
 * Phones: a two-up grid, every VVIP visible without sideways scrolling, the
 * panel stacked under the photo. Tablet/desktop: a rail of wide spotlight
 * cards that always fills the row, the panel beside the photo with a short
 * intro, and previous/next controls while it overflows. Each card has two zones:
 * - the photo stage: her photos looping (homepage-discovery-polish.js), with
 *   story-style progress ticks, the VVIP badge, Save and live state;
 * - a solid panel beneath: name and age on one line, location on the next,
 *   then one joined bar: View profile leading, the call a quiet segment.
 * Text never floats over the photograph, and the phone number never leads.
 */

.vvip-section {
	--vvip-gap: 10px;
	--vvip-slide-ms: 3600ms;
	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;
}

/* Grid */
.vvip-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vvip-gap);
	padding: 4px 0 8px;
}

.vvip-grid > .escort-card {
	float: none;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
}

.vvip-grid .escort-card--vvip {
	overflow: hidden;
}

.vvip-grid .escort-card--vvip .thumb {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* style.css still forces .girl .thumb to white with !important. */
	background: transparent !important;
}

/* Photo stage */
.vvip-grid .escort-card--vvip .thumbwrapper {
	aspect-ratio: 3 / 4;
}

.vvip-grid .escort-card--vvip .escort-card__media {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

.vvip-grid .escort-card--vvip :is(.mobile-ready-img, .escort-card__slide) {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 22%;
}

.vvip-grid .escort-card--vvip .escort-card__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * While looping, every layer cross-fades and the visible one drifts slowly,
 * so the change reads as one living photograph rather than a slideshow.
 */
.vvip-grid .is-looping .mobile-ready-img {
	transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.vvip-grid .is-looping .mobile-ready-img:not(.is-active) {
	opacity: 0;
}

.vvip-grid .is-looping :is(.mobile-ready-img, .escort-card__slide).is-active {
	opacity: 1;
	animation: vvip-photo-drift calc(var(--vvip-slide-ms) + 900ms) linear both;
}

.vvip-grid .is-looping.is-paused :is(.mobile-ready-img, .escort-card__slide).is-active {
	animation-play-state: paused;
}

@keyframes vvip-photo-drift {
	from {
		transform: scale(1.01);
	}

	to {
		transform: scale(1.07);
	}
}

/* A short base shade carries the live-state chip; the photo stays clean above. */
.vvip-grid .escort-card--vvip .escort-card__media::after {
	z-index: 2;
	height: 26%;
	background: linear-gradient(180deg, rgba(14, 12, 13, 0) 0, rgba(14, 12, 13, 0.46) 100%);
}

.vvip-grid .escort-card--vvip :is(.girl-overlay, .escort-card__media-badges) {
	display: none !important;
}

/* Progress ticks: one per photo, shown only once the loop runs. */
.escort-card__ticks {
	position: absolute;
	top: 7px;
	right: 8px;
	left: 8px;
	z-index: 5;
	display: none;
	gap: 3px;
	pointer-events: none;
}

.is-looping > .escort-card__ticks {
	display: flex;
}

.escort-card__tick {
	position: relative;
	flex: 1 1 0;
	height: 2px;
	overflow: hidden;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.3);
}

.escort-card__tick::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.92);
	transform: scaleX(0);
	transform-origin: left center;
}

.escort-card__tick.is-done::after {
	transform: scaleX(1);
}

.escort-card__tick.is-active::after {
	animation: vvip-tick var(--vvip-slide-ms) linear both;
}

.is-paused .escort-card__tick.is-active::after {
	animation-play-state: paused;
}

@keyframes vvip-tick {
	to {
		transform: scaleX(1);
	}
}

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

.vvip-grid .escort-card--vvip .thumbwrapper > .mx-save {
	top: 14px;
	right: 6px;
	bottom: auto;
}

.vvip-grid .escort-card--vvip .escort-card__presence {
	position: absolute;
	bottom: 8px;
	left: 8px;
	z-index: 4;
}

.escort-card__presence {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 7px;
	border: 1px solid rgba(248, 239, 233, 0.12);
	border-radius: var(--profile-card-utility-radius, 7px);
	background: rgba(15, 13, 14, 0.66);
	color: var(--profile-card-ink, #f6f1ee);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.escort-card__presence-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success, #10b981);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/*
 * Panel: name and age, location, then the actions. override.css forces the
 * card body into a column (!important), so the panel is built as a column
 * and only the action row runs horizontally.
 */
.vvip-grid .escort-card--vvip .escort-card__body {
	flex: 1 1 auto;
	align-items: stretch;
	justify-content: flex-start;
	min-width: 0;
	margin: 0;
	padding: 11px 10px 10px;
	gap: 10px;
	border: 0;
	background: var(--profile-card-surface, #121112);
	text-align: left;
}

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

.vvip-grid .escort-card--vvip .escort-card__meta {
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.vvip-grid .escort-card--vvip .escort-card__name-row {
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
	min-width: 0;
}

.vvip-grid .escort-card--vvip .escort-card__meta .girl-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Age sits on the name line as quiet text, not as another chip. */
.vvip-grid .escort-card--vvip .escort-card__age {
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--profile-card-muted);
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.vvip-grid .escort-card--vvip .escort-card__inline-badge--new {
	flex: 0 0 auto;
}

.vvip-grid .escort-card--vvip .escort-card__meta .girl-desc-location {
	align-items: center;
	gap: 4px;
	width: 100%;
	font-size: 11px;
}

.vvip-grid .escort-card--vvip .escort-card__meta .girl-desc-location .icon-location {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 0;
	background: none;
	color: var(--profile-card-muted);
}

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

.vvip-grid .escort-card--vvip :is(.escort-card__last-active, .escort-card__trust) {
	display: none;
}

/*
 * Actions: one joined bar, with the hierarchy inside it. View profile is the
 * lead segment, a lighter tonal fill with the label and an arrow; the call is
 * a quieter segment behind a hairline, keeping the card's tracking hooks,
 * tel: link and desktop reveal. No solid fills; red only hints on the call's
 * hover.
 */
.escort-card__actions {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: stretch;
	margin-top: auto;
	overflow: hidden;
	border-radius: var(--profile-card-control-radius);
	background: rgba(255, 255, 255, 0.025);
	box-shadow: inset 0 0 0 1px rgba(248, 239, 233, 0.1);
}

.vvip-grid .escort-card--vvip .contact-btn {
	margin-top: auto !important;
}

.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn {
	margin: 0 !important;
}

.escort-card__view {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px 0 12px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--profile-card-ink) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color 160ms ease;
}

.escort-card__view-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.escort-card__view-arrow {
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.55;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}

.escort-card__view:hover {
	background: rgba(255, 255, 255, 0.11);
}

.escort-card:hover .escort-card__view-arrow,
.escort-card__view:focus-visible .escort-card__view-arrow {
	opacity: 1;
	transform: translateX(2px);
}

.escort-card__view:focus-visible {
	outline: 2px solid var(--profile-card-ink, #f6f1ee);
	outline-offset: -2px;
}

.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call {
	flex: 0 0 44px;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	height: auto;
	padding: 0;
	gap: 0;
	border: 0;
	border-left: 1px solid rgba(248, 239, 233, 0.1);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: rgba(246, 241, 238, 0.72) !important;
	transition: background-color 160ms ease, color 160ms ease;
}

.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call:hover {
	transform: none;
	border-color: rgba(248, 239, 233, 0.1);
	background: rgba(139, 10, 26, 0.24);
	box-shadow: none;
	color: #fde9e4 !important;
}

.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call .contact-btn__icon-shell {
	width: 18px;
	height: 18px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
}

.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call .contact-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Without a phone, the standard profile button stands alone at full width. */
.vvip-grid .escort-card--vvip .contact-btn--profile {
	min-height: 44px;
}

/* A desktop reveal shows the number: it takes the whole bar from View profile. */
@media screen and (min-width: 961px) {
	html.escortwp-contact-reveal .escort-card__actions:has(.is-revealed) .escort-card__view {
		display: none;
	}

	html.escortwp-contact-reveal .vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call[data-contact-reveal].is-revealed {
		flex: 1 1 auto !important;
		justify-content: flex-start;
		width: auto;
		padding: 0 12px;
		gap: 8px;
		border-left: 0;
		background: rgba(255, 255, 255, 0.07);
		color: var(--profile-card-ink) !important;
		font-size: 13px;
	}

	html.escortwp-contact-reveal .vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call[data-contact-reveal].is-revealed .contact-btn__label--number {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}
}

/* Rail controls: desktop only, and only while the rail overflows. */
.vvip-section__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

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

.vvip-section__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--profile-card-control-radius, 10px);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(248, 239, 233, 0.1);
	color: var(--profile-card-ink, #f6f1ee);
	cursor: pointer;
	transition: background-color 160ms ease, opacity 160ms ease;
}

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

.vvip-section:dir(rtl) .vvip-section__nav svg {
	transform: scaleX(-1);
}

.vvip-section__nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
}

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

.vvip-section__nav:focus-visible {
	outline: 2px solid var(--profile-card-ink, #f6f1ee);
	outline-offset: 2px;
}

@media screen and (max-width: 760px) {
	.vvip-section__controls {
		display: none !important;
	}
}

/* The intro belongs to the desktop spotlight; phones keep the compact panel. */
.vvip-grid .escort-card--vvip .escort-card__excerpt {
	display: none;
}

/*
 * Tablet and desktop: a spotlight rail. Each card sets the looping photo
 * (fixed width, 4:5) beside its details, so the card is wide rather than
 * tall and the row reads as a desktop composition, not a phone card
 * repeated. Cards always share the full row: one VVIP spans it, two split
 * it, three take a third each; beyond that three stay in view (never under
 * 440px) and the rest scroll, with controls and soft edges while it
 * overflows. Cards scrolled out of view stop their photo loop.
 */
@media screen and (min-width: 761px) {
	.vvip-section {
		--vvip-gap: 14px;
		--vvip-photo: clamp(196px, 13vw, 232px);
		--vvip-fade-start: 0px;
		--vvip-fade-end: 0px;
		padding-bottom: var(--spacing-5, 20px);
	}

	.vvip-section__header {
		align-items: center;
	}

	.vvip-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: max(440px, calc((100% - 2 * var(--vvip-gap)) / 3));
		margin: 0 -2px;
		padding: 4px 2px 10px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 2px;
		scrollbar-width: none;
	}

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

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

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

	.vvip-grid > .escort-card {
		scroll-snap-align: start;
	}

	.vvip-grid.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-grid:dir(rtl).is-scrollable {
		-webkit-mask-image: linear-gradient(270deg, transparent 0, #000 var(--vvip-fade-start), #000 calc(100% - var(--vvip-fade-end)), transparent 100%);
		mask-image: linear-gradient(270deg, transparent 0, #000 var(--vvip-fade-start), #000 calc(100% - var(--vvip-fade-end)), transparent 100%);
	}

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

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

	/* Spotlight card: photo left, details right. */
	.vvip-grid .escort-card--vvip {
		--profile-card-radius: 12px;
		--profile-card-control-radius: 8px;
	}

	.vvip-grid .escort-card--vvip:hover {
		transform: none;
	}

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

	.vvip-grid .escort-card--vvip .thumbwrapper {
		flex: 0 0 var(--vvip-photo);
		width: var(--vvip-photo);
		aspect-ratio: 4 / 5;
		border-radius: var(--profile-card-radius) 0 0 var(--profile-card-radius);
	}

	.vvip-grid .escort-card--vvip .escort-card__media {
		border-radius: var(--profile-card-radius) 0 0 var(--profile-card-radius);
	}

	.escort-card__ticks {
		top: 8px;
		right: 9px;
		left: 9px;
	}

	.vvip-grid .escort-card--vvip .escort-card__status-badge {
		top: 17px;
		left: 9px;
	}

	.vvip-grid .escort-card--vvip .thumbwrapper > .mx-save {
		top: 13px;
		right: 7px;
	}

	.vvip-grid .escort-card--vvip .escort-card__presence {
		bottom: 9px;
		left: 9px;
	}

	.vvip-grid .escort-card--vvip .escort-card__body {
		flex: 1 1 auto;
		min-width: 0;
		padding: 18px 18px 16px;
		gap: 14px;
	}

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

	.vvip-grid:dir(rtl) .escort-card--vvip :is(.thumbwrapper, .escort-card__media) {
		border-radius: 0 var(--profile-card-radius) var(--profile-card-radius) 0;
	}

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

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

	.vvip-grid .escort-card--vvip .escort-card__meta .girl-name {
		font-size: 17px;
		letter-spacing: -0.015em;
	}

	.vvip-grid .escort-card--vvip .escort-card__age {
		font-size: 13px;
	}

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

	.vvip-grid .escort-card--vvip .escort-card__excerpt {
		display: -webkit-box;
		margin: 8px 0 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		color: rgba(238, 228, 221, 0.62);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.55;
		text-wrap: pretty;
	}

	/* Pointer-sized actions, pinned to the base of the details column. */
	.escort-card__view {
		min-height: 40px;
		padding-left: 14px;
		font-size: 12.5px;
	}

	.vvip-grid .escort-card--vvip .escort-card__actions .contact-btn--call {
		flex-basis: 40px;
		width: 40px;
		min-height: 40px;
	}

	.vvip-grid .escort-card--vvip .contact-btn--profile {
		min-height: 40px;
	}
}

/* Wide screens: a little more photo and air as the row grows. */
@media screen and (min-width: 1440px) {
	.vvip-section {
		--vvip-photo: clamp(220px, 14vw, 260px);
	}

	.vvip-grid .escort-card--vvip .escort-card__body {
		padding: 22px 22px 18px;
	}

	.vvip-grid .escort-card--vvip .escort-card__meta .girl-name {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vvip-grid .escort-card--vvip :is(.mobile-ready-img, .escort-card__slide) {
		transition: none;
		animation: none !important;
	}

	.vvip-grid {
		scroll-behavior: auto;
	}

	.vvip-section__nav {
		transition: none;
	}
}