/* Continues the charcoal from Brands/Pillars — see the design-tokens comment
   in base.css. Gold for accents (index numbers, hairlines), off-white for
   type, same roles they carry everywhere else on this ground.

   Every dimension and duration below is Orisa's own, taken from its compiled
   main.css (.at-service-item and .at-service-img-wrapper, lines ~5996-6123)
   rather than re-derived: the 100px/280px track widths, 21px/29px row
   padding, 36px number at -1.8px tracking, 190px→284px thumb, 450px media
   column, 0.5s transitions. Only the palette and the two typefaces are
   Minos's. If these numbers get "tidied" into round rem values the hover
   stops matching the original — it's the specific proportions that make it
   read the way it does. */
/* padding-top: 0, not matching .section_brands's padding — CANCELLING it out
   is what makes the two gaps equal. Brands already contributes its own
   padding-bottom to this gap; adding padding-top here on top of that doubled
   it (3.5rem became 7rem against Pillars→Brands' 3.5rem, the bug this
   replaces). With this at 0, the whole Brands→Services gap is Brands' own
   padding-bottom, the same way Brands' own padding-top is the whole
   Pillars→Brands gap. Don't add padding-top back here without either
   removing an equal amount from Brands, or accepting the two gaps will
   diverge again. */
.section_services {
	position: relative;
	background-color: var(--vv-charcoal);
	padding-top: 0;
	padding-bottom: 6rem;
}

/* ===== Two-column body: pinned media left, hoverable list right ===== */
.services_body {
	display: grid;
	grid-template-columns: minmax(0, 34%) 1fr;
	gap: 3rem;
	align-items: start;
}

/* .services_media itself carries no positioning rule here — services.js pins
   it with ScrollTrigger (position: sticky does not survive ScrollSmoother's
   transform-based scroll; see the comment at the top of services.js for what
   that looked like broken, confirmed on this exact element). The "top 9rem"
   the pin holds at clears the fixed navbar, the same clearance
   .section_pillars gives it. */

/* Orisa's own .at-service-img-wrapper: a fixed 450px column, radius on the
   TOP corners only (the list sits directly under it, so the bottom edge
   is meant to run square into it), not an aspect-ratio box. */
.services_media_stack {
	position: relative;
	overflow: hidden;
	height: 450px;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}
/* No CSS transition here — services.js drives opacity/y/scale with GSAP, and
   a transition on the same properties would fight it (each GSAP frame would
   become the start of a new 0.6s CSS ease, so the 0.8s slide would crawl).
   The opacity below is only a no-JS fallback: GSAP's inline styles override
   it on the first frame. */
.services_media_item {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.services_media_item.is-active {
	opacity: 1;
}
.services_media_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
}
/* ===== The list itself ===== */
.services_list {
	display: flex;
	flex-direction: column;
}
/* 100px / 1fr / 280px, Orisa's exact tracks. The 280px matters twice over:
   it's what the thumb grows INTO (a grid track can't grow on :hover, so a
   track sized to the thumb's resting 190px would clip the hover state no
   matter what max-width said), and because the img is width:100% of the
   track, the hover max-width of 284px never actually binds — the thumb
   resolves to the track's 280px. So the real growth is 190px → 280px, which
   is what the original does too. */
/* cursor: default, not pointer — same call as Pillars' category headings
   (pillars.css) and WhyUs's "What we do" eyebrow (whyus.css): hovering a row
   does something (swaps the image on the left, services.js), but doesn't go
   anywhere, so a hand cursor promised a click these rows don't have.
   tabindex/role="button" (Services.astro) stay as they are — keyboard users
   can still tab through and trigger the same swap, this only changes what
   the mouse cursor looks like. */
/* The title track never narrows below its longest word (min-content) — at a
   fixed 280px thumb track, a 992px screen left the titles 124px, and single
   words like "Διαχείριση" (152px) ran out of their column into the thumb. The
   thumb track gives way instead, from Orisa's 280px down to 120px; with room
   to spare it still resolves to 280px, so wide screens are unchanged. */
.services_item {
	display: grid;
	grid-template-columns: 100px minmax(min-content, 1fr) minmax(120px, 280px);
	align-items: center;
	gap: 15px 30px;
	padding-top: 21px;
	padding-bottom: 29px;
	background-color: var(--vv-charcoal);
	border-bottom: 1px solid rgba(184, 154, 107, 0.2);
	cursor: default;
}
/* font-weight 400, not the original's 600: the Review family is loaded at
   300/400/900 only (see base.css @font-face), so 600 would be synthesised
   and comes out muddy at this size. Everything else — 36px, the -1.8px
   tracking, the 0.3 resting opacity, the 0.5s — is Orisa's. */
