/*
 * Panel transmisji — all styles scoped under .ptr-panel.
 * The Herald theme has no CSS custom properties to inherit, so the plugin
 * defines its own tokens. Fonts (Inter / Open Sans) are already enqueued by
 * the theme from Google Fonts.
 */
.ptr-panel {
	--ptr-accent: #ED6C30;
	--ptr-accent-dark: #d55a20;
	--ptr-peach: #FDE8DC;
	--ptr-dark: #1E1E2F;
	--ptr-text: #333;
	--ptr-muted: #999;
	--ptr-border: #eee;

	container-type: inline-size;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ptr-text);
}

.ptr-panel [hidden] {
	display: none !important;
}

/* Herald renders no-sidebar pages in a centered col-lg-9 (~980px), while the
   header spans the full .container (logo to nav, ~1320px). When the panel is
   on such a page, stretch its column to the header width — same idea as the
   ranking plugin's column override, scoped via :has so other pages keep their
   normal layout. Old browsers without :has simply keep the narrower column. */
.herald-no-sid .col-mod-single:has(.ptr-panel) {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Layout: player left, scrollable list right ------------------------- */

.ptr-panel__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
}

/* 16:9 via padding hack only — combining it with aspect-ratio would double
   the height in modern browsers. */
.ptr-player__frame {
	position: relative;
	padding-top: 56.25%;
	background: #000;
}

.ptr-player__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The Herald theme runs fitVids on post content, which wraps the player
   iframe in .fluid-width-video-wrapper carrying its own padding-top hack —
   stacked below our frame's padding it doubles the height and shows a black
   band above the video. Make the wrapper fill the frame instead (inline
   padding from fitVids needs the !important). */
.ptr-player__frame .fluid-width-video-wrapper {
	position: absolute;
	inset: 0;
	padding: 0 !important;
	margin: 0 !important;
}

.ptr-listcol {
	position: relative;
}

/* The list always matches the player height and scrolls internally.
   Selectors from here down are scoped under .ptr-panel purely to outrank
   Herald's content styles: the theme ships `.herald-entry-content ul
   {margin:0 0 3rem}` and `.entry-content ul li {margin-bottom:1rem}`, both
   (0,1,2), which beat a bare (0,1,0) class of ours. Unscoped, the ul's 3rem
   bottom margin shortened this absolutely-positioned list by 30px (it stopped
   short of the player), and the li margin inserted 10px BELOW each row's
   separator — which is what made the gaps above and below the lines uneven. */
.ptr-panel .ptr-list {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Talk list ---------------------------------------------------------- */

.ptr-panel .ptr-list__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptr-list__item {
	display: block;
	width: 100%;
	position: relative;
	margin: 0;
	/* Even padding by request. Note it does not render as an even gap: the
	   time's line box carries ~5px of leading above its caps against ~3px
	   below the title's baseline, so the visible space above the row runs
	   ~2px larger than below (17 vs 15 measured). 10px on top evens the two
	   out optically if that ever needs revisiting. */
	padding: 12px 40px 12px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ptr-border);
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.ptr-list__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}

.ptr-list__time {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ptr-dark);
	line-height: 1.4;
}

.ptr-live-badge {
	display: inline-block;
	background: var(--ptr-accent);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 2px;
	text-transform: uppercase;
}

.ptr-list__title {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ptr-muted);
	transition: color .2s ease;
}

.ptr-list__item:hover .ptr-list__title,
.ptr-list__item.is-active .ptr-list__title {
	color: var(--ptr-text);
}

.ptr-list__play {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ptr-peach);
	color: var(--ptr-accent);
	transition: background .2s ease, color .2s ease;
}

.ptr-list__play svg {
	display: block;
	margin-left: 1px;
}

/* Active talk shows a pause glyph while its video is actually playing
   (driven by YouTube player state events in panel.js). */
.ptr-list__play .ptr-icon-pause {
	display: none;
	margin-left: 0;
}

.ptr-list__item.is-playing .ptr-icon-play {
	display: none;
}

.ptr-list__item.is-playing .ptr-icon-pause {
	display: block;
}

.ptr-list__item:hover .ptr-list__play,
.ptr-list__item.is-active .ptr-list__play {
	background: var(--ptr-accent);
	color: #fff;
}

/* --- Action buttons ----------------------------------------------------- */

/* Geometry measured off the client mockup (scaled to the real panel width):
   both buttons share one width (~234px), sit ~72px apart and are centered
   under the PLAYER column, not under the whole panel — hence the padding
   compensating for the talk-list column (300px + 24px gap). */
.ptr-actions {
	display: flex;
	justify-content: center;
	margin-top: 24px;
	padding-right: 324px;
}

/* The inline-grid is sized intrinsically, so its 1fr columns all resolve to
   the widest label — both buttons always come out identical even when one
   label outgrows the 234px minimum. (1fr on the block-level container would
   instead stretch the buttons across all free width.) */
.ptr-actions__group {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 72px;
	max-width: 100%;
}

.ptr-btn {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--ptr-accent);
	border-radius: 2px;
	color: var(--ptr-accent);
	min-width: 234px;
	padding: 10px 28px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ptr-btn:hover {
	border-color: var(--ptr-accent-dark);
	color: var(--ptr-accent-dark);
}

.ptr-btn.is-open,
.ptr-btn.is-open:hover {
	background: var(--ptr-accent);
	color: #fff;
}

.ptr-btn.is-open:hover {
	background: var(--ptr-accent-dark);
	border-color: var(--ptr-accent-dark);
}

