/* ============================================================
 * Evoke — Services widget.
 *
 * Display-style list — each service name renders at near-display
 * size with an index number on the left and an arrow on the right.
 * The active row brightens; the others fade back. The cursor-follow
 * image preview lives on the same .services container.
 *
 * Loaded only on pages that include the widget (via Elementor's
 * get_style_depends()).
 * ============================================================ */

.services {
	position: relative;
	padding: var(--section-y, 8rem) 0;
	overflow: hidden;
	margin: 0 var(--inset);
	border-radius: var(--radius);
}

/* ----- Themes -----
   "dark" / "light" set both color + background. "auto" inherits
   everything from the parent Elementor section. */
.services--theme-dark {
	background: var(--c-ink);
	color: var(--c-paper);
}

.services--theme-light {
	background: var(--c-paper);
	color: var(--c-ink);
}

/* theme-auto = no bg/color, inherits from parent. */

.services__inner {
	/* max-width: 90rem; */
	margin: 0 auto;
	padding: 0 1.5%;
}

/* =========================================================================
   Header
   ========================================================================= */
.services__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2rem, 5vw, 5rem);
}

.services__heading {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--tracking-cap);
	text-transform: uppercase;
}

.services__icon {
	width: clamp(3rem, 5vw, 6rem);
	height: clamp(3rem, 5vw, 6rem);
	opacity: 0.55;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	transform: rotate(45deg);
}

/* =========================================================================
   The list itself

   Top + bottom borders draw a single solid line so the list reads as
   one continuous object — much stronger than the dashed-rule pattern
   the Articles widget uses, and visually distinct from it.
   ========================================================================= */
.services__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.service {
	margin: 0;
	padding: 0;
	border-top: 1px solid currentColor;
}

.service:first-child {
	border-top: 0;
}

/* The row is the whole interactive surface. Becomes either an <a>
   (when URL set) or a <div>. Both render identically. */
.service__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: clamp(1rem, 3vw, 4rem);
	padding: clamp(1.25rem, 3.5vw, 3rem) 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity;
}

