/*
 * Stylesheet for PDEP_Rows_Mobile_Scroll (pdep-rows-mobile-scroll)
 * Handle: pdep-rows-mobile-scroll
 *
 * NO @media QUERIES IN THIS FILE — deliberate. This widget is placed on a
 * page only where the scroll-track behavior is wanted, and shown/hidden at
 * whatever breakpoint via Elementor's own responsive-visibility controls
 * (elementor-hidden-desktop / -tablet / -mobile classes on the wrapper,
 * applied outside this stylesheet). The track is this widget's ONLY layout
 * at every width — if this file gated the scroll behavior behind a media
 * query, showing the widget above that width (including testing it at
 * desktop viewport in the editor) would silently render broken. See
 * class-pdep-rows.php's pdep-accordion-shared.css block for the pattern
 * this deliberately does NOT repeat.
 */

.pdep-rms {
	--pdep-rms-track-height: 209px;
	--pdep-rms-card-width: 163px;
	--pdep-rms-col-gap: 10px;
	--pdep-rms-border-radius: 10px;
	--pdep-rms-border-width: 0px;
	--pdep-rms-dark: #0f0f1a;
	--pdep-rms-icon-color: #ffffff;
	--pdep-rms-icon-color-hover: #3fa7d6;
	--pdep-rms-icon-size: 30px;
	--pdep-rms-icon-circle-bg: #0f0f1a;
	--pdep-rms-icon-circle-bg-hover: #3fa7d6;
	--pdep-rms-icon-circle-border-color: #ffffff;
	--pdep-rms-icon-circle-size: 70px;
	--pdep-rms-title-color: #ffffff;
	--pdep-rms-excerpt-color: #ffffff;
	--pdep-rms-category-color: #ffffff;
}

/* ============================================================
   Track — real horizontal overflow-scroll, snap-aligned. Not a
   JS-simulated position system; nav buttons below are a scroll nudge on
   top of native browser scroll, not the thing making it work.
   ============================================================ */

.pdep-rms-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--pdep-rms-col-gap);
	height: var(--pdep-rms-track-height);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pdep-rms-track::-webkit-scrollbar {
	display: none;
}

.pdep-rms-tile {
	position: relative;
	flex: 0 0 var(--pdep-rms-card-width);
	width: var(--pdep-rms-card-width);
	height: 100%;
	overflow: hidden;
	border: var(--pdep-rms-border-width) solid var(--pdep-rms-dark);
	border-radius: var(--pdep-rms-border-radius);
	scroll-snap-align: start;
	cursor: grab;
}

.pdep-rms-tile > .pdep-rms-tile__img {   /* 0,2,0 — beats .elementor img */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pdep-focal-d, center center);
	pointer-events: none;
}

/* Gradient colour overlay (::before) — CSS fallback; Elementor's
   Group_Control_Background overrides this with higher specificity, and a
   per-item item_overlay_gradient control can override it again. */
.pdep-rms-tile::before {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 1;
}

.pdep-rms-tile__label {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 2;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pdep-rms-category-color);
}

/* ============================================================
   Overlay content panel
   ============================================================ */

.pdep-rms-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px;
}

.pdep-rms-overlay span {
	display: inline-block;
	margin-bottom: 6px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	color: var(--pdep-rms-category-color);
}

.pdep-rms-overlay h2 {
	margin: 0;
	font-weight: 900;
	font-size: 18px;
	color: var(--pdep-rms-title-color);
}

.pdep-rms-overlay h2 a {
	color: inherit;
	text-decoration: none;
}

.pdep-rms-overlay p {
	margin: 6px 0 0;
	color: var(--pdep-rms-excerpt-color);
}

/* ============================================================
   Icon — standalone circular click target, centered on the tile
   ============================================================ */

.pdep-rms-overlay__icon-link {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--pdep-rms-icon-circle-size);
	width: var(--pdep-rms-icon-circle-size);
	background: var(--pdep-rms-icon-circle-bg);
	border-radius: 50%;
	font-size: var(--pdep-rms-icon-size);
	border: 2px solid var(--pdep-rms-icon-circle-border-color);
	z-index: 3;
	transition: background 200ms ease;
}

.pdep-rms-overlay__icon-link i {
	color: var(--pdep-rms-icon-color);
	transition: color 200ms ease;
}

.pdep-rms-overlay__icon-link svg {
	fill: var(--pdep-rms-icon-color) !important;
	width: var(--pdep-rms-icon-size);
	height: var(--pdep-rms-icon-size);
	transition: fill 200ms ease;
}

.pdep-rms-overlay__icon-link:hover {
	background: var(--pdep-rms-icon-circle-bg-hover);
}

.pdep-rms-overlay__icon-link:hover i {
	color: var(--pdep-rms-icon-color-hover);
}

.pdep-rms-overlay__icon-link:hover svg {
	fill: var(--pdep-rms-icon-color-hover) !important;
}

/* ============================================================
   Nav — .pdep-rms-nav (scrollBy nudge, see pdep-rows-mobile-scroll.js)
   ============================================================ */

.pdep-rms-nav {
	display: flex;
	gap: 10px;
	margin-top: 19px;
}

.pdep-rms-nav--h-left   { justify-content: flex-start; }
.pdep-rms-nav--h-center { justify-content: center; }
.pdep-rms-nav--h-right  { justify-content: flex-end; }
.pdep-rms-nav--h-split  { justify-content: space-between; }

.pdep-rms-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	background: none;
	border: none;
	transition: background 200ms ease, color 200ms ease;
}

.pdep-rms-nav__arrow svg {
	fill: currentColor;
}


/* =============================================================
   Per-item focal point
   -------------------------------------------------------------
   Tiles crop their image to the tile box, so a subject that is not
   centred gets cut. render() emits --pdep-focal-d/t/m inline on the
   element from the per-item Image Focal Point control; these rules
   feed them to object-position.

   The nested var() fallbacks ARE the responsive cascade: mobile falls
   back to tablet, tablet falls back to desktop, desktop falls back to
   center center. That is why the control can live inside a repeater,
   where Elementor refuses add_responsive_control() and would otherwise
   give no way to vary framing per breakpoint. Unset breakpoints emit
   no custom property at all, so they inherit rather than override.

   Breakpoints match Elementor tiers: tablet <=1024, mobile <=767.
   ============================================================= */

@media (max-width: 1024px) {
	.pdep-rms-tile > .pdep-rms-tile__img {
		object-position: var(--pdep-focal-t, var(--pdep-focal-d, center center));
	}
}

@media (max-width: 767px) {
	.pdep-rms-tile > .pdep-rms-tile__img {
		object-position: var(--pdep-focal-m, var(--pdep-focal-t, var(--pdep-focal-d, center center)));
	}
}