/*
 * Live page (slug live): player, peach info band, archive grid, "all on YouTube" button.
 * Mirrors the live site's .live-player / .live-banner / gallery styling.
 */

body.is-page-live {
	--live-navy: var(--wp--preset--color--navy);
	--live-peach: var(--wp--preset--color--peach-light);
	/* UI-29: the palette's hairline and secondary grey, not near-twins of them. */
	--live-line: var(--wp--preset--color--line);
	--live-muted: var(--wp--preset--color--grey-text);
}

/* ---- Player + band ------------------------------------------------- */

body.is-page-live .live-player .betania-live {
	max-width: 1200px;
	padding-inline: 0;
}

/* As on the live site, the player and the band are as wide as the archive below (the pattern alone keeps 960px). */
body.is-page-live .live-player .betania-live > *,
body.is-page-live .live-player .betania-live__text > * {
	max-width: none;
}

body.is-page-live .live-player .betania-live__player {
	border-radius: 6px;
}

/* The live site shows the band as a peach card between the player and the archive. */
body.is-page-live .live-player .betania-live__band {
	align-items: center;
	gap: 1.25rem;
	margin-block: 1.75rem 2.75rem;
	padding: 1.375rem !important;
	border: 0;
	border-radius: 6px;
	background: var(--live-peach);
	color: var(--live-navy);
	text-align: left;
}

body.is-page-live .live-player .betania-live__text {
	flex: 1 1 18rem;
	min-width: 0;
}

/* UI-33 / UI-52: navy on peach, as everywhere else on the site; a 43-character sentence reads better
   in normal letters than in tracked capitals. */
body.is-page-live .live-player .betania-live__title {
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--live-navy);
}

/* UI-46: 15px text on a coloured band stays at 400 (as on live); the theme's body 300 washes out here. */
body.is-page-live .live-player .betania-live__text p + p {
	margin-top: 0.375rem;
	font-size: var(--wp--preset--font-size--note);
	font-weight: 400;
	color: var(--live-navy);
}

/* UI-31: on the peach band the button is the system default (white, navy line), since peach "Plin"
   on peach would vanish; hover/focus fills navy, as theme.json does everywhere else. */
body.is-page-live .live-player .betania-live__band .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

body.is-page-live .live-player .betania-live__band .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ---- Archive ------------------------------------------------------- */

body.is-page-live .live-archive {
	margin-block-start: 0;
}

body.is-page-live .live-archive__title {
	margin-block-end: 1.375rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--live-line);
	background: none;
	/* UI-49: the one section-title style (theme.json h2). */
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.12em;
	text-align: left;
	color: var(--live-navy);
}

body.is-page-live .live-archive__grid {
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0.875rem 1.75rem;
}

/* The list comes from betania-core ([betania_arhiva_video], YouTube RSS); a plain <ul>, so the grid is set here. */
body.is-page-live .live-archive__grid {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One link per video (thumbnail + title), as on the live site: 130 px thumbnail on phones, 150 px above. */
body.is-page-live .betania-yt-video__link {
	display: grid;
	grid-template-columns: 8.125rem minmax(0, 1fr);
	align-items: center;
	gap: 0.875rem;
	color: var(--live-navy);
	text-decoration: none;
}

/* The theme's ↗ goes after the "YouTube" label below the title instead (as on the live site). */
body.is-page-live .betania-yt-list .betania-yt-video__link::after {
	content: none;
}

body.is-page-live .betania-yt-video__link::before {
	content: "";
	grid-area: 1 / 1;
	place-self: center;
	z-index: 1;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgb(21 42 63 / 85%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3' /%3E%3C/svg%3E") 55% center / 16px no-repeat;
	pointer-events: none;
}

body.is-page-live .betania-yt-video__link:is(:hover, :focus-visible)::before {
	background-color: #f00;
}

body.is-page-live .betania-yt-video__link:focus-visible {
	outline: 3px solid var(--live-navy);
	outline-offset: 3px;
}

body.is-page-live .betania-yt-video__thumb {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	background: var(--live-navy);
}

body.is-page-live .betania-yt-video__title {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}

body.is-page-live .betania-yt-video__link:hover .betania-yt-video__title {
	text-decoration: underline;
	text-decoration-color: var(--live-navy); /* UI-26: no Mocheta gold outside Mocheta */
}

body.is-page-live .betania-yt-video__title::after {
	content: "YouTube";
	display: block;
	width: max-content;
	margin-top: 4px;
	padding-right: 15px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--live-muted);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10' /%3E %3Cpath d='M7 17 17 7' /%3E%3C/svg%3E") right center / 11px no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	body.is-page-live .betania-yt-video__link::before {
		transition: background-color 0.15s, transform 0.15s;
	}

	body.is-page-live .betania-yt-video__link:is(:hover, :focus-visible)::before {
		transform: scale(1.08);
	}
}

body.is-page-live .live-archive__all {
	margin-block-start: 1.625rem;
}

@media (min-width: 601px) {
	body.is-page-live .live-player .betania-live__band {
		padding: 1.5rem 1.875rem !important;
	}

	body.is-page-live .live-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.125rem 1.75rem;
	}

	body.is-page-live .betania-yt-video__link {
		grid-template-columns: 9.375rem minmax(0, 1fr);
	}
}

@media (min-width: 992px) {
	body.is-page-live .live-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ---- "Suntem live" next to the title (betania.js adds it while the channel is live) ---- */

/* Red, with a pulsing white dot, as the old site's .page-hero--live .live-now__btn. */
body.is-page-live .betania-live-now {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 44px;
	margin-block-start: 1.5rem;
	padding: 0.875rem 2.5rem;
	border: 0;
	border-radius: 5px;
	background: #d32f2f;
	box-shadow: 0 4px 18px rgb(0 0 0 / 30%);
	color: #fff;
	font: 600 0.8125rem/1.4 var(--wp--preset--font-family--dosis);
	letter-spacing: 3px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

body.is-page-live .betania-live-now::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

body.is-page-live .betania-live-now:is(:hover, :focus-visible) {
	background: #b71c1c;
}

body.is-page-live .betania-live-now:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

body.is-page-live .betania-live-now[hidden] {
	display: none;
}

@media (max-width: 767px) {
	body.is-page-live .betania-live-now {
		padding-inline: 1.625rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.is-page-live .betania-live-now::before {
		animation: betania-puls 1.4s ease-in-out infinite;
	}
}