/* ===============================================================
   OVERLAY (image above header)
   =============================================================== */
.rio-overlay {
	position: relative;
	/* Keep reflow inside the overlay so its content changes never re-layout
	   the header / menu around it (kills the "glitch" jump). */
	contain: layout style;
	width: 100%;
	max-width: 100%;
	display: block;
	background: #f5f5f5;
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
	z-index: 99998;
	line-height: 0;
	overflow: hidden;
}

/* Desktop: cap the overlay width so the clickbait image is reasonable */
@media (min-width: 768px) {
	.rio-overlay {
		max-width: 720px;
	}
}

.rio-overlay .rio-link {
	display: block;
	text-decoration: none;
	cursor: pointer;
	line-height: 0;
	width: 100%;
	position: relative;
	z-index: 1;
}

.rio-overlay .rio-image {
	display: block;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.rio-overlay.rio-loading .rio-image {
	opacity: 0.5;
}

/* ===============================================================
   PRELOADER — inline, fills the image area (NOT full screen)
   =============================================================== */
.rio-preloader {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 30%; /* default — overridden inline to match real image aspect */
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	transition: opacity 0.35s ease;
	opacity: 1;
}

/* Blurred bg layer — image scaled up + heavy blur */
.rio-preloader::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(0.65) saturate(1.1);
	-webkit-filter: blur(22px) brightness(0.65) saturate(1.1);
	transform: scale(1.15);
	z-index: 0;
}

/* Dark overlay on top of blur */
.rio-preloader::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
}

/* While fading out, the preloader must NOT take layout space any more —
   otherwise the overlay is briefly double height (image + preloader) and the
   page visibly jumps when the preloader is removed. Lift it out of flow and
   lay it exactly over the image instead. */
/* Quiet placeholder: reserves height silently while the gated image list is
   fetched, but shows no spinner/overlay (used when the preloader is turned OFF). */
.rio-preloader.rio-quiet { background: transparent; }
.rio-preloader.rio-quiet::before,
.rio-preloader.rio-quiet::after,
.rio-preloader.rio-quiet .rio-spinner { display: none !important; }

.rio-preloader.rio-preloader-fade {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	padding-bottom: 0 !important;
	margin: 0;
	z-index: 2;
}

.rio-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	z-index: 3;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.rio-spinner-svg {
	width: 100%;
	height: 100%;
	animation: rio-rotate 1.2s linear infinite;
	transform-origin: center;
}

.rio-spinner-track {
	fill: none;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 4;
}

.rio-spinner-arc {
	fill: none;
	stroke: #2196f3;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 90 200;
	stroke-dashoffset: 0;
}

@keyframes rio-rotate {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.rio-spinner {
		width: 48px;
		height: 48px;
	}
}

/* --- v3: real <img> tag (optimized: srcset + async decode) --- */
.rio-overlay .rio-image-el { position: relative; width: 100%; height: 0; overflow: hidden; }
.rio-overlay .rio-img-tag {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	max-width: 100%;
}