/**
 * MeetEm profile layout.
 *
 * Scoped to body.meetem-pl throughout, and the rules that suppress vendor
 * blocks carry !important on purpose: the theme reaches some of these elements
 * with six-class selectors, and a plain two-class rule loses to them silently.
 * See NOTES.md, "CSS specificity".
 */

:root {
	--meetem-pl-gap: 28px;
	--meetem-pl-hero-w: 300px;
	--meetem-pl-radius: 16px;
	--meetem-pl-radius-sm: 12px;
	--meetem-pl-border: rgba( 43, 31, 51, 0.08 );
	--meetem-pl-muted: #6f6480;
	--meetem-pl-ink: #241a2b;
	--meetem-pl-accent: #8b2fe0;
	--meetem-pl-surface: #ffffff;
	--meetem-pl-sunken: #f4f0f8;

	/* Two layers: a hairline that defines the edge and a wide, very soft drop
	   that lifts the card off the lilac without ever reading as a box shadow. */
	--meetem-pl-lift: 0 1px 2px rgba( 36, 26, 43, 0.04 ), 0 12px 28px -16px rgba( 36, 26, 43, 0.28 );
	--meetem-pl-lift-hover: 0 2px 4px rgba( 36, 26, 43, 0.06 ), 0 20px 36px -18px rgba( 36, 26, 43, 0.38 );
}

/**
 * Room under the tab bar.
 *
 * The vendor runs the tab bar straight into the content with a hairline
 * between them, so the player and the first card sat ON that line. The drawing
 * leaves a clear band of background there, and it is the single change that
 * makes the page read as laid out rather than stacked.
 */
body.meetem-pl .profile-content-inner {
	padding-top: 36px;
	padding-bottom: 48px;
}

/* ======================================================================
 * 1. Header strip — the member's details where the blank space was
 * ================================================================== */

/**
 * .user-info-wrapper ships as flex-direction:row with flex:0 1 auto, so it sits
 * at its content width and leaves the 294px hole this work is about. Letting it
 * grow and wrap turns that hole into the row the details sit on.
 */
body.meetem-pl .profile-user-details .user-info-wrapper {
	/**
	 * flex-basis 0, not auto. With auto the basis is the content width — which
	 * is now the whole details row — so the wrapper grew to 710px and ran
	 * underneath the message button and the cover-photo controls at the right
	 * edge. A basis of 0 claims only the space those fixed blocks leave.
	 */
	flex: 1 1 0;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
	row-gap: 6px;
	min-width: 0;
}

/**
 * Desktop only. Below 992px the theme turns .profile-user-details into a
 * COLUMN (style.css line 7552 onwards), and in a column a flex-basis of 0
 * sizes the wrapper's HEIGHT rather than its width: the wrapper collapsed to
 * 0px, its children spilled out of it, and the Say Hello button drew straight
 * across the details row. The basis above fixes a desktop problem and has to
 * stay on desktop.
 */
@media ( max-width: 991px ) {
	body.meetem-pl .profile-user-details .user-info-wrapper {
		flex: 0 1 auto;
	}
}

/**
 * Keep the details row clear of the Say Hello button.
 *
 * Howard, 2026-10-21: *"on desktop depending on screen size the Availability
 * can sometimes be covered by Say Hello."* He is right, and it is ours:
 * `.wpee-profile-cta-container` is **absolutely positioned** (NOTES.md), so it
 * takes no space in the row and the details simply run underneath it. With the
 * two original cells they never reached that far; with six they do, and the
 * last cell — Status — is the one that ends up under the button.
 *
 * The reserve is measured by meetem-profile-layout.js from the real controls,
 * because a signed-in visitor also gets Add Friend and Block this user beside
 * Say Hello, which is roughly twice as wide. The 190px here is the fallback
 * for the first paint and for no-JS, sized for the logged-out case.
 */
@media ( min-width: 992px ) {
	body.meetem-pl .profile-user-details .user-info-wrapper > .meetem-pl-details {
		padding-right: var( --meetem-pl-cta-reserve, 190px );
	}
}

/* The right-hand controls keep their own width and are never squeezed. */
body.meetem-pl .profile-user-details > .wpee-profile-cta-container,
body.meetem-pl .profile-user-details > .profile-header-right {
	flex: 0 0 auto;
}

/* Name first, location beside it, details on the row beneath — as drawn. */
body.meetem-pl .profile-user-details .user-info-wrapper > .wpee-user-rating-wrap {
	order: 1;
	flex: 0 0 auto;
}

body.meetem-pl .profile-user-details .user-info-wrapper > .age-location-wrap {
	order: 2;
	flex: 0 1 auto;
	margin: 0;
}

/**
 * Order 2 is shared on purpose. meetem-status puts the member's own editable
 * status pill in this same wrapper at order:2, through an ID selector that
 * outranks anything here anyway, so leaving the location on 2 lets the two sit
 * side by side on the name row instead of fighting. 3 is left free for it.
 */
