/*
 * Services index (page-services.php): hero, sticky category menu, and one section per category
 * with a single photo beside a list of treatments.
 */

/* ---------- Hero ---------- */

.svc-hero {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--section-pad) var(--gutter) clamp(30px, 4vw, 56px);
	text-align: center;
}
.svc-hero .eyebrow { display: block; margin-bottom: 20px; }
.svc-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.015em; margin-bottom: 24px; }
.svc-hero .lead { margin: 0 auto; max-width: 58ch; }


/* ---------- Sticky category menu ----------
 * Sits under the site header while the categories scroll past. --header-h is set by site.js.
 */

.section-nav {
	position: sticky;
	top: var(--header-h, 0px);
	z-index: 80;
	background: var(--surface);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 12px var(--gutter);
	overflow-x: auto;
	scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }

.section-nav-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.section-nav a {
	flex-shrink: 0;
	font-family: var(--ui);
	font-size: var(--fs-tabs);
	font-weight: var(--menu-weight);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	line-height: var(--lh-label);
	color: var(--ink);
	padding: 10px 16px;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.section-nav a:hover { background: var(--surface-warm); border-color: var(--rule); }
.section-nav a.active { color: var(--link); border-color: var(--gold); }

@media (max-width: 900px) {
	.section-nav-inner { justify-content: flex-start; }
}


/* ---------- Category sections ---------- */

.cat-section {
	padding: clamp(56px, 7vw, 100px) var(--gutter);
	scroll-margin-top: calc(var(--header-h, 0px) + 72px);
}
.cat-section:nth-of-type(even) { background: var(--surface-soft); }

.cat-section-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

/* The photo and heading stay in view while the list scrolls. */
.cat-aside {
	position: sticky;
	top: calc(var(--header-h, 0px) + 84px);
}

/* The media is a fixed 320px square whatever the screen size; it never scales with the column. */
.cat-photo {
	width: 320px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--surface-warm);
	border: 1px solid var(--rule);
	margin-bottom: 24px;
}
.cat-photo img,
.cat-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.cat-head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.05; margin-bottom: 14px; }
.cat-head p { max-width: 46ch; color: var(--ink-soft); }


/* ---------- Treatment list ----------
 * A row is the treatment's name. Clicking it opens the description and the "View treatment" link.
 */

.svc-list { list-style: none; border-top: 1px solid var(--rule); }
.svc-row { border-bottom: 1px solid var(--rule); }

.svc-row-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 4px 20px 0;
	text-align: left;
	transition: color .2s ease;
}
.svc-row-toggle:hover .svc-row-name,
.svc-row.open .svc-row-name { color: var(--link); }

.svc-row-name { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2; }

/* A plus that turns into a minus when the row is open */
.svc-row-icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 50%; transition: background .25s ease, border-color .25s ease; }
.svc-row-icon::before,
.svc-row-icon::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s ease, background .25s ease; }
.svc-row-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc-row.open .svc-row-icon { background: var(--gold-surface); border-color: var(--gold-surface); }
.svc-row.open .svc-row-icon::before,
.svc-row.open .svc-row-icon::after { background: var(--on-gold); }
.svc-row.open .svc-row-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.svc-row-panel { padding: 0 0 22px; }
.svc-row-panel p { font-size: var(--fs-services-small); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin-bottom: 14px; }
.svc-row-panel .link-arrow { font-size: var(--fs-label); }


@media (max-width: 900px) {
	.cat-section-inner { grid-template-columns: 1fr; gap: 28px; }
	.cat-aside { position: static; }
	.cat-photo { margin-bottom: 20px; }
	.svc-row-name { font-size: var(--fs-h4); }
}