/* Copyright © Rob Art | Illustration 2026 */
/*
	Pliitz — splash overlay layout.
	The covering rules (position/z-index/background/opacity:1) are in the inline
	critical CSS so they paint first. This file adds the stage + media + skip styling.
	Per-splash box dimensions arrive as --pliitz-box-w / --pliitz-box-h (set inline,
	the sanctioned dynamic exception). Two display modes: boxed (capped box) and
	responsive (fills the viewport up to a sensible max).
*/

.pliitz-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6vmin;
	max-width: 90vw;
}

/* Boxed: media sits within a capped box (default 360×360, overridable per splash). */
.pliitz-stage--boxed {
	width: min(90vw, var(--pliitz-box-w, 360px));
	height: min(90vh, var(--pliitz-box-h, 360px));
}

/* Boxed IMAGE mode: width-driven, height follows the image's natural ratio.
   (data-pliitz-format="image" scopes this so other media keep W×H.) */
[data-pliitz-format="image"] .pliitz-stage--boxed {
	width: min(96vw, var(--pliitz-box-w, 480px));
	height: auto;
	max-height: 92vh;   /* never taller than the viewport */
}
[data-pliitz-format="image"] .pliitz-stage--boxed .pliitz-stage__media {
	width: 100%;
	height: auto;
	max-height: 92vh;
	object-fit: contain;
	border-radius: inherit;   /* match the card corners when surface is on */
}
/* When the (legacy subtle) surface is on, give the image room so it frames it. */
[data-pliitz-format="image"] .pliitz-stage--boxed.pliitz-stage--surface {
	padding: 14px;
}
/* Image + full card: size to the width slider, use the card's own padding, and
   keep height following the image ratio. Overrides .pliitz-stage--card's
   default auto width / 80vw cap. */
[data-pliitz-format="image"] .pliitz-stage--boxed.pliitz-stage--card {
	width: min(96vw, var(--pliitz-box-w, 480px));
	max-width: 96vw;
	height: auto;
}

