/**
 * Homepage-only styles, loaded solely on the front page (see
 * mgglobalmed_enqueue_assets() in functions.php). Same cascade rule as
 * everywhere else: a section owns its own vertical padding, never a bare
 * heading or paragraph margin.
 */

/* ---------- Hero ----------
 * Split layout, not text-over-photo: below 980px the photo stacks above
 * the text (both full-width, on --cream); at 980px and up, the text takes
 * the left 52% and the photo bleeds full-height to the right edge of the
 * viewport, reaching up behind the fixed nav. This is the one section on
 * the site with NO .container class on its own — .hero__content carries
 * its own start padding instead, so .hero__photo can measure its position
 * against the true viewport edge (see the 980px block). Deliberately
 * light throughout: no dark overlay on the photo, a gold accent only in
 * the eyebrow rule. When there's no photo at all (.hero--no-photo — see
 * the empty()-check in inc/homepage-sections.php), .hero__content simply
 * fills the full width instead of leaving an empty 48% gap where the
 * photo would have been.
 */
.hero {
	position: relative;
	padding-block: var(--space-8); /* 64px mobile */
}

@media (min-width: 640px) {
	.hero {
		padding-block: var(--space-9); /* 96px tablet */
	}
}

@media (min-width: 1024px) {
	.hero {
		padding-block: var(--space-10); /* 128px desktop */
	}
}

.hero__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding-inline: var(--space-5); /* matches .container's mobile gutter, since .hero itself carries none */
}

@media (min-width: 640px) {
	.hero__content {
		padding-inline: var(--container-padding);
	}
}

/* ---------- Photo ---------- */
.hero__photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 16 / 10; /* mobile: object-fit below favours the face if this crop tightens further */
}

.hero__photo-glow {
	position: absolute;
	inset: -10%;
	z-index: 0;
	background: radial-gradient(ellipse at center, var(--color-blue-tint) 0%, transparent 70%);
	opacity: 0.35;
}

.hero__photo-img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* Only meaningful once the photo sits beside --cream text (980px+) — on
   mobile the photo is edge-to-edge with nothing beside it to dissolve into. */
.hero__photo-fade {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, var(--color-cream) 0%, rgba(var(--color-cream-rgb), 0) 18%);
	display: none;
}

.hero__caption {
	position: absolute;
	z-index: 3;
	inset-block-end: var(--space-4);
	inset-inline-end: var(--space-4);
	max-width: 200px;
	padding: var(--space-2) var(--space-3);
	background-color: rgba(var(--color-cream-rgb), 0.85);
	backdrop-filter: blur(var(--backdrop-blur));
	-webkit-backdrop-filter: blur(var(--backdrop-blur));
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	line-height: var(--leading-snug);
	color: rgba(var(--color-ink-rgb), 0.65);
	text-align: end;
}

.hero__caption strong {
	font-weight: var(--weight-body-semibold);
}

.hero__eyebrow-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.hero__eyebrow-rule {
	display: inline-block;
	width: 32px;
	height: 2px;
	background-color: var(--color-gold);
}

.hero__headline {
	margin: 0;
	font-size: var(--text-display);
	font-weight: var(--weight-display-regular);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
}

/* Marks exactly one emphasised phrase per heading — never two, per the
   type system's rule that italic Fraunces is a single accent, not a pattern. */
.hero__headline em {
	font-style: italic;
	color: var(--color-blue);
}

.hero__lead {
	margin: 0;
	font-size: var(--text-md);
	color: var(--color-charcoal);
	max-width: 55ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
}

.hero__secondary-cta {
	font-family: var(--font-body);
	font-weight: var(--weight-body-semibold);
	font-size: var(--text-sm);
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Hero split layout (980px+) ----------
 * Below this, .hero__photo/.hero__content just stack in DOM order via the
 * flex-column .hero__grid above (photo first, per the brief). At and
 * above it, .hero__photo leaves that flow entirely — absolutely
 * positioned against .hero itself, which is why .hero needed
 * position:relative from the start rather than only here — so it can
 * bleed past the viewport's right edge and up behind the fixed nav
 * without .hero__grid's flex layout fighting it. .hero__content becomes
 * the only element still in normal flow, at 52% width — or the full
 * width when .hero--no-photo (see the class below), so text never sits
 * in a 52%-wide column with an empty gap beside it. */
@media (min-width: 980px) {
	.hero {
		/* .hero__photo's height is driven by .hero's own height (it stretches
		   top-to-bottom via inset), so short hero copy can't be allowed to
		   collapse .hero down to a height too short for the photo to read
		   well — this is a floor, not a fixed height. */
		min-height: 640px;
	}

	.hero__grid {
		display: block;
	}

	.hero__content {
		width: 52%;
		padding-inline-start: var(--container-padding);
		padding-inline-end: var(--space-6);
		max-width: 640px; /* keeps the lead paragraph's line length sane even on ultra-wide viewports */
	}

	.hero--no-photo .hero__content {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline-end: var(--container-padding);
	}

	.hero__photo {
		position: absolute;
		inset-block-start: calc(-1 * var(--nav-height));
		inset-block-end: 0;
		inset-inline-end: 0;
		width: 48%;
		aspect-ratio: auto; /* height now comes from the top/bottom inset stretch, not a fixed ratio */
	}

	.has-announcement-bar .hero__photo {
		inset-block-start: calc(-1 * (var(--nav-height) + var(--announcement-bar-height)));
	}

	.hero__photo-fade {
		display: block;
	}
}

/* ---------- Partner strip ---------- */
.partner-strip {
	padding-block: var(--space-6);
	border-bottom: var(--border-hairline);
}

.partner-strip__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-7);
	list-style: none;
	margin: 0;
	padding: 0;
}

