/* ========================================
   Variables
   ======================================== */

:root {
	--rg-intro-slider-title-pos: calc( var(--plura-wp-gap) * 4 );
	--rg-intro-slider-thumb-height: 60px;
	--rg-intro-slider-thumb-ratio: calc(2/3); /* 2:3 */
	--rg-intro-slider-thumb-ratio-inverse: calc(1 / var(--rg-intro-slider-thumb-ratio));

	/* Shop grid */
	--rg-intro-nav-size: 36px;

	--rg-shop-cols-base: 2;  --rg-shop-rows-base: 3;  --rg-shop-space-x-base: 20px;  --rg-shop-space-y-base: 6px;
	--rg-shop-cols-768:  3;  --rg-shop-rows-768:  3;  --rg-shop-space-x-768:  20px;  --rg-shop-space-y-768:  40px;
	--rg-shop-cols-1200: 4;  --rg-shop-rows-1200: 2;  --rg-shop-space-x-1200: 60px;  --rg-shop-space-y-1200: 20px;

	--rg-shop-row-gap: var(--rg-shop-space-y-base);
}

@media (min-width: 768px)  { :root { --rg-intro-nav-size: 40px; --rg-shop-row-gap: var(--rg-shop-space-y-768);  } }
@media (min-width: 1200px) { :root { --rg-intro-nav-size: 44px; --rg-shop-row-gap: var(--rg-shop-space-y-1200); } }


/* ========================================
   Global
   ======================================== */

body {
	overflow: hidden;
}

:is(.rg-intro-slider, .rg-intro-slider-thumbs) .swiper-slide > .plura-wp-image {
	height: 100%;
	object-fit: cover;
	width: 100%;
}


/* ========================================
   Main Slider
   ======================================== */

.rg-intro-slider {
	height: 100dvh;
}

.rg-intro-slider .rg-intro-slide {
	display: block;
	padding-inline: calc( ( 100dvw - var(--rg-globals-theme-width) ) / 2 );
	padding-top: var(--rg-globals-theme-header-h);
}


/* Overlay + bg image shared positioning */
.rg-intro-slider .rg-intro-slide::before,
.rg-intro-slider .rg-intro-slide > .plura-wp-image {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.rg-intro-slider .rg-intro-slide::before {
	background-color: rgba(0, 0, 0, .4);
	content: '';
	z-index: 1;
}


/* Slide content */
.rg-intro-slider :is(
	.rg-intro-slide > .plura-wp-title,
	.rg-intro-slide > .plura-wp-link > .plura-wp-title,
	.rg-intro-slide > .rg-datetime
) {
	left: calc( ( 100dvw - var(--rg-globals-theme-width) ) / 2 );
	position: absolute;
	width: var(--rg-globals-theme-width);
	z-index: 2;
}

.rg-intro-slider :is(
	.rg-intro-slide > .plura-wp-title,
	.rg-intro-slide > .plura-wp-link > .plura-wp-title,
	.rg-intro-slide > .rg-datetime * 
) {
	color: white;
}


/* Title */
.rg-intro-slider :is(
	.rg-intro-slide > .plura-wp-title,
	.rg-intro-slide > .plura-wp-link > .plura-wp-title
) {
	align-items: flex-end;
	bottom: var(--rg-intro-slider-title-pos);
	display: flex;
	font-size: var(--rg-globals-theme-fonts-size-h1);
	font-weight: var(--rg-globals-theme-fonts-weight-bold);
	justify-content: flex-end;
	line-height: var(--rg-globals-theme-fonts-line-height-heading);
	padding-bottom: 0;
	text-align: right;
	text-transform: uppercase;
}


/* Prev / Next */
:is(.rg-intro-slider-prev, .rg-intro-slider-next) {
	align-items: center;
	border: 2px solid var(--rg-globals-theme-colors-color1);
	border-radius: 50%;
	color: var(--rg-globals-theme-colors-color1);
	display: flex;
	height: var(--rg-intro-nav-size);
	justify-content: center;
	transition: background-color var(--rg-globals-theme-anim-speed), color var(--rg-globals-theme-anim-speed);
	width: var(--rg-intro-nav-size);
}

:is(.rg-intro-slider-prev, .rg-intro-slider-next)::after {
	display: none;
}

:is(.rg-intro-slider-prev, .rg-intro-slider-next):hover {
	background-color: var(--rg-globals-theme-colors-color1);
	color: white;
}


/* Datetime */
.rg-intro-slider .rg-intro-slide > .rg-datetime {
	align-items: flex-end;
	top: calc( 100dvh - var(--rg-intro-slider-title-pos) );
}


/* ========================================
   Individual Slides
   ======================================== */

/* Shop */

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] {
	display: block;
	overflow-x: clip;
	overflow-y: visible;
	position: relative;
	z-index: 1;
}

.rg-intro-shop-slider .swiper-pagination {
	bottom: -30px;
}

.rg-intro-shop-slider .swiper-pagination-bullet {
	background: transparent;
	border: 2px solid var(--rg-globals-theme-colors-color1);
	height: 10px;
	opacity: 1;
	width: 10px;
}

.rg-intro-shop-slider .swiper-pagination-bullet-active {
	background-color: var(--rg-globals-theme-colors-color1);
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] .plura-wp-post:not(.rg-slider-row-1) {
	margin-top: var(--rg-shop-row-gap) !important;
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] .plura-wp-post {
	display: inline-flex;
	position: relative;
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] .plura-wp-post-meta-item[data-type="price"] {
	background-color: var(--rg-globals-theme-colors-color1);
	border-radius: var(--rg-globals-theme-border-radius-sm);
	padding: 2px 6px;
	position: absolute;
	right: var(--rg-globals-theme-border-radius-sm);
	top: var(--rg-globals-theme-border-radius-sm);
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] .plura-wp-post-featured-image {
	aspect-ratio: 1 / 1;
	border-radius: var(--rg-globals-theme-border-radius-md);
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] :is(.plura-wp-link, .plura-wp-post-title, .plura-wp-post-meta-item-value) {
	font-size: var(--rg-globals-theme-fonts-size-body-xxs);
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] :is(.plura-wp-post, .plura-wp-post-meta) {
	gap: calc(var(--plura-wp-posts-gap) / 12);
}

.rg-intro-slider .rg-intro-slide[data-slide-type="shop"] .plura-wp-posts[data-type="rg_object"] * {
	color: white;
}


/* Intro */
.rg-intro-slider .rg-intro-slide[data-slide-type="intro"] #rg-logo {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 10dvw;
	z-index: 3;
}


/* ========================================
   Thumbs
   ======================================== */

.rg-intro-slider-thumbs {
	bottom: calc( var(--plura-wp-gap) / 3 );
	height: var(--rg-intro-slider-thumb-height);
	left: 50%;
	overflow: visible;
	position: absolute;
	transform: translateX(-50%);
	width: calc( var(--rg-intro-slider-thumb-height) * var(--rg-intro-slider-thumb-ratio-inverse) );
}

.rg-intro-slider-thumbs .swiper-slide {
	border-radius: var(--rg-globals-theme-border-radius-sm);
	outline: transparent 4px solid;
	overflow: hidden;
	transition: outline-color .5s ease-out, width .5s ease-out;
}

.rg-intro-slider-thumbs .swiper-slide.swiper-slide-active {
	outline-color: var(--rg-globals-theme-colors-color1);
}

.rg-intro-slider-thumbs .swiper-slide:not(.swiper-slide-active) {
	cursor: pointer;
	width: var(--rg-intro-slider-thumb-height) !important;
}