/* =========================================================================
   Sectors hub page — template-sectors.php.
   Scoped to .sc — mobile-first, min-width media queries only.
   Tokens mirror home.css (Billi Brand Book 2026).
   ========================================================================= */

.sc {
	/* Billi Brand Book 2026 palette */
	--sc-navy: #181d46;      /* Billi Blue — signature colour */
	--sc-lightblue: #90cdeb; /* button hover state / CTA card */
	--sc-grey: #eaeaea;      /* primary grey — borders, chips */
	--sc-band-grey: #f5f5f5;
	--sc-band-blue: #f1f5f5; /* Green Grey */
	--sc-text: #000;
	--sc-muted: #75757b;
	--sc-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--sc-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.sc { --sc-gutter: 40px; }
}

.sc *,
.sc *::before,
.sc *::after { box-sizing: border-box; }

.sc img { max-width: 100%; height: auto; display: block; }

.sc-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--sc-gutter);
	padding-right: var(--sc-gutter);
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.sc [class*='__heading'] :is(h1, h2, h3, h4, p),
.sc [class*='__title'] :is(h1, h2, h3, h4, p),
.sc .sc-section-heading :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.sc [class*='__text'] p,
.sc [class*='__intro'] p { margin: 0 0 0.6em; }

.sc [class*='__text'] p:last-child,
.sc [class*='__intro'] p:last-child { margin-bottom: 0; }

.sc a:focus-visible,
.sc button:focus-visible {
	outline: 2px solid var(--sc-navy);
	outline-offset: 2px;
}

/* ---- Buttons ----------------------------------------------------------- */

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular,
   hover inverts to white with a navy ring for contrast. */
.sc .sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover. */
.sc .sc-btn:hover { opacity: 1; }

.sc .sc-btn--navy { background: var(--sc-navy); color: #fff; }
.sc .sc-btn--navy:hover { background: #fff; color: var(--sc-navy); box-shadow: inset 0 0 0 1px var(--sc-navy); }

/* ---- Shared section scaffolding ---------------------------------------- */

.sc-section-heading {
	color: var(--sc-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 28px;
}

@media (min-width: 900px) {
	.sc-section-heading { font-size: 32px; margin-bottom: 40px; }
}

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

/* Content is centred in the band, with the copy inside left-aligned: the
   overlay is solid at the left edge, so indenting the text would drop it
   onto the exposed image. */
.sc-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 380px;
	background: var(--sc-navy);
	overflow: hidden;
}

.sc-hero__media,
.sc-hero__media img,
.sc-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-hero__media { z-index: -2; }

/* Billi Blue fade — same treatment as the homepage sector cards. Mobile
   carries a heavier wash (copy spans most of the image); desktop relaxes
   it so the imagery shows on the right. */
.sc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(24, 29, 70, 0.92) 0%, rgba(24, 29, 70, 0.7) 55%, rgba(24, 29, 70, 0.42) 100%);
}

@media (min-width: 900px) {
	.sc-hero__overlay {
		background:
			linear-gradient(90deg, rgba(24, 29, 70, 0.9) 0%, rgba(24, 29, 70, 0.55) 45%, rgba(24, 29, 70, 0.2) 75%, rgba(24, 29, 70, 0.05) 100%),
			linear-gradient(180deg, rgba(24, 29, 70, 0) 55%, rgba(24, 29, 70, 0.35) 100%);
	}
}

/* Symmetric so the centring holds rather than being pulled off by an
   uneven top/bottom. */
.sc-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.sc-hero__content { max-width: 720px; color: #fff; }

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.sc-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1.1;
}

.sc-hero__intro {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	max-width: 560px;
}

/* Quick-jump chips — white pills, navy text, Light Blue on hover. */
.sc-hero__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.sc-jump-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	background: #fff;
	color: var(--sc-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sc-jump-chip:hover {
	background: var(--sc-lightblue);
	color: var(--sc-navy);
	opacity: 1;
}

@media (min-width: 900px) {
	.sc-hero { min-height: 440px; }
	.sc-hero__inner { padding-top: 64px; padding-bottom: 64px; }
	.sc-hero__heading { font-size: 44px; }
	.sc-hero__intro { margin-top: 16px; font-size: 18px; }
	.sc-hero__jump { margin-top: 28px; }
}

/* ---- Sector cards ------------------------------------------------------- */

.sc-sectors { padding: 56px 0; }

.sc-sectors__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.sc-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sc-grey);
	border-radius: 4px;
	overflow: hidden;
	/* Anchor jumps land clear of the fixed header. */
	scroll-margin-top: calc(var(--header-chrome-h, 74px) + 24px);
}

