/*
 * Scoped, high-specificity + !important rules throughout: page-builder
 * themes commonly ship global h1/a/button styling that would otherwise
 * override this card's fonts, colors, and shapes.
 */

/* WordPress admin bar styling - allow the admin bar to display normally
   while preserving the card layout. */
html.wp-toolbar {
	margin-top: auto;
	padding-top: auto;
}

.lib-wrap {
	--lib-text: #ffffff;
	--lib-secondary-text: #f0e9dd;
	--lib-btn-bg: #f0e9dd;
	--lib-btn-text: #1a1a1a;
	--lib-accent-bg: #3e4a2e;
	--lib-accent-text: #ffffff;
	--lib-overlay: 0.55;
	--lib-overlay-color: #0a0a08;
	--lib-font-title: 'Bodoni Moda', Georgia, serif;
	--lib-font-tagline: 'Dancing Script', cursive;
	--lib-font-body: 'Jost', sans-serif;
	--lib-radius: 6px;

	display: flex;
	justify-content: center;
	font-family: var(--lib-font-body), -apple-system, BlinkMacSystemFont, sans-serif !important;
	box-sizing: border-box;
}

.lib-wrap *, .lib-wrap *::before, .lib-wrap *::after {
	box-sizing: border-box;
}

.lib-wrap--full {
	min-height: 100vh;
	padding: 0;
	background: #000;
	position: relative;
}

/* Fills the space beside the centered card on desktop with a heavily
   blurred, halftone-dotted version of the same background image,
   instead of flat black. Fixed + behind everything; the opaque card
   sits above it and fully covers it on mobile widths. */
.lib-side-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(55px) saturate(1.15) brightness(0.55);
	transform: scale(1.25);
	pointer-events: none;
}

.lib-side-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0.95) 1px, transparent 1.6px);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
	opacity: 0.55;
}

body.lib-standalone-page {
	margin: 0;
	padding: 0;
}

.lib-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	background: #14140f;
	color: var(--lib-text) !important;
}

.lib-wrap--full .lib-card {
	max-width: 100%;
	min-height: 100vh;
}

.lib-wrap:not(.lib-wrap--full) .lib-card {
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Cap the width on larger screens so the card doesn't stretch edge to
   edge on desktop — it stays a tall, centered column with the page
   background filling the sides. This rule is declared AFTER the base
   ".lib-wrap--full .lib-card" rule above (equal specificity, later in
   source order wins) and also carries !important as a safeguard against
   theme stylesheets that may declare their own !important widths. */
@media (min-width: 700px) {
	.lib-wrap--full .lib-card {
		max-width: 960px !important;
		box-shadow: 0 0 90px rgba(0, 0, 0, 0.5);
	}
}

.lib-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.lib-bg-overlay {
	position: absolute;
	inset: 0;
	background: var(--lib-overlay-color);
	opacity: var(--lib-overlay);
	z-index: 1;
}

.lib-content {
	position: relative;
	z-index: 2;
	/* Generous top padding lets the background image breathe before the
	   title starts — more of a premium "reveal" than a cramped header. */
	padding: 136px 56px 52px;
	text-align: center;
}

.lib-title {
	font-family: var(--lib-font-title) !important;
	font-weight: 600 !important;
	font-size: clamp(2.1rem, 8vw, 4rem) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	margin: 0 0 26px !important; /* equal space above/below the tagline */
	color: var(--lib-text) !important;
}

.lib-subtitle {
	font-family: var(--lib-font-body) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	margin: 0 0 26px !important; /* equal space above/below the tagline */
	opacity: 0.85;
	color: var(--lib-secondary-text) !important;
}

.lib-tagline {
	font-family: var(--lib-font-tagline) !important;
	font-size: 1.85rem !important;
	font-weight: 500 !important;
	margin: 0 0 48px !important;
	position: relative;
	padding-bottom: 24px;
	color: var(--lib-secondary-text) !important;
}

.lib-tagline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.lib-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 42px;
}

.lib-link-btn {
	display: flex !important;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 18px 24px !important;
	color: var(--lib-btn-text) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--lib-radius) !important;
	text-decoration: none !important;
	text-align: left;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	font-size: 1.05rem !important;

	/* Solid fill from the "Button Background" color in the plugin settings. */
	background: var(--lib-btn-bg) !important;
}

.lib-link-btn:hover {
	color: var(--lib-accent-text) !important;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	transform: translateY(-1px);
	background: var(--lib-accent-bg);
	background: color-mix(in srgb, var(--lib-accent-bg) 96%, transparent) !important;
}

.lib-link-btn:hover .lib-link-icon {
	background: rgba(255, 255, 255, 0.18);
}

.lib-link-btn:hover .lib-link-arrow {
	opacity: 0.85;
}