body.meetem-pl .profile-user-details .user-info-wrapper > .meetem-pl-details {
	order: 4;
	flex: 1 0 100%;
}

/**
 * Content width, not 100%. The theme gives .account-status an 18px left
 * margin, so a 100% basis made it 18px wider than the wrapper and the
 * "Standard Member" pill spilled out over the message button.
 */
body.meetem-pl .profile-user-details .user-info-wrapper > .account-status {
	order: 5;
	flex: 0 1 auto;
	margin-left: 0;
}

/* The drawing shows the place name on its own next to the name, with no label. */
body.meetem-pl .profile-user-details .age-location-wrap .location-title {
	display: none;
}

body.meetem-pl .profile-user-details .age-location-wrap .profile-location {
	font-size: 15px;
	opacity: 0.85;
}

.meetem-pl-details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 44px;
	margin: 16px 0 0;
	padding: 0;
}

.meetem-pl-details__item {
	min-width: 0;
}

.meetem-pl-details__label {
	display: block;
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

.meetem-pl-details__value {
	display: block;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

/**
 * Status as the pill the drawing shows, with meetem-status's own three
 * colours for the dot: Available #7DB210, Talking #F5A623, Taken #8224E3.
 * Three classes deep for the same reason the label and value colours are —
 * the theme paints everything in this wrapper its accent purple.
 */
body.meetem-pl .profile-user-details .user-info-wrapper .meetem-pl-details__item--status .meetem-pl-details__value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 11px;
	font-size: 15px;
	background: var(--meetem-pl-surface);
	border: 1px solid var(--meetem-pl-border);
	border-radius: 999px;
	box-shadow: var(--meetem-pl-lift);
}

body.meetem-pl .meetem-pl-details__item--status .meetem-pl-details__value::before {
	width: 8px;
	height: 8px;
	content: "";
	background: #7db210;
	border-radius: 50%;
}

body.meetem-pl .meetem-pl-details__item--status[data-status="talking"] .meetem-pl-details__value::before {
	background: #f5a623;
}

body.meetem-pl .meetem-pl-details__item--status[data-status="taken"] .meetem-pl-details__value::before {
	background: #8224e3;
}

/**
 * The theme colours everything inside .user-info-wrapper with its accent
 * purple, which on the pale band under the cover photo reads as a row of
 * links. These are plain facts about the member, so they get label and value
 * colours of their own. Three classes deep to clear the theme's own rules —
 * see NOTES.md, "CSS specificity".
 */
body.meetem-pl .profile-user-details .user-info-wrapper .meetem-pl-details__label {
	color: var(--meetem-pl-muted);
}

body.meetem-pl .profile-user-details .user-info-wrapper .meetem-pl-details__value {
	color: var(--meetem-pl-ink);
}

/**
 * An empty cover band is 252px of flat colour before anything on the page is
 * read, and it is the state nearly every profile is in — only two members on
 * live have ever set a cover photo. The approved drawing shows a band about
 * half this height, so an empty one is cut to that; a member who HAS a cover
 * keeps the full band, because hers is a picture rather than a gap.
 *
 * header.php:139 prints the cover as an inline background-image, so "no cover"
 * is a .profile-cover-image with no style attribute. :has() does the test in
 * CSS, and meetem-profile-layout.js sets .meetem-pl-no-cover for anything that
 * cannot.
 */
body.meetem-pl.meetem-pl-no-cover .profile-cover-photo,
body.meetem-pl.meetem-pl-no-cover .profile-cover-photo .profile-cover-image,
body.meetem-pl .profile-cover-photo:not( :has( .profile-cover-image[style] ) ),
body.meetem-pl .profile-cover-photo:not( :has( .profile-cover-image[style] ) ) .profile-cover-image {
	height: 150px;
	min-height: 150px;
}

/* ======================================================================
 * 2. Tab bar — Profile · Photos · Videos · Friends · Feed
 * ================================================================== */

/**
 * Media is retired: Photos and Videos are top-level tabs now, so the item that
 * used to lead to them would be a third way to the same two pages.
 * :has() covers browsers that support it before the script runs; the class is
 * added by meetem-profile-layout.js for everything else.
 */
body.meetem-pl .profile-menu-tab li.meetem-pl-menu--media,
body.meetem-pl .profile-menu-tab li:has( > a[href$="/media"] ) {
	display: none !important;
}

/**
 * Next profile — the last item in the bar, pushed to the far end.
 *
 * It is a different kind of thing from the tabs beside it (it leaves this
 * member rather than switching a view of her), so it reads as a button rather
 * than a tab and never takes the active underline.
 */
/**
 * The bar is a content-width <ul> inside a space-between wrapper, so without
 * this the button lands immediately after Feed in the middle of the row.
 * Growing the list lets `margin-left: auto` carry the button to the end of the
 * bar, and leaves the signed-in notification icons where they are.
 */
@media ( min-width: 701px ) {
	body.meetem-pl .profile-menu-wrapper > ul.profile-menu-tab {
		flex: 1 1 auto;
	}
}

/* !important because the theme zeroes every margin in this list with one of
   its own — see the file header on why that is the house style here. */
body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next {
	margin-left: auto !important;
}

/**
 * Solid purple, white label — Howard, 2026-10-22: "make purple also".
 *
 * It was a pale lilac pill with purple text, which on the lilac header read as
 * disabled next to Say Hello. It is now the same solid purple as the button at
 * the bottom of the page, so the two Next buttons match each other.
 *
 * The colour carries !important, which is not decoration. The theme sets the
 * colour of every link in this bar with
 * `.wpee-profile-header .profile-header-menu .profile-menu-tab li.profile-menu-tab-list a`
 * and a matching `:hover` — five classes to our four, so it won both ways, and
 * on hover it repainted the label its own purple on top of our purple pill and
 * the text disappeared (Zain, 2026-10-21). Raising the selector to match that
 * chain would fix it only for the header menu — the same bar is rendered by the
 * extension's content.php without `.wpee-profile-header` above it — so the
 * declaration itself carries the weight instead.
 */
body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #fff !important;
	background: var(--meetem-pl-accent);
	border-radius: 999px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:hover,
body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:focus-visible {
	color: #fff !important;
	background: #7a26c7;
}

/* The arrow is part of the label and must never be coloured separately. */
body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a .meetem-pl-tab__arrow {
	color: inherit !important;
}

body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next::after {
	display: none;
}

/**
 * Desktop: the pill and the signed-in icons on one centre line.
 *
 * Three things pulled it out of line, measured at 1440 (Zain, 2026-10-27):
 * the theme pads every link in this bar `10px 24px` with a five-class selector
 * that beats ours, so the pill wore the tabs' padding and came out oversized;
 * the theme lifts `ul.wpee-notification-links.different-user` by -9px above
 * 768px; and the row stretched its children rather than centring them. The
 * pill's centre ended up 12px below the icons'.
 *
 * All of it is desktop only — under 700px the pill is a full-width button on
 * its own line and none of this applies.
 */
@media ( min-width: 701px ) {
	body.meetem-pl .profile-menu-wrapper,
	body.meetem-pl .profile-menu-wrapper > ul.profile-menu-tab {
		align-items: center;
	}

	/* The icons' own lift is half the misalignment; cancel it rather than
	   chase it with a matching offset on the pill. */
	body.meetem-pl .profile-menu-wrapper .profile-notification-blocks ul.wpee-notification-links {
		margin-top: 0 !important;
	}

	/* 36px is the icon circles' height, so the two read as one row.
	   !important on padding AND font-size, because the theme sets both from a
	   selector one class longer than ours — and it sets them twice: once at
	   style.css:2514 and again in a media query at :7332, which is why the
	   pill came out 13px at 1440 and 14px at 1024 until the size was guarded
	   as well (measured on live, 2026-10-27). */
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a {
		box-sizing: border-box;
		height: 36px;
		padding: 0 16px 0 18px !important;
		gap: 6px;
		font-size: 13px !important;
		letter-spacing: 0.01em;
		line-height: 1;
		white-space: nowrap;
		box-shadow: 0 1px 2px rgba( 59, 16, 102, 0.18 );
	}

	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:hover,
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:focus-visible {
		box-shadow: 0 2px 6px rgba( 59, 16, 102, 0.24 );
	}

	/* The glyph sits a hair high against the cap height, and leans on hover. */
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a .meetem-pl-tab__arrow {
		font-size: 14px;
		transform: translateY( -1px );
		transition: transform 0.15s ease;
	}

	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:hover .meetem-pl-tab__arrow,
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:focus-visible .meetem-pl-tab__arrow {
		transform: translate( 2px, -1px );
	}
}

/* The lean is decoration; the lift is alignment, so only the lean goes. */
@media ( min-width: 701px ) and ( prefers-reduced-motion: reduce ) {
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a .meetem-pl-tab__arrow,
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:hover .meetem-pl-tab__arrow,
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a:focus-visible .meetem-pl-tab__arrow {
		transform: translateY( -1px );
		transition: none;
	}
}

/**
 * Air between the pill and the icons beside it.
 *
 * Signed in, the vendor prints the favourite / wink / message / report icons in
 * `.profile-notification-blocks`, immediately after the tab list — and our pill
 * is the last thing *in* that list, pushed right by `margin-left: auto`. The
 * two ended up touching (Zain, 2026-10-27, on his own signed-in profile).
 *
 * The gap goes on the row, not on the pill: signed out that icon block is not
 * rendered at all (header.php:531 is inside `is_user_logged_in()`), so a margin
 * on the pill would pull it off the right edge for every logged-out visitor to
 * fix something only logged-in members ever see.
 */
body.meetem-pl .profile-menu-wrapper {
	column-gap: 20px;
}

.meetem-pl-tab__arrow {
	font-size: 16px;
	line-height: 1;
}

/**
 * The second Next profile button, under the content.
 *
 * Howard asked for one "waiting after you've read everything", so unlike the
 * pill in the tab bar this one is meant to be found without looking for it:
 * solid, centred, and with air above it so it reads as the end of the page
 * rather than the end of the last card. Colours carry !important for the same
 * reason as the pill above — the theme paints links in this area with longer
 * selectors than ours.
 */
/**
 * flex: 0 0 100% is not decoration, and neither is the order.
 *
 * The vendor fires this action inside .profile-content-inner, which is a
 * wrapping flex ROW whose columns are sized in percentages — so a plain block
 * became a fourth column between the profile and the right sidebar, 176px wide
 * and stretched to the full height of the row: a purple slab down the side of
 * the page. Claiming the whole row fixes that, and align-items stops the
 * buttons stretching inside it.
 *
 * But claiming the row also BREAKS the line, and the vendor prints the right
 * sidebar after this action — so Quick Search, which belongs beside the
 * profile, was pushed underneath this row (Zain, 2026-10-24). `order` puts us
 * last in the flex order without moving us in the html, so the sidebar keeps
 * its place on the first line and this row wraps below both columns, which is
 * where Howard asked for it: after you have read everything.
 */
body.meetem-pl .meetem-pl-next-bottom {
	display: flex;
	order: 99;
	flex: 0 0 100%;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 40px 0 8px;
}

/**
 * Say Hello, repeated under the profile — Howard, 2026-10-24.
 *
 * Deliberately the same gradient as the button in the header
 * (meetem-profile-tweaks paints that one), so the two read as the same button
 * rather than two different offers. It is the primary action of the pair and
 * sits first; Next profile is the way out.
 */
body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__hello {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient( 331deg, #66288a 0%, #ae1abb 100% );
	box-shadow: 0 6px 18px rgba( 174, 26, 187, 0.35 );
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease, background-image 0.15s ease;
}

body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__hello:hover,
body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__hello:focus-visible {
	background-image: linear-gradient( 331deg, #57216f 0%, #9814a2 100% );
	box-shadow: 0 10px 26px rgba( 174, 26, 187, 0.48 );
	color: #fff !important;
	transform: translateY( -1px );
}

body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 32px;
	font-size: 15px;
	font-weight: 600;
	color: #fff !important;
	background: var(--meetem-pl-accent);
	border-radius: 999px;
	box-shadow: var(--meetem-pl-lift);
	transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__link:hover,
body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__link:focus-visible {
	color: #fff !important;
	background: #7a26c7;
	box-shadow: var(--meetem-pl-lift-hover);
	transform: translateY( -1px );
}

body.meetem-pl .meetem-pl-next-bottom .meetem-pl-next-bottom__link .meetem-pl-tab__arrow {
	color: inherit !important;
}

/* With Photos and Videos in the bar above, the sub-tab strip is a duplicate. */
body.meetem-pl .media-list-wrapper > ul.profile-section-tab {
	display: none !important;
}

body.meetem-pl .profile-menu-tab {
	flex-wrap: wrap;
}

/* ======================================================================
 * 3. Profile tab body
 * ================================================================== */

/**
 * The vendor still renders profile-feeds.php for this tab — content.php:128
 * chooses it through wpee_locate_template(), which has no filter — so its two
 * blocks are hidden here and ours is printed after them on the
 * wpee_display_additional_profile_menus_content action.
 *
 * Keyed off a body class, NOT .profile-content-inner.profile: the vendor builds
 * that class from the tab slug, which is empty on the bare /profile/<user> url
 * that members actually land on.
 */
body.meetem-pl-tab-profile .profile-content-inner > .profile-activity-sidebar,
body.meetem-pl-tab-profile .profile-content-inner > .profile-activity-inner {
	display: none !important;
}

/* The details moved to the header strip, so the feed tab does not repeat them. */
body.meetem-pl-tab-feed .meetem-pl-feed > .profile-activity-sidebar {
	display: none !important;
}

/**
 * The right sidebar's first panel carries its own top margin, so Quick Search
 * started about 35px below About Me and the three columns did not line up. The
 * drawing has them level.
 */
body.meetem-pl .profile-content-inner > .profile-activity-right-sidebar {
	padding-top: 0;
}

body.meetem-pl .profile-activity-right-sidebar > *:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
 * Quick Search panel
 *
 * The theme paints this panel #E4FAFF — a pale cyan that belongs to no other
 * part of the site and reads as a leftover next to the lilac page and the
 * white cards. It is the only block on the Profile tab that is not ours, so it
 * takes the same card treatment: white, hairline, same corner, same lift. The
 * heading drops from 24px washed purple to the 16px ink every other section
 * heading uses, and the Submit button gets the space it was missing above it.
 *
 * Scoped to body.meetem-pl, so this is the profile page only. The same panel
 * on the members and search pages is untouched — say the word and it can be
 * made to match there too.
 * ------------------------------------------------------------------ */

body.meetem-pl .profile-quick-search {
	padding: 22px 24px;
	background: var(--meetem-pl-surface);
	border: 1px solid var(--meetem-pl-border);
	border-radius: var(--meetem-pl-radius);
	box-shadow: var(--meetem-pl-lift);
}

/* The sidebar scopes its own 24px rule, so ours has to name the sidebar too. */
body.meetem-pl .profile-activity-right-sidebar .wpee-block .wpee-block-title,
body.meetem-pl .profile-quick-search .wpee-block-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--meetem-pl-ink);
}

body.meetem-pl .profile-quick-search label,
body.meetem-pl .profile-quick-search .dspdp-control-label {
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--meetem-pl-muted);
}

