/*
 * Streaming library for Anarchapulco TV.
 * Everything is scoped under .avms-lib so it can't leak into the theme.
 */

.avms-lib {
	--lib-bg:      #0b0d10;
	--lib-panel:   #16191f;
	--lib-panel-2: #1e222a;
	--lib-ink:     #f2f4f7;
	--lib-muted:   #a3acb9;
	--lib-accent:  #ffd400;
	--lib-lock:    #ff6b4a;
	--lib-radius:  6px;
	--lib-card-w:  260px;
	--lib-gap:     10px;

	background: var(--lib-bg);
	color: var(--lib-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	padding: 0 0 64px;
	width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

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

.avms-lib img { display: block; max-width: 100%; }

.avms-lib__loading {
	padding: 80px 24px;
	text-align: center;
	color: var(--lib-muted);
}

/* ------------------------------------------------------------------ hero */

.avms-hero {
	position: relative;
	min-height: min(62vh, 560px);
	display: flex;
	align-items: flex-end;
	padding: 0 4vw 48px;
	margin-bottom: 8px;
	background-size: cover;
	background-position: center 30%;
}
.avms-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--lib-bg) 2%, rgba(11,13,16,.55) 45%, rgba(11,13,16,.15) 100%),
		linear-gradient(to right, rgba(11,13,16,.85) 0%, rgba(11,13,16,.1) 60%);
}
.avms-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.avms-hero__eyebrow {
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--lib-accent); margin: 0 0 10px;
}
.avms-hero__title {
	font-size: clamp(1.9rem, 4.4vw, 3.2rem);
	line-height: 1.05; margin: 0 0 14px; font-weight: 800; letter-spacing: -.02em;
}
.avms-hero__meta { color: var(--lib-muted); font-size: .92rem; margin: 0 0 14px; }
.avms-hero__desc {
	color: #d6dbe3; font-size: 1rem; line-height: 1.55; margin: 0 0 22px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.avms-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ----------------------------------------------------------------- button */

.avms-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px; border: 0; border-radius: 4px;
	font-size: .95rem; font-weight: 700; cursor: pointer;
	background: var(--lib-panel-2); color: var(--lib-ink);
	transition: background .15s, transform .08s;
	text-decoration: none; line-height: 1;
}
.avms-btn:hover { background: #2b313b; }
.avms-btn:active { transform: translateY(1px); }
.avms-btn--primary { background: var(--lib-ink); color: #0b0d10; }
.avms-btn--primary:hover { background: #fff; }
.avms-btn--lock { background: var(--lib-lock); color: #1a0b06; }
.avms-btn--lock:hover { background: #ff8467; }
.avms-btn--icon { padding: 11px 13px; border-radius: 50%; }

/* ------------------------------------------------------------------- rows */

.avms-row { margin: 0 0 34px; position: relative; }
.avms-row__head {
	display: flex; align-items: baseline; gap: 12px;
	padding: 0 4vw; margin: 0 0 10px;
}
.avms-row__title { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.avms-row__count { color: var(--lib-muted); font-size: .8rem; }

.avms-row__viewport { position: relative; }
.avms-row__track {
	display: flex; gap: var(--lib-gap);
	padding: 18px 4vw 30px;
	overflow-x: auto; overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.avms-row__track::-webkit-scrollbar { display: none; }

.avms-row__arrow {
	position: absolute; top: 0; bottom: 26px; width: 4vw; min-width: 44px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(11,13,16,.72); color: #fff; border: 0; cursor: pointer;
	font-size: 26px; line-height: 1; z-index: 3; opacity: 0; transition: opacity .18s;
}
.avms-row:hover .avms-row__arrow:not([disabled]) { opacity: 1; }
.avms-row__arrow[disabled] { display: none; }
.avms-row__arrow--prev { left: 0; }
.avms-row__arrow--next { right: 0; }

/* ------------------------------------------------------------------ cards */

.avms-card {
	position: relative; flex: 0 0 var(--lib-card-w); width: var(--lib-card-w);
	background: var(--lib-panel); border-radius: var(--lib-radius);
	cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
	transform-origin: center center;
}
.avms-card__thumb {
	position: relative; aspect-ratio: 16 / 10; overflow: hidden;
	border-radius: var(--lib-radius); background: #000;
}
.avms-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.avms-card__fallback {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: #3a4150; font-size: 13px; text-align: center; padding: 12px;
}

/* Detail stays hidden until hover - the whole point of the redesign.
   It overlays the lower part of the poster rather than sitting below the card:
   the row is a horizontal scroller, so overflow-y is clipped and anything
   rendered past the card's own box gets cut off. */
.avms-card__reveal {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	border-radius: 0 0 var(--lib-radius) var(--lib-radius);
	background: linear-gradient(to top, rgba(11,13,16,.97) 62%, rgba(11,13,16,0));
	padding: 26px 12px 12px;
	transform: translateY(101%);
	opacity: 0;
	transition: transform .2s ease, opacity .15s ease;
	pointer-events: none;
}
.avms-card:hover,
.avms-card:focus-within { transform: scale(1.06); z-index: 5; box-shadow: 0 14px 34px rgba(0,0,0,.65); }
.avms-card:hover .avms-card__reveal,
.avms-card:focus-within .avms-card__reveal {
	transform: translateY(0); opacity: 1; pointer-events: auto;
}

.avms-card__title {
	font-size: .92rem; font-weight: 700; line-height: 1.25; margin: 0 0 6px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.avms-card__sub { font-size: .78rem; color: var(--lib-muted); margin: 0 0 9px; }
.avms-card__row { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; }

/* progress */
.avms-card__bar {
	position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
	background: rgba(255,255,255,.22);
}
.avms-card__bar span { display: block; height: 100%; background: var(--lib-accent); }

/* lock */
.avms-card__lock {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	background: rgba(0,0,0,.72); color: var(--lib-lock);
	border-radius: 3px; padding: 4px 8px; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
.avms-card--locked .avms-card__thumb img { filter: grayscale(.55) brightness(.62); }

.avms-card__badge {
	position: absolute; bottom: 8px; left: 8px; z-index: 2;
	background: rgba(0,0,0,.72); color: #fff; border-radius: 3px;
	padding: 3px 7px; font-size: 11px; font-weight: 600;
}

/* ------------------------------------------------------------------ modal */

.avms-modal { position: fixed; inset: 0; z-index: 99999; }
.avms-modal[hidden] { display: none; }
.avms-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.avms-modal__panel {
	position: relative; width: min(960px, 94vw); max-height: 92vh; overflow-y: auto;
	margin: 4vh auto; background: var(--lib-panel); border-radius: 8px;
	box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.avms-modal__x {
	position: absolute; top: 12px; right: 14px; z-index: 4;
	width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: rgba(0,0,0,.65); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.avms-modal__x:hover { background: #000; }

.avms-modal__stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px 8px 0 0; overflow: hidden; }
.avms-modal__stage > * { width: 100%; height: 100%; }
.avms-modal__stage img { object-fit: cover; }
.avms-modal__stage smartvideo,
.avms-modal__stage video,
.avms-modal__stage .video-js { width: 100%; height: 100%; }

.avms-modal__content { padding: 22px 26px 30px; }
.avms-modal__title { font-size: 1.55rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -.02em; }
.avms-modal__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.avms-chip {
	background: var(--lib-panel-2); color: var(--lib-muted);
	border-radius: 3px; padding: 4px 9px; font-size: .76rem;
}
.avms-modal__desc { color: #d6dbe3; line-height: 1.6; margin: 0 0 18px; }
.avms-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }

.avms-speakers { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px; }
.avms-speaker { display: flex; align-items: center; gap: 9px; }
.avms-speaker img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.avms-speaker span { font-size: .86rem; }

.avms-parts { border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; }
.avms-parts__h { font-size: .95rem; font-weight: 700; margin: 0 0 10px; }
.avms-part {
	display: flex; align-items: center; gap: 12px; width: 100%;
	background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
	color: var(--lib-ink); padding: 11px 6px; cursor: pointer; text-align: left;
	font-size: .9rem; font-family: inherit;
}
.avms-part:hover { background: rgba(255,255,255,.05); }
.avms-part[disabled] { cursor: not-allowed; opacity: .5; }
.avms-part__n {
	flex: 0 0 26px; height: 26px; border-radius: 50%;
	background: var(--lib-panel-2); display: flex; align-items: center; justify-content: center;
	font-size: .75rem; color: var(--lib-muted);
}
.avms-part.is-playing .avms-part__n { background: var(--lib-accent); color: #0b0d10; font-weight: 700; }
.avms-part__label { flex: 1 1 auto; }
.avms-part__bar { flex: 0 0 90px; height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; }
.avms-part__bar span { display: block; height: 100%; background: var(--lib-accent); border-radius: 2px; }

.avms-note { color: var(--lib-muted); font-size: .84rem; margin: 10px 0 0; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.avms-lib { --lib-card-w: 210px; }
	.avms-hero { min-height: 46vh; padding-bottom: 32px; }
}
@media (max-width: 600px) {
	.avms-lib { --lib-card-w: 168px; }
	.avms-card:hover, .avms-card:focus-within { transform: none; box-shadow: none; }
	/* On touch there is no hover, so never hide detail behind one. */
	.avms-card__reveal { position: static; max-height: none; opacity: 1; padding: 10px; pointer-events: auto; }
	.avms-modal__content { padding: 18px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.avms-lib *, .avms-lib *::before, .avms-lib *::after {
		transition: none !important; scroll-behavior: auto !important;
	}
}