/**
 * MHSI Theme 2026 — Homepage sections.
 * Prefer one wrapper class per section; style children via descendants.
 */

/* —— Shared —— */
.mhsi-home-section {
	position: relative;
}

.mhsi-home-section__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	width: 100%;
}

/* Primary CTA look for homepage section buttons (no per-button class). */
.mhsi-hero .wp-block-button__link,
.mhsi-who .wp-block-button__link,
.mhsi-members .wp-block-button__link,
.mhsi-stories .wp-block-button__link {
	background: var(--mhsi-color-orange-darker, #e95e4c);
	color: var(--mhsi-color-pure-white, #fff);
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	text-decoration: none;
}

.mhsi-hero .wp-block-button__link:hover,
.mhsi-who .wp-block-button__link:hover,
.mhsi-members .wp-block-button__link:hover,
.mhsi-stories .wp-block-button__link:hover {
	background: var(--mhsi-color-orange, #ff7151);
	color: var(--mhsi-color-pure-white, #fff);
}

/* —— Hero —— */
.mhsi-hero {
	/* Top pad clears absolute transparent header on the front page. */
	padding: clamp(7rem, 12vw, 9.5rem) var(--wp--preset--spacing--40, 1rem) clamp(2.5rem, 6vw, 4rem);
	background: var(--mhsi-color-base, #fff);
}

/*
 * Home hero: nav overlays this layer, so add header clearance on top of the
 * shared vertical pad. Beats `.wp-block-group.section` equal top/bottom padding
 * so visual space above content (below nav) matches space below.
 */
.wp-block-group.mhsi-home-hero,
.mhsi-home-hero.section {
	--mhsi-home-hero-pad-y: var(--wp--preset--spacing--70);
	/* ~ .mhsi-header__bar vertical padding + logo/nav row */
	--mhsi-home-hero-nav-clearance: 5.5rem;
	padding-top: calc(var(--mhsi-home-hero-pad-y) + var(--mhsi-home-hero-nav-clearance));
	padding-bottom: var(--mhsi-home-hero-pad-y);
	padding-block-start: calc(var(--mhsi-home-hero-pad-y) + var(--mhsi-home-hero-nav-clearance));
	padding-block-end: var(--mhsi-home-hero-pad-y);
}

/* Column widths / layout come from core Columns block settings (flex-basis). */

.mhsi-hero .layer-intro > .wp-block-heading,
.mhsi-home-hero .layer-intro > .wp-block-heading {
	display: inline-block;
	max-width: 16ch;
}

.mhsi-hero .layer-intro > p:not([class*="eyebrow"]),
.mhsi-home-hero .layer-intro > p:not([class*="eyebrow"]) {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
	max-width: 34rem;
	margin: 0 0 1.75rem;
}

.mhsi-hero .layer-intro > p:not([class*="eyebrow"]):not(.has-text-color),
.mhsi-home-hero .layer-intro > p:not([class*="eyebrow"]):not(.has-text-color) {
	color: var(--mhsi-color-black-text, #212121);
}

.mhsi-hero .wp-block-buttons,
.mhsi-home-hero .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

.mhsi-hero .wp-block-image,
.mhsi-hero .wp-block-image img,
.mhsi-home-hero .wp-block-image,
.mhsi-home-hero .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 588px;
	margin-inline: auto;
}

@media (max-width: 860px) {
	.mhsi-hero .layer-intro > .wp-block-heading,
	.mhsi-home-hero .layer-intro > .wp-block-heading {
		max-width: none;
	}
}

/* —— Newsletter strip —— */
.mhsi-newsletter-strip {
	background: var(--mhsi-color-teal, #18808e);
	color: var(--mhsi-color-pure-white, #fff);
	padding: 1.35rem var(--wp--preset--spacing--40, 1rem);
}

.mhsi-newsletter-strip > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
}

.mhsi-newsletter-strip p {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	line-height: 1.2;
}

.mhsi-newsletter-strip__star {
	display: inline-block;
	width: 1.35rem;
	height: 1.35rem;
	background: url("../images/homepage/star-newsletter.svg") center / contain no-repeat;
	flex-shrink: 0;
}

.mhsi-newsletter-strip form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1 320px;
	justify-content: flex-end;
	max-width: 40rem;
}

.mhsi-newsletter-strip input[type="email"] {
	flex: 1 1 14rem;
	min-width: 12rem;
	border: 0;
	border-radius: 0;
	padding: 0.85rem 1.4rem;
	font-family: inherit;
	font-size: 1.25rem;
	color: var(--mhsi-color-black-text, #212121);
	background: #fff;
}

.mhsi-newsletter-strip button[type="submit"] {
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 700;
	background: var(--mhsi-color-orange-darker, #e95e4c);
	color: #fff;
	letter-spacing: -0.02em;
}

.mhsi-newsletter-strip button[type="submit"]:hover,
.mhsi-newsletter-strip button[type="submit"]:focus-visible {
	background: var(--mhsi-color-orange, #ff7151);
}

/* —— Who We Help / Who We Connect —— */
/* Frame tokens on column too — section may no longer carry `.mhsi-who`. */
.mhsi-who,
.mhsi-who-column {
	/* Half of prior 8px outline offset; image shifts the other way. */
	--mhsi-who-frame-shift: 4px;
	--mhsi-who-frame-border: 4px;
}

.mhsi-who {
	background: var(--mhsi-color-soft-pink, #ffeae9);
	padding: clamp(3rem, 7vw, 5rem) var(--wp--preset--spacing--40, 1rem);
}

.mhsi-who .layer-intro > .wp-block-heading {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.23;
}

.mhsi-who .layer-intro > .wp-block-heading:not(.has-text-color) {
	color: var(--mhsi-color-black-text, #212121);
}

/* contentSize (1036) wide, left-aligned — not centered */
.mhsi-who .layer-intro > p {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	margin-inline: 0 auto;
	max-width: var(--wp--style--global--content-size, 1036px);
	width: 100%;
	text-align: left;
	font-size: clamp(1.15rem, 2vw, 1.625rem);
	font-weight: 500;
	line-height: 1.4;
}

.mhsi-who .layer-intro > p:not(.has-text-color) {
	color: var(--mhsi-color-black-text, #212121);
}

.mhsi-who > .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.mhsi-who > .wp-block-columns > .wp-block-column {
	min-width: 0;
	align-self: start;
	height: auto;
}

.mhsi-who-column {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 1rem !important;
}

/*
 * Black offset outline via ::after on the image figure.
 * <img> cannot host ::before/::after (replaced element) — use .wp-block-image.
 * Rest: image down/left, outline up/right (each --mhsi-who-frame-shift).
 * Hover (.mhsi-who-column:hover): both translate(0) — center-aligned.
 * Optional .mhsi-who-column__frame is layout-only; no separate outline asset.
 */
.mhsi-who-column__frame {
	position: relative;
	margin-bottom: 0;
	overflow: visible;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.mhsi-who-column .wp-block-image {
	position: relative;
	z-index: 1;
	margin: 0 0 0.35rem;
	/* Room for opposing transforms so nothing clips. */
	padding: var(--mhsi-who-frame-shift, 4px);
	overflow: visible;
}

.mhsi-who-column .wp-block-image::after {
	content: "";
	position: absolute;
	inset: var(--mhsi-who-frame-shift, 4px);
	border: var(--mhsi-who-frame-border, 4px) solid var(--mhsi-color-black-text, #212121);
	border-radius: 10px;
	pointer-events: none;
	z-index: 2;
	box-sizing: border-box;
	transform: translate(var(--mhsi-who-frame-shift, 4px), calc(-1 * var(--mhsi-who-frame-shift, 4px)));
	transition: transform 700ms ease-in-out;
}

.mhsi-who-column .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 360 / 240;
	object-fit: cover;
	border-radius: 10px;
	position: relative;
	z-index: 1;
	transform: translate(calc(-1 * var(--mhsi-who-frame-shift, 4px)), var(--mhsi-who-frame-shift, 4px));
	transition: transform 700ms ease-in-out;
}

.mhsi-who-column:hover .wp-block-image::after,
.mhsi-who-column:hover .wp-block-image img {
	transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.mhsi-who-column .wp-block-image::after,
	.mhsi-who-column .wp-block-image img {
		transition: none;
	}
}

.mhsi-who-column > .wp-block-heading {
	margin: 0;
	font-size: clamp(1.35rem, 2vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.23;
}

.mhsi-who-column > p {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.mhsi-who-column > .wp-block-buttons {
	margin-top: 0;
}

.mhsi-who-column .wp-block-button__link {
	border-radius: 999px;
	padding: 0.85rem 1.85rem;
	font-size: 1.2rem;
	font-weight: 700;
}

@media (max-width: 900px) {
	.mhsi-who > .wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* —— Members —— */
.mhsi-members {
	background: var(--mhsi-color-teal, #18808e);
	color: #fff;
	padding: clamp(2.5rem, 6vw, 4rem) var(--wp--preset--spacing--40, 1rem);
	text-align: center;
}

.mhsi-members > .wp-block-heading {
	margin: 0 0 2rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
}

.mhsi-members > .wp-block-heading:not(.has-text-color) {
	color: #fff;
}

.mhsi-member-logos__track {
	/* 5 fixed slots — never reflow when a logo crossfades */
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 10.3rem));
	justify-content: center;
	align-items: center;
	/* +20px vs prior clamp(1rem, 2.5vw, 1.6rem) */
	gap: clamp(calc(1rem + 20px), calc(2.5vw + 20px), calc(1.6rem + 20px));
	width: 100%;
	margin-bottom: 2rem;
}

.mhsi-member-logos__slot {
	position: relative;
	width: 100%;
	/* Fixed aspect box ≈ 165×107 — no layout shift during fade */
	aspect-ratio: 165 / 107;
	height: auto;
	max-width: 10.3rem;
	margin: 0 auto;
	overflow: hidden;
	/* Keep teal through the slot — never a white box behind logos */
	background: transparent;
}

.mhsi-member-logos__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	/* White glyph on teal; only opacity animates (filter snaps — avoids white halo flash) */
	filter: brightness(0) invert(1);
	opacity: 0;
	transition: opacity 0.65s ease;
	pointer-events: none;
	backface-visibility: hidden;
}

.mhsi-member-logos__img--current {
	opacity: 1;
	z-index: 1;
}

.mhsi-member-logos__img--next {
	opacity: 0;
	z-index: 2;
}

/* Outgoing softens; incoming stays sharp — no stacked white blur “border” */
.mhsi-member-logos__slot.is-fading .mhsi-member-logos__img--current {
	opacity: 0;
	filter: brightness(0) invert(1) blur(3px);
}

.mhsi-member-logos__slot.is-fading .mhsi-member-logos__img--next {
	opacity: 1;
	filter: brightness(0) invert(1);
}

/* Snap end-state so removing is-fading does not reverse-animate (double fade) */
.mhsi-member-logos__slot.is-settling .mhsi-member-logos__img {
	transition: none !important;
}

@media (max-width: 900px) {
	.mhsi-member-logos__track {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: calc(0.75rem + 20px);
	}
}

@media (max-width: 560px) {
	/* Still 5 slots — smaller fixed columns; no wrap/reflow */
	.mhsi-member-logos__track {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: calc(0.5rem + 20px);
	}
}

.mhsi-members > .wp-block-buttons {
	justify-content: center;
}

.mhsi-members .wp-block-button__link {
	background: var(--mhsi-color-orange-darker, #e95e4c);
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-size: 1.25rem;
	font-weight: 700;
}

/* —— Stories section (section shell only; intro = core blocks) —— */
.mhsi-stories {
	padding: clamp(3rem, 7vw, 4.5rem) var(--wp--preset--spacing--40, 1rem);
	background: #fff;
}

/* —— Stories Feed block (4 cards) —— */
.mhsi-stories-feed {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1280px);
	box-sizing: border-box;
}

.is-layout-constrained > .mhsi-stories-feed.alignwide,
.mhsi-stories-feed.alignwide {
	max-width: var(--wp--style--global--wide-size, 1280px);
}

.mhsi-stories-feed__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mhsi-stories-feed__card {
	margin: 0;
	min-width: 0;
}

.mhsi-stories-feed__link {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}

.mhsi-stories-feed__link:hover .mhsi-stories-feed__title,
.mhsi-stories-feed__link:focus-visible .mhsi-stories-feed__title {
	color: var(--mhsi-color-teal, #18808e);
}

.mhsi-stories-feed__media {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 4px;
	background: var(--mhsi-color-light-grey, #f4f4f4);
}

.mhsi-stories-feed__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mhsi-stories-feed__media--empty {
	min-height: 1px;
}

.mhsi-stories-feed__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.4;
	letter-spacing: -0.01em;
	font-weight: 400;
	color: var(--mhsi-color-black-text, #212121);
}

.mhsi-stories-feed__empty {
	margin: 0;
	font-size: 1.125rem;
}

@media (max-width: 900px) {
	.mhsi-stories-feed__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.mhsi-stories-feed__grid {
		grid-template-columns: 1fr;
	}
}

/* —— Testimonials (horizontal Swiper) ——
 * Circles use a 3px outline ring (not box-shadow) so image crop can stay
 * circular without shaving the ring.
 *
 * Architecture: Swiper root stays at the alignwide column width so translate /
 * slidesPerView math matches the content column. overflow:visible lets slides
 * paint into the page gutters toward the viewport edges. Page shell uses
 * overflow-x:clip (below) so that paint does not widen document scrollWidth.
 * Do NOT size the Swiper stage at 100vw — that skews end-of-track bounds.
 */
.mhsi-testimonials-wrap {
	padding: clamp(2.5rem, 6vw, 4rem) var(--wp--preset--spacing--40, 1rem) clamp(3rem, 7vw, 5rem);
	background: #fff;
	overflow: visible;
}

.mhsi-testimonials {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	overflow: visible;
}

.mhsi-testimonials__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.mhsi-testimonials__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.23;
}

.mhsi-testimonials__pager {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
}

/* Single Figma coral star = selected/current testimonial indicator (no dot row). */
.mhsi-testimonials__star {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	flex-shrink: 0;
}

/* Specificity (0,2,0) beats swiper-bundle `.swiper` (0,1,0) regardless of order.
 * Width = column (100%); overflow visible so peeking/exiting slides paint past
 * the wide edge. No horizontal padding here — padding breaks maxTranslate. */
.swiper.mhsi-testimonials__swiper {
	overflow: visible;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	margin-block: 0;
	padding: 0;
	box-sizing: border-box;
}

.mhsi-testimonials__swiper .swiper-wrapper {
	overflow: visible;
}

.mhsi-testimonials__swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
	overflow: visible;
	cursor: pointer;
}

.mhsi-testimonials__swiper .swiper-slide-active {
	cursor: grab;
}

.mhsi-testimonials__slide {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
	/* Room for the blue outline ring without mid-column crop. */
	padding: 0.35rem 0.5rem 0.35rem 0.35rem;
}

.mhsi-testimonials__photo {
	width: clamp(7.5rem, 14vw, 11.9rem);
	height: clamp(7.5rem, 14vw, 11.9rem);
	border-radius: 50%;
	/* Clip the zoomed image to the circle; outline still paints outside this box. */
	overflow: hidden;
	flex-shrink: 0;
	outline: 3px solid var(--mhsi-color-blue-med, #7ab7fe);
	outline-offset: 0;
	background: var(--mhsi-color-light-grey, #f4f4f4);
}

.mhsi-testimonials__photo img,
.mhsi-testimonials__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 800ms ease-in-out;
}

/* Active slide: zoom photo 5% inside the fixed circular crop. */
.mhsi-testimonials__swiper .swiper-slide-active .mhsi-testimonials__photo img,
.mhsi-testimonials__swiper .swiper-slide-active .mhsi-testimonials__photo-img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.mhsi-testimonials__photo img,
	.mhsi-testimonials__photo-img {
		transition: none;
	}
}

.mhsi-testimonials__quote {
	margin: 0;
	position: relative;
}

.mhsi-testimonials__mark {
	position: absolute;
	left: -0.55em;
	top: -0.15em;
	font-size: 2rem;
	line-height: 1;
	color: var(--mhsi-color-black-text, #212121);
}

.mhsi-testimonials__quote p {
	margin: 0;
	font-size: clamp(1.15rem, 1.8vw, 1.375rem);
	line-height: 1.4;
}

.mhsi-testimonials__quote p:not(.has-text-color) {
	color: var(--mhsi-color-black-text, #212121);
}

.mhsi-testimonials__byline {
	margin: 1.25rem 0 0;
	font-size: 1.35rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
}

.mhsi-testimonials__byline strong {
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.mhsi-testimonials__swiper .swiper-wrapper {
		transition-duration: 0ms !important;
	}
}

/* —— Media Guide —— */
.mhsi-media-guide {
	position: relative;
}

.mhsi-media-guide .wp-block-heading {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.23;
	margin: 0 0 1rem;
}

.mhsi-media-guide .has-large-font-size {
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 1rem;
}

.mhsi-media-guide .wp-block-column > p:not([class*="font-size"]) {
	font-size: 1.2rem;
	line-height: 1.4;
	margin: 0 0 1.75rem;
}

.mhsi-media-guide .wp-block-button__link {
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-size: 1.25rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mhsi-media-guide .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.mhsi-external-icon {
	font-size: 0.9em;
	line-height: 1;
}

/* Front page: let full-bleed sections touch edges */
body.home .wp-site-blocks > main.wp-block-group,
body.home main.wp-block-group:has(.mhsi-hero) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0;
	max-width: none;
}

body.home .entry-content > .alignfull,
body.home .wp-block-post-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* Testimonials (and other paint-past-column UI) must not widen the document.
 * Clip at the page shell — not on the Swiper track — so slides can overflow
 * the alignwide box toward the viewport edges without horizontal page scroll. */
body.home,
body.home .wp-site-blocks {
	overflow-x: clip;
}