/* =================================================================
   THE SERVICES CAROUSEL
   =================================================================
   Two rows of service cards that step sideways on their own.

   THE ONE RULE THIS FILE OBEYS
   ----------------------------
   Everything under ".cb-svc--ready" is the carousel. Every rule
   WITHOUT it is the fallback: an ordinary wrapping grid holding every
   service, with the controls hidden. That class is added by
   services-carousel.js, so a script that never arrives leaves a
   complete, readable list of services — and `prefers-reduced-motion`
   keeps that fallback deliberately, because a grid is the same
   information without the movement.

   PALETTE
   -------
   The hero's, to the value. #17A2B8 is --themeht-primary-color, the
   colour of the logo and the header; the ink is a deep TEAL-black, not
   a navy, because a blue-black beside a teal accent reads violet.
   ================================================================= */

.cb-svc {
	--brand:      #17A2B8;
	--brand-deep: #0D7C8E;
	--brand-wash: #EAF7F9;

	--ink:        #0A2A33;
	--ink-soft:   #55686F;
	--line:       #DFE9EC;
	--paper:      #FFFFFF;

	--gap:        28px;

	/*
	 * THE BREAKPOINT MUST BE ABLE TO WIN, SO THE AUTHOR'S VALUE IS A
	 * DEFAULT AND NOT THE PROPERTY ITSELF.
	 *
	 * The shortcode writes --cb-svc-cols-SET and --cb-svc-clamp-SET as
	 * an inline style, and an inline style beats every stylesheet rule
	 * including a media query. Written directly, "four columns" would
	 * stay four on a phone no matter what the breakpoint below says.
	 *
	 * Read through a var() default instead, the media queries at the
	 * foot of this file override the real property freely — and the
	 * script reads the COMPUTED value, so what it steps by is always
	 * what the grid actually drew.
	 *
	 * There is no --cb-svc-rows. Each row is its own element now,
	 * because each travels in its own direction, so the row count is
	 * markup rather than style and a breakpoint cannot change it.
	 */
	--cb-svc-cols:  var(--cb-svc-cols-set, 4);
	--cb-svc-clamp: var(--cb-svc-clamp-set, 3);

	position: relative;
}


/* -----------------------------------------------------------------
   FALLBACK — a plain wrapping grid
   ----------------------------------------------------------------- */

.cb-svc__viewport {
	display: grid;
	grid-template-columns: repeat(var(--cb-svc-cols), minmax(0, 1fr));
	gap: var(--gap);
}

/*
 * `display: contents` dissolves the row wrappers so their cards join
 * the viewport's own grid.
 *
 * Without it the fallback is two separate grids stacked — five cards
 * in a four-column grid, twice, so two half-empty rows. With it the
 * fallback is one continuous grid of ten, which is what a page with no
 * JavaScript should show.
 *
 * A browser that does not support it (very old Edge) gets the two
 * stacked lists: uglier, still every service, still every link.
 */
.cb-svc__row { display: contents; }

.cb-svc__controls { display: none; }


/* =================================================================
   CAROUSEL MODE
   =================================================================
   Everything from here needs the script.
   ================================================================= */

.cb-svc--ready .cb-svc__viewport {
	/*
	 * `clip` rather than `hidden`.
	 *
	 * With one axis hidden and the other visible, the visible one
	 * computes to `auto` and the element becomes a SCROLL CONTAINER —
	 * which here means a card lifting on hover gets its shadow cut off
	 * and the browser can scroll the track sideways on focus, fighting
	 * the transform. `clip` hides the overflow without any of that.
	 */
	overflow: clip;

	/* The lift and its shadow need room, or they are shaved off. */
	margin: -14px;
	padding: 14px;
}

/*
 * In carousel mode the viewport stops being the grid and becomes a
 * stack of rows, because each row now moves on its own.
 */
.cb-svc--ready .cb-svc__viewport {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

/*
 * One row, one strip of cards, one transform.
 *
 * `display: contents` is undone here — the row needs a box again so it
 * can be moved. Each is a single-row grid whose columns are as wide as
 * the visible column width, so a step of one column is a step of one
 * card, and the script gives the odd rows the opposite sign.
 */
.cb-svc--ready .cb-svc__row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( (100% - (var(--cb-svc-cols) - 1) * var(--gap)) / var(--cb-svc-cols) );
	gap: var(--gap);

	transition: transform .62s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

/* Set while a row's DOM is being rotated, for the one frame where it
   jumps back to its start position and must not animate. */
.cb-svc--ready .cb-svc__row.is-jumping { transition: none; }

/*
 * Arrows and count TOGETHER at the start, not pushed to opposite ends.
 *
 * Spread apart, the count landed in the bottom outer corner of the
 * viewport — which is where the theme's fixed back-to-top button sits,
 * so the two overlapped. Grouped, they also line up under the heading
 * instead of floating at the far edge.
 */
.cb-svc--ready .cb-svc__controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	margin-block-start: 32px;
}

.cb-svc__arrows {
	display: flex;
	gap: 10px;
}

.cb-svc__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cb-svc__arrow:hover,
.cb-svc__arrow:focus-visible {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
}

.cb-svc__arrow:focus-visible {
	outline: 2px solid var(--brand-deep);
	outline-offset: 3px;
}

/* Drawn pointing left and right, mirrored in RTL — "previous" is a
   DIRECTION, and on this Arabic site it is to the right. */
[dir="rtl"] .cb-svc__arrow svg { transform: scaleX(-1); }

.cb-svc .cb-svc__count {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-soft);
}

.cb-svc__count-word { color: var(--brand-deep); }


/* -----------------------------------------------------------------
   REDUCED MOTION
   -----------------------------------------------------------------
   Only what this file owns. The card's own hover and zoom are handled
   in service-card.css, beside the transitions they switch off — a
   reduced-motion rule that lives in a different file from the
   transition it cancels is the one that gets missed when either moves.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.cb-svc__arrow,
	.cb-svc--ready .cb-svc__row {
		transition: none;
	}
}


/* =================================================================
   BREAKPOINTS
   ================================================================= */

@media (max-width: 1024px) {

	.cb-svc {
		--gap: 20px;
		--cb-svc-cols: 2;
	}
}

@media (max-width: 767px) {

	.cb-svc {
		--gap: 16px;
		--cb-svc-cols: 1;

		/* Two rows on a phone means two full-width cards stacked, so the
		   description gives up a line to keep the pair inside a screen.
		   The row COUNT is not here — it is markup, set by the
		   shortcode's rows attribute. */
		--cb-svc-clamp: 2;
	}

	.cb-svc__body { padding: 18px 18px 16px; }

	.cb-svc .cb-svc__title { font-size: 17.5px; }
}