/* ==========================================================================
   Single Success Story — front-end styles
   Enqueued only on singular `success-story` (see functions.php).
   ========================================================================== */

.ue-success {
	--navy: #141b4d;
	--blue: #0073b6;
	--ink: #14183f;
	--muted: #5b6079;
	--white: #ffffff;
	--maxw: 1200px;
	--pad: clamp(1.25rem, 4vw, 4rem);
	font-family: inherit;
	color: var(--ink);
	overflow-x: clip;
}

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

.ss-container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* Shared tagline label */
.ss-tagline {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: .85rem;
}

.ue-success h1,
.ue-success h2 { line-height: 1.12; margin: 0 0 1rem; font-weight: 800; }
.ue-success h2 { font-size: clamp(2.6rem, 3vw, 3.8rem); }
.ue-success p { line-height: 1.65; margin: 0 0 1rem; }

/* --------------------------------------------------------------- Hero --- */
.ss-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 52vh, 620px);
	background-size: cover;
	background-position: center;
	background-color: var(--navy);
	color: var(--white);
	isolation: isolate;
}
.ss-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to top, var(--scheme, var(--navy)) 0%, rgba(20, 24, 63, .15) 65%, rgba(20, 24, 63, .05) 100%);
}
.ss-hero .ss-container { padding-block: clamp(2.5rem, 6vw, 5rem); }
.ss-hero__title { font-size: clamp(3.2rem, 5vw, 5rem); color: var(--white); margin: 0; }
.ss-hero__cats { margin: 1rem 0 0; font-weight: 600; opacity: .9; }
.ss-hero .ss-tagline { color: rgba(255,255,255,.85); }

/* -------------------------------------------------------------- Intro --- */
.ss-intro {
	background: var(--scheme, var(--navy));
	color: var(--white);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.ss-intro__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}
.ss-intro h2 { color: var(--white); }
.ss-intro .ss-tagline { color: rgba(255,255,255,.8); }
.ss-intro__body { font-size: 1.7rem; }
.ss-intro__body :is(p, li) { color: rgba(255,255,255,.92); }
.ss-intro__body a { color: #9fd2ff; }

/* ---------------------------------------------------------- Block one --- */
.ss-blockone { padding-block: clamp(2.5rem, 6vw, 5rem); }
.ss-blockone__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}
.ss-blockone__text { grid-column: span 1; }

/* --------------------------------------------------------- Mission ------ */
.ss-mission {
	background: var(--navy);
	color: var(--white);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.ss-mission blockquote { margin: 0; }
.ss-mission .ss-tagline { color: var(--blue); }
.ss-mission__quote {
	font-size: clamp(2.2rem, 2.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.3;
	max-width: 60ch;
	margin: 0;
}

/* ------------------------------------------------------ Feature blocks --- */
.ss-block { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.ss-block__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: center;
}
.ss-block.is-reverse .ss-block__media { order: 2; }
.ss-block__media img { width: 100%; border-radius: 6px; }
.ss-block__content > :last-child { margin-bottom: 0; }
.ss-block__second { margin-top: 1.5rem; border-radius: 6px; }

/* Background / text colour variants */
.ss-block.is-whiteBg { background: var(--white); }
.ss-block.is-blueBg  { background: var(--blue); }
.ss-block.is-blackBg { background: var(--navy); }

.ss-block.is-blackText { color: var(--ink); }
.ss-block.is-blackText h2 { color: var(--ink); }
.ss-block.is-whiteText, .ss-block.is-whiteText h2 { color: var(--white); }
.ss-block.is-whiteText p, .ss-block.is-whiteText li { color: rgba(255,255,255,.92); }
.ss-block.is-whiteText a { color: #9fd2ff; }
.ss-block.is-blueText h2 { color: var(--blue); }

/* Tagline accent per background */
.ss-block.is-blueBg .ss-tagline,
.ss-block.is-blackBg .ss-tagline { color: #9fd2ff; }
.ss-block.is-whiteBg.is-blueText .ss-tagline { color: var(--blue); }

/* --------------------------------------------------------- Statistics --- */
.ss-stats {
	background: var(--navy);
	color: var(--white);
	padding-block: clamp(2.5rem, 6vw, 5rem);
}
.ss-stats h2 { color: var(--white); }
.ss-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.ss-stats__head :is(p, li) { color: rgba(255,255,255,.9); }
.ss-stats__figures { display: grid; gap: 1.5rem; }
.ss-stats__item { border-left: 3px solid var(--blue); padding-left: 1.1rem; }
.ss-stats__value { display: block; font-size: clamp(3.2rem, 4vw, 4.8rem); font-weight: 800; }
.ss-stats__op { color: var(--blue); }
.ss-stats__sub { display: block; opacity: .85; font-size: 1.5rem; }

/* ------------------------------------------------------- Testimonial ---- */
.ss-testimonial { padding-block: clamp(2.5rem, 6vw, 5rem); background: #f4f6fb; }
.ss-testimonial.is-dark { background: var(--navy); color: var(--white); }
.ss-testimonial.is-dark .ss-tagline { color: #9fd2ff; }
.ss-testimonial blockquote { margin: 0; max-width: 62ch; }
.ss-testimonial__quote { font-size: clamp(2.1rem, 2.4vw, 3rem); font-weight: 600; line-height: 1.35; }
.ss-testimonial cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--blue); }
.ss-testimonial.is-dark cite { color: #9fd2ff; }

/* --------------------------------------------------------------- Nav ---- */
.ss-nav { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ss-nav__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.ss-btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: var(--blue);
	color: var(--white);
	text-decoration: none;
	font-weight: 700;
	border-radius: 4px;
	transition: background .2s ease;
}
.ss-btn:hover { background: var(--navy); }

/* ------------------------------------------------------- Responsive ----- */
@media (max-width: 860px) {
	.ss-intro__grid,
	.ss-block__grid,
	.ss-stats__grid { grid-template-columns: 1fr; }
	.ss-blockone__grid { grid-template-columns: 1fr; }
	.ss-block.is-reverse .ss-block__media { order: 0; }
}

/* ---------------------------------------------------------------------------
 * NOTE ON UNITS: this site sets a 10px root font-size, not the 16px this
 * stylesheet was originally written against, so every rem here rendered at
 * ~62.5% of its intended size (the intro copy came out at 10.5px — smaller
 * than the 15px body text — and taglines at 7.8px). The font-size values
 * above have been rescaled for the 10px root. Keep that in mind before
 * "correcting" them back to 16px-based numbers.
 *
 * Block one: the grid is three columns to allow optional left/centre/right
 * images. Most stories supply none, which left the copy stranded in the first
 * third with two empty columns beside it. When the text is the only child,
 * let it span the full grid and centre it on a readable measure.
 * ------------------------------------------------------------------------- */
.ss-blockone__text:only-child {
	grid-column: 1 / -1;
	max-width: 70ch;
	margin-inline: auto;
}