/* Content Locker — Frontend Styles v0.2 */

.cl-item {
	--cl-max-width: 920px;
	--cl-max-height: none;
	--cl-blur-strength: 16px;
	--cl-object-fit: contain;
	--cl-radius: 14px;
	--cl-shadow: 0 12px 40px rgba(0,0,0,.18);
	--cl-overlay-bg: rgba(20,20,28,.78);
	--cl-overlay-text: #fff;
	--cl-eyebrow-color: rgba(255,255,255,.65);
	--cl-btn-bg: #ffd60a;
	--cl-btn-fg: #1a1a1a;
	--cl-btn-bg-hover: #ffe24a;
	--cl-btn-ghost-fg: rgba(255,255,255,.85);
	--cl-btn-radius: 999px;
	--cl-transition: 320ms cubic-bezier(.34, 1.56, .64, 1);
	--cl-thumb-size: 56px;

	position: relative;
	display: block;
	width: 100%;
	max-width: var(--cl-max-width);
	margin: 1.5em auto;
	border-radius: var(--cl-radius);
	overflow: hidden;
	box-shadow: var(--cl-shadow);
	background: #0a0a10;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

/* Stage holds viewport + (optional) side pager */
.cl-stage {
	position: relative;
	display: flex;
	align-items: stretch;
}

.cl-viewport {
	position: relative;
	flex: 1 1 auto;
	display: block;
	background: #0a0a10;
	min-width: 0;
}

.cl-page {
	position: relative;
	display: block;
	width: 100%;
}

/* CRITICAL FIX: hidden attribute must override display rules above.
   Without this, browsers can show all pages stacked when the [hidden]
   attribute is suppressed by a more specific display rule elsewhere. */
.cl-page[hidden] {
	display: none !important;
}

/* The max-height + object-fit container.
   When --cl-max-height is unset (admin left max-height at 0), the CSS
   property falls back to `none`, which is exactly what we want — no cap. */
.cl-page-inner {
	position: relative;
	width: 100%;
	max-height: var(--cl-max-height, none);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cl-page-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--cl-max-height, none);
	object-fit: var(--cl-object-fit);
	transition: filter var(--cl-transition);
}

/* Locked images are the (already blurred) low-res preview file.
   We still apply a small CSS blur on top so the "lock state" is visible
   even with high-quality previews. */
.cl-locked-img {
	filter: blur(calc(var(--cl-blur-strength) / 3)) saturate(.9);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.cl-locked-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #14141c, #14141c 12px, #1a1a25 12px, #1a1a25 24px);
}

/* ========================
   Overlay — per page
   ======================== */

.cl-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cl-overlay-bg);
	color: var(--cl-overlay-text);
	padding: clamp(1.2rem, 4vw, 3rem);
	z-index: 5;
	animation: cl-fade-in 400ms ease both;
}

.cl-overlay-inner {
	max-width: 480px;
	width: 100%;
	text-align: center;
}

/* Partial modes: the overlay only covers a portion */
.cl-lock-mode-partial_bottom,
.cl-lock-mode-partial_top {
	background: linear-gradient(180deg, transparent 0%, rgba(20,20,28,.85) 30%, rgba(20,20,28,.95) 100%);
}
.cl-lock-mode-partial_top {
	background: linear-gradient(0deg, transparent 0%, rgba(20,20,28,.85) 30%, rgba(20,20,28,.95) 100%);
}

/* Bar mode: small bottom bar */
.cl-lock-mode-bar {
	background: rgba(20,20,28,.95);
	padding: .8rem 1rem;
	display: block;
	text-align: left;
}
.cl-lock-mode-bar .cl-overlay-inner {
	text-align: left;
	max-width: none;
}
.cl-lock-mode-bar .cl-lock-icon {
	width: 28px;
	height: 28px;
	margin: 0 .8rem 0 0;
	display: inline-flex;
	vertical-align: middle;
}
.cl-lock-mode-bar .cl-headline {
	font-size: 1rem;
	margin: 0;
	display: inline;
	margin-right: 1rem;
}
.cl-lock-mode-bar .cl-eyebrow,
.cl-lock-mode-bar .cl-description {
	display: none;
}
.cl-lock-mode-bar .cl-actions {
	display: inline-flex;
	margin: 0;
	vertical-align: middle;
	gap: .4rem;
	margin-left: .6rem;
}
.cl-lock-mode-bar .cl-pw-form {
	margin: .4rem 0 0;
}