.services_item_index {
	color: var(--vv-off-white);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -1.8px;
	opacity: 0.3;
	transition: all 0.5s;
}
.services_item_content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
/* 50px is what the original renders at on any screen below 1725px, i.e. all
   but the widest desktops — worth matching directly rather than reproducing
   its full ladder. Feature Display ships at 400 only, same constraint as the
   number above. */
.services_item_title {
	color: var(--vv-off-white);
	font-size: 50px;
	line-height: 1;
	letter-spacing: -1px;
	opacity: 0.3;
	margin-bottom: 0;
	transition: all 0.5s;
}
/* max-height 0 → 100px is how the original opens this: an animatable stand-in
   for height:auto, with overflow hidden so the collapsed state clips cleanly.
   370px measure and 0.5s are its numbers too. */
.services_item_text {
	color: var(--vv-off-white);
	text-align: left;
	max-width: 370px;
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	overflow: hidden;
	transition: all 0.5s;
}
/* The transition lives on the IMG, not this wrapper — the wrapper is a grid
   item pinned to the 280px track and never changes size; it's the image
   inside it that grows. Putting it on the wrapper (as an earlier pass did)
   animates a box that has no room to move. */
.services_item_thumb {
	text-align: right;
}
.services_item_thumb img {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
	margin-left: auto;
	object-fit: cover;
	border-radius: 8px;
	transition: all 0.5s;
}

/* Orisa drives all four of these off :hover on the row. The focus-visible
   pairing is the one addition — .services_item is a tabbable div (there is
   nowhere for these to navigate to yet, same call as
   .pillar_heading_wrapper), and without it a keyboard user gets the image
   swap from services.js with none of the row's own state. Real pointer only,
   the same guard films.css uses, so a tap doesn't latch a row open on touch. */
@media (hover: hover) and (pointer: fine) {
	.services_item:hover .services_item_index,
	.services_item:focus-visible .services_item_index {
		color: var(--vv-gold);
		opacity: 1;
	}
	.services_item:hover .services_item_title,
	.services_item:focus-visible .services_item_title {
		opacity: 1;
	}
	.services_item:hover .services_item_text,
	.services_item:focus-visible .services_item_text {
		opacity: 1;
		max-height: 100px;
	}
	.services_item:hover .services_item_thumb img,
	.services_item:focus-visible .services_item_thumb img {
		max-width: 284px;
	}
}
.services_item:focus-visible {
	outline: 1px solid var(--vv-gold);
	outline-offset: 0.25rem;
}

