/* Creator Content Library — inherits the theme font. Override the variables (or use the
   Elementor widget's Style tab) to match the brand. Breakpoints match Elementor: 1024 / 767. */
.ccl {
	--ccl-accent: #1f2937;
	--ccl-accent-text: #fff;
	--ccl-surface: #fff;
	--ccl-muted: #6b7280;
	--ccl-border: #e5e7eb;
	--ccl-radius: 14px;
	--ccl-gap: 22px;
	--ccl-row-gap: var(--ccl-gap);
	--ccl-row-items: 3;
	--ccl-row-items-tablet: 3;
	--ccl-row-items-mobile: 1;
	--ccl-arrow-size: 40px;
	--ccl-gutter: calc(var(--ccl-arrow-size) + 10px);
	--ccl-columns: 3;
	--ccl-columns-tablet: 2;
	--ccl-columns-mobile: 1;
	--ccl-play-size: 54px;
	--ccl-youtube: #e62117;
	--ccl-shorts: #ff4e45;
	--ccl-instagram: #c13584;
	--ccl-exclusive: #7c5cff;
	color: inherit;
}
.ccl *, .ccl *::before, .ccl *::after { box-sizing: border-box; }

.ccl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ---------- Controls ---------- */
.ccl-controls {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 12px; margin: 0 0 var(--ccl-gap);
}
.ccl-search {
	position: relative; flex: 1 1 260px; max-width: 420px;
	color: var(--ccl-muted);
}
.ccl-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ccl .ccl-search__input,
.ccl .ccl-topic {
	width: 100%; height: 44px; margin: 0;
	padding: 0 14px 0 40px;
	border: 1px solid var(--ccl-border); border-radius: 999px;
	background: var(--ccl-surface); color: inherit;
	font: inherit; font-size: 15px; line-height: 1;
	box-shadow: none;
}
.ccl .ccl-topic { width: auto; max-width: 100%; padding: 0 36px 0 16px; cursor: pointer; }
.ccl .ccl-search__input:focus,
.ccl .ccl-topic:focus { outline: 2px solid var(--ccl-accent); outline-offset: 1px; }