body.meetem-pl .profile-quick-search select.dspdp-form-control,
body.meetem-pl .profile-quick-search select.dsp-form-control {
	height: 44px;
	color: var(--meetem-pl-ink);
	background-color: var(--meetem-pl-surface);
	border: 1px solid var(--meetem-pl-border);
	border-radius: 10px;
	box-shadow: none;
}

body.meetem-pl .profile-quick-search select:focus {
	border-color: var(--meetem-pl-accent);
	outline: none;
}

/**
 * The button sat hard against the last select: the theme gives it 16px of
 * vertical padding that an <input> does not grow for, and no margin at all.
 */
body.meetem-pl .profile-quick-search .dsp_submit_button {
	width: 100%;
	height: 48px;
	margin-top: 22px;
	padding: 0 24px;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 10px 22px -12px rgba( 130, 36, 227, 0.9 );
}

/**
 * The feed's own video is printed as `<video width="200" height="200">` and
 * styled to a 520px SQUARE, so a portrait interview played as a tall sliver
 * between two broad black margins and the item ran half a screen deep. The
 * clips here are the same 9:16 as everywhere else on the page, so the box is
 * too — and a background colour means an item whose poster has not arrived
 * reads as a player rather than a hole.
 */
body.meetem-pl-tab-feed .meetem-pl-feed .video-box video,
body.meetem-pl-tab-feed .meetem-pl-feed video#sampleMovie {
	width: 100%;
	max-width: 280px;
	height: auto;
	aspect-ratio: 9 / 16;
	background: #1d1322;
	border-radius: 10px;
	object-fit: contain;
}