.partner-strip__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	text-decoration: none;
}

.partner-strip__item--coming-soon {
	opacity: 0.5;
}

.partner-strip__name {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-ink);
}

.partner-strip__country {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold);
}

/* Local partners — deliberately smaller and lower-contrast than the
   International Hospital strip above: these aren't a treatment
   destination a patient chooses, so they shouldn't visually compete
   with the partners that are. */
.partner-strip__local-intro {
	margin: var(--space-6) 0 var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

.partner-strip__local-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.partner-strip__local-item a {
	font-size: var(--text-sm);
	color: var(--color-mist);
	text-decoration: underline;
	text-decoration-color: var(--color-line);
	text-underline-offset: 2px;
}

.partner-strip__local-item a:hover,
.partner-strip__local-item a:focus-visible {
	color: var(--color-blue);
}

/* ---------- Services section (dark) ---------- */
.services-section {
	background-color: var(--color-ink);
	color: var(--color-cream);
	padding-block: var(--space-8); /* 64px mobile */
}

@media (min-width: 640px) {
	.services-section {
		padding-block: var(--space-9); /* 96px tablet */
	}
}

@media (min-width: 1024px) {
	.services-section {
		padding-block: var(--space-10); /* 128px desktop */
	}
}

.services-section .section-heading__title {
	color: var(--color-cream);
}

.services-section .section-heading__subtitle {
	color: var(--color-gold-soft);
}

.services-grid {
	margin-block-start: var(--space-8); /* 64px, heading → content */
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.services-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Service cards sit on the dark background, so they need their own
   treatment rather than the light-background .card default. */
.services-grid .card {
	background-color: transparent;
	border-color: rgba(var(--color-cream-rgb), 0.14);
	color: var(--color-cream);
}

.services-grid .card:hover,
.services-grid .card:focus-visible {
	border-color: var(--color-gold);
	transform: translateY(-6px);
}

/* Ink-background exception again — see the announcement bar and enquiry
   CTA for the same reasoning (--color-blue fails 3:1 against ink). */
.services-grid .card:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.services-grid .card__body {
	color: var(--color-gold-soft);
}

/* ---------- Health Check-Up Programs section (light) ---------- */
.checkup-section {
	padding-block: var(--space-8); /* 64px mobile */
}

@media (min-width: 640px) {
	.checkup-section {
		padding-block: var(--space-9); /* 96px tablet */
	}
}

@media (min-width: 1024px) {
	.checkup-section {
		padding-block: var(--space-10); /* 128px desktop */
	}
}

.checkup-section__grid {
	margin-block-start: var(--space-8); /* 64px, heading → content */
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.checkup-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.checkup-section__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.checkup-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6); /* 32px */
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background-color: var(--color-cream);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.checkup-card:hover,
.checkup-card:focus-within {
	border-color: var(--color-gold);
	box-shadow: var(--shadow-lg);
	transform: translateY(-6px);
}

.checkup-card__hospital {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-card-heading);
	font-weight: var(--weight-display-medium);
	line-height: var(--leading-card-heading);
	letter-spacing: var(--tracking-card-heading);
	font-variation-settings: 'opsz' 36;
	color: var(--color-ink);
}

.checkup-card__list {
	margin: 0;
	padding-inline-start: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	color: var(--color-charcoal);
	font-size: var(--text-sm);
}

.checkup-card__link {
	margin-block-start: auto;
	padding-block-start: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-blue);
	text-decoration: none;
}

.checkup-card__link:hover,
.checkup-card__link:focus-visible {
	color: var(--color-gold);
	text-decoration: underline;
}

/* ---------- Story feed entry ---------- */
.story-feed {
	padding-block: var(--space-7);
}

.story-feed__scroller {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	padding-block-end: var(--space-2);
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.story-avatar {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 84px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-charcoal);
}

.story-avatar__ring {
	width: 72px;
	height: 72px;
	padding: 3px;
	border-radius: 50%;
	border: 1px solid var(--color-line);
	display: flex;
	align-items: center;
	justify-content: center;
}

.story-avatar__image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-cream);
}

.story-avatar__placeholder {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--color-ink);
	border: 2px solid var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gold);
}

.story-avatar__label {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-mist);
}

/* ---------- Testimonials ---------- */
.testimonials {
	padding-block: var(--space-8); /* 64px mobile */
}