.lib-link-btn--highlight {
	color: var(--lib-hl-text, #f0e9dd) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: var(--lib-hl-bg, #a0513f) !important;
	box-shadow: none;
}

.lib-link-btn--highlight .lib-link-icon {
	background: rgba(255, 255, 255, 0.14);
}

.lib-link-btn--highlight:hover {
	color: var(--lib-hl-text, #f0e9dd) !important;
	border-color: rgba(255, 255, 255, 0.24);
	background: var(--lib-hl-bg, #a0513f) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	filter: brightness(1.08);
}

.lib-link-btn--highlight:hover .lib-link-icon {
	background: rgba(0, 0, 0, 0.08);
}

.lib-link-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.07);
	transition: background-color 0.2s ease;
}

.lib-link-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lib-link-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lib-link-title {
	font-family: var(--lib-font-title) !important;
	font-weight: 600 !important;
	font-size: 1.15rem !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	color: inherit !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-link-subtitle {
	font-family: var(--lib-font-body) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.02em;
	opacity: 0.7;
	color: inherit !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-link-arrow {
	flex: 0 0 auto;
	font-size: 1.3rem;
	opacity: 0.4;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.lib-footer {
	margin-top: 10px;
}

.lib-footer-line1 {
	font-family: var(--lib-font-tagline) !important;
	font-size: 1.15rem !important;
	margin: 0 0 12px !important;
	color: var(--lib-secondary-text) !important;
}

.lib-footer-line2 {
	font-family: var(--lib-font-body) !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	opacity: 0.65;
	margin: 0 !important;
	color: var(--lib-secondary-text) !important;
}

/* Footer line 2: stays on one line on mobile */
@media (max-width: 600px) {
	.lib-footer-line2 {
		white-space: nowrap;
		letter-spacing: 0.15em !important;
		font-size: min(0.68rem, calc((100vw - 80px) / 31)) !important;
	}
}

@media (max-width: 480px) {
	.lib-content {
		padding: 72px 26px 38px;
	}

	.lib-title {
		font-size: clamp(1.85rem, 8.5vw, 2.3rem) !important;
		line-height: 0.95 !important;
		letter-spacing: -0.01em !important;
	}
}

/* Mobile: small-text optical size for Bodoni Moda so thin strokes stay visible (esp. iOS) */
@media (max-width: 480px) {
	.lib-wrap,
	.lib-wrap * {
		font-variation-settings: "opsz" 11 !important;
	}
}

/* Mobile: keep the subtitle and footer line on one line by scaling the
   type to the available width (capped at the normal size). */
@media (max-width: 600px) {
	.lib-subtitle {
		white-space: nowrap;
		letter-spacing: 0.18em !important;
		font-size: min(0.8rem, calc((100vw - 60px) / 28)) !important;
	}

	.lib-footer-line1 {
		white-space: nowrap;
		font-size: min(1.05rem, calc((100vw - 80px) / 21)) !important;
	}
}

/* Whole-pixel line heights so every button lands on exact pixels and the
   gaps between buttons render identically (fractional heights made some
   gaps look 1px wider than others). */
.lib-wrap .lib-link-title {
	line-height: 28px !important;
}

.lib-wrap .lib-link-subtitle {
	line-height: 15px !important;
}

/* Mobile: tighter, shorter buttons with less space between them. Selectors
   are prefixed with .lib-wrap so they beat the template's inline tweaks. */
@media (max-width: 600px) {
	body.lib-standalone-page .lib-wrap .lib-links {
		gap: 5px;
	}

	.lib-wrap .lib-link-btn {
		padding: 9px 14px !important;
		gap: 12px;
	}

	.lib-wrap .lib-link-text {
		gap: 0 !important;
	}

	.lib-wrap .lib-link-title {
		line-height: 24px !important;
	}

	.lib-wrap .lib-link-subtitle {
		line-height: 14px !important;
	}

	.lib-wrap .lib-link-icon {
		width: 32px;
		height: 32px;
	}
}

/* Small screens: subtitle breaks into two lines at the comma, tightly stacked,
   at its normal size instead of shrinking to fit one line. */
@media (max-width: 480px) {
	.lib-wrap .lib-subtitle {
		white-space: normal;
		font-size: 0.8rem !important;
		letter-spacing: 0.2em !important;
		line-height: 1.2 !important;
	}

	.lib-wrap .lib-subtitle-part {
		display: block;
		white-space: nowrap;
	}
}

/* Less space between the buttons and the footer (all widths) */
.lib-wrap .lib-links {
	margin-bottom: 22px;
}

/* Mobile: more breathing room on the left/right of the button stack */
@media (max-width: 600px) {
	.lib-wrap .lib-links {
		margin-left: 32px;
		margin-right: 32px;
	}

	/* Button titles: match the landing page (1.3rem on mobile) */
	.lib-wrap .lib-links .lib-link-title {
		font-size: min(1.3rem, calc((100vw - 177px) / 9.6)) !important; /* shrinks only on very narrow phones */
	}
}

/* Mobile: size the background to the screen (not the full scroll height),
   so it zooms out only until it covers the screen */
@media (max-width: 480px) {
	.lib-bg {
		position: fixed;
		inset: 0;
		height: 100lvh;
	}
}

/* Mobile: slightly tighter (still equal) space above/below the tagline */
@media (max-width: 600px) {
	.lib-wrap .lib-title {
		margin-bottom: 20px !important;
	}

	.lib-wrap .lib-subtitle {
		margin-bottom: 20px !important;
	}
}