/**
 * .profile-content-inner is flex-wrap:wrap and the vendor sizes its columns in
 * percentages — 25% sidebar, 50% middle, 25% right sidebar. A flex-basis of
 * auto here grows to the full row and wraps the right sidebar underneath, so
 * our block takes the 75% the first two used to share, less the gutter that
 * justify-content:space-between then opens up beside the sidebar.
 *
 * It still grows to the full width on its own, for a profile page configured
 * with no right sidebar at all.
 */
body.meetem-pl .meetem-pl-profile,
body.meetem-pl .meetem-pl-feed {
	flex: 1 1 calc( 75% - var(--meetem-pl-gap) );
	max-width: 100%;
	min-width: 0;
}

body.meetem-pl .meetem-pl-feed > .profile-activity-inner {
	width: 100%;
	max-width: none;
}

.meetem-pl-profile__band {
	display: flex;
	align-items: flex-start;
	gap: var(--meetem-pl-gap);
}

.meetem-pl-profile__col {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * Hero — a horizontal band holding a PORTRAIT player
 *
 * Every interview on this site is 1080x1920. A wide hero would show about
 * 265px of picture between two black bars, which is why the approved drawing
 * is a band with a portrait player in it. See NOTES.md, "Interview videos are
 * portrait".
 * ------------------------------------------------------------------ */

.meetem-pl-hero {
	position: relative;
	flex: 0 0 var(--meetem-pl-hero-w);
	width: var(--meetem-pl-hero-w);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: #16101c;
	border-radius: var(--meetem-pl-radius);
	box-shadow: 0 24px 48px -24px rgba( 24, 10, 40, 0.55 );
}

/**
 * The interview is the thing being sold on this page, so the frame gets a
 * little weight of its own: a soft drop, and a dark wash at the foot so the
 * badge and the first frame never fight a bright sky for contrast.
 */
.meetem-pl-hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 38%;
	pointer-events: none;
	content: "";
	background: linear-gradient( to top, rgba( 10, 4, 18, 0.45 ), rgba( 10, 4, 18, 0 ) );
}

