/* ==========================================================================
   STORIES CSS - Success Stories and Community Testimonials.

   Two pages about people that must not look like each other. Success Stories
   is image-led: cover photos, a featured story, a named programme and route
   per person, because those are accounts of something that happened.
   Testimonials is quote-led: a masonry wall, small avatars, no cover images,
   because those are short opinions. Same palette, different shape.
   ========================================================================== */

/* --- Admin-only placeholder warning ------------------------------------------
   Deliberately loud. Invented testimonials that quietly go live become a
   false claim about real people, so this is hard to miss and impossible for a
   visitor to see.
   ---------------------------------------------------------------------------- */
.sample-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 34px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--color-accent-soft);
	border: 1px dashed var(--color-accent);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--color-warning);
}
.sample-notice__icon {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 1px;
	/* --color-warning, not --color-accent-dark: the brighter orange sits at
	   2.8:1 on the soft background, under the 3:1 WCAG needs from a graphic
	   that carries meaning - and a warning icon nobody can see is worse than
	   no icon. */
	color: var(--color-warning);
}
.sample-notice strong {
	display: block;
	margin-bottom: 2px;
	color: var(--color-navy-900);
}

/* --- Success Stories hero -------------------------------------------------- */
.stories-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-dark);
	color: #fff;
	padding-block: clamp(46px, 6vw, 74px);
}
.stories-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(780px 340px at 12% 0%, rgba(2, 139, 147, 0.32), transparent 66%),
		radial-gradient(520px 260px at 94% 108%, rgba(241, 143, 19, 0.14), transparent 62%);
}
.stories-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}
.stories-hero__label {
	display: inline-block;
	margin: 0 0 14px;
	padding-left: 14px;
	border-left: 3px solid var(--color-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.stories-hero__title {
	margin: 0 0 14px;
	font-size: clamp(30px, 5.2vw, 50px);
	line-height: 1.05;
	letter-spacing: -0.028em;
}
.stories-hero__lead {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.75;
	color: #C2DDE0;
}

/* --- Featured story -----------------------------------------------------------
   One story gets a full-width two-up treatment so the page does not open on
   six equal cards. The photo runs to the panel edge rather than sitting
   inside padding, which is what separates a feature from a large card.
   ---------------------------------------------------------------------------- */
.story-feature {
	display: grid;
	gap: 0;
	margin-bottom: 30px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 36px rgba(16, 24, 40, 0.08);
}
.story-feature__media {
	position: relative;
	min-height: 260px;
	background: var(--color-bg-alt);
}
.story-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Portraits sit high in frame, so bias the crop upward rather than centring
	   it and cutting heads. */
	object-position: center 25%;
}
.story-feature__body {
	padding: clamp(26px, 3.6vw, 44px);
}
.story-feature__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.story-feature__eyebrow svg {
	color: var(--color-accent);
}
.story-feature__quote {
	margin: 0 0 18px;
	font-size: clamp(19px, 2.8vw, 27px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.02em;
	color: var(--color-navy-900);
}
.story-feature__text {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--color-text-muted);
}
.story-feature__person {
	margin: 0 0 20px;
	padding-left: 14px;
	border-left: 3px solid var(--color-primary);
}
.story-feature__name {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.story-feature__meta {
	display: block;
	font-size: 13.5px;
	color: var(--color-text-muted);
}
.story-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.story-tags li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-navy-900);
}
.story-tags svg {
	color: var(--color-primary-ink);
}

/* --- Story cards ---------------------------------------------------------------
   Six cards follow the featured one, and six is the reason the counts below
   are fixed rather than auto-fit: it divides evenly by 3, 2 and 1, so the last
   row is always full at every breakpoint. An auto-fit grid would pick its own
   column count from the available width and strand one or two cards in a
   half-empty row. Keep the sample data at six (plus one featured) unless the
   column counts change to match.
   ---------------------------------------------------------------------------- */
.story-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
.story-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px rgba(16, 24, 40, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.story-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(16, 24, 40, 0.13);
}
.story-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--color-bg-alt);
}
.story-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
/* The route sits on the image rather than in the body - it is the fact people
   scan for, and it stops the photo being purely decorative. */
.story-card__route {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(5, 22, 46, 0.82);
	backdrop-filter: blur(4px);
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}
.story-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
	border-top: 3px solid var(--tone);
}
.story-card__programme {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tone);
}
.story-card__quote {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--color-navy-900);
}
.story-card__text {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--color-text-muted);
}
/* Pinned to the bottom so the attributions line up across cards whose quotes
   run to different lengths. */
.story-card__person {
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--color-border);
}
.story-card__name {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.story-card__field {
	display: block;
	font-size: 12.5px;
	color: var(--color-text-muted);
}

/* --- Success Stories call to action ---------------------------------------- */
.stories-cta__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 4.5vw, 54px);
	border-radius: var(--radius-lg);
	background: #023C43;
	border-top: 3px solid var(--color-accent);
	color: #fff;
	text-align: center;
}
.stories-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
	mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
}
.stories-cta__panel > * {
	position: relative;
	z-index: 1;
}
.stories-cta__title {
	margin: 0 0 12px;
	font-size: clamp(23px, 3.4vw, 32px);
	letter-spacing: -0.022em;
}
.stories-cta__text {
	margin: 0 auto;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.75;
	color: #C2DDE0;
}
.stories-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}
.stories-cta__secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.stories-cta__secondary:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* --- Testimonials hero ---------------------------------------------------------
   Centred and built around an oversized quote mark, so it announces itself as
   a different kind of page from the story hero above.
   ---------------------------------------------------------------------------- */