@media (min-width: 640px) {
	.testimonials {
		padding-block: var(--space-9); /* 96px tablet */
	}
}

@media (min-width: 1024px) {
	.testimonials {
		padding-block: var(--space-10); /* 128px desktop */
	}
}

.testimonials__grid {
	margin-block-start: var(--space-8); /* 64px, heading → content */
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}

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

.testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.testimonial__quote {
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--color-ink);
}

.testimonial__attribution {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.testimonial__photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial__meta {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

/* Enquiry CTA styles moved to components.css — the partial that renders
   this markup (partials/enquiry-cta.php) is now reused outside the
   homepage too (e.g. at the end of every article). */

/* ---------- Specialty band ("Care we coordinate") ----------
 * Static — no marquee, no animation. A centred, wrapping flex group of
 * chips on the light --blue-tint background, sitting right after the
 * dark .services-section above so the two sections read as distinct. */
.specialty-band {
	background-color: var(--color-blue-tint);
	padding-block: var(--space-8); /* 64px mobile */
}

@media (min-width: 900px) {
	.specialty-band {
		padding-block: var(--space-9); /* 96px desktop */
	}
}

.specialty-band .section-heading__title {
	font-family: var(--font-display);
	font-size: 27px;
}

.specialty-band .section-heading__subtitle {
	font-size: 13.5px;
	color: var(--color-mist);
}

.specialty-band__chips {
	list-style: none;
	margin: 0;
	margin-block-start: 34px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.specialty-band__chip {
	background-color: var(--color-white);
	border: 1px solid rgba(11, 68, 136, 0.18);
	border-radius: var(--radius-tag);
	padding: 11px 22px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--weight-body-medium);
	color: var(--color-ink);
	white-space: nowrap;
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.specialty-band__chip:hover {
	border-color: var(--color-blue);
	transform: translateY(-2px);
}

.specialty-band__chip--accent {
	background-color: var(--color-ink);
	color: var(--color-cream);
	border-color: var(--color-ink);
}

.specialty-band__footer {
	margin: 0;
	margin-block-start: 30px;
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-charcoal);
}

.specialty-band__footer a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Coordination fee ("Our coordination fee") ----------
 * Dark, two-column: copy on the left, a free/paid breakdown card on the
 * right. Stacks to one column below 900px. The radial glow is a purely
 * decorative top-right accent — aria-hidden isn't needed since it has
 * no content, just a background-image on a ::before. */
.coordination-fee {
	position: relative;
	background-color: var(--color-ink);
	color: var(--color-cream);
	padding-block: var(--space-8); /* 64px mobile */
	overflow: hidden;
}

@media (min-width: 900px) {
	.coordination-fee {
		padding-block: var(--space-9); /* 96px desktop */
	}
}

.coordination-fee::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle at center, rgba(201, 169, 97, 0.13) 0%, transparent 68%);
	pointer-events: none;
}

.coordination-fee__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

@media (min-width: 900px) {
	.coordination-fee__inner {
		display: grid;
		grid-template-columns: 1.05fr 0.95fr;
		gap: 56px;
		align-items: center;
	}
}

.coordination-fee__copy .eyebrow {
	color: var(--color-gold-soft);
	margin-block-end: 16px;
	display: inline-block;
}

.coordination-fee__headline {
	font-family: var(--font-display);
	font-size: clamp(2.875rem, 6vw, 5.375rem); /* 46px – 86px */
	line-height: 0.95;
	letter-spacing: -0.025em;
	margin: 0;
}

.coordination-fee__headline em {
	font-style: italic;
	color: var(--color-gold-soft);
}

.coordination-fee__body {
	margin: 0;
	margin-block-start: 22px;
	max-width: 400px;
	font-size: var(--text-md);
	line-height: 1.65;
	color: rgba(var(--color-cream-rgb), 0.7);
}

.coordination-fee__card {
	background-color: rgba(var(--color-cream-rgb), 0.05);
	border: 1px solid rgba(var(--color-cream-rgb), 0.14);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.coordination-fee__rows {
	display: flex;
	flex-direction: column;
}

.coordination-fee__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-block-end: 1px solid rgba(var(--color-cream-rgb), 0.1);
}

.coordination-fee__row:last-child {
	border-block-end: none;
}

.coordination-fee__row--divider {
	border-block-start: 1px solid rgba(var(--color-cream-rgb), 0.28);
	margin-block-start: var(--space-2);
	padding-block-start: calc(var(--space-3) + var(--space-2));
}

.coordination-fee__row-label {
	font-size: var(--text-sm);
	color: rgba(var(--color-cream-rgb), 0.85);
}

.coordination-fee__row-value {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: var(--weight-mono-medium);
	color: var(--color-cream);
	text-align: right;
	white-space: nowrap;
}

.coordination-fee__disclaimer {
	margin: 0;
	margin-block-start: var(--space-5);
	font-size: 12px;
	color: rgba(var(--color-cream-rgb), 0.55);
}