.meetem-pl-hero__media {
	/**
	 * Absolute, not just height:100%. The frame's height comes from
	 * aspect-ratio, and a percentage height against that resolves to the
	 * content height — the photo came out 300x300 inside a 300x533 frame and
	 * sat on top of a black block. Pinned to the box, it fills it.
	 */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* contain, never cover: cropping an interview cuts off her face. */
	object-fit: contain;
	background: #16101c;
}

/**
 * `.elementor img { height: auto }` outranks a one-class rule, so the photo
 * rendered at its intrinsic 300px inside a 533px frame however it was pinned.
 */
body.meetem-pl .meetem-pl-hero .meetem-pl-hero__media {
	height: 100%;
}

/**
 * A member with no interview yet falls back to her profile picture, and those
 * are not 9:16 — contain left Amber's photo floating above a black block half
 * the height of the frame. A picture fills the frame instead, anchored at the
 * top so a face is never the part that gets cropped.
 */
.meetem-pl-hero--photo .meetem-pl-hero__media {
	object-fit: cover;
	object-position: center top;
}

.meetem-pl-hero__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 6px 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: rgba( 22, 10, 34, 0.55 );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 999px;
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
}

/* The theme rounds every button to 8px, so the circle needs the extra class. */
body.meetem-pl .meetem-pl-hero .meetem-pl-hero__play {
	border-radius: 50%;
}