.testimonials-hero {
	position: relative;
	overflow: hidden;
	background: #023C43;
	color: #fff;
	padding-block: clamp(46px, 6vw, 72px);
	text-align: center;
}
.testimonials-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(720px 320px at 50% -20%, rgba(255, 255, 255, 0.1), transparent 66%);
}
.testimonials-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}
.testimonials-hero__mark {
	display: block;
	font-size: clamp(58px, 9vw, 96px);
	line-height: 0.62;
	font-weight: 800;
	color: var(--color-accent);
	opacity: 0.6;
	margin-bottom: 10px;
}
.testimonials-hero__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #7FE3E8;
}
.testimonials-hero__title {
	margin: 0 0 14px;
	font-size: clamp(30px, 5.2vw, 50px);
	line-height: 1.05;
	letter-spacing: -0.028em;
}
.testimonials-hero__lead {
	margin: 0 auto;
	max-width: 58ch;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.75;
	color: #C2DDE0;
}

/* --- Quote wall ----------------------------------------------------------------
   CSS columns rather than grid. The quotes are different lengths, and a row
   grid stretches every card to match the tallest in its row, which leaves
   ragged white space inside the short ones. Columns let each card keep its
   own height - which is what makes a wall of quotes read as a wall.
   ---------------------------------------------------------------------------- */
.quote-wall {
	columns: 1;
	column-gap: 20px;
}
/* The card itself is a shared component (base.css) because the homepage
   slider uses it too. These two rules are the wall's alone: a rail must not
   break cards across columns or stack them vertically. */
.quote-wall .quote-card {
	break-inside: avoid;
	margin: 0 0 20px;
}

/* --- Testimonials call to action ---------------------------------------------- */
.testimonials-cta {
	background: var(--color-bg-alt);
}
.testimonials-cta__inner {
	max-width: 680px;
	text-align: center;
}
.testimonials-cta__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.testimonials-cta__label svg {
	color: var(--color-accent);
}
.testimonials-cta__title {
	margin: 0 0 12px;
	font-size: clamp(23px, 3.4vw, 32px);
	letter-spacing: -0.022em;
	color: var(--color-navy-900);
}
.testimonials-cta__text {
	margin: 0 auto;
	max-width: 58ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--color-text-muted);
}
.testimonials-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
}

@media (min-width: 700px) {
	.story-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.quote-wall {
		columns: 2;
	}
}

@media (min-width: 1040px) {
	.story-feature {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
	.story-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.quote-wall {
		columns: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.story-card,
	.quote-card {
		transition: none;
	}
	.story-card:hover,
	.quote-card:hover {
		transform: none;
	}
}

/* --- Category filter -----------------------------------------------------------
   Ships [hidden] and is revealed by story-filter.js, so it never appears as a
   row of controls that cannot do anything.
   ---------------------------------------------------------------------------- */
.story-filter {
	margin: 0 0 26px;
}
.story-filter__label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.story-filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.story-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.story-filter__btn:hover {
	border-color: var(--color-primary-ink);
	color: var(--color-primary-ink);
}
.story-filter__btn.is-active {
	color: #fff;
	background: var(--color-primary-ink);
	border-color: var(--color-primary-ink);
}
.story-filter__count {
	font-size: 11.5px;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
}
.story-filter__btn.is-active .story-filter__count {
	/* Solid, not translucent: over the teal pill a white-alpha chip loses
	   contrast against its own label. Dark enough (2.2:1 against the pill) to
	   read as a distinct chip rather than a number floating on the button,
	   while white on it stays far above the text minimum. */
	background: #013C42;
	color: #fff;
}
.story-filter__empty,
.stories-empty {
	margin: 26px 0 0;
	padding: 28px;
	text-align: center;
	font-size: 15px;
	color: var(--color-text-muted);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

/* --- Card link -----------------------------------------------------------------
   Stretched over the whole card so the card is clickable, while the anchor
   keeps a specific accessible name ("Read Aisha Rahman's full story") instead
   of nine identical "Read more" links in the tab order.
   ---------------------------------------------------------------------------- */
.story-card {
	position: relative;
}
.story-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.story-card:focus-within {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 3px;
}
.story-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--color-primary-ink);
	text-decoration: none;
}
.story-feature__link:hover {
	text-decoration: underline;
}

/* --- Single success story ------------------------------------------------------ */
.story-single__hero {
	position: relative;
	padding: clamp(40px, 7vw, 70px) 0 clamp(34px, 5vw, 52px);
	background: var(--color-navy-dark);
	color: #fff;
}
.story-single__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 20px;
	font-size: 13.5px;
	font-weight: 700;
	color: #C2DDE0;
	text-decoration: none;
}
.story-single__back:hover {
	color: #fff;
}
.story-single__programme {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.story-single__title {
	margin: 0 0 20px;
	font-size: clamp(28px, 5vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.028em;
}
.story-tags--onDark li {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}
.story-tags--onDark svg {
	color: #7FE3E8;
}
.story-single__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}
.story-single__quote {
	margin: 0 0 26px;
	padding-left: 20px;
	border-left: 4px solid var(--color-primary-ink);
	font-size: clamp(18px, 2.6vw, 23px);
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--color-navy-900);
}
.story-single__prose {
	font-size: 16px;
	line-height: 1.8;
	color: var(--color-text-muted);
}
.story-single__prose p {
	margin: 0 0 18px;
}
.story-single__photo {
	overflow: hidden;
	border-radius: var(--radius-lg);
	margin-bottom: 22px;
}
.story-single__photo img {
	display: block;
	width: 100%;
	height: auto;
}
.story-single__related {
	padding: 22px;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}
.story-single__aside-title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.story-single__related-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-primary-ink);
	text-decoration: none;
	border-top: 1px solid var(--color-border);
}
.story-single__related-link:hover {
	text-decoration: underline;
}

@media (min-width: 1000px) {
	.story-single__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: 48px;
	}
}