/* ==========================================================================
   DGN premium design layer - previews sites (previews.<brand>.com, DGN_Models\previews)
   Linked by previews/includes/MastHeading_1.cfm after dgn-premium.css and the brand's Premium.css, only for a premium brand.
   Every rule sits under body[data-ui="premium"][data-app="previews"]; the main sites never load this file.
   The previews pages share most class names with the main sites (TextHomeTop, VideoBoxMembers, buttonDGNMiddle, MenuLink...),
   so dgn-premium.css already styles them; this file only covers the markup that differs. Text is never added, removed or re-cased.
   ========================================================================== */

/* ---- PV1. Menu: the previews menu has one Foundation column per link (the main sites have one column holding all links), and
   dgn-premium.css makes every .MainMenuLink a full-width block - one link per row. Here the row is one centred, wrapping band. ---- */
body[data-ui="premium"][data-app="previews"] #contentMenu { margin-top: 0; }
body[data-ui="premium"][data-app="previews"] #contentMenu > .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 6px var(--ed-side, 16px);
}
body[data-ui="premium"][data-app="previews"] #contentMenu > .row::before,
body[data-ui="premium"][data-app="previews"] #contentMenu > .row::after { display: none; }
body[data-ui="premium"][data-app="previews"] #contentMenu .MainMenuLink {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}
/* the empty spacer column (&nbsp;) between the links and CONTINUE PREVIEW */
body[data-ui="premium"][data-app="previews"] #contentMenu .MainMenuLink:not(:has(.MenuLink)) { display: none; }
@media (max-width: 767.98px) {
	body[data-ui="premium"][data-app="previews"] #contentMenu > .row { padding: 4px 6px; }
}

/* ---- PV2. Hero (.block_video): the player in a rounded, lifted frame like the main sites' cards ---- */
body[data-ui="premium"][data-app="previews"] .block_video .video-js {
	border-radius: var(--dgn-r-m);
	overflow: hidden;
	box-shadow: var(--dgn-elev-3);
}
body[data-ui="premium"][data-app="previews"][data-scheme="dark"] .block_video .video-js {
	box-shadow: var(--dgn-elev-3), 0 0 0 1px rgba(var(--dgn-accent-rgb), .35);
}

/* ---- PV3. "Start here" and "Secure and safe" (previews/includes/MastFooting_0.cfm): fixed light-grey and white strips with grey
   text (inline styles). Now glass cards on the page surface, text in the scheme's colours, the brand headings unchanged. ---- */
body[data-ui="premium"][data-app="previews"] .dgn-pv-start,
body[data-ui="premium"][data-app="previews"] .dgn-pv-about {
	max-width: 1180px;
	margin: 36px auto !important;
	padding: 28px 12px !important;
	background: var(--dgn-surface-1) !important;
	border: 1px solid var(--dgn-line);
	border-radius: var(--dgn-r-l);
	box-shadow: var(--dgn-elev-2), inset 0 1px 0 rgba(var(--dgn-accent-rgb), .45);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body[data-ui="premium"][data-app="previews"] :is(.dgn-pv-start, .dgn-pv-about) {
		-webkit-backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
		backdrop-filter: blur(var(--dgn-blur)) saturate(1.2);
	}
}
@media (max-width: 1220px) {
	body[data-ui="premium"][data-app="previews"] :is(.dgn-pv-start, .dgn-pv-about) { margin: 28px 12px !important; }
}
body[data-ui="premium"][data-app="previews"] .dgn-pv-start :is(.TextBotoomHomeLight, .copyright),
body[data-ui="premium"][data-app="previews"] .dgn-pv-start .copyright[style] { color: var(--dgn-text-2) !important; }
body[data-ui="premium"][data-app="previews"] .dgn-pv-about .TextHomeoblsmall,
body[data-ui="premium"][data-app="previews"] .dgn-pv-about .TextHomeoblsmall[style] { color: var(--dgn-text) !important; }
body[data-ui="premium"][data-app="previews"] .dgn-pv-start hr { border-color: var(--dgn-line); }
/* the shield picture: a soft brand halo so its dark outline does not sink into a dark page */
body[data-ui="premium"][data-app="previews"] .dgn-pv-about .about-image {
	max-height: 360px;
	filter: drop-shadow(0 0 22px rgba(var(--dgn-accent-rgb), .35));
}
body[data-ui="premium"][data-app="previews"][data-scheme="dark"] .dgn-pv-about .about-image {
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 22px rgba(var(--dgn-accent-rgb), .45));
}

/* ---- PV3b. Section titles: each previews page prints a random 'beautymarksregular' glyph before and after every title (inline
   <style> in home/photos/selfies/videos.cfm). dgn-premium.css turns ::after into the brand ornament under the title, which left one
   odd glyph on the left (some letters draw as a grey box). Premium titles carry only the ornament, as on the main sites. ---- */
body[data-ui="premium"][data-app="previews"] :is(.TextHomeTop, .TextHomeTopEx, .TextHomeTopEx2)::before,
body[data-ui="premium"][data-app="previews"] :is(.TextHomeTopEx, .TextHomeTopEx2)::after { content: none; display: none; }

/* album titles (videos/photos/selfies: .TextHomeTopEx2 = SiteColor from each page's <style>) on the dark brands: the site colour
   brightened to >= 4.5:1 (--dgn-site-on-dark from DGN_UX.cfm), as the main sites use it for text - ABC blue on navy was ~2:1 */
body[data-ui="premium"][data-app="previews"][data-scheme="dark"] .TextHomeTopEx2 { color: var(--dgn-site-on-dark); }

/* ---- PV3c. Format badges (home_Prev/logos.png on a white full-width row): a rounded white chip instead of a white band ---- */
body[data-ui="premium"][data-app="previews"] .dgn-pv-badges {
	background: transparent !important;
	margin-top: 18px;
	margin-bottom: 18px !important;
}
/* logos.png is 1452 x 100 with the badges in the middle ~690px: show that middle part (cover + the ratio of a 720px slice) */
body[data-ui="premium"][data-app="previews"] .dgn-pv-badges img {
	box-sizing: content-box;
	width: min(720px, calc(100% - 36px)) !important;
	max-width: none;
	height: auto;
	aspect-ratio: 720 / 100;
	object-fit: cover;
	padding: 10px 18px;
	background: #fff;
	border-radius: var(--dgn-r-m);
	box-shadow: var(--dgn-elev-2);
}

/* ---- PV4. Exclusive Friends: rounded tiles that lift on hover / keyboard focus, like the main sites' cards ---- */
body[data-ui="premium"][data-app="previews"] .effect2 > a {
	display: block;
	border-radius: var(--dgn-r-m);
	overflow: hidden;
	box-shadow: var(--dgn-elev-2);
	transition: transform var(--dgn-t-mid) var(--dgn-ease), box-shadow var(--dgn-t-mid) var(--dgn-ease);
}
body[data-ui="premium"][data-app="previews"] .effect2 > a > img { display: block; float: none !important; }
body[data-ui="premium"][data-app="previews"] .effect2 > a:is(:hover, :focus-visible) {
	transform: translateY(-4px);
	box-shadow: var(--dgn-elev-3), var(--dgn-glow-2);
}
@media (prefers-reduced-motion: reduce) {
	body[data-ui="premium"][data-app="previews"] .effect2 > a { transition: none; }
	body[data-ui="premium"][data-app="previews"] .effect2 > a:is(:hover, :focus-visible) { transform: none; }
}