/**
 * RS Ning Slide — Front-end carousel styles.
 * Mobile-first. Two style variants: is-style-a / is-style-b.
 */

/* ── Reset ── */
.rsningslide-wrapper { position: relative; width: 100%; box-sizing: border-box; }
.rsningslide-wrapper *, .rsningslide-wrapper *::before, .rsningslide-wrapper *::after { box-sizing: border-box; }

/* ════════════════════════════════════════
   STYLE A — full-width carousel
   ════════════════════════════════════════ */

.is-style-a .rsningslide-swiper { overflow: visible; }
@media ( min-width: 768px ) {
	.is-style-a .rsningslide-swiper { overflow: hidden; margin-left: 30px; margin-right: 30px; }
}
.is-style-a .rsningslide-slide { width: 290px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
@media ( min-width: 768px ) { .is-style-a .rsningslide-slide { width: auto; } }

.rsningslide-card { display: block; text-decoration: none; color: inherit; }
.is-style-a .rsningslide-card__image { width: 100%; height: 218px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,0.05); }
.is-style-a .rsningslide-card__meta { display: flex; flex-direction: column; margin-top: 16px; }
.is-style-a .rsningslide-card__cat { color: rgba(255,255,255,0.70); font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 2.24px; }
.is-style-a .rsningslide-card__title { color: #fff; font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 2.24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Arrows A */
.is-style-a .rsningslide-prev,
.is-style-a .rsningslide-next { position: absolute; top: 109px; transform: translateY(-50%); z-index: 10; display: flex !important; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.is-style-a .rsningslide-prev { left: 0; }
.is-style-a .rsningslide-next { right: 0; }
.is-style-a .rsningslide-prev svg, .is-style-a .rsningslide-next svg { display: block; width: 60px; height: 60px; }

/* ════════════════════════════════════════
   STYLE B — left panel + right overflow
   Content area 1280px centered, carousel
   overflows to the right viewport edge.
   Place shortcode in a full-width section.
   ════════════════════════════════════════ */

/* ── Mobile: stacked column ── */
.is-style-b {
	display: flex;
	flex-direction: column;
	gap: 36px;
	overflow: visible;
}

.is-style-b .rsningslide-b-text { order: 1; padding: 0 20px; }
.is-style-b .rsningslide-b-carousel { order: 2; padding: 0 20px; overflow: visible; min-width: 0; }
.is-style-b .rsningslide-b-controls { order: 3; align-self: center; width: 300px; }

/* ── Desktop: 1280px-aligned left panel + right overflow ── */
@media ( min-width: 768px ) {
	.is-style-b {
		display: grid;
		grid-template-columns: 405px minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		gap: 0;
		/* Align left edge with 1280px centered content area.
		   max() prevents negative padding on narrow screens. */
		padding-left: max(20px, calc((100% - 1280px) / 2));
		padding-right: 0;
		overflow: visible;
	}

	.is-style-b .rsningslide-b-text {
		grid-column: 1;
		grid-row: 1;
		padding: 0;
		align-self: center;
		order: unset;
	}

	.is-style-b .rsningslide-b-controls {
		grid-column: 1;
		grid-row: 2;
		width: auto;
		align-self: end;
		margin-top: 70px;
		order: unset;
	}

	.is-style-b .rsningslide-b-carousel {
		grid-column: 2;
		grid-row: 1 / -1;
		padding: 0 0 0 60px;
		overflow: visible;
		order: unset;
		/* Clip left overflow so slides don't bleed into the text panel.
		   Right side extends 9999px to allow overflow to viewport edge. */
		clip-path: inset(-9999px -9999px -9999px 0);
	}
}

/* Force overflow visible on swiper inside style-b. */
.is-style-b .rsningslide-swiper {
	overflow: visible !important;
}

/* ── Text B ── */
.rsningslide-b-text { display: flex; flex-direction: column; gap: 28px; }
.rsningslide-b-text__title { margin: 0; color: #333; font-size: 36px; font-family: 'Libertinus Sans', serif; font-weight: 400; text-transform: capitalize; }
.rsningslide-b-text__desc { margin: 0; color: #888; font-size: 14px; line-height: 28px; letter-spacing: 1.4px; }

@media ( min-width: 768px ) {
	.rsningslide-b-text__title { font-size: 56px; }
	.rsningslide-b-text__desc { color: #333; }
}

/* ── Slides B ── */
.rsningslide-slide--b { width: 276px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rsningslide-card__image--b { width: 100%; height: 207px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(0,0,0,0.03); }
.rsningslide-card__cat--b { color: #888; }
.rsningslide-card__title--b { color: #333; }
.is-style-b .rsningslide-card__meta { display: flex; flex-direction: column; margin-top: 16px; }
.is-style-b .rsningslide-card__cat { font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 2.24px; }
.is-style-b .rsningslide-card__title { font-size: 14px; font-weight: 400; line-height: 28px; letter-spacing: 2.24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Controls B (progress + nav) ── */
.rsningslide-b-controls { display: flex; align-items: center; justify-content: space-between; }

@media ( min-width: 768px ) {
	.rsningslide-b-controls { justify-content: flex-start; gap: 34px; }
}

/* Progress bar */
.rsningslide-progress { position: relative; height: 4px; background: #EAE6DC; flex: 1; max-width: 164px; }
@media ( min-width: 768px ) { .rsningslide-progress { max-width: 129px; flex: none; width: 129px; } }
.rsningslide-progress__fill { position: absolute; top: 0; left: 0; height: 100%; background: #842D2D; transition: left 0.3s ease; }

/* Nav arrows B */
.rsningslide-b-nav { display: flex; align-items: center; gap: 8px; }
@media ( min-width: 768px ) { .rsningslide-b-nav { gap: 10px; } }

.rsningslide-prev--b,
.rsningslide-next--b { display: flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.rsningslide-prev--b svg, .rsningslide-next--b svg { display: block; width: 48px; height: 48px; }
@media ( min-width: 768px ) {
	.rsningslide-prev--b, .rsningslide-next--b { width: 60px; height: 60px; }
	.rsningslide-prev--b svg, .rsningslide-next--b svg { width: 60px; height: 60px; }
}

/* ════════════════════════════════════════
   SHARED — Swiper overrides
   ════════════════════════════════════════ */

.rsningslide-wrapper .swiper-pagination { display: none; }
.rsningslide-prev.swiper-button-lock, .rsningslide-next.swiper-button-lock { display: flex !important; }
.rsningslide-prev.swiper-button-disabled, .rsningslide-next.swiper-button-disabled { opacity: 1 !important; pointer-events: auto !important; cursor: pointer; }
.rsningslide-prev:hover svg rect, .rsningslide-next:hover svg rect { opacity: 0.85; }