/**
 * Service Tabs — the location pages' tabbed services block.
 *
 * Read off the per-city component master:
 *   section  1920x948, padding 120 240
 *   bar      1440x78 — chips sized to their label, padding 20/25, 22px/100%,
 *            active #01963A on white text, the rest #F2FAF5 on #010101
 *   panel    1440x{h} #FFFFFF, padding 60, gap 99
 *   media    586 column — title 36/42 over a 586x382 photo, 60 apart
 *   copy     635 column at 20/32
 *
 * The nine chips sum to 1995 against a 1440 bar, so the design clips them. On
 * the web the bar scrolls instead of hiding four services outright.
 */

.service-tabs__inner {
	display: flex;
	flex-direction: column;
}

/* --- tab bar ---------------------------------------------------------- */
/* The nine chips sum past the 1440 bar, so the row pans. No scrollbar: it is
 * dragged with the pointer (see initServiceTabDrag) and still scrolls with the
 * wheel, keyboard and touch, so nothing is lost by hiding it.
 * `overscroll-behavior-x: contain` stops a drag past the end turning into a
 * browser back-swipe. */
.service-tabs__bar {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
	-ms-overflow-style: none;
}

.service-tabs__bar::-webkit-scrollbar {
	display: none;
}

.service-tabs__bar.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

/* A drag must not fire the chip underneath it. */
.service-tabs__bar.is-dragging .service-tabs__tab {
	pointer-events: none;
}

.service-tabs__tab {
	flex: 0 0 auto;
	min-height: 78px;
	padding: var(--space-30) var(--space-25) var(--space-20);
	border: 0;
	background-color: var(--pale-green);
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-22);
	/* SemiBold in the master, not Bold. */
	font-weight: 600;
	line-height: var(--lh-tight);
	white-space: nowrap;
	transition: var(--transition);
	cursor: pointer;
}

.service-tabs__tab.is-active {
	background-color: var(--primary-green);
	color: var(--white);
}

.service-tabs__tab:hover:not(.is-active),
.service-tabs__tab:focus-visible:not(.is-active) {
	color: var(--primary-green);
}

/* --- panel ------------------------------------------------------------- */
.service-tabs__panel {
	display: grid;
	grid-template-columns: minmax(0, 586fr) minmax(0, 635fr);
	align-items: start;
	gap: 99px;
	padding: var(--space-60);
	/* The master strokes the panel 1px #121212 at 15% — sampled #DBDBDB on the
	 * 1:1 export, which is that colour over white. No top edge: sampled at the
	 * bar/panel seam the export is pure white right across, under the active
	 * chip and the inactive ones alike, so the panel opens straight off the bar
	 * and only the sides and bottom are drawn. */
	border: 1px solid rgba(var(--near-black-rgb), 0.15);
	border-top: 0;
	background-color: var(--white);
}

.service-tabs__panel[hidden] {
	display: none;
}

/* Title box 60..144, photo 179..561 — a 35px gap, not the 60 the panel uses
 * around its edges. */
.service-tabs__media-col {
	display: flex;
	flex-direction: column;
	gap: 35px;
}

/**
 * Panel title — Anek Devanagari 36/42, read off the nine SYMBOL variants in
 * each `<City>_tab` master. It is TWO styles, not one, and identical in all
 * seventeen cities: the service name on line 1 is the accent green at 700, and
 * "Company in <City>, Ohio" on line 2 is #010101 at 400. Columbus and
 * Worthington express it inverted in the file (node black with a green run
 * rather than node green with a black run) but resolve to the same two lines.
 *
 * The template wraps line 1 in a span, so the base rule here is line 2.
 */
.service-tabs__heading {
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-36);
	font-weight: 400;
	line-height: 1.167; /* 42/36 */
}

.service-tabs__heading span {
	color: var(--primary-green);
	font-weight: 700;
}

/* Width first, so the ratio resolves the height from it rather than the other
 * way round — the trap that overflowed a product row at 1199. */
.service-tabs__figure {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--tab-media-ratio, 586 / 382);
}

.service-tabs__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-tabs__text p {
	margin: 0;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: var(--lh-body);
}

/* Figma sets paragraphSpacing 15 on the panel copy, and the 1:1 export shows
 * three clearly separated paragraphs. It had been 25, which is why the
 * generator rendered <br> instead of splitting — 25 was worse than nothing. */
.service-tabs__text p + p {
	margin-top: var(--space-15);
}

.service-tabs__text a {
	color: var(--primary-green);
	text-decoration: underline;
}

.service-tabs__text a:hover,
.service-tabs__text a:focus-visible {
	color: var(--primary-black);
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1199px) {

	.service-tabs__panel {
		gap: var(--space-40);
		padding: var(--space-40);
	}

	.service-tabs__media-col {
		gap: var(--space-40);
	}
}

@media (max-width: 991px) {

	.service-tabs__panel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {

	.service-tabs__tab {
		min-height: 56px;
		padding: var(--space-15) var(--space-20);
	}

	.service-tabs__panel {
		padding: var(--space-25);
	}
}