/* Delay mode — overlay initially hidden, JS reveals after N seconds */
.cl-lock-mode-delay {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms ease;
}
.cl-lock-mode-delay.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* For locked pages in delay mode the preview is shown sharp until trigger */
.cl-item[data-lock-mode="delay"] .cl-locked-img {
	filter: none;
	pointer-events: auto;
	user-select: auto;
}

/* Overlay inner */
.cl-lock-icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	margin: 0 auto 1rem;
	color: var(--cl-overlay-text);
	opacity: .9;
}
.cl-lock-icon svg { width: 100%; height: 100%; }

.cl-eyebrow {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cl-eyebrow-color);
	margin-bottom: .6rem;
	font-weight: 600;
}

.cl-headline {
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.15;
	margin: 0 0 .6rem;
	color: var(--cl-overlay-text);
	font-weight: 700;
}

.cl-description {
	font-size: 1rem;
	line-height: 1.5;
	color: rgba(255,255,255,.82);
	margin: 0 0 1.4rem;
}

.cl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85rem 1.6rem;
	border-radius: var(--cl-btn-radius);
	font-weight: 600;
	font-size: .98rem;
	line-height: 1;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--cl-transition), background var(--cl-transition);
	font-family: inherit;
}
.cl-btn-primary { background: var(--cl-btn-bg); color: var(--cl-btn-fg); }
.cl-btn-primary:hover { background: var(--cl-btn-bg-hover); transform: translateY(-1px); }
.cl-btn-ghost { background: transparent; color: var(--cl-btn-ghost-fg); border: 1px solid rgba(255,255,255,.25); }
.cl-btn-ghost:hover { background: rgba(255,255,255,.08); }
.cl-btn-small { padding: .6rem 1rem; font-size: .9rem; }

.cl-pw-form {
	display: flex;
	flex-direction: row;
	gap: .5rem;
	max-width: 360px;
	margin: 1rem auto 0;
	animation: cl-slide-down 280ms ease;
}
.cl-pw-form[hidden] { display: none; }

.cl-pw-input {
	flex: 1;
	padding: .7rem 1rem;
	border-radius: var(--cl-btn-radius);
	border: 1px solid rgba(255,255,255,.25);
	background: rgba(0,0,0,.3);
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
}
.cl-pw-input::placeholder { color: rgba(255,255,255,.5); }
.cl-pw-input:focus { outline: 2px solid var(--cl-btn-bg); outline-offset: 2px; }

.cl-error {
	margin-top: .8rem;
	padding: .6rem 1rem;
	background: rgba(255, 80, 80, .15);
	color: #ffb0b0;
	border: 1px solid rgba(255, 80, 80, .4);
	border-radius: 8px;
	font-size: .9rem;
}

/* ========================
   Pager — bottom (default)
   ======================== */
