/* =================================================================
   THE SERVICE PAGE'S BODY
   =================================================================
   Alternating bands: copy beside a photograph, then two blocks of copy
   side by side, then the photograph on the other side.

   PALETTE
   -------
   The site's, not a new one. #17A2B8 is --themeht-primary-color, the
   colour of the logo and the header, and the dark is a teal-black
   rather than a navy — a blue-black beside a teal accent reads violet.

   THE BANDS ALTERNATE THEIR GROUND TOO
   ------------------------------------
   White, then a pale tint, then white. Ten sections of identical white
   is a document; the alternation is what makes a long page read as a
   sequence of sections rather than one scroll.
   ================================================================= */

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

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

	--measure:    1320px;
	--gap:        70px;

	/*
	 * The band's own padding, top and bottom — so the white space
	 * BETWEEN two sections is twice this number.
	 *
	 * It was 104px, which measured 208px of nothing between every pair
	 * of sections. That reads as generous on a page with four of them
	 * and as a page that has lost its content on a page with nine,
	 * which is what these service articles produce. 64 gives 128px:
	 * still clearly a break between sections, no longer a hole.
	 */
	--band:       64px;
}

.cb-sec {
	background: var(--paper);
}

/* Every second band takes the tint. :nth-child(4n+3) rather than
   (2n) so the pairs read as pairs — a media band and the duo band
   under it share a ground, then the next pair takes the other. */
.cb-sec:nth-child(4n + 3),
.cb-sec:nth-child(4n + 4) {
	background: var(--ground);
}

.cb-sec__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--gap);
	max-width: var(--measure);
	margin-inline: auto;
	padding: var(--band) 24px;
}

/*
 * The flip is a row-reverse, not a pair of orders.
 *
 * Ordering the two columns individually means every new child has to
 * be given an order too, and the day someone adds a third the layout
 * silently reshuffles. Reversing the row is one declaration and cannot
 * be half-applied.
 */
.cb-sec.is-flipped .cb-sec__inner {
	flex-direction: row-reverse;
}

.cb-sec__col {
	min-width: 0;
}

.cb-sec__col--main  { flex: 1 1 54%; }
.cb-sec__col--aside { flex: 1 1 46%; }
.cb-sec__col--media { flex: 0 1 46%; }

/* A media band with no photograph chosen: the copy takes the width
   rather than leaving half the band empty. */
.cb-sec--image.is-solo .cb-sec__col--main {
	flex: 1 1 100%;
	max-width: 900px;
}


/* -----------------------------------------------------------------
   TYPE
   -----------------------------------------------------------------
   Every rule here carries the block class for a reason worth stating:
   the theme ships `.entry-content h2` at 28px/600 and
   `html[dir="rtl"] h1, h2, h3 { line-height: 1.45 }`, both (0,1,1),
   which beat a plain `.cb-sec__title` at (0,1,0). The same collision
   set every heading in the home hero to the wrong size until it was
   written this way. It is not an override layer — it is this rule
   stated at the weight it needs, in the file that owns the section.
   ----------------------------------------------------------------- */

.cb-sections .cb-sec__title {
	margin: 0 0 20px;
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 800;
	line-height: 1.35;
	color: var(--ink);
	text-wrap: balance;
}

.cb-sections .cb-sec__body {
	font-size: 17px;
	line-height: 1.95;
	color: var(--ink-soft);
}

.cb-sections .cb-sec__body > :first-child { margin-block-start: 0; }
.cb-sections .cb-sec__body > :last-child  { margin-block-end: 0; }

.cb-sections .cb-sec__body p {
	margin: 0 0 16px;
}

/* The articles carry h3 sub-headings inside the body — the FAQ blocks
   are built from them. Without this they inherit the theme's 28px and
   compete with the section's own title. */
.cb-sections .cb-sec__body h2,
.cb-sections .cb-sec__body h3,
.cb-sections .cb-sec__body h4 {
	margin: 30px 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--ink);
}

.cb-sections .cb-sec__body ul,
.cb-sections .cb-sec__body ol {
	margin: 0 0 18px;
	padding-inline-start: 22px;
}

.cb-sections .cb-sec__body li {
	margin-block-end: 10px;
}

/*
 * The marker is drawn rather than left to the browser.
 *
 * These lists are the substance of the page — ten or eleven per
 * article — and a default disc in the body colour reads as a wall.
 * A brand-coloured square-ish dot gives the page its one repeated
 * accent without adding a component.
 */
.cb-sections .cb-sec__body ul {
	list-style: none;
	padding-inline-start: 0;
}

.cb-sections .cb-sec__body ul > li {
	position: relative;
	padding-inline-start: 22px;
}

.cb-sections .cb-sec__body ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--brand);
}

