/* ==========================================================================
   Service detail pages: lede, check lists, image strips, tabbed panels.

   The markup these style lives in the service's own content, so an editor can
   reorder or drop any block without the page falling apart.
   ========================================================================== */

/* Banner photograph ------------------------------------------------------ */

/* The flat navy block stays underneath, so a slow or missing image never
   leaves white text on white. */
/* The scrim is neutral black at half opacity, which is what production lays
   over these photographs; tinting it navy instead turned every banner blue. */
.banner--image {
	position: relative;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--banner-image);
	background-size: cover;
	background-position: 50% 50%;
}

/* Lede and body ---------------------------------------------------------- */

.prose--service > h2:first-child {
	position: relative;
	max-width: 38ch;
	/* Production's gap from this heading to the first paragraph is 24px -
	   its heading ends at 590 and the paragraph opens at 614 at 1440. */
	margin-block-end: 24px;
	/* Its own h3 carries `padding-left: 76px` and the rule beside it is a
	   50x3 bar, absolutely placed and centred on the heading box. */
	padding-inline-start: 76px;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	/* Production draws this heading on a 1.2 line - 43.2px at 36px - and
	   this rule is the one that decides it: service.css loads after
	   components.css and `> h2:first-child` outranks a plain `h2`. */
	line-height: 1.2;
	color: #0e0e0e;
}

.prose--service > h2:first-child::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 50px;
	height: 3px;
	transform: translateY(-50%);
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
}

/* Check lists ------------------------------------------------------------ */

.check-list {
	display: grid;
	gap: 0.875rem;
	margin-block: 1.75rem;
	padding: 0;
	list-style: none;
}

.check-list > li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: 0.875rem;
	align-items: start;
	line-height: 1.6;
}

.check-list > li::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rilt-accent), var(--rilt-green));
	/* A tick punched out of the disc, so the mark keeps its shape at any size
	   and needs no icon font. */
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m-1.3 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Image strips ----------------------------------------------------------- */

.gallery-strip {
	display: grid;
	/* Three equal columns, the way production lays this row out down to 768.
	   `auto-fit` with a minimum looked equivalent but dropped to two columns
	   at 768 and left the third picture stranded on a row of its own.
	   The gutter is 6px: production's three pictures measure 386px each in
	   the 1170px row, which is 3x386 + 2x6. */
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-block: 2.5rem;
	padding: 0;
}

@media (max-width: 47.99rem) {
	/* Below 768 production swipes through these one at a time. Stacking shows
	   the same three pictures without a control the page does not otherwise
	   need. */
	.gallery-strip {
		grid-template-columns: 1fr;
	}
}

.gallery-strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rilt-radius);
}

/* The carousel variant shows two at a time and scrolls, the way production
   does. Without JavaScript it stays a swipeable strip rather than breaking. */
.gallery-strip--carousel {
	/* Two to a view with a 6px gutter, which is what production renders:
	   582px pictures in the 1170px row, 2x582 + 6. */
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gallery-strip--carousel::-webkit-scrollbar {
	display: none;
}

.gallery-strip--carousel > img {
	/* `min-width: auto` on a flex item lets the picture's own intrinsic size
	   override the basis, which stretches one image across the whole strip.
	   Sizing by width with the minimum cleared keeps two per view.
	   The shape is production's measured 582x364, not a rounded 16/11. */
	flex: 0 0 auto;
	width: calc(50% - 3px);
	min-width: 0;
	height: auto;
	scroll-snap-align: start;
	aspect-ratio: 582 / 364;
	/* Production rounds these 7px, not the 3px the rest of the site uses. */
	border-radius: 7px;
}

@media (max-width: 47.99rem) {
	.gallery-strip--carousel > img {
		width: 100%;
	}
}

/* Tabs ------------------------------------------------------------------- */

.tabs {
	margin-block: 3rem 1rem;
}

.tabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-block-end: 1px solid rgba(10, 30, 61, 0.12);
}

