.ppsb-root {
	position: relative;
	z-index: var(--ppsb-z, 40);
}

.ppsb {
	position: var(--ppsb-position, fixed);
	top: var(--ppsb-top, 140px);
	/* --ppsb-w: the width that fits this screen, set by site-banners.js */
	width: var(--ppsb-w, var(--ppsb-banner-w, 160px));
	pointer-events: auto;
}

.ppsb--left {
	left: calc(50% - (var(--ppsb-container-w, 1260px) / 2) - var(--ppsb-gap, 24px) - var(--ppsb-w, var(--ppsb-banner-w, 160px)));
}

.ppsb--right {
	right: calc(50% - (var(--ppsb-container-w, 1260px) / 2) - var(--ppsb-gap, 24px) - var(--ppsb-w, var(--ppsb-banner-w, 160px)));
}

.ppsb__link {
	display: block;
}

.ppsb__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Video banners are always 16:9 so the slot keeps its height before and
   after the click-to-play swap (no layout shift when the iframe loads). */
.ppsb-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #0E1419;
}

/* Uploaded video files keep their own proportions (a 620x80 strip is not
   cropped into 16:9). The inline aspect-ratio from the Media Library
   reserves the space; --natural (no known size) lets the video set the
   height itself once its metadata loads. */
.ppsb-video--file {
	aspect-ratio: auto;
	background: none;
}

.ppsb-video.ppsb-video--natural .ppsb-video__media {
	position: static;
	display: block;
	height: auto;
	object-fit: fill;
}

/* Scoped under .ppsb-video so theme rules like `.pp-archive-banner img
   { height: auto }` can't shrink the poster and leave a gap. */
.ppsb-video .ppsb-video__media,
.ppsb-video .ppsb-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.ppsb-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0 0 0 4px;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 999px;
	background: #19C8E0;
	color: #0E1419;
	cursor: pointer;
	transition: background .14s ease, transform .14s ease;
}

.ppsb-video__play:hover,
.ppsb-video__play:focus-visible {
	background: #14AAC0;
	transform: translate(-50%, -50%) scale(1.06);
}

.ppsb-video__play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* A banner group is a variable-length stack (e.g. the homepage's "PP
   Approved" column) — each enabled, geo-matching row rendered as its own
   item with breathing room between them, same spacing the raw Gutenberg
   image blocks + spacers it replaces used to have. */
.ppsb-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* [pokerpro-banner] can land anywhere in an article's own content flow —
   unlike the other spots, no surrounding theme markup can be relied on to
   supply spacing, so this gives it a sane default itself. */
.ppsb-pool {
	margin: 24px 0;
}
/* Page-top and side spots already get spacing from their own wrapper */
.ppsb-inline .ppsb-pool,
.ppsb .ppsb-pool {
	margin: 0;
}

/* Hard safety net regardless of configured widths — there is never room
   for skyscraper banners on tablet/mobile viewports. */
@media (max-width: 960px) {
	.ppsb-root {
		display: none;
	}
}