.cl-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1rem;
	background: #fff;
	color: #1a1a1a;
	border-top: 1px solid rgba(0,0,0,.06);
	flex-wrap: wrap;
}
.cl-pager-top {
	border-top: 0;
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.cl-pager-btn {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	color: #333;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--cl-transition);
}
.cl-pager-btn:hover { background: #f4f4f4; }
.cl-pager-btn:disabled { opacity: .4; cursor: not-allowed; }

.cl-pager-thumbs {
	display: flex;
	gap: .35rem;
	overflow-x: auto;
	max-width: 60%;
	padding: 4px 0;
}

.cl-thumb {
	position: relative;
	width: var(--cl-thumb-size);
	height: var(--cl-thumb-size);
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid transparent;
	background: #eee;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-thumb.is-active { border-color: var(--cl-btn-bg); }
.cl-thumb-lock {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.4);
	color: #fff;
	font-size: 14px;
}

.cl-pager-counter {
	font-size: .85rem;
	color: #666;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ========================
   Pager — side
   ======================== */
.cl-pager-side {
	flex-direction: column;
	max-width: calc(var(--cl-thumb-size) + 28px);
	padding: .8rem .4rem;
	border-top: 0;
	border-left: 1px solid rgba(0,0,0,.06);
	align-self: stretch;
	background: #fff;
}
.cl-pager-side .cl-pager-thumbs {
	flex-direction: column;
	max-width: none;
	max-height: 480px;
	overflow-y: auto;
	overflow-x: hidden;
	gap: .35rem;
}
.cl-pager-side .cl-pager-counter {
	margin-top: .4rem;
	font-size: .78rem;
}

/* Hide bottom-positioned pager when side is in use */
.cl-pager-side ~ .cl-pager-bottom { display: none; }

/* ========================
   Presets
   ======================== */
.cl-preset-minimal {
	--cl-overlay-bg: rgba(255,255,255,.92);
	--cl-overlay-text: #1a1a1a;
	--cl-eyebrow-color: rgba(0,0,0,.55);
	--cl-btn-bg: #1a1a1a;
	--cl-btn-fg: #fff;
	--cl-btn-bg-hover: #333;
	--cl-btn-ghost-fg: rgba(0,0,0,.7);
}
.cl-preset-minimal .cl-pw-input {
	background: rgba(0,0,0,.05);
	border-color: rgba(0,0,0,.15);
	color: #1a1a1a;
}
.cl-preset-minimal .cl-pw-input::placeholder { color: rgba(0,0,0,.4); }
.cl-preset-minimal .cl-description { color: rgba(0,0,0,.7); }
.cl-preset-minimal .cl-btn-ghost { border-color: rgba(0,0,0,.15); }
.cl-preset-minimal .cl-btn-ghost:hover { background: rgba(0,0,0,.05); }

.cl-preset-bold .cl-overlay {
	background: linear-gradient(135deg, rgba(91,33,182,.92) 0%, rgba(219,39,119,.92) 100%);
}
.cl-preset-bold {
	--cl-btn-bg: #fff;
	--cl-btn-fg: #5b21b6;
}

.cl-preset-glassmorphism .cl-overlay {
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
}
.cl-preset-glassmorphism .cl-overlay-inner {
	background: rgba(20,20,28,.45);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 16px;
	padding: 2rem 1.5rem;
}

/* ========================
   Lightbox
   ======================== */
.cl-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 2rem;
	animation: cl-fade-in 250ms ease;
}
.cl-lightbox-img {
	display: block;
	cursor: zoom-in;
}
/* Lightbox modes */
.cl-lightbox-mode-contain .cl-lightbox-img {
	max-width: 95vw;
	max-height: 92vh;
	object-fit: contain;
}
.cl-lightbox-mode-cover .cl-lightbox-img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}
.cl-lightbox-mode-scroll {
	overflow: auto;
	padding: 1rem;
	align-items: flex-start;
	justify-content: flex-start;
}
.cl-lightbox-mode-scroll .cl-lightbox-img {
	max-width: none;
	max-height: none;
	width: 100%;
	height: auto;
}
.cl-lightbox-close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 0;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}
.cl-lightbox-close:hover { background: rgba(255,255,255,.22); }

/* Loupe */
.cl-loupe {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.6);
	box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.2);
	pointer-events: none;
	background-repeat: no-repeat;
	z-index: 4;
	opacity: 0;
	transition: opacity 200ms ease;
}
.cl-loupe.is-visible { opacity: 1; }