/* --- Collapsible Slido sections ----------------------------------------- */
/* The widget's inside is a cross-origin iframe we cannot style — the card
   frame around it is ours, so give it the panel's visual language (thin
   border, small radius, orange top accent echoing the buttons). */

.ptr-section {
	position: relative;
	margin-top: 24px;
	scroll-margin-top: 90px;	/* smooth-scroll target clears the sticky header */
	/* Like the buttons: the mockup aligns the Slido sections to the PLAYER
	   column, not to the whole panel — subtract the talk-list column. */
	width: calc(100% - 324px);
	background: #fff;
	border: 1px solid var(--ptr-border);
	border-top: 2px solid var(--ptr-accent);
	border-radius: 0 0 4px 4px;
	overflow: hidden;
}

.ptr-section__qa-iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Slido can take a moment to boot — until the iframe fires its load event the
   section shows a spinner instead of a blank white card (panel.js toggles the
   is-loading class). */
.ptr-section iframe {
	transition: opacity .25s ease;
}

.ptr-section.is-loading iframe {
	opacity: 0;
}

.ptr-section.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--ptr-peach);
	border-top-color: var(--ptr-accent);
	border-radius: 50%;
	animation: ptr-spin .8s linear infinite;
}

@keyframes ptr-spin {
	to {
		transform: rotate(360deg);
	}
}

/* "Hide Slido top menu" (admin checkbox): the bars cannot be removed for
   real (cross-origin iframe), so they are cropped out of view — the section
   clips (overflow:hidden) an iframe shifted up by the height of Slido's
   event bar + Q&A/Polls tabs. The SECTION keeps the same width as every
   other section (the player column); only the IFRAME is narrowed to 680px
   (so Slido uses its compact layout, no side menu) and centered inside the
   card. The bars are hidden by clip-path — not by the section's overflow —
   so the section's top padding survives as breathing room above the
   question field (the overflow crop would swallow the padding: a pulled-up
   iframe always fills right from the clip edge). The negative margin removes
   the layout space of the clipped strip; panel.js reads it and adds it to
   the iframe height, so no visible space is lost. */
.ptr-section--qa.is-cropped {
	/* Measured inside the real embed at the 680px iframe width: Slido's
	   compact menu bar occupies 0–64px, then its own 17px of breathing room,
	   then the question card at 81px. Cutting 68px takes the bar plus a 4px
	   safety margin against sub-pixel rounding, and deliberately keeps the
	   rest of Slido's gap — together with the padding below that puts ~37px
	   of white above the question field instead of the 24px that cutting to
	   80px left. (The pre-1.2 value of 118px was tuned for the wide two-bar
	   layout and sliced 37px off the card itself, which is what made the
	   input look flush against the edge.) */
	--ptr-qa-crop: 68px;
	padding-top: 24px;
}

.ptr-section--qa.is-cropped .ptr-section__qa-iframe {
	width: 680px;
	max-width: 100%;
	margin-inline: auto;
	margin-top: calc(-1 * var(--ptr-qa-crop));
	clip-path: inset(var(--ptr-qa-crop) 0 0 0);
}

.ptr-section--rate {
	text-align: center;
	padding: 24px 16px;
}

.ptr-section__rate-iframe {
	/* block, not inline-block: an inline box sits on the text baseline, and the
	   descender space under it added ~7px the height setting could not account
	   for — the section came out taller than the number in the panel.
	   Same 680px as the cropped Q&A iframe, centred: Slido's poll embed code
	   carries width="300", and honouring it left the poll title wrapping onto
	   four lines. At 680px Slido uses its compact poll layout (full-width
	   Send button, title aligned with the content) and the two sections line
	   up exactly; at the card's full ~940px the title sat at the far left
	   with the stars and button centred half a card away. Narrower cards
	   (sidebar pages, phones) shrink it to the card's width. */
	display: block;
	width: 680px;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
}

.ptr-section__no-rating {
	margin: 0;
	padding: 8px 0;
	color: var(--ptr-muted);
	font-size: 14px;
	text-align: center;
}

/* --- Narrow container: list stacks under the player --------------------- */
/* Container width, not viewport: in a blog post with a sidebar the content
   column can be ~650px while the viewport is still ~1000px wide. */

/* Mid widths (e.g. a post with sidebar): the player column is too narrow for
   the mockup geometry — center under the whole panel with a modest gap. */
@container (min-width: 701px) and (max-width: 1050px) {
	.ptr-actions {
		padding-right: 0;
	}

	.ptr-actions__group {
		gap: 24px;
	}

	.ptr-section {
		width: 100%;
	}
}

@container (max-width: 700px) {
	.ptr-panel__main {
		grid-template-columns: 1fr;
	}

	/* Scoped to match the base rule's specificity — a bare .ptr-list would
	   lose to it and the list would stay absolutely positioned here. */
	.ptr-panel .ptr-list {
		position: static;
		max-height: 320px;
	}

	.ptr-actions {
		padding-right: 0;
	}

	/* Row flow drops the buttons into the single implicit 1fr column of a
	   full-width group, so they stack stretched — same look as the old flex
	   column. */
	.ptr-actions__group {
		grid-auto-flow: row;
		gap: 16px;
		width: 100%;
	}

	.ptr-section {
		width: 100%;
	}
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 768px) {
		.ptr-panel__main {
			grid-template-columns: 1fr;
		}

		.ptr-panel .ptr-list {
			position: static;
			max-height: 320px;
		}

		.ptr-actions {
			padding-right: 0;
		}

		.ptr-actions__group {
			grid-auto-flow: row;
			gap: 16px;
			width: 100%;
		}

		.ptr-section {
			width: 100%;
		}
	}
}