/*
 * Block hopetv/on-air — variants hero, tiles, list, now.
 * Extends style.css section 11 (.hc-onair*, .hc-hero__onair*) for the markup the block prints.
 *
 * Markup contract
 *   div.hc-onair-block.hc-onair-block--{hero|tiles|list|now}[data-onair-count]
 *     [data-onair-item][data-start][data-end]      one per programme; spare ones carry [hidden]
 *       .is-now / .is-past                         set by PHP, kept current by hc.js
 *       [data-progress-bar]                        width kept current by hc.js
 */

.hc-onair-block { min-width: 0; box-sizing: border-box; }
.hc-onair-block [data-onair-item][hidden] { display: none !important; }
.hc-onair-block a { text-decoration: none; }

.hc-onair-block__empty {
	margin: 0;
	padding: 18px 16px;
	border-radius: 14px;
	background: var(--hc-card);
	color: var(--hc-ink2);
	font-size: 14px;
	line-height: 1.5;
}
.hc-onair-block--list .hc-onair-block__empty { background: var(--hc-card2); border-radius: 12px; }
.hc-onair-block--now .hc-onair-block__empty { padding: 0; background: none; border-radius: 0; }

/* ---------------------------------------------------------------
 * hero — the blue "now on air" tile of the home bento
 * --------------------------------------------------------------- */
.hc-onair-block--hero {
	grid-column: span 4;
	grid-row: span 2;
	position: relative;
	display: flex;
	height: 100%;
	min-height: 118px;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--hc-blue);
	color: #fff;
}
.hc-onair-block--hero > .hc-hero__onair {
	flex: 1 1 auto;
	grid-column: auto;
	grid-row: auto;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	border-radius: 0;
	gap: 12px;
}
.hc-onair-block--hero .hc-hero__onair,
.hc-onair-block--hero .hc-hero__onair:hover { color: #fff; }
.hc-hero__onair > img { display: block; max-width: none; }
.hc-hero__onair-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 77, 162, .2), rgba(11, 77, 162, .95));
}
.hc-hero__onair-top { min-width: 0; }
.hc-hero__onair-top .hc-onair-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-hero__onair-body { min-width: 0; }
.hc-hero__onair-title { text-wrap: pretty; }
.hc-hero__onair-bar > span { width: 0; }
.hc-hero__onair-cta { display: none; font-size: 11px; color: rgba(255, 255, 255, .85); }

/* "Сега в ефир" while it runs (or has just ended), "Следва" before it starts. */
.hc-onair-when--next { display: none; }
[data-onair-item]:not(.is-now):not(.is-past) .hc-onair-when--now { display: none; }
[data-onair-item]:not(.is-now):not(.is-past) .hc-onair-when--next { display: inline; }
[data-onair-item]:not(.is-now):not(.is-past) .hc-dot { animation: none; background: rgba(255, 255, 255, .6); }

.hc-hero__onair--empty .hc-hero__onair-show { color: rgba(255, 255, 255, .85); }

@media (max-width: 959px) {
	.hc-onair-block--hero { grid-column: span 1; grid-row: auto; border-radius: 18px; }
	.hc-onair-block--hero > .hc-hero__onair { min-height: 118px; padding: 14px; gap: 6px; border-radius: 0; }
	.hc-hero__onair-top { gap: 6px; font-size: 10px; }
	.hc-hero__onair-top .hc-dot { width: 6px; height: 6px; }
	.hc-onair-when__wide { display: none; }
	.hc-hero__onair-body { gap: 6px; }
	.hc-hero__onair-title { line-height: 1.15; -webkit-line-clamp: 2; }
	.hc-hero__onair-show,
	.hc-hero__onair-from,
	.hc-hero__onair-to { display: none; }
	.hc-hero__onair-bar { height: 3px; }
	.hc-hero__onair-cta { display: block; }
}

/* ---------------------------------------------------------------
 * tiles — "Днес в ефир"
 * --------------------------------------------------------------- */
.hc-onair-block--tiles.hc-onair-grid { margin-block: 0; }
.hc-onair-block--tiles .hc-onair { box-sizing: border-box; }
.hc-onair-block--tiles .hc-onair__body { flex: 1 1 auto; }
.hc-onair__label--now { display: none; }
.hc-onair.is-now .hc-onair__label--now { display: block; }
.hc-onair.is-now .hc-onair__label--show { display: none; }
.hc-onair__label--show:empty { display: none; }
.hc-onair__prog {
	display: none;
	height: 3px;
	margin-top: 3px;
	border-radius: 2px;
	background: var(--hc-line2);
	overflow: hidden;
}
.hc-onair.is-now .hc-onair__prog { display: block; }
.hc-onair__prog > span { display: block; height: 100%; border-radius: 2px; background: var(--hc-yellow); width: 0; }
:root[data-theme="light"] .hc-onair__prog > span { background: var(--hc-blue); }

/* ---------------------------------------------------------------
 * list — "Сега и след това"
 * --------------------------------------------------------------- */
.hc-onair-block--list { display: flex; flex-direction: column; gap: 10px; }
.hc-onair-block--list .hc-row--compact { align-items: center; }
.hc-onair-block--list .hc-row--compact:hover { background: var(--hc-card2); }
.hc-onair-block--list .hc-row.is-now { background: var(--hc-card2); }
.hc-onair-block--list .hc-row__meta { font-size: 11px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.hc-onair-block--list .hc-row.is-now .hc-row__meta { color: var(--hc-red-text); }
.hc-onair-block--list .hc-row__body { gap: 2px; }
.hc-onair-block__sega { display: none; }
.hc-row.is-now .hc-onair-block__sega { display: inline; }
.hc-onair-block--list .hc-thumb__progress { display: none; height: 3px; }
.hc-onair-block--list .hc-row.is-now .hc-thumb__progress { display: block; }

/* ---------------------------------------------------------------
 * now — the current programme in words
 * --------------------------------------------------------------- */
.hc-onair-block--now .hc-live__info > * { margin: 0; }
.hc-onair-block--now .hc-live__now-title { color: var(--hc-ink); text-wrap: pretty; }

/* Editor canvas: previews are static, show them as on the site. */
.editor-styles-wrapper .hc-onair-block--hero { max-width: 420px; min-height: 300px; }