/* Optional styled card behind the media (boxed only). */
.pliitz-stage--surface {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Responsive: the media FILLS the whole viewport — full height, width overspills,
   centred (cover). No padding/cap so it reaches every edge. */
.pliitz-stage--responsive {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	padding: 0;
}
.pliitz-stage--responsive .pliitz-stage__media {
	width: 100%;
	height: 100%;
	object-fit: cover;   /* fill, crop overspill, stay centred */
	object-position: center;
}

/* The media element (image / video / svg / lottie) — fits within the stage
   (boxed default: contained within the capped box). */
.pliitz-stage__media,
.pliitz-stage__logo { /* __logo kept as a back-compat alias */
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Lottie renders an inline <svg> inside a <div>, so object-fit does NOTHING on it
   (object-fit only applies to replaced elements like <img>). The div therefore
   sized to the SVG's natural size and OVERFLOWED the box. Force the lottie container
   to fill its stage and clip, and let the inner SVG contain itself (lottie-web's SVG
   carries preserveAspectRatio="xMidYMid meet", so it letterboxes correctly). */
.pliitz-lottie {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pliitz-lottie svg {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	display: block;
}
/* Boxed lottie: the stage IS the box (W×H from the box vars), the lottie fills it. */
[data-pliitz-format="lottie"] .pliitz-stage--boxed .pliitz-lottie {
	width: 100%;
	height: 100%;
}

/* Simple mode = logo + text stacked. The box-width control sizes the LOGO only;
   the stage itself takes a comfortable wide width so the TEXT isn't squeezed to
   the logo's width. Override --boxed sizing here (higher specificity + the
   --boxed class). */
/* Simple mode stage — NOT boxed (own class, no inline box vars). Sizes to
   content up to a comfortable cap; logo + text stacked and centred. */
.pliitz-stage--simple {
	flex-direction: column;
	gap: 4vmin;
	text-align: center;
	width: auto;        /* size to content */
	max-width: 80vw;    /* only constraint: never wider than 80% of the splash */
	height: auto;
}
.pliitz-stage--simple .pliitz-stage__logo {
	/* Width driven by the per-splash logo-size control (--pliitz-logo-w). */
	width: var(--pliitz-logo-w, clamp(140px, 26vw, 320px));
	max-width: 90%;
	height: auto;
	align-self: center;
}
.pliitz-stage--simple .pliitz-stage__text {
	width: 80vw;          /* span a width so text-align (left/centre/right) is visible */
	max-width: 80vw;
	box-sizing: border-box;
}

/* Card surface (simple mode, card_on): logo + text in a contained panel that
   floats on the splash background. Driven by per-splash custom props. */
.pliitz-stage--card {
	background: var(--pliitz-card-bg, #fff);
	border: var(--pliitz-card-border, none);
	border-radius: var(--pliitz-card-radius, 14px);
	padding: var(--pliitz-card-pad, 40px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	width: auto;
	max-width: 80vw;
}
/* Inside a card the text block shrink-wraps to the card, not 80vw of the screen. */
.pliitz-stage--card .pliitz-stage__text { width: auto; max-width: 100%; }
.pliitz-stage__text { color: #fff; }

/* Heading + subtext consume the advanced-control custom props (set inline per
   splash by pliitz_text_css_vars()). Fallbacks reproduce the old defaults so a
   splash with no advanced tweaks looks unchanged. */
.pliitz-stage__heading {
	margin: 0;
	font-family: var(--pliitz-h-family, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: var(--pliitz-h-size, clamp(20px, 4vw, 34px));
	font-weight: var(--pliitz-h-weight, 700);
	font-style: var(--pliitz-h-style, normal);
	line-height: 1.2;
	color: var(--pliitz-h-color, #fff);
	text-align: var(--pliitz-h-align, center);
	letter-spacing: var(--pliitz-h-letter, 0);
	text-transform: var(--pliitz-h-transform, none);
	word-spacing: var(--pliitz-h-word, 0);
}
.pliitz-stage__subtext {
	/* Gap in px (via --pliitz-gap), NOT em — an em gap scales with the sub-text
	   font-size, so growing the sub-text would shove the heading away. Fixed px
	   keeps the spacing constant whatever the two sizes are. */
	margin: var(--pliitz-gap, 8px) 0 0;
	font-family: var(--pliitz-st-family, system-ui, -apple-system, "Segoe UI", sans-serif);
	font-size: var(--pliitz-st-size, clamp(13px, 2.2vw, 18px));
	font-weight: var(--pliitz-st-weight, 400);
	font-style: var(--pliitz-st-style, normal);
	line-height: 1.4;
	color: var(--pliitz-st-color, #fff);
	text-align: var(--pliitz-st-align, center);
	letter-spacing: var(--pliitz-st-letter, 0);
	text-transform: var(--pliitz-st-transform, none);
	word-spacing: var(--pliitz-st-word, 0);
	opacity: 0.85;
}

/* Skip BUTTON — class is `pliitz-skip-btn`, NOT `pliitz-skip`. The preflight adds
   `pliitz-skip` as a state class on <html> (visitor skips the splash); if the button
   shared that name, these fixed-position/white-background rules would paint onto the
   whole <html> element during the pre-DOMContentLoaded window and the page would
   flash shrunk, offset, and white. Keep the two names distinct. */
.pliitz-skip-btn {
	position: fixed;
	bottom: 5vmin;
	right: 5vmin;
	padding: 8px 16px;
	font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	cursor: pointer;
}

.pliitz-skip-btn:hover,
.pliitz-skip-btn:focus {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Light-background variant — the default white-on-translucent Skip vanishes on a
   light/white background. Server adds .pliitz-skip-btn--on-light when the splash BG is
   light (luminance check). Dark ink + a clear solid border so it reads AND has a
   visible shape boundary (contrast isn't the only cue — colour-blind-safe). */
.pliitz-skip-btn--on-light {
	color: rgba(20, 28, 40, 0.85);
	background: rgba(20, 28, 40, 0.06);
	border: 1px solid rgba(20, 28, 40, 0.45);
}
.pliitz-skip-btn--on-light:hover,
.pliitz-skip-btn--on-light:focus {
	background: rgba(20, 28, 40, 0.14);
	color: #101c28;
	border-color: rgba(20, 28, 40, 0.7);
}

/* Site-title fallback — shown only when a splash has no logo, heading or sub-text,
   so the overlay is never a blank coloured rectangle. Uses the plugin accent
   (--pliitz-gold) rather than the heading colour, so it reads as a placeholder the
   user is meant to replace rather than content they chose. */
.pliitz-stage__heading--fallback {
	color: #f0c040;
	opacity: 0.92;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* Attribution credit — free build always shows this; removing it is a Pro feature.
   Sits at the bottom of the overlay: logo stacked above the credit line, matching the
   Briefli pattern. White at low opacity works on both the solid and gradient
   backgrounds the splash offers. */
.pliitz-credit {
	position: absolute;
	left: 50%;
	bottom: 42px;
	transform: translateX(-50%);
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	max-width: 92vw;
}
.pliitz-credit__logo {
	height: 52px;
	width: auto;
	display: block;
	/* pliitz_white_MENU.svg is a menu icon on a 20x20 viewBox, so the mark sits small
	   inside its box — it needs a larger height than a tightly-cropped logo would to
	   read at the same visual size. */
	opacity: 0.85;
}
.pliitz-credit__text {
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 13px;
	letter-spacing: 0.07em;
	color: #fff;
	opacity: 0.7;
	text-align: center;
	line-height: 1.4;
}
@media (max-width: 600px) {
	.pliitz-credit { bottom: 28px; gap: 6px; }
	.pliitz-credit__logo { height: 40px; }
	.pliitz-credit__text { font-size: 11px; letter-spacing: 0.05em; }
}