.sc-card__media-link { display: block; }

.sc-card__media {
	aspect-ratio: 700 / 380;
	overflow: hidden;
	background: var(--sc-band-grey);
}

/* .sc prefix keeps this above the `.sc img { height: auto }` reset. */
.sc .sc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.sc-card__media-link:hover .sc-card__img { transform: scale(1.03); }

.sc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 24px 20px;
}

.sc-card__heading {
	margin: 0;
	color: var(--sc-navy);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
}

.sc-card__text {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.45;
}

/* Full-width navy footer bar, flush to the card edges (Brand Book card). */
.sc-card .sc-card__btn {
	margin-top: auto;
	width: 100%;
	border-radius: 0;
	min-height: 54px;
}

@media (min-width: 768px) {
	.sc-sectors__grid { grid-template-columns: 1fr 1fr; }
	.sc-card__body { padding: 28px 28px 22px; }
}

@media (min-width: 900px) {
	.sc-sectors { padding: 88px 0; }
	.sc-sectors__grid { gap: 32px; }
	.sc-card__heading { font-size: 28px; }
}

/* ---- Find-your-solution CTA (Light Blue card) --------------------------- */

.sc-solution { padding: 0 0 56px; }

.sc-solution__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	background: var(--sc-lightblue);
	border-radius: 4px;
	padding: 32px 24px;
}

.sc-solution__heading {
	color: var(--sc-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
}

.sc-solution__text {
	margin-top: 10px;
	color: var(--sc-navy);
	font-size: 16px;
	line-height: 1.45;
	max-width: 560px;
}

.sc-solution__btn::after {
	content: '\203A'; /* › */
	margin-left: 10px;
	font-size: 20px;
	line-height: 1;
}

/* On the Light Blue card, flip to white on hover. */
.sc .sc-solution__btn:hover {
	background: #fff;
	color: var(--sc-navy);
}

@media (min-width: 768px) {
	.sc-solution { padding: 0 0 72px; }

	.sc-solution__card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		padding: 48px 56px;
	}

	.sc-solution__heading { font-size: 32px; }
	.sc-solution__btn { flex: 0 0 auto; min-height: 52px; }
}

/* ---- Support row ("Whatever your sector") ------------------------------- */

.sc-support {
	background: var(--sc-band-grey);
	padding: 56px 0;
}

.sc-support__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 24px;
}

.sc-support__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}

.sc-support__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-support__title {
	margin-top: 16px;
	color: var(--sc-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

.sc-support__text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.45;
}

@media (min-width: 640px) {
	.sc-support__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.sc-support { padding: 80px 0; }
	.sc-support__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- FAQs ---------------------------------------------------------------- */

.sc-faqs { padding: 56px 0; }

.sc-faqs__list {
	border-top: 1px solid var(--sc-grey);
}

.sc-faq {
	border-bottom: 1px solid var(--sc-grey);
}

.sc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	color: var(--sc-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.sc-faq__q::-webkit-details-marker { display: none; }

.sc-faq__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--sc-navy);
	transition: transform 0.2s ease;
}

.sc-faq[open] .sc-faq__icon { transform: rotate(45deg); }

.sc-faq__a {
	padding: 0 2px 20px;
	font-size: 16px;
	line-height: 1.5;
	max-width: 860px;
}

@media (min-width: 900px) {
	.sc-faqs { padding: 88px 0; }
	.sc-faq__q { font-size: 19px; padding: 22px 2px; }
	.sc-faq__a { padding-bottom: 24px; }
}

/* ---- Help CTA ------------------------------------------------------------ */

/* Green Grey band, deliberately NOT navy: the site footer is Billi Blue, and
   a navy CTA directly above it reads as one block with only a hairline
   between them (the same call as .fq-help on the FAQs page). The standard
   navy button carries the colour. */
.sc-help {
	background: var(--sc-band-blue);
	padding: 48px 0;
	color: var(--sc-text);
}

.sc-help .sc-section-heading { color: var(--sc-navy); }

.sc-help__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.sc-help__content .sc-section-heading { margin-bottom: 0; }

.sc-help__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.45;
}

.sc-help__row > .sc-btn { flex: 0 0 auto; }

@media (min-width: 768px) {
	.sc-help { padding: 72px 0; }

	.sc-help__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}

	.sc-help__row > .sc-btn { min-width: 194px; min-height: 52px; }
}