.tabs__tab {
	/* Tall enough to clear the 24px minimum target on its own, before the
	   padding: a tab is a control, not inline text. */
	min-height: 2.75rem;
	padding: 0.875rem 1.5rem;
	border: 0;
	background: none;
	color: var(--rilt-navy);
	font-family: var(--rilt-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.tabs__tab:hover,
.tabs__tab:focus-visible {
	color: var(--rilt-accent);
}

.tabs__tab[aria-selected="true"] {
	background: linear-gradient(90deg, var(--rilt-accent), var(--rilt-green));
	color: #fff;
}

.tabs__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Production lays each panel out on a Bootstrap row: a 30px gutter, so
	   two equal columns measure 570px in the 1170px panel and the right one
	   opens at x735. Its content starts 30px below the tab bar. */
	column-gap: 30px;
	row-gap: 0;
	align-items: center;
	padding-block-start: 30px;
}

.tabs__panel[hidden] {
	display: none;
}

.tabs__panel img {
	/* Its own size, capped by the column. Production draws each of these at
	   the size it uploaded - the 300x300 implementation photograph stays
	   300px rather than being stretched to fill a column - and lets the
	   column clip anything larger. */
	width: auto;
	max-width: 100%;
	border-radius: var(--rilt-radius);
}

/* A picture wider than its column is held to production's own size by the
   pinned max-width, and sits at the start of the column rather than being
   centred in it. It does not span the row: production keeps it beside the
   list, in the second column of the Bootstrap row. */
.tabs__panel > p:has(> img[style*='max-width']) {
	justify-self: start;
}

.tabs__panel > p > img[style*='max-width'] {
	width: auto;
}

/* A pinned width is production's desktop size, not a floor: below the tablet
   breakpoint the picture goes back to fitting its column. Without this the
   570px pin pushed 195px of horizontal overflow onto the Salesforce page at
   390, which the sweep caught. */
@media (max-width: 47.99rem) {
	img[style*='max-width'] {
		max-width: 100% !important;
		height: auto !important;
	}
}

.tabs__panel > .check-list,
.tabs__panel > p {
	margin-block: 0;
}

/* The panel heading belongs to the left column on production, above the
   list, not across the whole row: its h5 is inside the same `col-md-*` the
   list is, 24px/600 in rgb(0,123,255) on a 1.2 line, 16px in from the column
   and 15px clear of the list. */
.single-rilt_service .prose--service .tabs__panel h3 {
	margin: 0 0 15px 16px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: rgb(0, 123, 255);
}

/* Below the tablet breakpoint the panel is one column and everything simply
   stacks, which is what production does too, so the placement below is
   desktop only - without the query it outranks the single-column rule. */
@media (min-width: 62rem) {
	.single-rilt_service .prose--service .tabs__panel h3 {
		grid-column: 1;
		grid-row: 1;
	}

	.tabs__panel:has(> h3) > .check-list {
		grid-column: 1;
		grid-row: 2;
	}

	/* The picture then stands beside both of them. */
	.tabs__panel:has(> h3) > p {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* With a heading in it production stops centring the row - the heading and
   the picture both start at the top of the panel. Without one it centres,
   which is what the rule above already does.

   The explicit rows matter: the picture spans both, and where it is taller
   than the heading and list together - the 300x300 photograph on tab two -
   a pair of `auto` rows share the surplus out and push the list 15px below
   where production draws it. Giving row two the free space pins the list
   under the heading instead. */
@media (min-width: 62rem) {
	.tabs__panel:has(> h3) {
		grid-template-rows: auto 1fr;
		align-items: start;
	}
}

@media (max-width: 61.99rem) {
	.tabs__panel {
		grid-template-columns: 1fr;
	}
}

/* Before the script runs every panel is shown, so the content is complete
   even if the script never loads. The tab bar only works once it does. */
.tabs__bar {
	display: none;
}

.js-tabs .tabs__bar {
	display: flex;
}

/* Round eleven — see the note in components.css for why these were missed.
   Production's own values, read live. */

/* Its service tabs are 18px/700 Roboto in rgb(34,34,34) at 1440 and 16px at
   390; this theme drew 15px/600 navy Poppins at both. The year tabs on the
   disclosure pages share this class and keep their own size, set in
   investor.css. */
.tabs__tab {
	font-family: var(--rilt-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	color: rgb(34, 34, 34);
}

/* Its panel bullets are 15px in rgb(99,99,99) on a 27px line, where this
   theme used 16px body ink on 25.6px. */
/* Production's panel bullets are 15px in rgb(99,99,99); the two lists differ
   only in leading - 27px inside a tab panel, 28.125px in the standalone
   check-list. */
.prose--service .tabs__panel li,
.prose--service .check-list > li {
	font-size: 0.9375rem;
	color: rgb(99, 99, 99);
}

/* The in-panel list needs the extra class to outrank the standalone
   check-list rule below it; without it both lists took 1.875. */
.prose--service .tabs__panel .check-list > li,
.prose--service .tabs__panel li {
	line-height: 1.8;
}

.prose--service .check-list > li {
	line-height: 1.875;
}

@media (max-width: 47.99rem) {
	.tabs__tab {
		font-size: 1rem;
	}

	/* Production does not step the two service headings down as far as this
	   theme did: 30px on a 36px line on the Salesforce page and 32px on
	   38.4px on the staffing one, against 26px/31.2px here. */
	.rilt-page-salesforce-center-of-excellence .prose--service > h2:first-child {
		font-size: 1.875rem;
		line-height: 1.2;
	}

	.rilt-page-it-staffing-and-hr-services .prose--service > h2:first-child {
		font-size: 2rem;
		line-height: 1.2;
	}

	/* Production's careers intro heading is 30px on a 40px line at phone
	   width, where this theme stepped it to 26px/32.5px. */
	.rilt-page-careers .careers-heading {
		font-size: 1.875rem;
		line-height: 1.3333;
	}
}

/* At 1440 production draws the staffing heading 32px on a 38.4px line, where
   this theme used the shared 36px/43.2px. */
.rilt-page-it-staffing-and-hr-services .prose--service > h2:first-child {
	font-size: 2rem;
	line-height: 1.2;
}


/* Round twelve: the Salesforce Center of Excellence page -----------------
   Every number below was measured on
   https://www.responseinformaticsltd.com/service/salesforce-center-of-excellence/
   at 1440 and, where the rule is shared, confirmed against
   /service/it-staffing/. */

/* The lede sits in a 72% column on production, not across the whole row:
   its first section is two Elementor columns, 871px and an empty 329px, so
   the heading and the paragraphs wrap at 841px inside the 1170px content
   grid. Below Elementor's tablet breakpoint the columns stack and the text
   is full width again. */
@media (min-width: 48rem) {
	.prose--service > h2:first-child,
	.prose--service > p {
		max-width: 71.9%;
	}
}

/* Production's paragraph rhythm here is wider than the 20px the rest of the
   site uses, and its first gap is the widest: its paragraphs open at 614,
   765 and 1030 at 1440, which is 31px then 25px. */
.prose--service > p {
	margin-block-end: 25px;
}

.prose--service > p:first-of-type {
	margin-block-end: 31px;
}

/* 45px of air between the last paragraph and the carousel - 1150 to 1195. */
.prose--service > .gallery-strip {
	margin-block-start: 45px;
}

/* And 29px between the dots and the tab bar, which opens at 1648. */
.prose--service > .tabs {
	margin-block-start: 29px;
}

/* Without a breadcrumb the banner is production's 280px - 116px of padding
   either side of the 48px heading - not the 325px every other page needs. */
.single-rilt_service .banner {
	min-height: 280px;
}

/* The strip's own bottom margin would otherwise collapse over the dots'
   top margin and win, so it is cleared here and the gap set once below. */
.prose--service > .gallery-strip--carousel {
	margin-block-end: 0;
}

/* Its carousel dots are small circles 46px apart, 48px below the pictures:
   6px of rgb(198,198,198) at rest, and the current one 12px carrying the
   site's own accent-to-green gradient,
   `linear-gradient(90deg, #05afec 0%, #94ca36 50%, #05afec)`, read off its
   `.slick-dots .slick-active button`. The 24px press target stays - the dot
   is what changes, not the control. */
.gallery-strip--carousel + .dots {
	gap: 22px;
	margin-block-start: 36px;
}

.gallery-strip--carousel + .dots .dots__button::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgb(198, 198, 198);
}

.gallery-strip--carousel + .dots .dots__button[aria-current="true"]::before {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(90deg, var(--rilt-accent) 0%, var(--rilt-green) 50%, var(--rilt-accent));
}

/* Tab strip. Production's tabs are 40px tall - 5px of padding on a 30px
   line - with 34px of padding either side, 30px between them and no
   letter-spacing, over a 1px rgb(215,215,215) rule. The year tabs on the
   disclosure pages keep their own sizing, set in investor.css. */
.prose--service .tabs__bar {
	gap: 0;
	border-block-end: 1px solid rgb(215, 215, 215);
}

.prose--service .tabs__tab {
	min-height: 0;
	padding: 5px 34px;
	margin-inline-end: 30px;
	line-height: 30px;
	letter-spacing: normal;
}

/* Its check lists indent 15px into the column and run 12px apart, and the
   tick is 22px with 18px of air before the text: production's first bullet
   opens at x150 with its words at x190. */
.prose--service .check-list {
	gap: 12px;
	margin-inline-start: 15px;
}

.prose--service .check-list > li {
	grid-template-columns: 22px 1fr;
	gap: 18px;
}

.prose--service .check-list > li::before {
	width: 22px;
	height: 22px;
}

/* Service banners carry no breadcrumb, so the page opens 35px below the
   banner rather than a full section's worth. Production: banner ends at
   469, heading opens at 504. */
.single-rilt_service .page-body {
	padding-block: 35px 61px;
}

/* Per-tab column split. Production writes each panel as its own Bootstrap
   row and the split is not the same in all four: tabs one and four are
   col-md-6 either side, tabs two and three put the list in a col-md-8 and
   the picture in a col-md-4. That lives in the page's own markup, which
   this theme does not reproduce, so the split is set here by position.
   (`:nth-of-type` counts the tab bar as the first div in `.tabs`.) */
@media (min-width: 62rem) {
	.rilt-page-salesforce-center-of-excellence .tabs__panel:nth-of-type(3),
	.rilt-page-salesforce-center-of-excellence .tabs__panel:nth-of-type(4) {
		grid-template-columns: 770fr 370fr;
	}

	/* Tab four centres its picture against the taller list column. */
	.rilt-page-salesforce-center-of-excellence .tabs__panel:nth-of-type(5) > p {
		align-self: center;
	}
}

/* Production serves the optimisation photograph through Photon as a 640x361
   crop; the copy in staging's library is the uncropped 1038x720 original,
   so the frame is set here and the picture fills it. */
.rilt-page-salesforce-center-of-excellence .tabs__panel:nth-of-type(4) img {
	aspect-ratio: 640 / 361;
	object-fit: cover;
}

/* The staffing page splits its first tab the other way: a col-md-4 list
   against a col-md-8 picture. */
@media (min-width: 62rem) {
	.rilt-page-it-staffing-and-hr-services .tabs__panel:nth-of-type(2) {
		grid-template-columns: 370fr 770fr;
	}
}

/* Phone. These come last because the desktop values above share their
   specificity, and production's phone strip is a different shape: its tabs
   are 246, 208, 215 and 75 wide at 390 and butt up against each other, its
   DSIS tab opening at x230 directly after the one before it. That is 20px
   of padding and no margin, and the desktop 34px and 30px pushed the strip
   onto a fourth row. Its lists go back to the edge of the column too -
   first bullet at x15, its words at x55. */
@media (max-width: 47.99rem) {
	.prose--service .tabs__tab {
		padding: 5px 20px;
		margin-inline-end: 0;
	}

	.prose--service .check-list {
		margin-inline-start: 0;
	}
}