/* The Cherry Martini: homepage feed and brand touches.
   Layout: a phone-width column of full-screen cards, centered like a device on wide screens.
   Everything is scoped under .cm-feed so the rest of the YouVideo theme is left alone. */

:root {
	--cm-ink: #12050A;
	--cm-bg: #0A0307;
	--cm-cherry: #E0194F;
	--cm-blush: #FFE3E8;
	--cm-olive: #8FA33A;
	--cm-muted: #C9A3AE;
	--cm-display: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
	--cm-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Hide the standard YouVideo chrome on the feed page. */
body.cm-feed { background: var(--cm-bg); color: var(--cm-blush); overflow: hidden; }
body.cm-feed #masthead,
body.cm-feed .menu-modal,
body.cm-feed #site-bottom,
body.cm-feed #back-top { display: none; }
body.cm-feed #page,
body.cm-feed #content.site-content {
	width: 100%; max-width: none; margin: 0; padding: 0; background: transparent;
}
body.cm-feed #content.site-content > .clear { margin: 0; padding: 0; }

.cm-stage { display: block; }
/* Pinned to the screen so no parent wrapper, padding or admin bar can push it off-center or past the bottom. */
.cm-app {
	position: fixed; inset: 0; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto;
	overflow: hidden; background: var(--cm-ink); font-family: var(--cm-body);
	font-size: 15px; line-height: 1.4; color: var(--cm-blush);
}
.admin-bar .cm-app { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .cm-app { top: 46px; }
}
@media (min-width: 520px) {
	.cm-app {
		max-height: 860px; margin: auto; border-radius: 32px;
		box-shadow: 0 0 0 1px rgba(255,227,232,.1), 0 30px 90px rgba(224,25,79,.22);
	}
}
.cm-app *, .cm-app *::before, .cm-app *::after { box-sizing: border-box; }
.cm-app a { color: inherit; text-decoration: none; }

/* top bar */
.cm-top {
	position: absolute; inset: 0 0 auto 0; z-index: 5; padding: 14px 16px 22px;
	background: linear-gradient(to bottom, rgba(10,3,7,.78), rgba(10,3,7,0));
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.cm-brand { display: inline-flex; align-items: center; gap: 8px; }
.cm-brand b { font: 800 1.2rem/1 var(--cm-display); letter-spacing: -.01em; }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cm-cherry); display: inline-block; }
.cm-tag { font-size: .78rem; color: var(--cm-muted); }
.cm-chips { flex-basis: 100%; display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.cm-chips::-webkit-scrollbar { display: none; }
.cm-chip {
	flex: none; font: 700 .78rem var(--cm-body); letter-spacing: .02em;
	background: rgba(255,227,232,.08); border: 1px solid rgba(255,227,232,.28);
	padding: 7px 14px; border-radius: 999px;
}
.cm-chip.is-on { background: var(--cm-blush); color: var(--cm-ink); border-color: var(--cm-blush); }

/* feed */
.cm-scroll {
	height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
	overscroll-behavior: contain; background: var(--cm-ink);
}
.cm-scroll::-webkit-scrollbar { display: none; }
.cm-reel {
	position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always;
	background: linear-gradient(165deg, var(--b, #E0194F) 0%, var(--a, #7B0B2A) 55%, var(--cm-ink) 100%);
}
.cm-reel::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none;
	background: linear-gradient(to top, rgba(10,3,7,.88), rgba(10,3,7,0));
}
/* Pictures and videos fit inside the screen instead of being zoomed to fill it.
   A blurred copy of the thumbnail fills any leftover space behind them. */
.cm-bgblur {
	position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px);
	object-fit: cover; filter: blur(26px) brightness(.55) saturate(1.1);
}
.cm-vid, .cm-poster {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent;
}
.cm-vid { cursor: pointer; }
.cm-center {
	position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center;
	align-items: flex-start; gap: 18px; padding: 104px 78px 160px 16px;
}
.cm-ptitle {
	margin: 0; font: 800 clamp(2.3rem, 12.5vw, 3.5rem)/.94 var(--cm-display); letter-spacing: -.025em;
	text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; color: var(--cm-blush);
	text-shadow: 0 2px 24px rgba(10,3,7,.45);
}
.cm-play {
	display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
	background: var(--cm-blush); color: var(--cm-ink); box-shadow: 0 10px 30px rgba(10,3,7,.4);
}
.cm-app .cm-play { color: var(--cm-ink); }
.cm-play svg { width: 26px; height: 26px; margin-left: 3px; display: block; }

/* caption */
.cm-cap { position: absolute; z-index: 2; left: 16px; right: 78px; bottom: 22px; }
.cm-handle { margin: 0 0 4px; font-weight: 700; }
.cm-title { margin: 0 0 4px; font: 700 1.05rem/1.25 var(--cm-display); letter-spacing: -.01em; }
.cm-meta { margin: 0; font-size: .84rem; color: var(--cm-muted); }
.cm-hint { margin: 8px 0 0; font-size: .8rem; opacity: .8; }

/* action rail */
.cm-rail {
	position: absolute; z-index: 3; right: 8px; bottom: 22px; display: flex; flex-direction: column;
	align-items: center; gap: 14px;
}
.cm-act {
	display: grid; justify-items: center; gap: 3px; min-width: 52px; min-height: 52px; padding: 0;
	background: none; border: 0; color: var(--cm-blush); cursor: pointer; font: 700 .68rem var(--cm-body);
}
.cm-act svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 6px rgba(10,3,7,.5)); }

/* ad card */
.cm-ad {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: 90px 16px 40px; background: var(--cm-ink);
}
.cm-ad::after { display: none; }
.cm-sponsored {
	font: 700 .72rem var(--cm-body); letter-spacing: .12em; text-transform: uppercase; color: var(--cm-muted);
}
.cm-ad-body { width: 100%; max-width: 100%; overflow: hidden; text-align: center; }
.cm-ad-body img, .cm-ad-body iframe, .cm-ad-body ins { max-width: 100%; height: auto; }
.cm-ad-title { margin: 0 0 8px; font: 700 1rem var(--cm-display); }

/* end of page */
.cm-end {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
	text-align: center; padding: 104px 24px 48px; background: var(--cm-ink);
}
.cm-end::after { display: none; }
.cm-end h2 { margin: 0; font: 800 clamp(1.9rem, 9vw, 2.6rem)/1 var(--cm-display); letter-spacing: -.02em; text-wrap: balance; color: var(--cm-blush); }
.cm-end p { margin: 0; color: var(--cm-muted); }
.cm-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cm-btn {
	display: inline-block; background: var(--cm-cherry); color: #fff !important; font: 700 .95rem var(--cm-body);
	padding: 13px 22px; border-radius: 999px;
}
.cm-btn.cm-ghost { background: transparent; border: 1px solid rgba(255,227,232,.4); color: var(--cm-blush) !important; }

.cm-toast {
	position: absolute; left: 50%; bottom: 96px; z-index: 9; transform: translate(-50%, 8px);
	background: var(--cm-blush); color: var(--cm-ink); font-weight: 700; font-size: .85rem;
	padding: 9px 16px; border-radius: 999px; opacity: 0; pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.cm-toast.on { opacity: 1; transform: translate(-50%, 0); }

.cm-app a:focus-visible, .cm-app button:focus-visible { outline: 3px solid var(--cm-olive); outline-offset: 2px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
	.cm-toast { transition: none; }
	.cm-scroll { scroll-behavior: auto; }
}