.cb-sections .cb-sec__body a,
.cb-sections .cb-sec__body a:visited {
	color: var(--brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-sections .cb-sec__body a:hover {
	color: var(--brand);
}

.cb-sections .cb-sec__body strong {
	color: var(--ink);
	font-weight: 700;
}


/* -----------------------------------------------------------------
   THE PHOTOGRAPH
   ----------------------------------------------------------------- */

.cb-sec__figure {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--brand-wash);

	/* Three layers, not one wide blur: a contact shadow, a mid spread
	   and a soft far one, which is how a real object is lit. */
	box-shadow:
		0 1px 2px rgba(10, 42, 51, .05),
		0 10px 22px -10px rgba(10, 42, 51, .12),
		0 30px 56px -28px rgba(10, 42, 51, .22);
}

/*
 * THE RATIO IS ON THE IMAGE, NOT ON THE FIGURE.
 *
 * A percentage height resolves against the containing block's height,
 * and a block sized only by aspect-ratio does not give one — so
 * `height: 100%` on the image falls back to auto and leaves a strip of
 * the figure's background showing. That cost real time on the home
 * page's services grid; it is not repeated here.
 *
 * Sizing the image itself also means the browser reserves the right
 * box before the file arrives, so a long page does not jump as each
 * band's photograph loads.
 */
.cb-sections .cb-sec__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Sticky, and only where there is room for it to matter.
 *
 * These bands are tall — a section's copy can run past a viewport — and
 * a photograph that scrolls out at the top of a 900px band leaves the
 * reader with a column of grey. `top` clears the theme's fixed header.
 */
@media (min-width: 1025px) {

	.cb-sec__col--media {
		position: sticky;
		top: 104px;
	}
}


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

@media (max-width: 1024px) {

	.cb-sections {
		--gap: 40px;
		--band: 48px;
	}

	/*
	 * Stacked, and the flip is dropped with it.
	 *
	 * row-reverse on a column axis puts the photograph ABOVE its own
	 * heading, so half the bands would open with an unexplained image.
	 * In one column the reading order is the only order.
	 */
	.cb-sec__inner,
	.cb-sec.is-flipped .cb-sec__inner {
		flex-direction: column;
	}

	.cb-sec__col--main,
	.cb-sec__col--aside,
	.cb-sec__col--media {
		flex: 1 1 auto;
		width: 100%;
	}

	.cb-sec--image.is-solo .cb-sec__col--main { max-width: none; }
}

@media (max-width: 767px) {

	.cb-sections {
		--gap: 30px;
		--band: 38px;
	}

	.cb-sec__inner { padding-inline: 20px; }

	.cb-sections .cb-sec__body { font-size: 15.5px; line-height: 1.9; }

	.cb-sections .cb-sec__body h2,
	.cb-sections .cb-sec__body h3,
	.cb-sections .cb-sec__body h4 { font-size: 18px; }

	.cb-sections .cb-sec__img { aspect-ratio: 16 / 10; }
}


/* -----------------------------------------------------------------
   A SECTION'S VIDEO
   -----------------------------------------------------------------
   A still with a play button on it. The player is built on click — see
   assets/js/service-sections.js and the renderer for why nothing is
   loaded from Google before then.
   ----------------------------------------------------------------- */

.cb-sec__figure--video { position: relative; }

/*
 * The cover is one big button.
 *
 * Buttons carry a pile of user-agent styling — font, padding, border,
 * background — none of which is wanted here, and the button box has to
 * become the aspect box so the iframe that replaces the image later
 * lands in exactly the same space and the page does not jump.
 */
.cb-sections .cb-sec__play {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	aspect-ratio: 4 / 3;
}

.cb-sections .cb-sec__play .cb-sec__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

.cb-sections .cb-sec__play:hover .cb-sec__img { transform: scale(1.04); }

.cb-sec__play-btn {
	position: absolute;
	inset-block-end: 16px;
	inset-inline-start: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .55);
	transition: transform .25s ease, background-color .25s ease;
}

/* The triangle is drawn from its own left edge, so it sits visibly
   off-centre in a circle unless it is nudged back. */
.cb-sec__play-btn svg { margin-inline-start: 4px; }

/* Never mirrored: a play triangle points at the timeline, which runs
   left to right in every player there is, Arabic ones included. */
[dir="rtl"] .cb-sec__play-btn svg { transform: none; }

.cb-sections .cb-sec__play:hover .cb-sec__play-btn,
.cb-sections .cb-sec__play:focus-visible .cb-sec__play-btn {
	transform: scale(1.07);
	background: var(--brand-deep);
}

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

/* Once it holds a player it is no longer a control. */
.cb-sections .cb-sec__play.is-playing { cursor: default; }

.cb-sections .cb-sec__play.is-playing:hover .cb-sec__img { transform: none; }

.cb-sections .cb-sec__play iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

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

	.cb-sections .cb-sec__play .cb-sec__img,
	.cb-sec__play-btn { transition: none; }

	.cb-sections .cb-sec__play:hover .cb-sec__img { transform: none; }

	.cb-sections .cb-sec__play:hover .cb-sec__play-btn,
	.cb-sections .cb-sec__play:focus-visible .cb-sec__play-btn { transform: none; }
}

@media (max-width: 767px) {

	.cb-sections .cb-sec__play { aspect-ratio: 16 / 10; }

	.cb-sec__play-btn { width: 50px; height: 50px; }
}