/*
 * Student Stories — styles.
 *
 * The white/light-theme counterpart to the TorchBrand Case Studies
 * plugin's design system — same full-bleed-background/re-centred-content
 * pattern, adapted for Student Stories: a dark hero band with a hexagon
 * pattern on the archive page, photo cards that turn black on hover, no
 * filter row or sidebar, a featured image and optional video on the
 * individual page, and its own dark hero band there too.
 *
 * Everything here is scoped under .student-stories so it never leaks
 * into (or gets overridden by) Divi's global styles — no !important
 * except where a single Divi reset rule genuinely needs overriding on
 * hover/focus states, or where a Divi heading/paragraph style is more
 * specific than the inherited colour below and would otherwise render
 * text in the wrong shade.
 */

.student-stories {
	--ss-bg: #ffffff;
	--ss-fg: #15151a;
	--ss-muted: #55555f;
	--ss-muted-2: #8b8b95;
	--ss-muted-3: #6d6d77;
	--ss-chip-fg: #45454e;
	--ss-border: #e7e7ed;
	--ss-border-2: #dcdce3;
	--ss-border-3: #ececf1;
	--ss-border-4: #dadae2;
	--ss-border-5: #c7c7d2;
	--ss-panel: #f7f7fa;
	--ss-card: #ffffff;
	--ss-accent: #E96E4B;
	--ss-accent-hover: #d85c3a;
	--ss-red: #ED3D5B;
	--ss-red-panel: #fdedf0;
	--ss-red-border: #f3b8c3;
	--ss-red-text: #b8203f;
	--ss-dark: #2D2D32;
	--ss-radius-pill: 999px;
	--ss-radius-lg: 20px;
	--ss-radius-md: 12px;

	font-family: 'Archivo', system-ui, sans-serif;
	background: var(--ss-bg);
	color: var(--ss-fg);
	display: flex;
	flex-direction: column;
	/*
	 * Full-bleed: whatever Divi container/section this block sits inside
	 * (boxed or fullwidth) constrains this div to that container's content
	 * width by default. Breaking out to 100vw here — the inner .ss-hero /
	 * .ss-results-section / .ss-single-hero-inner / .ss-single-body
	 * wrappers still cap their own content at a sane max-width and
	 * re-centre it — means the background always fills the full page
	 * width, on any Divi layout.
	 *
	 * !important on the box-model properties because Divi (5 especially)
	 * frequently writes a row/column's configured width as page-specific
	 * CSS keyed to that module's unique ID — an ID selector beats a plain
	 * class regardless of source order. flex:0 0 auto guards against a
	 * *different* failure mode: Divi 5's row/column layout is flex/grid-
	 * based, and a flex child is shrunk to fit its container by the flex
	 * algorithm itself unless it opts out of shrinking.
	 */
	width: 100vw !important;
	max-width: 100vw !important;
	flex: 0 0 auto;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/* "clip" only — see the TorchBrand Case Studies stylesheet for why
	   "hidden" would break a sticky element; kept for consistency even
	   though this plugin has no sticky sidebar of its own. */
	overflow-x: clip;
}

/* The individual story page uses a flat light grey instead of the
   archive's white — scoped to .ss-single-wrap so the archive is unaffected. */
.student-stories.ss-single-wrap {
	background: #EBEBEB;
}

.student-stories,
.student-stories *,
.student-stories *::before,
.student-stories *::after {
	box-sizing: border-box;
}
/* Guards against a long unbroken string forcing horizontal scroll on
   narrow phone widths. */
.student-stories {
	overflow-wrap: break-word;
	word-break: break-word;
}

.student-stories a {
	color: var(--ss-fg);
	text-decoration: none;
}
.student-stories a:hover {
	color: var(--ss-muted);
}
.student-stories *:focus-visible {
	outline: 2px solid var(--ss-fg);
	outline-offset: 3px;
}
.student-stories .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* ── Hero (archive page) ───────────────────────────────────────────────
 * Everything above the results grid sits on a full-bleed dark band with
 * a faint hexagonal line pattern — three sets of repeating lines at 0°/
 * 60°/120° tile seamlessly into a triangle-and-hexagon lattice, so there
 * are no visible seams however wide the page is.
 */

