/* Vita Design - Services page
 * Type scale, colours and spacing follow the approved mockup at
 * http://vita.dotthinkdesign.com/dark/
 *
 * A note on the doubled class names (.vds-x.vds-x): Elementor styles its
 * containers through .e-con.e-flex and its headings through .elementor-kit-8 h2,
 * both of which outrank a single class. Repeating the class raises specificity
 * to match, and this stylesheet is enqueued after the kit so it takes the tie.
 */

:root {
	--vds-text: #4F5053;
	--vds-accent: #F37C2A;
	--vds-plate: rgba(216, 216, 210, 0.8); /* #D8D8D2 - the label backing */
}

/* ── Hero: three rollover tiles ───────────────────────────────────────── */

.vds-tiles {
	display: flex;
	width: 100%;
	/* Matches the banner proportion used across the service pages (3024x840). */
	height: calc(100vw * 840 / 3024);
	min-height: 220px;
}

.vds-tile {
	position: relative;
	display: block;
	flex: 1 1 0;
	overflow: hidden;
	text-decoration: none;
	background: #D8D8D2; /* shows through the faded image */
}

.vds-tile + .vds-tile {
	border-left: 2px solid #fff;
}

.vds-tile .vds-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	opacity: 0.55;
	transition: filter 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

/* The service the visitor arrived from (Architecture by default) stays in colour. */
.vds-tile.is-active .vds-tile-img {
	filter: none;
	opacity: 1;
}

/* Rolling over the strip - or tabbing into it - greys everything back out...
 * Deliberately :focus-visible rather than :focus-within: a tile clicked with
 * the mouse keeps DOM focus, so :focus-within would leave the whole strip grey
 * when the visitor presses Back. */
.vds-tiles:is(:hover, :has(.vds-tile:focus-visible)) .vds-tile .vds-tile-img {
	filter: grayscale(100%);
	opacity: 0.55;
}

/* ...and only the tile under the cursor, or focused, comes forward. The class
 * is repeated to outweigh the :has() above, which inflates its specificity. */
.vds-tiles .vds-tile.vds-tile:is(:hover, :focus-visible) .vds-tile-img {
	filter: none;
	opacity: 1;
}

.vds-tiles .vds-tile-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 5px 0;
	background: var(--vds-plate);
	color: var(--vds-text);
	font-size: clamp(11px, 0.9vw, 17px);
	font-weight: 700;
	letter-spacing: 0.32em;
	line-height: 1.6;
	text-transform: uppercase;
	text-align: center;
	/* Offsets the trailing letter-space so the word stays optically centred. */
	text-indent: 0.32em;
}

@media (prefers-reduced-motion: reduce) {
	.vds-tile .vds-tile-img {
		transition: none;
	}
}

/* ── Body: side navigation + copy, capped at 900px ────────────────────── */

/* Note: do not set Elementor's --width here. .e-con applies it as `width`,
 * not as a cap, which pins the container at 900px on narrow screens. */
.vds-services-body.vds-services-body {
	--flex-direction: row;
	--align-items: flex-start;
	--row-gap: 60px;
	--column-gap: 60px;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 60px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.vds-services-body.vds-services-body > .elementor-widget-shortcode,
.vds-services-body.vds-services-body > .vds-nav {
	flex: 0 0 220px;
}

.vds-services-body.vds-services-body > .vds-services-copy {
	flex: 1 1 auto;
	min-width: 0;
}

/* The same 900px cap for the service section pages (Architecture,
 * Construction, Interiors), whose body keeps its own two-column split.
 * Their hero carousel sits in a separate container and stays full-bleed. */
.vds-section.vds-section {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* Those pages size their columns 25%/75% with no gutter, which was fine at
 * full width but butts the copy against the nav once capped at 900px. Restore
 * the mockup's 60px gutter - desktop only, so the narrow layout is untouched. */
@media (min-width: 761px) {
	.vds-section.vds-section > .e-con-inner {
		gap: 60px;
	}
}

/* ── Side navigation ──────────────────────────────────────────────────── */

.vds-nav .vds-nav-title {
	font-size: 36px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vds-text);
	margin: 0 0 28px;
}

.vds-nav .vds-nav-title a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.vds-nav .vds-nav-title a:hover {
	color: var(--vds-accent);
}

.vds-nav .vds-nav-menu,
.vds-nav .vds-areas-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vds-nav .vds-nav-menu li {
	margin: 0;
	padding: 5px 0;
	font-size: 20px;
	line-height: 1.4;
}

.vds-nav .vds-nav-menu a,
.vds-nav .vds-areas-menu a {
	color: var(--vds-text);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.vds-nav .vds-nav-menu a:hover,
.vds-nav .vds-areas-menu a:hover,
.vds-nav .vds-nav-menu li.is-current a,
.vds-nav .vds-areas-menu li.is-current a {
	color: var(--vds-accent);
}

.vds-nav .vds-areas {
	margin-top: 34px;
}

.vds-nav .vds-areas-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--vds-text);
	opacity: 0.7;
	margin: 0 0 8px;
}

.vds-nav .vds-areas-menu li {
	margin: 0;
	padding: 2px 0;
	font-size: 15px;
	line-height: 1.5;
}

/* ── Copy ─────────────────────────────────────────────────────────────── */

.vds-services-copy.vds-services-copy h2 {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vds-text);
	margin: 0 0 22px;
}

.vds-services-copy.vds-services-copy h3 {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--vds-text);
	margin: 26px 0 6px;
}

.vds-services-copy.vds-services-copy p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--vds-text);
	margin: 0 0 14.4px;
}

.vds-services-copy.vds-services-copy a {
	color: var(--vds-accent);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
}

.vds-services-copy.vds-services-copy a:hover {
	text-decoration: underline;
}

/* ── Mobile: tiles stack, columns stack ───────────────────────────────── */

@media (max-width: 760px) {
	.vds-tiles {
		flex-direction: column;
		height: auto;
	}

	.vds-tile {
		height: 34vh;
		min-height: 200px;
	}

	.vds-tile + .vds-tile {
		border-left: none;
		border-top: 2px solid #fff;
	}

	.vds-tiles .vds-tile-label {
		font-size: 13px;
	}

	.vds-services-body.vds-services-body {
		--flex-direction: column;
		--align-items: stretch;
		--row-gap: 32px;
		--column-gap: 32px;
		flex-direction: column;
		/* Once the direction flips, align-items works on the horizontal axis -
		 * leaving it at flex-start shrink-wraps the copy and overflows the page. */
		align-items: stretch;
		gap: 32px;
	}

	.vds-services-body.vds-services-body > .elementor-widget-shortcode,
	.vds-services-body.vds-services-body > .vds-nav,
	.vds-services-body.vds-services-body > .vds-services-copy {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}