/**
 * Single Subject detail page styles — Figma node 2090:4149.
 * Sections render inside the 1120px .site-content wrapper; the testimonial
 * breaks full-bleed.
 */

/* Figma stacks full-width bands contiguously; the vertical rhythm comes from
   each section's own spacing, not one uniform gap. So gap is 0 here and every
   section below sets the margin-top that matches its Figma band padding. */
.gh-subject {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ===================== Hero ===================== */
.gh-subject-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 96px;
	text-align: center;
}

.gh-subject-hero__title {
	margin: 0;
	max-width: 1120px;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 48px;
	line-height: 56px;
	color: var(--gh-text-primary);
}

.gh-subject-hero__em {
	font-family: 'schibsted_grotesk_regular', Arial, sans-serif;
	font-style: italic;
	font-weight: normal;
}

.gh-subject-hero__subtitle {
	margin: 0;
	max-width: 928px;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: var(--gh-text-secondary);
}

.gh-subject-hero__pills {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.gh-subject-hero__pill {
	padding: 8px 12px;
	border-radius: 8px;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-primary);
	white-space: nowrap;
}

/* Numbers wrapped in *asterisks* in the ACF pill text render in demi. */
.gh-subject-hero__pill-num {
	font-family: 'avenir_next_worlddemi', 'Verdana';
}