.meetem-pl-hero__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 0;
	cursor: pointer;
	background: rgba( 255, 255, 255, 0.92 );
	border: 0;
	border-radius: 50%;
	box-shadow: 0 10px 30px -8px rgba( 10, 4, 18, 0.65 );
	transform: translate( -50%, -50% );
	transition: transform 0.18s ease, background 0.18s ease;
}

.meetem-pl-hero__play:hover,
.meetem-pl-hero__play:focus-visible {
	background: #fff;
	transform: translate( -50%, -50% ) scale( 1.06 );
}

@media ( prefers-reduced-motion: reduce ) {
	.meetem-pl-hero__play {
		transition: none;
	}

	.meetem-pl-hero__play:hover,
	.meetem-pl-hero__play:focus-visible {
		transform: translate( -50%, -50% );
	}
}

.meetem-pl-hero__play-icon {
	width: 0;
	height: 0;
	margin-left: 5px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 20px solid var(--meetem-pl-accent);
}

.meetem-pl-hero.is-started .meetem-pl-hero__play,
.meetem-pl-hero__play[hidden] {
	display: none;
}

.meetem-pl-hero__empty {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	padding: 0 16px;
	color: #b7a7c4;
	font-size: 14px;
	text-align: center;
	transform: translate( -50%, -50% );
}

/* ---------------------------------------------------------------------
 * About Me / My Interests
 * ------------------------------------------------------------------ */

.meetem-pl-card {
	padding: 22px 24px;
	color: var(--meetem-pl-ink);
	background: var(--meetem-pl-surface);
	border: 1px solid var(--meetem-pl-border);
	border-radius: var(--meetem-pl-radius);
	box-shadow: var(--meetem-pl-lift);
}

/**
 * Two classes and body, because the THEME styles these by tag: `body h3` is
 * 36px (style.css) and `h3, .dspdp-h3` is 23px (user_section_styles.min.css),
 * and both outrank a single-class rule. A plain `.meetem-pl-card__title` lost
 * silently and the headings rendered at 31px in theme purple — twice the size
 * of the drawing, which is what made the cards look so loosely spaced. Same
 * trap as NOTES.md, "CSS specificity".
 */
/**
 * Sentence case, dark, 16px — as Howard drew it. A small-caps label version was
 * tried and looks more expensive, but the drawing is the agreement; it is one
 * rule to swap if he prefers it. See the two screenshots in
 * mockups/profile-layout/design-2026-10-20/.
 */
body.meetem-pl .meetem-pl-card__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--meetem-pl-ink);
}

/* The member's own words are the content here, so they take the larger type. */
.meetem-pl-card__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--meetem-pl-ink);
}

.meetem-pl-card__body p {
	margin: 0 0 10px;
}

.meetem-pl-card__body p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Photos / Videos rows
 * ------------------------------------------------------------------ */

.meetem-pl-strip {
	margin-top: 14px;
}

.meetem-pl-strip--videos {
	margin-top: var(--meetem-pl-gap);
}

.meetem-pl-strip__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

/* Also an h3, so it needs the same weight against `body h3`, and the same
   treatment as the card headings so every section is announced alike. */
body.meetem-pl .meetem-pl-strip__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--meetem-pl-ink);
}

.meetem-pl-strip__all {
	flex: 0 0 auto;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--meetem-pl-accent);
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.meetem-pl-strip__all:hover,
.meetem-pl-strip__all:focus-visible {
	color: var(--meetem-pl-accent);
	background: rgba( 139, 47, 224, 0.09 );
	text-decoration: none;
}

.meetem-pl-strip__list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * The Videos row runs the full width under the band, so it fits more tiles —
 * and they are portrait, like everything else here.
 */