.ccl-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.ccl .ccl-tab {
	height: 38px; padding: 0 16px; margin: 0;
	border: 1px solid var(--ccl-border); border-radius: 999px;
	background: var(--ccl-surface); color: inherit;
	font: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
	cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.ccl .ccl-tab:hover { border-color: var(--ccl-accent); }
.ccl .ccl-tab[aria-pressed="true"] { background: var(--ccl-accent); border-color: var(--ccl-accent); color: var(--ccl-accent-text); }
.ccl .ccl-tab:focus-visible { outline: 2px solid var(--ccl-accent); outline-offset: 2px; }

/* Underline tab style */
.ccl--tabs-underline .ccl-tabs { gap: 4px 22px; border-bottom: 1px solid var(--ccl-border); flex-basis: 100%; order: 2; }
.ccl.ccl--tabs-underline .ccl-tab {
	height: auto; padding: 10px 2px; border: 0; border-radius: 0;
	background: none; color: var(--ccl-muted);
	box-shadow: inset 0 -2px 0 transparent;
}
.ccl.ccl--tabs-underline .ccl-tab:hover { color: inherit; }
.ccl.ccl--tabs-underline .ccl-tab[aria-pressed="true"] { background: none; color: inherit; box-shadow: inset 0 -2px 0 var(--ccl-accent); }

/* ---------- Grid ---------- */
.ccl-grid {
	display: grid; gap: var(--ccl-gap);
	grid-template-columns: repeat(var(--ccl-columns), minmax(0, 1fr));
	transition: opacity .2s;
}
.ccl[aria-busy="true"] .ccl-grid { opacity: .45; }
.ccl-grid-title { margin: calc(var(--ccl-gap) * 1.2) 0 var(--ccl-row-gap); font-size: 20px; line-height: 1.3; }

/* ---------- Cards ---------- */
.ccl-card { display: flex; flex-direction: column; min-width: 0; }
.ccl .ccl-card__media {
	position: relative; display: block; width: 100%;
	aspect-ratio: 16 / 9; padding: 0; margin: 0;
	border: 0; border-radius: var(--ccl-radius); overflow: hidden;
	background: #111; cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Theme-proofing: many themes give every <button> a fixed height (e.g. 56px), a line-height,
   a min-width or uppercase text. Without this the thumbnail button gets squashed into a
   short pill and ignores its 16:9 / 9:16 shape. */
.ccl .ccl-card .ccl-card__media {
	height: auto; min-height: 0; max-height: none; min-width: 0; max-width: none;
	line-height: normal; text-transform: none; letter-spacing: normal; text-indent: 0; float: none;
}
.ccl .ccl-tab, .ccl .ccl-more, .ccl .ccl-row__btn, .ccl .ccl-modal__close, .ccl .ccl-modal__nav button,
.ccl-modal .ccl-modal__close, .ccl-modal .ccl-modal__nav button, .ccl-single .ccl-facade, .ccl-player .ccl-facade {
	min-height: 0; max-height: none; min-width: 0; max-width: none;
	text-transform: none; letter-spacing: normal; text-indent: 0; float: none;
}
.ccl .ccl-more { height: auto; }
.ccl .ccl-card__media:hover { transform: translateY(var(--ccl-hover-lift, -2px)); box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.ccl .ccl-card__media:focus-visible { outline: 3px solid var(--ccl-accent); outline-offset: 3px; }
/* Thumbnails: when the video's shape matches the card it fills the card; when it doesn't
   (a vertical video in a wide card, or a wide video in a tall card) the whole thumbnail is
   shown, uncropped, over a blurred copy. The blurred copy is display:none otherwise, so
   the browser never downloads or paints it. */
.ccl-card__img, .ccl-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccl-card__bg { display: none; filter: blur(14px) brightness(.7); transform: scale(1.15); }
.ccl-card--vertical .ccl-card__bg { display: block; }
.ccl-card--vertical .ccl-card__img { object-fit: contain; }

.ccl-badge, .ccl-duration {
	position: absolute; z-index: 1;
	padding: 4px 9px; border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
	color: #fff; background: rgba(0,0,0,.65);
}
.ccl-badge { top: 10px; left: 10px; }
.ccl-badge--youtube { background: var(--ccl-youtube); }
.ccl-badge--shorts { background: var(--ccl-shorts); }
.ccl-badge--instagram { background: var(--ccl-instagram); }
.ccl-badge--exclusive { background: var(--ccl-exclusive); }
.ccl-duration { right: 10px; bottom: 10px; font-variant-numeric: tabular-nums; }

.ccl-play {
	position: absolute; z-index: 1; top: 50%; left: 50%;
	display: grid; place-items: center;
	width: var(--ccl-play-size); height: var(--ccl-play-size);
	border-radius: 50%; color: #111; background: rgba(255,255,255,.92);
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}
.ccl-play svg { width: 40%; height: 40%; }
.ccl-card__media:hover .ccl-play { transform: translate(-50%, -50%) scale(1.08); }
.ccl-card.is-locked .ccl-card__img { filter: brightness(.6); }

.ccl-card__body { padding: 12px 2px 0; }
.ccl .ccl-card__title { margin: 0 0 4px; font-size: 16px; line-height: 1.35; font-weight: 600; }
.ccl .ccl-card__title a {
	color: inherit; text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccl .ccl-card__title a:hover { text-decoration: underline; }
.ccl .ccl-card__meta { margin: 0; font-size: 13px; color: var(--ccl-muted); }
.ccl-members { color: var(--ccl-exclusive); font-weight: 600; }

/* Small cards (4+ columns, narrow layouts): scale badges and play button to the card itself. */
.ccl .ccl-card__media { container-type: inline-size; }
@container (max-width: 220px) {
	.ccl-badge, .ccl-duration { font-size: 10px; padding: 2px 6px; }
	.ccl-badge { top: 6px; left: 6px; }
	.ccl-duration { right: 6px; bottom: 6px; }
	.ccl-play { width: min(var(--ccl-play-size), 38px); height: min(var(--ccl-play-size), 38px); }
}
@container (max-width: 160px) {
	.ccl-card--horizontal .ccl-badge { display: none; }
}

/* Tall 9:16 cards (Shorts / Reels views, or shape="tall"). */
.ccl.ccl--tall .ccl-grid .ccl-card__media,
.ccl .ccl-row--tall .ccl-card__media { aspect-ratio: 9 / 16; }
.ccl--tall .ccl-grid .ccl-card--vertical .ccl-card__bg,
.ccl-row--tall .ccl-card--vertical .ccl-card__bg { display: none; }
.ccl--tall .ccl-grid .ccl-card--vertical .ccl-card__img,
.ccl-row--tall .ccl-card--vertical .ccl-card__img { object-fit: cover; }
.ccl--tall .ccl-grid .ccl-card--horizontal .ccl-card__bg,
.ccl-row--tall .ccl-card--horizontal .ccl-card__bg { display: block; }
.ccl--tall .ccl-grid .ccl-card--horizontal .ccl-card__img,
.ccl-row--tall .ccl-card--horizontal .ccl-card__img { object-fit: contain; }

/* ---------- Rows ---------- */
/* A fixed number of videos is visible; the arrows (outside the first and last card) page
   through the rest. No scrollbar. Touch screens can also swipe. */
.ccl-rows { display: grid; gap: calc(var(--ccl-gap) * 1.4); margin: 0 0 var(--ccl-gap); }
.ccl-rows[hidden], .ccl-grid-title[hidden] { display: none; }
.ccl-row { min-width: 0; }
.ccl .ccl-row__title { margin: 0 0 12px; padding: 0 var(--ccl-gutter); font-size: 20px; line-height: 1.3; }
.ccl-row__body { position: relative; padding: 0 var(--ccl-gutter); }
/* When rows are shown, everything else lines up with the row arrows' edges. */
.ccl--has-rows > .ccl-controls,
.ccl--has-rows > .ccl-grid-title,
.ccl--has-rows > .ccl-grid,
.ccl--has-rows > .ccl-empty,
.ccl--has-rows > .ccl-more-wrap { padding-left: var(--ccl-gutter); padding-right: var(--ccl-gutter); }
.ccl-row__track {
	--ccl-visible: var(--ccl-row-items);
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--ccl-visible) - 1) * var(--ccl-row-gap)) / var(--ccl-visible));
	gap: var(--ccl-row-gap);
	overflow: hidden;
	scroll-behavior: smooth;
	padding: 4px 0 6px; margin: -4px 0 0;
}
.ccl .ccl-row__btn {
	position: absolute; z-index: 2; top: var(--ccl-arrow-top, 40%);
	display: grid; place-items: center;
	width: var(--ccl-arrow-size); height: var(--ccl-arrow-size); padding: 0; margin: 0;
	transform: translateY(-50%);
	border: 1px solid var(--ccl-border); border-radius: 50%;
	background: var(--ccl-surface); color: inherit; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	transition: border-color .15s, background .15s, color .15s, opacity .15s;
}
.ccl .ccl-row__btn[hidden] { display: grid; visibility: hidden; opacity: 0; }
.ccl .ccl-row__btn:hover { border-color: var(--ccl-accent); background: var(--ccl-accent); color: var(--ccl-accent-text); }
.ccl .ccl-row__btn:focus-visible { outline: 2px solid var(--ccl-accent); outline-offset: 2px; }
.ccl-row__prev { left: 0; }
.ccl-row__next { right: 0; }
.ccl-row .ccl-card__title { font-size: 15px; }
@media (pointer: coarse) {
	.ccl-row__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
	.ccl-row__track::-webkit-scrollbar { display: none; }
	.ccl-row__track > .ccl-card { scroll-snap-align: start; }
}