/* Animations */
@keyframes cl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.cl-item, .cl-overlay, .cl-page-img, .cl-btn, .cl-pw-form, .cl-lightbox, .cl-loupe {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	.cl-item .cl-locked-img,
	.cl-item .cl-locked-placeholder { visibility: hidden; }
	.cl-overlay { background: #fff; color: #000; }
	.cl-pager { display: none; }
}

@media (max-width: 700px) {
	.cl-stage { flex-direction: column; }
	.cl-pager-side {
		flex-direction: row;
		max-width: none;
		border-left: 0;
		border-top: 1px solid rgba(0,0,0,.06);
		padding: .5rem;
	}
	.cl-pager-side .cl-pager-thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.cl-actions { flex-direction: column; }
	.cl-actions .cl-btn { width: 100%; }
	.cl-pw-form { flex-direction: column; }
	.cl-pager-thumbs { max-width: 100%; }
	.cl-lock-mode-bar { flex-wrap: wrap; }
}

/* ========================
   Visual-Mode blur (no preview file — applied to original)
   ======================== */
.cl-visual-locked {
	filter: blur(var(--cl-blur-strength)) saturate(.85);
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.cl-protection-visual.is-unlocked .cl-visual-locked,
.cl-protection-visual .cl-page.is-free-page .cl-page-img {
	filter: none;
	pointer-events: auto;
}

/* ========================
   New Presets
   ======================== */
.cl-preset-dark {
	--cl-overlay-bg: rgba(8, 10, 18, .92);
	--cl-overlay-text: #f0f0f4;
	--cl-eyebrow-color: rgba(255,255,255,.5);
	--cl-btn-bg: #f0f0f4;
	--cl-btn-fg: #0a0a14;
	--cl-btn-bg-hover: #fff;
}

.cl-preset-soft {
	--cl-overlay-bg: rgba(255, 248, 240, .94);
	--cl-overlay-text: #3a2a1c;
	--cl-eyebrow-color: rgba(58,42,28,.6);
	--cl-btn-bg: #c98a4b;
	--cl-btn-fg: #fff;
	--cl-btn-bg-hover: #b87838;
	--cl-btn-ghost-fg: rgba(58,42,28,.75);
}
.cl-preset-soft .cl-description { color: rgba(58,42,28,.78); }
.cl-preset-soft .cl-pw-input {
	background: rgba(58,42,28,.05);
	border-color: rgba(58,42,28,.18);
	color: #3a2a1c;
}
.cl-preset-soft .cl-pw-input::placeholder { color: rgba(58,42,28,.4); }
.cl-preset-soft .cl-btn-ghost { border-color: rgba(58,42,28,.2); }

.cl-preset-neon {
	--cl-overlay-bg: rgba(5, 8, 22, .88);
	--cl-overlay-text: #ffffff;
	--cl-eyebrow-color: #00ffd1;
	--cl-btn-bg: #00ffd1;
	--cl-btn-fg: #050816;
	--cl-btn-bg-hover: #5cfff0;
}
.cl-preset-neon .cl-headline {
	text-shadow: 0 0 22px rgba(0,255,209,.4);
}
.cl-preset-neon .cl-btn-primary {
	box-shadow: 0 0 24px rgba(0,255,209,.45);
}
.cl-preset-neon .cl-pw-input {
	border-color: rgba(0,255,209,.4);
}

/* ========================
   Video frame
   ======================== */
.cl-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.cl-video-frame iframe,
.cl-video-frame video,
.cl-page-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: var(--cl-object-fit);
}
.cl-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ========================
   Audio frame
   ======================== */
.cl-audio-frame {
	position: relative;
	width: 100%;
	padding: 1.5rem;
	background: #14141c;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	min-height: 240px;
}
.cl-audio-poster {
	max-width: 200px;
	max-height: 200px;
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cl-audio-title {
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
}
.cl-audio-player {
	width: 100%;
	max-width: 480px;
}
.cl-audio-locked .cl-audio-player { display: none; }

/* ========================
   Embed frame
   ======================== */
.cl-embed-frame {
	position: relative;
	width: 100%;
	min-height: 100px;
}
.cl-embed-frame > iframe { max-width: 100%; }

/* Visual-locked wrapper applies blur + disable interactions */
.cl-visual-locked {
	position: relative;
}
.cl-visual-locked > iframe,
.cl-visual-locked > video,
.cl-visual-locked > audio {
	filter: blur(var(--cl-blur-strength)) saturate(.85);
	pointer-events: none;
}

/* Mobile touch targets */
@media (max-width: 700px) {
	.cl-pager-btn {
		width: 48px;
		height: 48px;
		font-size: 1.6rem;
	}
	.cl-thumb {
		width: max(48px, var(--cl-thumb-size));
		height: max(48px, var(--cl-thumb-size));
	}
	.cl-btn {
		padding: 1rem 1.6rem; /* bigger tap target on touch */
	}
	.cl-pw-input {
		padding: .9rem 1rem;
		font-size: 16px; /* prevents iOS zoom on focus */
	}
}
.cl-thumb-icon {
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* ========================
   oEmbed frame
   ======================== */
.cl-oembed-frame {
	position: relative;
	width: 100%;
}
.cl-oembed-frame > iframe,
.cl-oembed-frame > .wp-embedded-content {
	max-width: 100%;
	border: 0;
}
.cl-oembed-fallback {
	display: inline-block;
	padding: .9rem 1.4rem;
	background: var(--cl-btn-bg, #2271b1);
	color: var(--cl-btn-fg, #fff);
	border-radius: var(--cl-radius, 8px);
	text-decoration: none;
	font-weight: 500;
}
.cl-oembed-fallback:hover { opacity: .9; }

/* ========================
   Link / CTA card
   ======================== */
.cl-link-frame {
	position: relative;
	width: 100%;
	border-radius: var(--cl-radius, 12px);
	overflow: hidden;
}
.cl-link-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	color: inherit;
	text-decoration: none;
	border-radius: var(--cl-radius, 12px);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease;
	min-height: 280px;
}
.cl-link-card[href]:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.cl-link-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #f1f1f3;
}
.cl-link-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.cl-link-card[href]:hover .cl-link-card-media img {
	transform: scale(1.04);
}
.cl-link-card-body {
	padding: 1.4rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	flex: 1 1 auto;
}
.cl-link-card-title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	color: #1a1a22;
}
.cl-link-card-desc {
	font-size: 1rem;
	line-height: 1.5;
	color: #4a4a55;
	flex: 1 1 auto;
}
.cl-link-card-cta {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin-top: .4em;
	font-weight: 600;
	color: var(--cl-btn-bg, #2271b1);
	transition: gap 240ms ease;
}
.cl-link-card[href]:hover .cl-link-card-cta {
	gap: .9em;
}
.cl-link-card-arrow {
	display: inline-block;
	transition: transform 240ms ease;
}
.cl-link-card[href]:hover .cl-link-card-arrow {
	transform: translateX(3px);
}

/* Dark-preset link card */
.cl-preset-dark .cl-link-card,
.cl-preset-neon .cl-link-card {
	background: #1c1c26;
	color: #f0f0f4;
}
.cl-preset-dark .cl-link-card-title,
.cl-preset-neon .cl-link-card-title { color: #fff; }
.cl-preset-dark .cl-link-card-desc,
.cl-preset-neon .cl-link-card-desc { color: rgba(255,255,255,.7); }

/* Soft */
.cl-preset-soft .cl-link-card { background: #fff9f1; }

/* ========================
   List shortcode
   ======================== */
.cl-list {
	display: grid;
	gap: 1.2rem;
	width: 100%;
}
.cl-list-grid {
	grid-template-columns: repeat(var(--cl-list-cols, 3), 1fr);
}
.cl-list-list {
	grid-template-columns: 1fr;
}

@media (max-width: 900px) {
	.cl-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.cl-list-grid { grid-template-columns: 1fr; }
}

.cl-list-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid #e8e8eb;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.cl-list-card-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0,0,0,.1);
	border-color: #d8d8db;
}
.cl-list-list .cl-list-card {
	flex-direction: row;
	align-items: stretch;
	min-height: 96px;
}
.cl-list-card-thumb {
	position: relative;
	width: 100%;
	background: #f6f6f8;
	overflow: hidden;
	aspect-ratio: var(--cl-list-ratio, 16/9);
	flex-shrink: 0;
}
.cl-list-list .cl-list-card-thumb {
	width: 160px;
	aspect-ratio: auto;
}
.cl-list-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cl-list-card-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: #aaa;
}
.cl-list-card-lock {
	position: absolute;
	top: .6rem;
	left: .6rem;
	background: rgba(0,0,0,.75);
	color: #fff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
}
.cl-list-card-types {
	position: absolute;
	top: .6rem;
	right: .6rem;
	background: rgba(0,0,0,.75);
	color: #fff;
	padding: .2rem .55rem;
	border-radius: 12px;
	font-size: .8rem;
	letter-spacing: .04em;
}
.cl-list-card-body {
	padding: 1rem 1.2rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1 1 auto;
}
.cl-list-list .cl-list-card-body {
	padding: .9rem 1.1rem;
	justify-content: center;
}
.cl-list-card-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a22;
}
.cl-list-card-excerpt {
	margin: 0;
	font-size: .93rem;
	line-height: 1.45;
	color: #555;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.cl-list-card-meta {
	margin-top: .3rem;
	font-size: .82rem;
	color: #888;
}

/* ========================
   Pager — customizable button sizes
   ======================== */
.cl-pager-btn {
	width: var(--cl-pager-btn-size, 44px);
	height: var(--cl-pager-btn-size, 44px);
	font-size: calc(var(--cl-pager-btn-size, 44px) * 0.5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cl-pager-btn svg {
	width: 60%;
	height: 60%;
}

/* ========================
   Arrow overlay — floating prev/next directly over the page
   ======================== */
.cl-viewport {
	position: relative; /* anchor for the absolute arrows */
}
.cl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--cl-arrow-size, 56px);
	height: var(--cl-arrow-size, 56px);
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: #1a1a22;
	cursor: pointer;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: opacity 200ms ease, background 200ms ease, transform 200ms ease;
	opacity: 0;
	pointer-events: none;
}
.cl-arrow svg {
	width: 55%;
	height: 55%;
}
.cl-arrow-prev { left: clamp(8px, 2%, 24px); }
.cl-arrow-next { right: clamp(8px, 2%, 24px); }

/* Reveal on viewport hover (desktop) */
.cl-viewport:hover .cl-arrow,
.cl-viewport:focus-within .cl-arrow {
	opacity: 1;
	pointer-events: auto;
}
.cl-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}
.cl-arrow:active {
	transform: translateY(-50%) scale(0.96);
}
.cl-arrow:disabled {
	opacity: 0.35 !important;
	cursor: not-allowed;
	pointer-events: auto;
}

/* Touch devices: always visible */
@media (hover: none) {
	.cl-arrow {
		opacity: 0.9;
		pointer-events: auto;
	}
}

/* Dark presets: dark glass arrows */
.cl-preset-dark .cl-arrow,
.cl-preset-neon .cl-arrow {
	background: rgba(20, 20, 28, 0.85);
	color: #fff;
}
.cl-preset-dark .cl-arrow:hover,
.cl-preset-neon .cl-arrow:hover {
	background: rgba(20, 20, 28, 0.95);
}

/* ========================
   Teaser overlay — same as lock overlay but on free pages
   when the item has locked content further on.
   Shown to nudge the user toward unlocking before they hit the lock.
   ======================== */
.cl-page.has-teaser .cl-overlay-teaser {
	/* Don't interfere with viewing the free page itself */
	pointer-events: auto;
}
.cl-overlay-teaser .cl-pw-form {
	display: none; /* On free pages, only the primary CTA — no password input clutter */
}

/* Make sure overlays sit above content but below the floating arrows */
.cl-overlay { z-index: 5; }

/* ========================
   Lock-mode bar — make sure it actually shows on the page bottom
   ======================== */
.cl-lock-mode-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	background: var(--cl-overlay-bg, rgba(20,20,28,.95));
	color: var(--cl-overlay-text, #fff);
	padding: 0.9rem 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.cl-lock-mode-bar .cl-overlay-inner {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex: 1 1 auto;
	margin: 0;
	max-width: none;
	text-align: left;
}

/* ========================
   Empty thumb-icon (when no thumbnail available)
   ======================== */
.cl-thumb-icon {
	font-size: calc(var(--cl-thumb-size, 56px) * 0.4);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #999;
}

/* ========================
   Collapsible / Expandable pages
   ======================== */

/* Default state (collapsed): page-inner has max-height applied via JS,
   the cl-expand-fade fades the bottom, the button sits centered at the bottom.

   JS adds .is-overflowing only when scrollHeight > clientHeight — pages that
   fit don't get the fade or button visible. */

.cl-page.is-collapsible .cl-page-inner {
	transition: max-height 380ms cubic-bezier(.2, .8, .2, 1);
}

/* Fade-out gradient at the bottom — only visible when overflowing */
.cl-expand-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 110px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 65%, rgba(255,255,255,1) 100%);
	z-index: 3;
	opacity: 0;
	transition: opacity 280ms ease;
}