.meetem-pl-strip--videos .meetem-pl-strip__list {
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
}

.meetem-pl-strip__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.meetem-pl-strip__link {
	display: block;
}

.meetem-pl-strip__media {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background-color: var(--meetem-pl-sunken);
	background-position: center;
	background-size: cover;
	border-radius: var(--meetem-pl-radius-sm);
	box-shadow: var(--meetem-pl-lift);
	object-fit: cover;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.meetem-pl-strip__link:hover .meetem-pl-strip__media,
.meetem-pl-strip__link:focus-visible .meetem-pl-strip__media {
	box-shadow: var(--meetem-pl-lift-hover);
	transform: translateY( -3px );
}

@media ( prefers-reduced-motion: reduce ) {
	.meetem-pl-strip__media {
		transition: none;
	}

	.meetem-pl-strip__link:hover .meetem-pl-strip__media,
	.meetem-pl-strip__link:focus-visible .meetem-pl-strip__media {
		transform: none;
	}
}

.meetem-pl-strip--videos .meetem-pl-strip__media {
	aspect-ratio: 9 / 16;
	background-color: #16101c;
	/* contain for the same reason as the hero: these are portrait clips. */
	object-fit: contain;
}

/**
 * Videos pulled up into the band (no photos to fill it) sits in a column about
 * a third of the page, so it takes the same three tiles a Photos row would —
 * not the six the full-width row under the band is built for.
 */
.meetem-pl-strip--in-band {
	margin-top: 8px;
}

.meetem-pl-strip--in-band .meetem-pl-strip__list {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

/* ---------------------------------------------------------------------
 * Photos and Videos tabs
 *
 * These two pages are the vendor's own media grids — we only promoted them out
 * of the Media menu — but a member clicking Photos from the row we style
 * should not land on something that looks like a different site. The tiles get
 * the same corner, the same lift and the same portrait frame as the rows on the
 * Profile tab. Nothing is moved or re-ordered; this is finish only.
 * ------------------------------------------------------------------ */

body.meetem-pl .media-list-wrapper .photos-list img,
body.meetem-pl .media-list-wrapper .photos-list > a {
	border-radius: var(--meetem-pl-radius-sm);
}

body.meetem-pl .media-list-wrapper .photos-list img {
	box-shadow: var(--meetem-pl-lift);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.meetem-pl .media-list-wrapper .photos-list img:hover {
	box-shadow: var(--meetem-pl-lift-hover);
	transform: translateY( -3px );
}

body.meetem-pl .media-list-wrapper .video-wrapper {
	background: var(--meetem-pl-surface);
	border-radius: var(--meetem-pl-radius-sm);
	box-shadow: var(--meetem-pl-lift);
}

/**
 * Corner and backdrop only. The card is a fixed 247x196 with the date caption
 * under the clip, so forcing the 9:16 frame used on the Profile tab overflowed
 * the card and clipped the caption — the vendor's grid keeps its own geometry.
 */
body.meetem-pl .media-list-wrapper .video-wrapper video {
	background: #16101c;
	border-radius: var(--meetem-pl-radius-sm) var(--meetem-pl-radius-sm) 0 0;
}

@media ( prefers-reduced-motion: reduce ) {
	body.meetem-pl .media-list-wrapper .photos-list img {
		transition: none;
	}

	body.meetem-pl .media-list-wrapper .photos-list img:hover {
		transform: none;
	}
}

/* ======================================================================
 * 4. Tablet
 * ================================================================== */

@media ( max-width: 1024px ) {
	:root {
		--meetem-pl-hero-w: 240px;
	}

	.meetem-pl-strip--videos .meetem-pl-strip__list {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	/**
	 * Three across here too, not two. The player narrows to 240px on a tablet
	 * while the column beside it stays wide, so two tiles in that column came
	 * out taller than the player itself and left a 190px shelf of empty page
	 * under it — the hole this row was moved up to fill, upside down.
	 */
	.meetem-pl-strip--in-band .meetem-pl-strip__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.meetem-pl-details {
		gap: 12px 28px;
	}

	body.meetem-pl .profile-content-inner {
		padding-top: 28px;
	}
}

/* ======================================================================
 * 5. Phone
 * ================================================================== */

@media ( max-width: 700px ) {
	/**
	 * align-items is flex-start on the row, which is right for the row: it
	 * keeps the cards level with the top of the player. Stacked, flex-start is
	 * the CROSS axis — the width — so the cards shrank to their content and sat
	 * in a 244px column beside 114px of empty page while the player and the
	 * Videos row below them ran the full width. Stretch is what a stack wants.
	 */
	.meetem-pl-profile__band {
		flex-direction: column;
		align-items: stretch;
	}

	/**
	 * Full width would make a 9:16 hero taller than the screen, so it is capped
	 * and centred instead.
	 */
	.meetem-pl-hero {
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
	}

	.meetem-pl-strip__list,
	.meetem-pl-strip--videos .meetem-pl-strip__list,
	/**
	 * Three across here too, not two. The player narrows to 240px on a tablet
	 * while the column beside it stays wide, so two tiles in that column came
	 * out taller than the player itself and left a 190px shelf of empty page
	 * under it — the hole this row was moved up to fill, upside down.
	 */
	.meetem-pl-strip--in-band .meetem-pl-strip__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	/**
	 * Six cells in a wrapping flex row left a lone Status pill on a line of its
	 * own, aligned to nothing. A three-column grid gives two even rows that
	 * line up with each other however many cells a member has filled in.
	 */
	.meetem-pl-details {
		display: grid;
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 16px 12px;
		text-align: center;
	}

	/* The pill is taller than a plain value, so it gets a tighter box here and
	   sits centred in its own cell rather than hanging off the left edge. */
	body.meetem-pl .profile-user-details .user-info-wrapper .meetem-pl-details__item--status .meetem-pl-details__value {
		padding: 4px 12px 4px 10px;
		font-size: 14px;
	}

	.meetem-pl-details__item--status .meetem-pl-details__value {
		margin: 0 auto;
	}

	/* ---------------------------------------------------------------------
	 * Tabs on a phone
	 *
	 * The theme hides the tab list behind a hamburger and paints the bar that
	 * holds it solid purple, so the top of a profile was a full-width purple
	 * slab with an icon in it and no clue what it opened. The five tabs fit
	 * comfortably in a scrolling row, which is what a phone expects and what
	 * the desktop already shows.
	 *
	 * The hamburger is hidden rather than left in place, so nothing is left to
	 * toggle a drawer that is now always open — NOTES.md records an earlier
	 * attempt that let both behaviours run at once.
	 * ------------------------------------------------------------------ */

	body.meetem-pl .wpee-profile-header .profile-header-menu {
		padding: 0;
		background: transparent;
	}

	body.meetem-pl .profile-header-menu .ham-icon {
		display: none !important;
	}

	body.meetem-pl .wpee-profile-header .profile-header-menu .profile-menu-tab {
		position: static !important;
		visibility: visible !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 2px;
		width: 100%;
		padding: 0 0 4px;
		overflow-x: auto;
		background: transparent !important;
		box-shadow: none !important;
		opacity: 1 !important;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	body.meetem-pl .profile-header-menu .profile-menu-tab::-webkit-scrollbar {
		display: none;
	}

	body.meetem-pl .profile-header-menu .profile-menu-tab li.profile-menu-tab-list {
		flex: 0 0 auto;
	}

	/**
	 * Next profile leaves the scrolling row on a phone and sits under it at
	 * full width, where a thumb can find it — in the row it would be the one
	 * item you have to scroll to reach.
	 */
	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next {
		order: 999;
		flex: 1 0 100%;
		margin: 10px 0 0;
	}

	body.meetem-pl .profile-menu-tab li.meetem-pl-tab--next a {
		justify-content: center;
		width: 100%;
		padding: 12px 18px;
		font-size: 15px;
	}

	body.meetem-pl .wpee-profile-header .profile-header-menu .profile-menu-tab {
		flex-wrap: wrap !important;
	}

	/* Sized so all five fit a 390px screen without scrolling; the row still
	   scrolls on a narrower phone or with a longer set of labels. */
	body.meetem-pl .profile-header-menu .profile-menu-tab li.profile-menu-tab-list a {
		padding: 10px 10px;
		font-size: 14px;
		white-space: nowrap;
	}

	body.meetem-pl .profile-content-inner {
		padding-top: 24px;
		padding-bottom: 32px;
	}

	.meetem-pl-card {
		padding: 18px 20px;
	}

	.meetem-pl-card__body {
		font-size: 15px;
	}

	body.meetem-pl.meetem-pl-no-cover .profile-cover-photo,
	body.meetem-pl.meetem-pl-no-cover .profile-cover-photo .profile-cover-image,
	body.meetem-pl .profile-cover-photo:not( :has( .profile-cover-image[style] ) ),
	body.meetem-pl .profile-cover-photo:not( :has( .profile-cover-image[style] ) ) .profile-cover-image {
		height: 110px;
		min-height: 110px;
	}

	.meetem-pl-details__value {
		font-size: 15px;
	}

	/**
	 * The tab bar WAS left alone here, on the reasoning that the theme's
	 * drawer behind .ham-icon was good enough. Seen on a phone it is not: a
	 * full-width solid purple slab with an icon in it and no clue what it
	 * opens. The rules above take it over properly — hamburger hidden, list
	 * shown as a scrolling row — which is safe precisely because the trigger
	 * is gone, so nothing toggles a drawer that is now always open. That was
	 * the mistake in the earlier revision this comment used to warn about.
	 * `order` sorts a row exactly as it sorts a column, so the running order
	 * survives either way.
	 */
}