/*
 * Home (page 126) — prototype screen "01 Начало", built from core blocks.
 * Extends style.css sections 8–15 (same class names and values) for the markup
 * Gutenberg writes. The inside of hopetv/on-air and hopetv/shows-grid is styled
 * by their own files (on-air.css, shows.css).
 *
 * Markup contract (scripts/gen-home.py)
 *   .hc-home-hero > .hc-hero                         grid Group
 *       .wp-block-query.hc-hero__lead.hc-loop--hero   Query Loop, sticky episodes (slider, home.js):
 *           ul.hc-hero__lead-list > li > .hc-hero__main    Group: featured image, .hc-hero__tags,
 *                                                          .hc-hero__foot > .hc-hero__text
 *       .wp-block-hopetv-on-air                       dynamic block, variant hero
 *       .hc-hero__kids                                Group: label + title paragraph (link)
 *       .wp-block-query.hc-hero__next.hc-loop--hero-next   Query Loop, 1 episode:
 *           ul.hc-hero__next-list > li > .hc-hero__show    Group: featured image, title, show
 *   .hc-continue#prodalzhi                            .hc-section-head (…__clear) + empty .hc-rail, filled by hc.js
 *   .wp-block-hopetv-topics-grid.hc-grid--topics      dynamic block (a.hc-topic, style.css section 12)
 *   .hc-kids > figure.hc-kids__media + .hc-kids__body (intro, Query Loop ul.hc-kids__eps, buttons)
 *   .hc-newsfeat > .wp-block-query.hc-newsfeat__main + .wp-block-query.hc-newsfeat__side
 *
 * Picture tiles (.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) are Groups:
 * the featured image lies under the text, the title link covers the whole tile.
 */

/* ---------------------------------------------------------------
 * 0. Picture tiles
 * --------------------------------------------------------------- */
.wp-block-group:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) {
	position: relative;
	isolation: isolate;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	overflow: hidden;
	color: #fff;
}
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) > * { margin: 0; }
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) > .wp-block-post-featured-image { position: absolute; inset: 0; z-index: -1; margin: 0; }
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) > .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; }
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) > .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 18, 32, 0) 30%, rgba(10, 18, 32, .92) 100%);
	pointer-events: none;
}
:is(.hc-hero__main, .hc-hero__show, .hc-newsfeat__big) :is(h1, h2, h3, p) { color: inherit; }
:is(.hc-hero__title, .hc-hero__show-title, .hc-newsfeat__big-title) a,
:is(.hc-hero__title, .hc-hero__show-title, .hc-newsfeat__big-title) a:hover { color: inherit; text-decoration: none; }
:is(.hc-hero__title, .hc-hero__show-title, .hc-newsfeat__big-title) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Query Loop lists that hold one tile (or the slides) and must fill their box. */
ul:is(.hc-hero__lead-list, .hc-hero__next-list) { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: grid; }
:is(.hc-hero__lead-list, .hc-hero__next-list) > li { grid-area: 1 / 1; margin: 0; min-width: 0; display: flex; }

/* ---------------------------------------------------------------
 * 1. Hero bento
 * --------------------------------------------------------------- */
.wp-block-group.hc-home-hero { margin-top: 24px; }
.wp-block-group.hc-hero { padding: 0; }
.hc-hero > * { margin: 0; }

/* Main tile: the query block is the grid item. */
.hc-hero > .wp-block-query.hc-hero__lead { grid-column: span 8; grid-row: span 3; display: flex; background: var(--hc-card); }
.wp-block-group.hc-hero__main { justify-content: space-between; gap: 20px; padding: 20px 24px 24px 20px; }
.hc-hero__main > .wp-block-post-featured-image img { object-position: center 30%; }
.hc-hero__main .hc-tag:not(.hc-tag--glass) { color: var(--hc-navy); }
.hc-hero__main p.hc-hero__sub { color: rgba(255, 255, 255, .8); line-height: 1.4; }

.wp-block-group.hc-hero__tags { position: static; gap: 8px; }
.hc-hero__tags > * { margin: 0; }