.ss-hero-band {
	width: 100%;
	background-color: var(--ss-dark);
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 44px);
}
.ss-hero {
	padding: 72px clamp(20px, 3.5vw, 48px) 56px !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	width: 100% !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ss-hero h1 {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 800;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 780px;
	color: #ffffff !important;
}
.ss-lead {
	font-size: 18px;
	line-height: 1.55;
	color: #d6d6db !important;
	margin: 18px 0 0;
	max-width: 620px;
}
/* Kept on one line (per the design) only once there's comfortably enough
   width for it — gated by a min-width query rather than switching it off
   at a single lower breakpoint, so it can't get clipped by the viewport
   edge on in-between (tablet/small-laptop) widths where the hero's h1
   has already shrunk but this line hadn't. */
@media (min-width: 850px) {
	.ss-lead {
		white-space: nowrap;
	}
}

/* ── Results section (archive page) ────────────────────────────────────
 * No filter row, result-count line, or "sorted" line here by design —
 * just the card grid and pagination.
 */

.ss-results-section {
	padding: 48px clamp(20px, 3.5vw, 48px) 96px !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.ss-results[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.ss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

/*
 * The card: a photo on top, then a text panel (blurb, title, course/
 * timeline tags) below it. The whole card is one click target — the
 * title's link gets a stretched ::after covering the card — and the text
 * panel switches to a black background with white text on hover/focus,
 * leaving the photo itself unchanged.
 */
.ss-card {
	position: relative;
	background: var(--ss-card);
	border: 1px solid var(--ss-border-3);
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(20, 20, 26, 0.05);
}
.ss-card-media {
	aspect-ratio: 4 / 3;
	background: var(--ss-panel);
	overflow: hidden;
}
.ss-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Same older-browser fallback as .ss-video-embed above. */
@supports not (aspect-ratio: 4 / 3) {
	.ss-card-media {
		position: relative;
		height: 0;
		padding-top: 75%;
	}
	.ss-card-media img {
		position: absolute;
		inset: 0;
	}
}
.ss-card-body {
	padding: 22px 24px 26px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	transition: background-color 0.15s ease;
}
.ss-card-blurb {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ss-muted-3);
	transition: color 0.15s ease;
}
.ss-card-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--ss-fg);
	transition: color 0.15s ease;
}
.ss-card-title a {
	color: inherit;
}
.ss-card-title a::after {
	/* Stretched link: makes the whole card clickable while keeping one
	   real, accessible anchor around just the title text. */
	content: "";
	position: absolute;
	inset: 0;
}
.ss-card-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 2px;
}
.ss-card-tag {
	background: var(--ss-panel);
	border: 1px solid var(--ss-border-3);
	color: var(--ss-chip-fg);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--ss-radius-pill);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ss-card:hover .ss-card-body,
.ss-card:focus-within .ss-card-body {
	background: #000000;
}
.ss-card:hover .ss-card-title,
.ss-card:focus-within .ss-card-title {
	color: #ffffff;
}
.ss-card:hover .ss-card-blurb,
.ss-card:focus-within .ss-card-blurb {
	color: #c7c7cc;
}
.ss-card:hover .ss-card-tag,
.ss-card:focus-within .ss-card-tag {
	background: #1c1c1f;
	border-color: #3a3a3f;
	color: #ffffff;
}

.ss-empty {
	border: 1px dashed var(--ss-border-4);
	border-radius: var(--ss-radius-lg);
	padding: 56px;
	text-align: center;
	color: var(--ss-muted-3);
}
.ss-empty-title {
	margin: 0 0 8px;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ss-fg) !important;
}
.ss-empty p:last-child {
	margin: 0;
	font-size: 15px;
}

.ss-pagination {
	margin-top: 36px;
	display: flex;
	justify-content: center;
}
.ss-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.ss-pagination li {
	display: flex;
}
.ss-pagination a,
.ss-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--ss-radius-md);
	border: 1px solid var(--ss-border-2);
	color: var(--ss-chip-fg);
	font-size: 14px;
}
.ss-pagination .current {
	background: var(--ss-red);
	border-color: var(--ss-red);
	color: #ffffff;
}
.ss-pagination a:hover {
	border-color: var(--ss-red);
	color: var(--ss-red);
}

/* ── Individual student story page ─────────────────────────────────────
 * The hero (badge/title/blurb/quick-nav) sits in its own full-bleed dark
 * band, same colour as the archive hero but without the hex pattern.
 * Everything below it — thumbnail, body content, callout — sits on the
 * page's flat #EBEBEB background (see .ss-single-wrap above).
 */

.ss-single-hero-band {
	width: 100%;
	background: var(--ss-dark);
}
.ss-single-hero-inner {
	padding: 56px clamp(20px, 3.5vw, 48px) 40px !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	width: 100% !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}
.ss-single-body {
	padding: 40px clamp(20px, 3.5vw, 48px) 96px !important;
	max-width: 900px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.ss-single-badges {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ss-badge-course {
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.02em;
	border-radius: var(--ss-radius-pill);
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 18px;
	text-transform: uppercase;
}
.ss-single-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 780px;
	color: #ffffff !important;
}
.ss-single-blurb {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #d6d6db !important;
	max-width: 680px;
}

.ss-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: var(--ss-radius-pill);
	white-space: nowrap;
	border: 1px solid transparent;
}
.ss-cta-solid-accent {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: #ffffff;
}
.ss-cta-solid-accent:hover {
	background: var(--ss-accent-hover);
	border-color: var(--ss-accent-hover);
	color: #ffffff;
}
.ss-cta-outline {
	background: transparent;
	border-color: var(--ss-border-5);
	color: var(--ss-fg);
}
.ss-cta-outline:hover {
	background: var(--ss-panel);
	border-color: var(--ss-red-border);
	color: var(--ss-fg);
}

