/* ROGEAP Slider — front-end styles.
 * Core rule: the media fills the slide at full brightness (NO global filter).
 * Readability comes only from the local translucent panel behind the text. */

.rogeap-slider {
	position: relative;
	width: 100%;
	height: var(--rgs-height, 78vh);
	overflow: hidden;
	background: #0b0b0b;
}

/* Full-bleed: break out of the theme's content column so the media spans the
   whole viewport width (edge to edge). Add `full="0"` to the shortcode to keep
   it inside the content container instead. */
.rogeap-slider.rgs-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.rgs-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* --- Slides ------------------------------------------------------------- */
.rgs-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end; /* text sits low so it doesn't cover faces/heads */
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--rgs-speed, 0.8s) ease;
	z-index: 1;
}
.rgs-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Slide transition variant */
.rgs-trans-slide .rgs-slide {
	transform: translateX(100%);
	transition: transform var(--rgs-speed, 0.8s) ease, opacity var(--rgs-speed, 0.8s) ease;
}
.rgs-trans-slide .rgs-slide.is-active { transform: translateX(0); }
.rgs-trans-slide .rgs-slide.is-prev { transform: translateX(-100%); }

/* --- Background media (clear, no overlay) ------------------------------- */
.rgs-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.rgs-bg,
.rgs-media img,
.rgs-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.rgs-bg-empty { background: #1b1b1b; }

/* Cover-fit iframe embeds (YouTube/Vimeo) */
.rgs-embed {
	pointer-events: none;
}
.rgs-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;       /* 16:9 */
	min-height: 100%;
	min-width: 177.77vh;   /* 16:9 */
	transform: translate(-50%, -50%);
}

/* --- Content + local readability panel ---------------------------------- */
.rgs-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 5% 6vh; /* bottom padding keeps the text off the very edge */
	box-sizing: border-box;
}
.rgs-align-left   { justify-content: flex-start; }
.rgs-align-center { justify-content: center; }
.rgs-align-right  { justify-content: flex-end; }
.rgs-align-center .rgs-content { text-align: center; }
.rgs-align-right  .rgs-content { text-align: right; }

/* The panel is now just a layout container — NO background. Each text element
   carries its own translucent surface that hugs its width (fit-content). */
.rgs-panel {
	display: inline-block;
	max-width: 640px;
	color: var(--rgs-text, #fff);
}
.rgs-align-center .rgs-panel { max-width: 760px; }

/* One translucent box per text element, sized to fit its longest line
   (fit-content). The inner <span> just carries the text (no own background). */
.rgs-title,
.rgs-subtitle {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	background: var(--rgs-panel, transparent);
	color: var(--rgs-text, #fff);
	padding: .2em .6em;
	border-radius: 6px;
	box-sizing: border-box;
}
.rgs-title span,
.rgs-subtitle span { background: transparent; padding: 0; }

/* Position each fit-content box according to the slide alignment. */
.rgs-align-center .rgs-title,
.rgs-align-center .rgs-subtitle { margin-left: auto; margin-right: auto; }
.rgs-align-right .rgs-title,
.rgs-align-right .rgs-subtitle { margin-left: auto; }

.rgs-title {
	margin: 0 0 .4rem;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	line-height: 1.3;
	font-weight: 800;
}
.rgs-subtitle {
	margin: 0 0 .7rem;
	font-size: clamp(.9rem, 1.3vw, 1.05rem);
	line-height: 1.45;
}
.rgs-btn {
	display: inline-block;
	background: #2e9e4f;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	padding: .8rem 1.6rem;
	border-radius: 4px;
	transition: background .2s ease, transform .2s ease;
}
.rgs-btn:hover { background: #257e40; transform: translateY(-1px); color: #fff; }

/* --- Arrows ------------------------------------------------------------- */
.rgs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.rgs-arrow:hover { background: rgba(0, 0, 0, .6); }
.rgs-prev { left: 18px; }
.rgs-next { right: 18px; }

/* --- Dots --------------------------------------------------------------- */
.rgs-dots {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.rgs-dot {
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease;
}
.rgs-dot.is-active { background: #fff; }

@media (max-width: 640px) {
	.rgs-panel { padding: 1.1rem 1.2rem; }
	.rgs-arrow { width: 38px; height: 38px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.rgs-slide { transition: opacity .01s linear; }
}