.wp-block-group.hc-hero__foot {
	position: static;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-left: 4px;
}
.hc-hero__foot > *,
.hc-hero__text > * { margin: 0; }
/* Play button of the design. */
.hc-hero__foot::after {
	content: "";
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hc-yellow) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M25 21l18 11-18 11z%22 fill=%22%230a1220%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:is(h1, h2).hc-hero__title { margin: 0; }

/* Slider: slides share one grid cell and fade. Without home.js the first slide shows. */
.hc-hero__lead-list > li {
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity .9s var(--hc-ease), visibility 0s linear .9s;
}
.hc-hero__lead:not(.hc-slider--on) .hc-hero__lead-list > li:first-child,
.hc-hero__lead-list > li.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity .9s var(--hc-ease), visibility 0s;
}
/* Transition between slides: the pictures crossfade while the incoming one settles from a slight
 * zoom, and its tags / title / play button rise into place a moment later. */
.hc-slider--on .hc-hero__lead-list > li .wp-block-post-featured-image img {
	transform: scale(1.06);
	transition: transform 1.4s var(--hc-ease);
}
.hc-slider--on .hc-hero__lead-list > li.is-active .wp-block-post-featured-image img { transform: scale(1); }
.hc-slider--on .hc-hero__lead-list > li :is(.hc-hero__tags, .hc-hero__foot) {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s var(--hc-ease), transform .5s var(--hc-ease);
}
.hc-slider--on .hc-hero__lead-list > li.is-active :is(.hc-hero__tags, .hc-hero__foot) {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--hc-ease) .3s, transform .6s var(--hc-ease) .3s;
}
.hc-slider--on .hc-hero__lead-list > li.is-active .hc-hero__tags { transition-delay: .2s; }
.hc-hero > .wp-block-query.hc-hero__lead { overflow: hidden; }
/* Pictures of the other slides are fetched when home.js is about to show them. */
.hc-hero__lead-list > li:not(:first-child):not(.is-ready) .wp-block-post-featured-image img { display: none; }