/* Expand-Button: pill below the fade */
.cl-expand-btn {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 4;
	display: none;
	align-items: center;
	gap: .45em;
	padding: .75em 1.4em;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .12);
	background: #fff;
	color: #1a1a22;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08);
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.cl-expand-btn:hover {
	background: #f7f7f8;
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .15), 0 3px 6px rgba(0, 0, 0, .1);
}
.cl-expand-btn:active {
	transform: translateX(-50%) translateY(0);
}
.cl-expand-icon {
	width: 16px;
	height: 16px;
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}

/* Only visible after JS confirms the content overflows */
.cl-page.is-overflowing .cl-expand-fade { opacity: 1; }
.cl-page.is-overflowing .cl-expand-btn  { display: inline-flex; }

/* Expanded state */
.cl-page.is-expanded .cl-expand-fade { opacity: 0; }
.cl-page.is-expanded .cl-expand-icon { transform: rotate(180deg); }

/* Dark presets: dark glass button */
.cl-preset-dark .cl-expand-btn,
.cl-preset-neon .cl-expand-btn {
	background: rgba(20, 20, 28, .92);
	color: #fff;
	border-color: rgba(255, 255, 255, .15);
}
.cl-preset-dark .cl-expand-btn:hover,
.cl-preset-neon .cl-expand-btn:hover {
	background: rgba(20, 20, 28, 1);
}
.cl-preset-dark .cl-expand-fade,
.cl-preset-neon .cl-expand-fade {
	background: linear-gradient(180deg, rgba(20,20,28,0) 0%, rgba(20,20,28,.85) 65%, rgba(20,20,28,1) 100%);
}

.cl-preset-soft .cl-expand-fade {
	background: linear-gradient(180deg, rgba(255,248,240,0) 0%, rgba(255,248,240,.92) 65%, rgba(255,248,240,1) 100%);
}

/* Locked pages with their overlay don't need the expand UI on top of the overlay */
.cl-page.is-locked-page .cl-expand-fade,
.cl-page.is-locked-page .cl-expand-btn { display: none !important; }

/* When teaser overlay sits at the bottom (partial_bottom / bar), nudge the
   button up so it doesn't collide with the overlay. */
.cl-page.has-teaser.is-overflowing .cl-expand-btn {
	bottom: 50%;
}

/* Mobile: bigger button for touch targets */
@media (max-width: 700px) {
	.cl-expand-btn {
		padding: .9em 1.6em;
		font-size: 1rem;
	}
}