/* Index number (01, 02…) — small, tracked, dimmer than the name. */
.service__index {
	font-size: clamp(0.75rem, 0.95vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	opacity: 0.45;
	font-variant-numeric: tabular-nums;
	min-width: 2.5ch;
	transform: translateY(-0.1em);
	transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

/* Service name — the hero of the row. clamp() keeps it readable across
   viewport sizes; Elementor's responsive control can override the middle
   `vw` value live. */
.service__name {
	font-family: var(--ff-display, inherit);
	font-size: clamp(2rem, 7vw, 8rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--tracking-cap);
	text-transform: uppercase;
	margin: 0;
	display: inline-block;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Arrow icon on the right. Rotated 45° (NE) on first render — like
   external-link cues elsewhere on the site. */
.service__arrow {
	width: clamp(2rem, 3.5vw, 3.5rem);
	height: clamp(2rem, 3.5vw, 3.5rem);
	flex-shrink: 0;
	opacity: 0.45;
	transform: rotate(-45deg);
	transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.service__arrow svg {
	width: 100%;
	height: 100%;
}

/* =========================================================================
   Hover states

   When ANY row in the list is hovered, every OTHER row dims to 0.25.
   The hovered row stays full opacity and its name slides outward; the
   arrow "lifts off" the page.
   ========================================================================= */
.services__list:hover .service__row {
	opacity: 0.25;
}

.services__list .service:hover .service__row,
.services__list .service:focus-within .service__row {
	opacity: 1;
}

.service:hover .service__index {
	opacity: 1;
}

.service:hover .service__name {
	transform: translateX(2.5rem);
}

.service:hover .service__arrow {
	opacity: 1;
	transform: rotate(0deg) translate(0.5rem, -0.5rem);
}

/* RTL: mirror the horizontal motion. */
[dir="rtl"] .service:hover .service__name {
	transform: translateX(-2.5rem);
}

[dir="rtl"] .service__arrow {
	transform: rotate(-135deg);
	/* points NW instead of NE */
}

[dir="rtl"] .service:hover .service__arrow {
	transform: rotate(-180deg) translate(0.5rem, 0.5rem);
}

/* Active class (set by JS when this row triggered the preview). */
.service.is-active .service__row {
	opacity: 1 !important;
}

.service.is-active .service__index {
	opacity: 1;
}

.service.is-active .service__arrow {
	opacity: 1;
}

/* =========================================================================
   The floating preview (cursor-follow image)
   ========================================================================= */
.services__preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 360px;
	border-radius: 0.75rem;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	z-index: 50;
	will-change: transform, opacity;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	transform: translate(-50%, -50%) scale(0.85);
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	/* iOS clip fix */
}

.services__preview-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.services__preview--ar-1-1 {
	aspect-ratio: 1 / 1;
}

.services__preview--ar-4-5 {
	aspect-ratio: 4 / 5;
}

.services__preview--ar-3-4 {
	aspect-ratio: 3 / 4;
}

.services__preview--ar-16-9 {
	aspect-ratio: 16 / 9;
}

.services__preview--ar-3-2 {
	aspect-ratio: 3 / 2;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
	.services__header {
		margin-bottom: 2rem;
	}

	.service__row {
		gap: 1rem;
		grid-template-columns: auto 1fr auto;
	}

	.service__name {
		font-size: clamp(1.5rem, 8vw, 3.5rem);
	}

	.service__arrow {
		width: 1.75rem;
		height: 1.75rem;
	}

	.service__index {
		font-size: 0.7rem;
		min-width: 2ch;
	}

	/* Kill the dim-others effect on mobile — it relies on hover which
	   doesn't exist on touch devices. */
	.services__list:hover .service__row {
		opacity: 1;
	}

	.service:hover .service__name {
		transform: none;
	}

	.service:hover .service__arrow {
		transform: rotate(0deg);
	}

	/* Hide the floating preview — no hover on touch. */
	.services__preview {
		display: none !important;
	}
}

/* =========================================================================
   Reduced motion — kill the heavy transitions and the floating image.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.services__list:hover .service__row {
		opacity: 1;
	}

	.service__row,
	.service__index,
	.service__name,
	.service__arrow {
		transition: none !important;
	}

	.service:hover .service__name,
	[dir="rtl"] .service:hover .service__name {
		transform: none;
	}

	.service:hover .service__arrow {
		transform: rotate(0deg);
	}

	.services__preview {
		display: none !important;
	}
}
/* =========================================================================
   ADDED — per-service description
   Appended at the end so it never overrides existing rules above. Override
   anything below freely.
   ========================================================================= */
.service__description {
	margin: 0;
	padding: 0 0 clamp(1.25rem, 3vw, 2.25rem);
	padding-left: clamp(2.5rem, 6vw, 6rem);
	font-size: clamp(0.9rem, 1.05vw, 1.05rem);
	line-height: 1.55;
	opacity: 0.5;
	max-width: 55rem;
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* RTL — mirror the indent. */
[dir="rtl"] .service__description {
	padding-left: 0;
	padding-right: clamp(2.5rem, 6vw, 6rem);
}

/* When the active row gets brighter, its description does too. The
   non-active rows already dim via .services__list:hover .service__row,
   so we just lift the description's opacity on the hovered row. */
.service:hover .service__description,
.service.is-active .service__description {
	opacity: 0.85;
}

/* On mobile, less indent, slightly smaller text. */
@media (max-width: 900px) {
	.service__description {
		padding-left: clamp(1rem, 4vw, 2rem);
		padding-bottom: clamp(0.75rem, 2vw, 1.25rem);
		font-size: 0.9rem;
	}
	[dir="rtl"] .service__description {
		padding-left: 0;
		padding-right: clamp(1rem, 4vw, 2rem);
	}
}