/*
 * Episode screen — templates/single.html (prototype "05 Епизод").
 * Loaded on single posts only (inc/screens/episode.php) and in the editor.
 *
 * Markup contract (all core blocks, generated by scripts/gen-episode-news-templates.py):
 *   .hc-episode                 the band, 1200px
 *     .hc-crumbs                Начало › Предавания › [show button .hc-crumbs__show]
 *     .hc-player | figure.hc-episode__media   player, or the featured image when there is no video
 *     .hc-episode__cols
 *       .hc-episode__main       show button, H1, .hc-episode__meta, .hc-share, .hc-prose
 *       aside.hc-episode__aside .hc-episode__aside-head (H2 + .hc-autoplay), Query Loop, note
 *     .hc-episode__more         section head + rail
 */

/* Band: the old flex column of style.css §19 does not apply to block markup. */
.wp-block-group.hc-episode { padding-top: 0; }
.hc-episode > .wp-block-spacer + .wp-block-spacer { display: none; }

/* Breadcrumbs. */
.wp-block-group.hc-crumbs { gap: 8px; }
.hc-crumbs > * { margin: 0; }
.hc-crumbs p { font-size: 13px; font-weight: 600; line-height: 1.4; }
.hc-crumbs .wp-block-button .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--hc-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.hc-crumbs .wp-block-button .wp-block-button__link:hover { background: none; color: var(--hc-accent-ink); }

/* Featured image in place of the player. */
figure.hc-episode__media {
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: clamp(14px, 2vw, 22px);
	overflow: hidden;
	background: var(--hc-card);
}
figure.hc-episode__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two columns that wrap. */
.wp-block-group.hc-episode__cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.hc-episode__cols > * { margin-block: 0; }
.hc-episode__main > *,
.hc-episode__aside > * { margin-block: 0; }

/* Show name above the title: a bound Button that reads as a label. */
.wp-block-button.hc-episode__show .wp-block-button__link {
	min-height: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--hc-accent-ink);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
}
.wp-block-button.hc-episode__show .wp-block-button__link:hover { background: none; text-decoration: underline; }
/* No show: the bound button has no label. */
.wp-block-button:is(.hc-episode__show, .hc-crumbs__show) .wp-block-button__link:empty { display: none; }
.hc-crumbs:has(.wp-block-button__link:empty) > .hc-crumbs__sep:nth-last-child(2) { display: none; }

h1.hc-episode__title { text-transform: none; font-weight: 700; }

/* Date · duration. The dot belongs to the duration, so it goes when there is no video. */
.wp-block-group.hc-episode__meta { gap: 10px; }
.hc-episode__meta > p { margin: 0; }
.hc-episode__meta > p + p:not(:empty) { display: inline-flex; align-items: center; gap: 10px; }
.hc-episode__meta > p + p:not(:empty)::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

/* Action row. (.hc-btn--sm of style.css §4 is for the link, not the Button wrapper.) */
.wp-block-buttons.hc-share { gap: 8px; }
.hc-share .wp-block-button.hc-btn--sm { height: auto; padding: 0; }
.hc-share .wp-block-button.is-style-chip.hc-btn--sm .wp-block-button__link { min-height: 42px; padding: 0 16px; }
.hc-share button.wp-block-button__link { cursor: pointer; }

/* Description. */
.hc-episode__main > .wp-block-post-content.hc-prose { margin-top: 6px; }

/* "Следва". */
aside.hc-episode__aside.wp-block-group { display: flex; }
.hc-episode__aside:not(:has(.wp-block-post-template > li)) { display: none; }
.wp-block-group.hc-episode__aside-head { gap: 12px; }
.hc-episode__aside-head > * { margin: 0; }
h2.hc-episode__aside-title { font-size: 13px; letter-spacing: 0; line-height: 1.2; }

/* Autoplay switch: a Button block; the class sits on the <button> on the site, on the wrapper in the editor. */
.wp-block-button .wp-block-button__link.hc-autoplay,
.wp-block-button.hc-autoplay .wp-block-button__link {
	position: relative;
	min-height: 20px;
	padding: 0 44px 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hc-ink2);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
}
.wp-block-button__link.hc-autoplay:hover,
.wp-block-button.hc-autoplay .wp-block-button__link:hover { background: none; color: var(--hc-ink); }
.wp-block-button__link.hc-autoplay::before,
.wp-block-button.hc-autoplay .wp-block-button__link::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: var(--hc-line2);
	transition: background .15s;
}
.wp-block-button__link.hc-autoplay::after,
.wp-block-button.hc-autoplay .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: right .15s;
}
.wp-block-button__link.hc-autoplay[aria-pressed="true"]::before,
.wp-block-button.hc-autoplay .wp-block-button__link::before { background: var(--hc-yellow); }
.wp-block-button__link.hc-autoplay[aria-pressed="true"]::after,
.wp-block-button.hc-autoplay .wp-block-button__link::after { right: 2px; }
.wp-block-button__link.hc-autoplay[aria-pressed="false"]::before { background: var(--hc-line2); }
.wp-block-button__link.hc-autoplay[aria-pressed="false"]::after { right: 18px; }

/* Next episode card(s). */
.wp-block-post-template.hc-episode__nextlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hc-episode__nextlist > li { margin: 0; min-width: 0; }
.wp-block-group.hc-episode__next { position: relative; }
.hc-episode__next > *,
.hc-episode__next-body > * { margin-block: 0; }
.hc-episode__next-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
h3.hc-episode__next-title { font-family: var(--hc-font-body); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.hc-episode__next-title a { color: inherit; text-decoration: none; }
.hc-episode__next-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.hc-episode__next:hover .hc-episode__next-title a { color: var(--hc-accent-ink); }

/* Yellow play button over the thumbnail. */
.hc-thumb--play > a::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	background: var(--hc-yellow);
	z-index: 1;
}
.hc-thumb--play > a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -9px 0 0 -4px;
	border-left: 14px solid var(--hc-navy);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	z-index: 2;
}

/* The note is for autoplay on; hc.js writes the countdown into it. */
.hc-episode__aside:has(.hc-autoplay[aria-pressed="false"]) .hc-episode__next-note { display: none; }

/* "Още от тази поредица". */
.hc-episode__more > * { margin-block: 0; }
.hc-episode__more > * + * { margin-top: 16px; }
.hc-episode__more:not(:has(.wp-block-post-template > li)) { display: none; }
.hc-episode > .wp-block-spacer:has(+ .hc-episode__more:not(:has(.wp-block-post-template > li))) { display: none; }

@media (max-width: 959px) {
	.hc-episode__cols > .hc-episode__main,
	.hc-episode__cols > .hc-episode__aside { flex: 1 1 100%; }
}

/* Editor: loops have no current post there, keep everything visible. */
.editor-styles-wrapper .hc-episode__aside,
.editor-styles-wrapper .hc-episode__more { display: flex; }
.editor-styles-wrapper .hc-episode__more { display: block; }
.editor-styles-wrapper .hc-episode__next-title a::after { content: none; }