.hc-slider__controls {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(10, 18, 32, .6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.hc-slider__controls button { border: 0; padding: 0; margin: 0; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.hc-slider__controls button:focus,
.hc-slider__controls button:focus-visible { outline: none; box-shadow: none; }
.hc-slider__btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent center / 16px 16px no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 5l7 7-7 7%22/%3E%3C/svg%3E");
	transition: background-color .15s;
}
.hc-slider__btn--prev { transform: scaleX(-1); }
.hc-slider__btn:hover,
.hc-slider__btn:focus-visible { background-color: rgba(255, 255, 255, .18); }
.hc-slider__dots { display: flex; align-items: center; gap: 2px; }
.hc-slider__dot { position: relative; width: 18px; height: 30px; background: none; }
.hc-slider__dot::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	transition: width .2s, background .2s;
}
.hc-slider__dot:hover::before,
.hc-slider__dot:focus-visible::before { background: #fff; }
.hc-slider__dot.is-active::before { width: 16px; left: -4px; right: -4px; background: var(--hc-yellow); }
.hc-slider__dot.is-active { width: 26px; }

/* Kids tile (promo link). */
.wp-block-group.hc-hero__kids { position: relative; box-sizing: border-box; }
.hc-hero__kids > * { margin: 0; }
p.hc-hero__kids-label,
p.hc-hero__kids-title { line-height: 1.15; }
.hc-hero__kids a,
.hc-hero__kids a:hover { color: inherit; text-decoration: none; }
.hc-hero__kids a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Small episode tile: the query block is the grid item. */
.hc-hero > .wp-block-query.hc-hero__next { grid-column: span 2; grid-row: span 1; display: flex; background: var(--hc-sheet); }
.wp-block-group.hc-hero__show { grid-column: auto; grid-row: auto; gap: 2px; padding: 0 10px 12px 14px; cursor: auto; }
.hc-hero__show::after { background: linear-gradient(180deg, transparent 35%, rgba(10, 18, 32, .92)); }
:is(h2, h3).hc-hero__show-title {
	position: static;
	margin: 0;
	font-family: var(--hc-font-body);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
p.hc-hero__show-sub {
	font-weight: 500;
	font-size: 12px;
	line-height: 1.25;
	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 36px between the hero and the first band (44px between bands). */
.wp-block-post-content > .hc-home-hero + .wp-block-group.hc-section,
.wp-block-post-content > .hc-home-hero + .hc-continue + .wp-block-group.hc-section { margin-top: 36px; }
.wp-block-post-content > .hc-home-hero + .hc-continue:has(.hc-rail > *) + .wp-block-group.hc-section { margin-top: var(--wp--preset--spacing--60); }

@media (max-width: 959px) {
	.wp-block-group.hc-home-hero { margin-top: 14px; }
	.hc-hero > .wp-block-query.hc-hero__lead { grid-column: span 2; grid-row: auto; border-radius: 22px; }
	.wp-block-group.hc-hero__main { height: 420px; padding: 16px 18px 18px 16px; border-radius: 0; }
	.hc-hero__main > .wp-block-post-featured-image img { object-position: 58% center; }
	.hc-hero__main::after { background: linear-gradient(180deg, rgba(10, 18, 32, 0) 30%, rgba(10, 18, 32, .95) 100%); }
	.hc-hero__tags .hc-tag--lg { padding: 6px 10px; font-size: 10px; }
	.wp-block-group.hc-hero__foot { gap: 14px; padding-left: 2px; }
	.hc-hero__foot::after { width: 52px; height: 52px; }
	.hc-slider__controls { top: 12px; right: 12px; }
	.hc-hero > .wp-block-query.hc-hero__next { display: none; }
	p.hc-hero__kids-label { font-size: 10px; }
	p.hc-hero__kids-title { font-size: 14px; }
}

/* ---------------------------------------------------------------
 * 2. Continue watching — hidden until hc.js has put cards in the rail
 * --------------------------------------------------------------- */
.hc-continue:not(:has(.hc-rail > *)) { display: none; }
.hc-continue .hc-rail > * { margin: 0; }
p.hc-continue__clear { margin: 0; line-height: 1.2; }
.hc-continue__clear a { color: inherit; text-decoration: none; }
.hc-continue__clear a:hover { color: var(--hc-ink); }

/* ---------------------------------------------------------------
 * 3. Topic tiles (block hopetv/topics-grid; tiles: style.css section 12)
 * --------------------------------------------------------------- */
.hc-topics.hc-grid--topics { margin-block: 0; }
.hc-topics .hc-topic__name,
.hc-topics .hc-topic__count { color: #fff; }
.hc-topics .hc-topic__count { color: rgba(255, 255, 255, .85); line-height: 1.3; }
.hc-topics__none {
	margin: 0;
	padding: 18px 16px;
	border-radius: 14px;
	background: var(--hc-card);
	color: var(--hc-ink2);
	font-size: 14px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
 * 4. Kids band
 * --------------------------------------------------------------- */
.wp-block-group.hc-kids { display: flex; flex-wrap: wrap; }
.hc-kids > *,
.hc-kids__body > *,
.hc-kids__intro > *,
.hc-kids__ep > * { margin: 0; }
figure.wp-block-image.hc-kids__media { margin: 0; overflow: hidden; }
.hc-kids :is(h2, h3, p) { color: inherit; }
.hc-kids p.hc-kids__label { color: var(--hc-yellow); line-height: 1.3; }
.hc-kids p.hc-kids__text { color: rgba(255, 255, 255, .88); }

ul.hc-kids__eps { list-style: none; margin: 0; padding: 0; }
.hc-kids__eps > li { margin: 0; min-width: 0; }
.wp-block-group.hc-kids__ep { position: relative; }
.hc-kids__ep > p.hc-thumb__tag { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 6px; pointer-events: none; }
h3.hc-kids__ep-title {
	margin: 0;
	font-family: var(--hc-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
}
.hc-kids__ep-title a,
.hc-kids__ep-title a:hover { color: inherit; text-decoration: none; }
.hc-kids__ep-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wp-block-buttons.hc-kids__actions { gap: 10px; margin-top: auto; }
/* style.css section 4 sizes `.hc-btn--md` itself; on a Button block the class sits on the wrapper. */
.hc-kids__actions > .wp-block-button { height: auto; padding: 0; }

/* ---------------------------------------------------------------
 * 5. News feature: one big tile + three rows (two Query Loops)
 * --------------------------------------------------------------- */
.wp-block-group.hc-newsfeat { display: flex; flex-wrap: wrap; gap: 14px; }
.hc-newsfeat > * { margin: 0; min-width: 0; display: flex; }
.hc-newsfeat > .hc-newsfeat__main { flex: 1.6 1 420px; }
.hc-newsfeat > .hc-newsfeat__side { flex: 1 1 300px; }
.hc-newsfeat :is(ul.hc-newsfeat__lead, ul.hc-newsfeat__list) {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.hc-newsfeat :is(.hc-newsfeat__lead, .hc-newsfeat__list) > li { flex: 1 1 auto; margin: 0; min-width: 0; display: flex; }
.hc-newsfeat :is(.hc-newsfeat__lead, .hc-newsfeat__list) > li > .wp-block-group { flex: 1 1 auto; min-width: 0; box-sizing: border-box; }

.wp-block-group.hc-newsfeat__big { padding: 20px 22px; }
.hc-newsfeat__big::after { background: linear-gradient(180deg, rgba(10, 18, 32, 0) 35%, rgba(10, 18, 32, .94)); }
.wp-block-group.hc-newsfeat__big-body { position: static; }
.hc-newsfeat__big-body > * { margin: 0; }
p.hc-newsfeat__big-date { line-height: 1.3; }
h3.hc-newsfeat__big-title { margin: 0; letter-spacing: -.01em; color: #fff; }

.hc-newscard--row > .hc-newscard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-newscard__body > * { margin: 0; }
.hc-newscard--row p.hc-newscard__date { font-size: 11px; line-height: 1.3; }
.hc-newscard--row h3.hc-newscard__title { line-height: 1.3; }
.hc-newscard--row .hc-thumb.wp-block-post-featured-image { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------
 * 6. Editor canvas: everything stays selectable and visible
 * --------------------------------------------------------------- */
.editor-styles-wrapper .hc-continue:not(:has(.hc-rail > *)) { display: block; }
.editor-styles-wrapper :is(.hc-hero__title, .hc-hero__show-title, .hc-newsfeat__big-title, .hc-kids__ep-title) a::after,
.editor-styles-wrapper .hc-hero__kids a::after { content: none; }
.editor-styles-wrapper .hc-hero__lead-list > li { opacity: 1; visibility: visible; }
.editor-styles-wrapper .hc-hero__lead-list > li :is(.hc-hero__tags, .hc-hero__foot) { opacity: 1; transform: none; }
.editor-styles-wrapper .hc-hero__lead-list > li .wp-block-post-featured-image img { transform: none; }
.editor-styles-wrapper .hc-hero__lead-list > li .wp-block-post-featured-image img { display: block !important; }
.editor-styles-wrapper .hc-hero > .wp-block-query.hc-hero__next { display: flex; }
/* In the editor the "on air" tile sits inside the block's own wrappers (block → preview → div → tile):
 * the outer wrapper takes the tile's place in the grid and the inner ones fill it. */
.editor-styles-wrapper .hc-hero > .wp-block { margin-block: 0 !important; }
.editor-styles-wrapper .hc-hero > .wp-block-hopetv-on-air { grid-column: span 4; grid-row: span 2; display: flex; min-width: 0; min-height: 0; overflow: hidden; border-radius: 20px; }
.editor-styles-wrapper .hc-hero > .wp-block-hopetv-on-air > div,
.editor-styles-wrapper .hc-hero > .wp-block-hopetv-on-air > div > div { display: flex; flex: 1 1 auto; min-width: 0; }
.editor-styles-wrapper .hc-hero > .wp-block-hopetv-on-air .hc-onair-block--hero { flex: 1 1 auto; height: auto; }
@media (max-width: 959px) {
	.editor-styles-wrapper .hc-hero > .wp-block-hopetv-on-air { grid-column: span 1; grid-row: auto; }
}