.gh-subject-hero__pill--1 { background: linear-gradient(121.4deg, #bffbfb 5.46%, #c8e487 127.75%); }
.gh-subject-hero__pill--2 { background: linear-gradient(108.84deg, #ffdae4 8.03%, #e7b9fe 164.46%); }
.gh-subject-hero__pill--3 { background: linear-gradient(141.09deg, #e3e3ff 30.06%, #7feaf6 118%); }
.gh-subject-hero__pill--4 { background: linear-gradient(84.19deg, #ffdae4 10.37%, #ffdb7f 142.16%); }

/* ===================== People ===================== */
.gh-subject-people {
	margin-top: 136px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.gh-subject-people__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.gh-subject-people__title {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	color: var(--gh-text-primary);
}

.gh-subject-people__subtitle {
	margin: 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: var(--gh-text-secondary);
}

/* Flex (not grid) so a partial final row centres instead of hugging the left:
   1 or 2 people, or the leftover 1–2 cards of a 4- or 5-person set, all sit
   centred. Cards keep their three-up width — three fill the row exactly, so
   full rows show no centring offset. */
.gh-subject-people__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 32px;
	row-gap: 63px;
}

.gh-subject-people__card {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: calc((100% - 64px) / 3);
}

.gh-subject-people__photo {
	height: 320px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(88.96deg, #e3f1c3 3.91%, #c8e487 59.72%, #bffbfb 123.35%);
}

.gh-subject-people__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gh-subject-people__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gh-subject-people__name {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 32px;
	color: var(--gh-text-primary);
}

.gh-subject-people__role {
	margin: 0;
	font-family: 'avenir_next_worldregular', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: var(--gh-text-secondary);
}

/* ===================== Content + image rows ===================== */
.gh-subject-content {
	margin-top: 144px;
	display: flex;
	flex-direction: column;
	gap: 144px;
}

.gh-subject-content__row {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.gh-subject-content__text {
	flex: 0 0 375px;
	width: 375px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}

.gh-subject-content__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gh-subject-content__title {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	color: var(--gh-text-primary);
}

.gh-subject-content__subtitle {
	margin: 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-secondary);
}

.gh-subject-content__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gh-subject-content__bullets li {
	position: relative;
	padding-left: 18px;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-secondary);
}

.gh-subject-content__bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gh-text-secondary);
}

.gh-subject-content__btn {
	align-self: flex-start;
	padding: 13px 16px;
	border: 1px solid var(--gh-text-primary);
	border-radius: 8px;
	background: var(--gh-white);
	font-family: 'avenir_next_worlddemi', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 24px;
	color: var(--gh-text-primary);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gh-subject-content__btn:hover,
.gh-subject-content__btn:focus-visible {
	background: var(--gh-text-primary);
	border-color: var(--gh-text-primary);
	color: var(--gh-white);
}

.gh-subject-content__media {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 16px;
	overflow: hidden;
}

.gh-subject-content__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===================== Testimonial (full-bleed dark) ===================== */
/* Section is currently HIDDEN (see the display:none rule below) — the markup
   and styles are kept so it can be re-enabled by removing that one rule. */
.gh-subject-testimonial {
	margin-top: 144px;
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--gh-green-dark);
	padding: 80px 160px 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}

.gh-subject-testimonial__title {
	margin: 0;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	color: var(--gh-white);
	text-align: center;
}

.gh-subject-testimonial__card {
	width: 100%;
	max-width: 1120px;
	box-sizing: border-box;
	background: var(--gh-white);
	border-radius: 24px;
	padding: 48px 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.gh-subject-testimonial__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.gh-subject-testimonial__quote {
	margin: 0;
	font-family: 'schibsted_grotesk_regular', Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	line-height: 36px;
	color: var(--gh-text-primary);
}

.gh-subject-testimonial__person {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gh-subject-testimonial__name {
	margin: 0;
	font-family: 'avenir_next_worldbold', 'Verdana';
	font-weight: normal;
	font-size: 20px;
	line-height: 28px;
	color: var(--gh-text-primary);
}

.gh-subject-testimonial__role {
	margin: 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	color: var(--gh-text-secondary);
}

.gh-subject-testimonial__photo {
	flex: 0 0 256px;
	width: 256px;
	height: 320px;
	border-radius: 12px;
	overflow: hidden;
	background: #e6e6e6;
}

.gh-subject-testimonial__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hide the testimonial for now. Remove this single rule to bring it back. */
.gh-subject-testimonial {
	display: none;
}

/* ===================== FAQ ===================== */
.gh-subject-faq {
	margin-top: 120px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Subject-page only: retune the reused Trusted band to the subject Figma
   (node 3246:11947 — 80px top / 80px bottom padding, 32px title→marquee gap).
   Scoped to .gh-subject so the homepage band is untouched; horizontal padding
   is left to the homepage rules. The scoped selector outranks those breakpoint
   rules, so the responsive steps are repeated here. */
.gh-subject .gh-trusted {
	/* Gap from the content rows above (Figma: 144px), then the band's own
	   80px top padding to the title. */
	margin-top: 144px;
	padding-top: 80px;
	padding-bottom: 80px;
	gap: 32px;
}

@media (max-width: 1023px) {
	.gh-subject .gh-trusted {
		margin-top: 64px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.gh-subject-people__photo{
		height: auto;
	}
	.gh-subject-hero{
		padding-top: 64px;
	}
}
@media (max-width: 767px) {
	.gh-subject .gh-trusted {
		margin-top: 48px;
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* Closing CTA carries its own 80px top padding; add 80 more to reach the
   160px gap Figma leaves between the FAQ list and the CTA card. The width:100%
   keeps it full-width: as a flex item its auto side margins would otherwise
   cancel the default stretch and shrink it to its content width. */
.gh-subject .gh-cta {
	margin-top: 80px;
	width: 100%;
}

/* Laptop / small desktop (1024–1439px): tighten the gap above the closing CTA. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.gh-subject .gh-cta {
		margin-top: 40px;
	}
}

.gh-subject-faq__title {
	margin: 0 0 16px;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	color: var(--gh-text-primary);
	text-align: center;
}

.gh-subject-faq__item {
	border-bottom: 1px solid #e6e6e6;
}

.gh-subject-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
	/* Kill the blue mobile tap-highlight + accidental text selection on toggle. */
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	font-family: 'schibsted_grotesk_demi', Arial, sans-serif;
	font-weight: normal;
	font-size: 20px;
	line-height: 28px;
	color: var(--gh-text-primary);
	transition: color 0.2s ease;
}

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

.gh-subject-faq__icon {
	flex-shrink: 0;
	color: var(--gh-text-primary);
}

.gh-subject-faq__icon--minus {
	display: none;
}

.gh-subject-faq__item[open] .gh-subject-faq__icon--plus {
	display: none;
}

.gh-subject-faq__item[open] .gh-subject-faq__icon--minus {
	display: block;
}

.gh-subject-faq__a {
	padding: 0 0 24px;
	max-width: 928px;
	animation: gh-subject-faq-reveal 0.28s ease;
}

@keyframes gh-subject-faq-reveal {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Smoothly expand/collapse where the browser supports it. */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.gh-subject-faq__item::details-content {
		height: 0;
		overflow: hidden;
		transition: height 0.28s ease, content-visibility 0.28s allow-discrete;
	}

	.gh-subject-faq__item[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-subject-faq__icon,
	.gh-subject-faq__a {
		transition: none;
		animation: none;
	}
}

.gh-subject-faq__a p {
	margin: 0;
	font-family: 'avenir_next_worldmedium', 'Verdana';
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	color: var(--gh-text-secondary);
}

/* ===================== Responsive (Figma is desktop-only) ===================== */
@media (max-width: 1023px) {
	/* Tighten the per-section spacing on narrow viewports (Figma is desktop-only). */
	.gh-subject-people,
	.gh-subject-content,
	.gh-subject-testimonial,
	.gh-subject-faq {
		margin-top: 64px;
	}

	.gh-subject-content {
		gap: 80px;
	}

	.gh-subject-hero__title {
		font-size: 36px;
		line-height: 44px;
	}

	.gh-subject-people__grid {
		row-gap: 40px;
	}

	/* People stay three-up on tablet (cards shrink to fit); they collapse to a
	   single column only at the ≤767 mobile breakpoint. */

	.gh-subject-content__row {
		flex-direction: column;
		gap: 24px;
	}

	.gh-subject-content__text {
		flex-basis: auto;
		width: 100%;
	}

	.gh-subject-content__media {
		min-height: 280px;
	}

	.gh-subject-testimonial {
		padding: 56px 24px 64px;
	}

	.gh-subject-testimonial__card {
		flex-direction: column-reverse;
		align-items: flex-start;
		padding: 32px;
		gap: 32px;
	}

	.gh-subject-testimonial__photo {
		width: 100%;
		flex-basis: auto;
	}
}
@media (max-width: 991px) {
	.gh-subject-content {
        gap: 40px;
    }
}
/* Mobile — Figma node 3242:8184: hero + people heads left-align, hero pills
   stack in a single column, one person card per row. */
@media (max-width: 767px) {
	.gh-subject-people__role br{
		display: none;
	}
	.gh-subject-hero {
		padding-top: 48px;
		align-items: flex-start;
		text-align: left;
	}
	.gh-subject-people__role{
		font-size: 14px;
		line-height: 24px;
	}
	.gh-subject-hero__title {
		font-size: 32px;
		line-height: 40px;
	}

	.gh-subject-hero__pills {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.gh-subject-people__head {
		text-align: left;
	}

	.gh-subject-people__grid {
		row-gap: 24px;
	}

	.gh-subject-people__card {
		width: 100%;
	}

	.gh-subject-testimonial {
		padding: 48px 16px;
	}

	/* Content rows reflow like the home features section: title/subtitle →
	   image → bullets → button (image moves above the list). */
	.gh-subject-content {
		gap: 64px;
	}

	.gh-subject-content__row {
		gap: 32px;
	}

	.gh-subject-content__text {
		display: contents;
	}

	.gh-subject-content__head { order: 1; }
	.gh-subject-content__media { order: 2; min-height: auto; }
	.gh-subject-content__bullets { order: 3; }
	.gh-subject-content__btn { order: 4; }

	/* FAQ matches the home FAQ on mobile: left-aligned title, tighter questions,
	   full-width answers. */
	.gh-subject-faq__title {
		text-align: left;
	}

	.gh-subject-faq__q {
		gap: 16px;
		font-size: 18px;
	}

	.gh-subject-faq__a {
		max-width: none;
	}
}