@media screen and (max-width: 991px) {
	/* Same ownership rule as desktop, at the mobile-standard 3rem (Brands'
	   own mobile padding, brands.css): top cancels to 0, bottom is what
	   creates the gap to WhyUs. Was 2.5rem/4rem, matching neither Brands'
	   mobile padding (3rem) nor WhyUs's — every mobile boundary in this chain
	   was a different size before this pass. */
	.section_services {
		padding-top: 0;
		padding-bottom: 3rem;
	}
	.services_body {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	/* .services_media (the pinned/hover-swapped image column) is gone below
	   this width, not just un-pinned. It was staying in normal flow, frozen
	   on the first service's photo forever — services.js only ever swaps it
	   on mouseenter/focus, neither of which a touch tap fires, so on a phone
	   it was a large, static, oddly-cropped image sitting above the list
	   with no way to ever change or mean anything ("άκυρη πάνω πάνω,
	   ακεντράριστο, χωρίς εφε"). Each row already carries its OWN photo
	   (.services_item_thumb) with its own scroll-in reveal (services.js) —
	   that's the real mobile equivalent of the desktop hover-swap, not a
	   frozen duplicate of row one's image glued above everything. */
	.services_media {
		display: none;
	}
	/* Desktop's resting dim (0.3 opacity) + hover-only brightening
	   (@media (hover: hover), above) has no mobile equivalent — touch has no
	   hover, and tapping a row's tabindex="0" div does not satisfy
	   :focus-visible on most mobile browsers (that pseudo-class deliberately
	   excludes pointer interaction), so every row was stuck permanently dim
	   with no path to full opacity. services.js now runs its own
	   matchMedia("(max-width: 991px)") branch that scroll-reveals each row's
	   index/title/text together as it enters the viewport (autoAlpha 0→1),
	   the same "effect on scroll" the thumb already had — this opacity: 1
	   here is just the two lines' resting/idle CANVAS state before that
	   tween's initial autoAlpha: 0 takes over (GSAP's inline style always
	   wins the cascade once it runs); no-JS fallback shows them plainly
	   visible rather than stuck at 0.3. text's max-height goes from the
	   desktop hover-only 0→100px cap to permanently open — there is no
	   hover state left to expand it into on mobile, so the collapsed
	   default would otherwise hide the copy forever. */
	.services_item_index,
	.services_item_title {
		opacity: 1;
	}
	/* No CSS transitions on what services.js tweens at this width (the
	   scroll-in reveal: autoAlpha + y on index, title and text). The desktop
	   rules' `transition: all 0.5s` exists for the hover state, which does not
	   exist here — left on, it restarted a half-second transition on every
	   GSAP frame: measured, the reveal painted 0.03 opacity where GSAP had set
	   0.43, and lagged up to 0.68 behind throughout, which reads as stutter and
	   flicker on a phone. */
	.services_item_index,
	.services_item_title,
	.services_item_text {
		transition: none;
	}
	.services_item_text {
		max-height: none;
		opacity: 1;
	}
	/* Orisa's own narrow-screen tracks. */
	.services_item {
		grid-template-columns: 70px minmax(min-content, 1fr) minmax(120px, 295px);
	}
	.services_item_title {
		font-size: 42px;
		line-height: 42px;
		letter-spacing: -2.4px;
	}
}
@media screen and (max-width: 767px) {
	/* Orisa collapses to a single column here and lets the thumb stack under
	   the copy rather than shrinking it into an unreadable sliver. */
	.services_item {
		grid-template-columns: 1fr;
	}
	.services_item_thumb {
		text-align: left;
	}
	/* Full width, not the desktop 190px chip. With .services_media (the big
	   hover-swapped column) gone at this width, this IS the section's image
	   for a given service rather than a thumbnail beside a bigger one — at
	   190px on a single-column row it read as a stray postage stamp under
	   the copy, which is most of why the whole section felt static: the one
	   element that actually moves on scroll here was too small for its
	   movement to register. max-width: none overrides the desktop cap; the
	   aspect-ratio keeps every row's image the same shape regardless of
	   whether its source file is landscape or a cropped portrait (three of
	   the five were reframed — see Services.astro). */
	/* 3/2 is these files' own native ratio (all five -sm.jpg are 600×400), so
	   this reserves the right box without object-fit having to crop anything
	   off. Stated rather than left to the intrinsic ratio because the
	   desktop rule above sets an explicit height: auto against a 190px
	   max-width, and this needs to win cleanly at full width. */
	.services_item_thumb img {
		margin-left: 0;
		width: 100%;
		max-width: none;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: 12px;
	}
	/* 0.25rem (the desktop .services_item_content gap) is tuned for a row
	   where the description is REVEALED on hover out of a collapsed
	   max-height — it opens into its own space, so a hairline gap reads as
	   deliberate. Here the description is permanently open (this file's own
	   ≤991px block), so that same hairline just left the caps-set body copy
	   sitting directly on the display-face title's baseline with no
	   separation between two very different typefaces. */
	.services_item_content {
		gap: 0.5rem;
	}
}
@media screen and (max-width: 479px) {
	.services_item_title {
		font-size: 32px;
		line-height: 32px;
	}
}

/* ===== The list's own head and plate (on request) =========================
   Under the card deck on /services this section arrived with no introduction
   and on the same cream — the two read as one long run of content. Orisa's
   home-1/sec-4 head (at-service-subtitle-wrap: the eyebrow on a rule with a
   short note opposite) now opens it, and the whole section sits on the
   slightly deeper plate the site already uses for its lifted panels
   (.testimonials_panel, .pr_details_plate), inset and rounded, so it reads
   as its own block. */
.section_services {
	padding-top: 40px;
}
.section_services .services_container {
	padding-top: 56px;
	padding-bottom: 56px;
	border: 1px solid rgba(46, 54, 68, 0.1);
	border-radius: 24px;
	/* The page's own ground, not a deeper grey (on request): the darker plate
	   read as a different colour from everything above it. What sets the
	   section apart is its frame and the head over it, not a tone change. */
	background-color: var(--vv-cream);
	box-shadow: 0 24px 60px -48px rgba(46, 54, 68, 0.5);
}
.services_head {
	padding-bottom: 40px;
}
.services_head_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(46, 54, 68, 0.14);
}
.services_head_note {
	font-family: Jost, Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--vv-gray);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.services_head_title {
	margin: 24px 0 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(30px, 3.2vw, 52px);
	line-height: 1.12;
	color: var(--vv-charcoal);
}
@media screen and (max-width: 991px) {
	.section_services .services_container {
		padding-top: 40px;
		padding-bottom: 40px;
		border-radius: 18px;
	}
	.services_head {
		padding-bottom: 28px;
	}
}