.ss-single-quicknav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 4px;
	font-size: 14px;
}
.ss-single-quicknav a {
	color: #c9c9d2;
	font-weight: 600;
}
.ss-single-quicknav a:hover {
	color: #ffffff;
}
.ss-single-quicknav a:not(:last-child)::after {
	content: "·";
	margin-left: 16px;
	color: #77777d;
	font-weight: 400;
}

/* The story's featured image, shown below the dark hero band and above
   the divider that starts the body content. */
.ss-single-thumbnail {
	margin: 0 auto 4px;
	max-width: 70%;
	border-radius: 25px;
	overflow: hidden;
}
.ss-single-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px;
}

.ss-single-rule {
	height: 1px;
	width: 100%;
	background: linear-gradient(to right, rgba(20, 20, 26, 0) 0%, rgba(20, 20, 26, 0.14) 50%, rgba(20, 20, 26, 0) 100%);
}

.ss-single-main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-top: 32px;
}
.ss-single-section-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--ss-fg) !important;
}
.ss-single-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ss-chip-fg);
}
.ss-single-content p {
	margin: 0 0 14px;
	text-align: justify !important;
}
.ss-single-content p:last-child {
	margin-bottom: 0;
}
.ss-single-content :is(h2, h3, h4) {
	color: var(--ss-fg) !important;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 600 !important;
}
.ss-single-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * The video embed. Uses the modern `aspect-ratio` property rather than
 * the old padding-top-percentage trick — that hack relies on the box
 * having no in-flow content to stay collapsed to height:0, and some
 * oEmbed providers return wrapper markup that doesn't cooperate with
 * that assumption, which is what was leaving a tall blank box above the
 * actual player before it (or its wrapper) rendered. aspect-ratio sizes
 * the box directly and needs no absolutely-positioned iframe trick.
 */
.ss-video-embed {
	aspect-ratio: 16 / 9;
	border-radius: var(--ss-radius-lg);
	overflow: hidden;
	background: var(--ss-panel);
	border: 1px solid var(--ss-border-3);
}
.ss-video-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Fallback for the handful of older browsers with no aspect-ratio support
   (mainly pre-2021 Safari) — without this they'd fall straight back to
   the iframe's own inline height and reintroduce the exact "blank space"
   bug aspect-ratio was added to fix. Same 16:9 box, built the older way. */
@supports not (aspect-ratio: 16 / 9) {
	.ss-video-embed {
		position: relative;
		height: 0;
		padding-top: 56.25%;
	}
	.ss-video-embed iframe {
		position: absolute;
		inset: 0;
	}
}

/* Closing callout — replaces the sidebar's CTA card, full width instead
   of a side column since this plugin has no sidebar. */
.ss-callout {
	margin-top: 40px;
	background: var(--ss-red-panel);
	border: 1px solid var(--ss-red-border);
	border-radius: var(--ss-radius-lg);
	padding: 32px;
	text-align: center;
}
.ss-callout-title {
	margin: 0 0 8px;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--ss-fg) !important;
}
.ss-callout p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ss-chip-fg);
}
.ss-callout-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.ss-hero h1 {
		font-size: 40px;
	}
	.ss-single-title {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.ss-hero {
		padding-top: 48px !important;
		padding-bottom: 40px !important;
	}
	.ss-hero h1 {
		font-size: 30px;
	}
	.ss-lead {
		font-size: 15px;
		white-space: normal;
	}
	.ss-grid {
		grid-template-columns: 1fr;
	}
	.ss-single-title {
		font-size: 28px;
	}
	.ss-single-thumbnail {
		max-width: 100%;
	}
	.ss-callout {
		padding: 22px;
	}
	.ss-callout-actions {
		flex-direction: column;
		align-items: stretch;
	}
	/* Justified text needs a fairly wide column to avoid uneven gaps
	   between words ("rivers") — at phone width the column is too narrow
	   for that to look right, so left-align instead. */
	.ss-single-content p {
		text-align: left !important;
	}
	/* A long custom course name (e.g. "Engineering & Construction") can be
	   wider than a narrow phone screen; let the pill wrap to a second line
	   there instead of clipping at the container edge. */
	.ss-badge-course {
		white-space: normal;
		text-align: center;
	}
	.ss-single-hero-inner {
		padding-top: 40px !important;
		padding-bottom: 32px !important;
	}
	.ss-single-body {
		padding-top: 32px !important;
		padding-bottom: 64px !important;
	}
}