/* ---------- Load more / buttons ---------- */
.ccl-empty { padding: 40px 0; text-align: center; color: var(--ccl-muted); }
.ccl-more-wrap { margin-top: calc(var(--ccl-gap) * 1.5); text-align: center; }
.ccl .ccl-more, .ccl-btn {
	display: inline-block; padding: 12px 26px; margin: 0;
	border: 0; border-radius: 999px;
	background: var(--ccl-accent, #1f2937); color: var(--ccl-accent-text, #fff);
	font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background .15s, color .15s;
}
.ccl .ccl-more:disabled { opacity: .6; cursor: progress; }

/* ---------- Player popup ---------- */
/* Look comes from Settings → Video popup (CSS variables) or the Elementor widget. */
.ccl-modal, .ccl-single__card {
	--ccl-pop-r: var(--ccl-pop-radius, var(--ccl-radius, 14px));
	background: var(--ccl-pop-bg, #0b0b0c); color: var(--ccl-pop-text, #f3f4f6);
	font-family: var(--ccl-pop-font, inherit);
	border-radius: var(--ccl-pop-r);
}
.ccl-modal {
	width: min(var(--ccl-pop-width, 1100px), calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
	padding: 0; border: 0; overflow: visible;
}
.ccl-modal::backdrop { background: var(--ccl-pop-overlay, rgba(8,8,10,.88)); }
.ccl-modal--vertical { width: min(420px, calc(100vw - 32px)); }
.ccl-modal--locked { width: min(520px, calc(100vw - 32px)); }
.ccl-modal__close {
	position: absolute; top: -14px; right: -14px; z-index: 2;
	width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%;
	background: #fff; color: #111; font-size: 24px; line-height: 38px; cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.ccl-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--ccl-pop-r) var(--ccl-pop-r) 0 0; overflow: hidden; contain: strict; }
html.ccl-modal-open { overflow: hidden; }
.ccl-modal--vertical .ccl-modal__frame { aspect-ratio: 9 / 16; max-height: calc(100dvh - 170px); margin: 0 auto; }
.ccl-modal__frame iframe, .ccl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ccl-modal__info { padding: 14px 18px 18px; }
.ccl-modal .ccl-modal__title, .ccl-single .ccl-modal__title { margin: 0 0 6px; font-family: inherit; font-size: var(--ccl-pop-title-size, 18px); font-weight: 600; line-height: 1.35; color: inherit; letter-spacing: normal; }
.ccl-modal__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font-size: 14px; }
.ccl-modal__links a { color: var(--ccl-pop-link, #c7d2fe); }

/* A thumbnail sits under the player so something shows instantly while it loads. */
.ccl-modal__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Next / previous video (▲ ▼): just outside the popup's right edge, vertically centered. */
.ccl-modal__nav {
	position: absolute; top: 50%; left: calc(100% + 18px); z-index: 4;
	display: flex; flex-direction: column; align-items: center; gap: 12px; width: 56px;
	transform: translateY(-50%);
}
.ccl-modal__more {
	display: block; width: 56px; margin: 2px 0 0; padding: 0;
	color: #fff; font-family: var(--ccl-pop-font, inherit); font-size: 10px; font-weight: 600; line-height: 1.2;
	text-align: center; letter-spacing: .02em; text-transform: none;
	text-shadow: 0 1px 3px rgba(0,0,0,.85); pointer-events: none;
}
.ccl-modal__nav[hidden] { display: none; }
.ccl-modal .ccl-modal__nav button {
	display: grid; place-items: center; width: 46px; height: 46px; padding: 0; margin: 0;
	border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
	background: rgba(20,20,22,.72); color: #fff; cursor: pointer;
	transition: background .15s, opacity .15s;
}
.ccl-modal .ccl-modal__nav button:hover:not(:disabled) { background: rgba(255,255,255,.95); color: #111; }
.ccl-modal .ccl-modal__nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ccl-modal .ccl-modal__nav button:disabled { opacity: .3; cursor: default; }
.ccl-modal--has-nav { width: min(var(--ccl-pop-width, 1100px), calc(100vw - 200px)); }
.ccl-modal--has-nav.ccl-modal--vertical { width: min(420px, calc(100vw - 200px)); }
.ccl-modal--has-nav.ccl-modal--locked { width: min(520px, calc(100vw - 200px)); }

/* Full-screen player on phones: a vertical feed, one video per screen, swipe up/down. */
.ccl-modal.ccl-modal--full {
	--ccl-pop-r: 0px;
	position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0;
	border-radius: 0; background: #000; overflow: hidden;
}
/* One-time "Click to Unmute" hint on iPhone/iPad, pointing up at the player's sound button. */
.ccl-hint {
	position: absolute; top: 14%; left: 50%; z-index: 3; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 6px 12px 7px; border-radius: 10px; background: rgba(0,0,0,.72); color: #fff;
	font-family: var(--ccl-pop-font, inherit); font-size: 10pt; font-weight: 600; line-height: 1.2; white-space: nowrap;
	pointer-events: none; animation: ccl-hint-in .3s ease-out both;
}
.ccl-hint svg { width: 18px; height: 18px; animation: ccl-hint-bob 1s ease-in-out infinite; }
.ccl-hint.is-leaving { opacity: 0; transition: opacity .4s; }
@keyframes ccl-hint-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ccl-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ccl-hint, .ccl-hint svg { animation: none; } }

.ccl-modal--full::backdrop { background: #000; }
.ccl-modal--full .ccl-modal__body { height: 100%; }
.ccl-feed {
	height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
	scroll-snap-type: y mandatory; scrollbar-width: none;
}
.ccl-feed::-webkit-scrollbar { display: none; }
.ccl-slide {
	position: relative; height: 100%; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	scroll-snap-align: start; scroll-snap-stop: always;
	background: var(--ccl-pop-bg, #000); color: var(--ccl-pop-text, #f3f4f6); font-family: var(--ccl-pop-font, inherit);
}
.ccl-slide .ccl-modal__frame { flex: none; width: 100%; max-height: none; border-radius: 0; }
.ccl-slide--vertical .ccl-modal__frame { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; margin: 0; }
.ccl-slide .ccl-modal__info { flex: none; padding: 12px 16px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.ccl-slide .ccl-modal__title { margin: 0 0 4px; font-size: var(--ccl-pop-title-size, 16px); font-weight: 600; line-height: 1.35; }
.ccl-slide .ccl-locked__panel--modal img { max-height: 45dvh; }
.ccl-modal--full .ccl-modal__close {
	/* 5% lower than the corner, so it doesn't cover the player's own buttons. */
	position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 5vh); top: calc(max(10px, env(safe-area-inset-top)) + 5dvh); right: 10px; z-index: 5;
	width: 40px; height: 40px; line-height: 40px; font-size: 26px;
	background: rgba(0,0,0,.55); color: #fff; box-shadow: none; border: 1px solid rgba(255,255,255,.25);
}
/* Bottom-right: clear of the video's own controls, next to the title. */
/* Phones: over the video on the right edge of the screen, vertically centered. */
.ccl-modal--full .ccl-modal__nav { position: fixed; top: 50%; left: auto; right: 6px; gap: 10px; transform: translateY(-50%); }
.ccl-modal:focus { outline: none; }
.ccl-modal--full .ccl-modal__nav button { width: 40px; height: 40px; background: rgba(0,0,0,.45); }

/* Locked */
.ccl-locked__panel { display: grid; justify-items: center; gap: 10px; padding: 28px; text-align: center; }
.ccl-locked__panel strong { font-size: 18px; }
.ccl-locked__panel p { margin: 0; opacity: .85; }
.ccl-locked__panel--modal img { width: 100%; max-height: 40dvh; object-fit: cover; border-radius: calc(var(--ccl-radius) - 4px); filter: brightness(.55); }
.ccl-link { color: inherit; font-size: 14px; }

/* ---------- Video page: player card (matches the popup) ---------- */
.ccl-single-page { padding: clamp(20px, 4vw, 48px) 16px; }
.ccl-single { --ccl-radius: 14px; width: min(var(--ccl-pop-width, 1100px), 100%); margin: 0 auto; }
.ccl-single--vertical { width: min(420px, 100%); }
.ccl-single__card { overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.ccl-single--vertical .ccl-modal__frame { aspect-ratio: 9 / 16; max-height: 85dvh; }
.ccl-single .ccl-modal__frame .ccl-facade img { object-fit: cover; }
.ccl-single--vertical .ccl-modal__frame .ccl-facade img { object-fit: contain; }
.ccl-single .ccl-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ccl-single .ccl-modal__info { padding: 16px 20px 20px; }
.ccl-single .ccl-modal__title { font-size: var(--ccl-pop-title-size, 22px); }
.ccl-single__meta { margin: 0 0 8px; font-size: 14px; opacity: .75; }
.ccl-single .ccl-modal__links { margin: 0; }
.ccl-single__desc { margin: 22px 4px 0; font-size: 16px; line-height: 1.6; }
.ccl-single__desc > :first-child { margin-top: 0; }
.ccl-single__back { margin: 22px 4px 0; font-size: 15px; }
.ccl-single__back a { text-decoration: none; font-weight: 600; }
.ccl-single .ccl-locked__panel--modal { padding: 24px; }

/* ---------- Single video page: theme layout option ---------- */
.ccl-player { position: relative; margin: 0 0 1.5em; border-radius: var(--ccl-radius, 14px); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.ccl-player--vertical { aspect-ratio: 9 / 16; width: min(100%, 420px); max-height: 85dvh; margin-left: auto; margin-right: auto; }
.ccl-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.ccl-facade img { width: 100%; height: 100%; object-fit: cover; }
.ccl-player--vertical .ccl-facade img { object-fit: contain; }
.ccl-facade .ccl-play { --ccl-play-size: 64px; }
.ccl-locked { display: grid; place-items: center; background-size: cover; background-position: center; color: #fff; }
.ccl-locked::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.ccl-locked .ccl-locked__panel { position: relative; }
.ccl-source { font-size: 14px; }

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
	.ccl-grid { grid-template-columns: repeat(var(--ccl-columns-tablet), minmax(0, 1fr)); }
	.ccl-row__track { --ccl-visible: var(--ccl-row-items-tablet); }
}

/* ---------- Phone (≤767px) ---------- */
@media (max-width: 767px) {
	.ccl { --ccl-gap: 16px; --ccl-play-size: 46px; --ccl-arrow-size: 32px; --ccl-gutter: calc(var(--ccl-arrow-size) + 6px); }
	.ccl-row__track { --ccl-visible: var(--ccl-row-items-mobile); }
	.ccl-row--tall .ccl-row__track { --ccl-visible: max(var(--ccl-row-items-mobile), 2); }
	.ccl-grid { grid-template-columns: repeat(var(--ccl-columns-mobile), minmax(0, 1fr)); }
	.ccl-controls { gap: 10px; }
	.ccl-search { flex-basis: 100%; max-width: none; }
	.ccl .ccl-topic { width: 100%; }
	/* Tabs scroll sideways instead of wrapping. */
	.ccl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
	.ccl-tabs::-webkit-scrollbar { display: none; }
	.ccl .ccl-tab { flex: 0 0 auto; }
	.ccl .ccl-card__title { font-size: 15px; }
	.ccl .ccl-row__title, .ccl-grid-title { font-size: 18px; }
	.ccl-badge, .ccl-duration { font-size: 11px; padding: 3px 8px; }
	/* Keep the close button on screen. */
	.ccl-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
	.ccl-modal--vertical { width: min(420px, calc(100vw - 20px)); }
	/* Popup on phones (full screen switched off): arrows sit over the right edge. */
	.ccl-modal--has-nav, .ccl-modal--has-nav.ccl-modal--vertical, .ccl-modal--has-nav.ccl-modal--locked { width: calc(100vw - 20px); }
	.ccl-modal__nav { position: fixed; left: auto; right: 6px; gap: 8px; }
	.ccl-modal .ccl-modal__nav button { width: 38px; height: 38px; }
	.ccl-modal__close { top: 8px; right: 8px; width: 34px; height: 34px; line-height: 34px; font-size: 22px; }
	.ccl-modal--vertical .ccl-modal__frame { max-height: calc(100dvh - 150px); }
	.ccl-modal__info { padding: 12px 14px 14px; }
	.ccl-modal__title { font-size: 16px; }
}
/* Two narrow columns on small phones: tighten the card text. */
@media (max-width: 420px) {
	.ccl-badge { top: 6px; left: 6px; }
	.ccl-duration { right: 6px; bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccl *, .ccl-modal * { transition: none !important; scroll-behavior: auto !important; }
}