/**
 * The rich International Hospital partner page (template-parts/
 * partner-international.php) — hero, why-referred cards, the Journey
 * (reuses .process from components.css), gallery, FAQ (reuses
 * .faq-group from components.css), final CTA. Loaded only on that page
 * — see mgglobalmed_enqueue_assets().
 */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
	padding-block: var(--space-4);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

.breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin-inline: var(--space-2);
	color: var(--color-line);
}

.breadcrumbs a {
	color: var(--color-mist);
	text-decoration: none;
	background-image: none;
}

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

.breadcrumbs li[aria-current] {
	color: var(--color-ink);
}

/* ---------- 1. Hero ---------- */
.phero {
	position: relative;
	min-height: 440px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: var(--color-cream);
}

.phero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The brief's exact overlay values, angled so the darkest ink sits
   behind the text column rather than washing the whole photo evenly. */
.phero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(var(--color-ink-rgb), 0.94) 0%, rgba(var(--color-ink-rgb), 0.82) 45%, rgba(var(--color-ink-rgb), 0.55) 100%);
}

.phero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.phero__logo {
	display: block;
	height: 40px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	padding: var(--space-2) var(--space-3);
	background-color: var(--color-cream);
	border-radius: var(--radius-sm);
}

.phero__eyebrow {
	color: var(--color-gold-soft);
}

.phero__title {
	margin: 0;
	color: var(--color-cream);
	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, 'WONK' 1;
	max-width: 16ch;
}

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

.phero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-start: var(--space-2);
}

/* Same ink-background exception used everywhere else on the site —
   --color-blue fails 3:1 against a background this dark, so the primary
   action becomes gold here, and the secondary action gets a cream
   outline instead of its usual ink one. */
.phero .btn--primary {
	background-color: var(--color-gold);
	color: var(--color-ink);
}

.phero .btn--primary:hover,
.phero .btn--primary:focus-visible {
	background-color: var(--color-gold-soft);
	transform: translateY(-2px);
}

.phero .btn--primary:focus-visible,
.phero .btn--secondary:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

.phero .btn--secondary {
	background-color: transparent;
	color: var(--color-cream);
	border-color: rgba(var(--color-cream-rgb), 0.6);
}

.phero .btn--secondary:hover,
.phero .btn--secondary:focus-visible {
	background-color: var(--color-cream);
	color: var(--color-ink);
	border-color: var(--color-cream);
}

.phero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: var(--space-5) 0 0;
	padding-block-start: var(--space-5);
	border-top: 1px solid rgba(var(--color-cream-rgb), 0.2);
}

.phero__fact {
	margin: 0;
}

.phero__fact dt {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-gold-soft);
	margin: 0 0 var(--space-1);
}

.phero__fact dd {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-lg);
	font-variant-numeric: tabular-nums;
	color: var(--color-cream);
}

/* The admin-empty-notice under the hero sits directly on the photo/
   overlay, same "carries its own background" reasoning as everywhere
   else it's used — no extra styling needed here, it already reads
   correctly against anything behind it. */
.phero .admin-empty-notice {
	position: relative;
	z-index: 1;
}

/* ---------- 2. Why patients are referred here ---------- */
.pwhy {
	padding-block: var(--space-9);
}

.pwhy__grid {
	margin-block-start: var(--space-8);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

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

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

.pwhy__card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-6px);
}

.pwhy__icon {
	font-size: var(--text-2xl);
	color: var(--color-gold);
}

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

.pwhy__text {
	margin: 0;
	color: var(--color-mist);
	font-size: var(--text-sm);
	line-height: var(--leading-body-sm);
}

/* ---------- 2b. Why Choose [Hospital] / 3b. Advanced Technologies ---------- */
.pfeatures,
.ptech {
	padding-block: var(--space-9);
}

.pfeatures__grid,
.ptech__grid {
	margin-block-start: var(--space-8);
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

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

@media (min-width: 960px) {
	.pfeatures__grid,
	.ptech__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pfeatures__card,
.ptech__card {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background-color: var(--color-cream);
}

.pfeatures__title,
.ptech__title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-card-heading);
	font-weight: var(--weight-display-medium);
	font-family: var(--font-display);
	color: var(--color-ink);
}

.pfeatures__text,
.ptech__text {
	margin: 0;
	color: var(--color-mist);
	font-size: var(--text-sm);
	line-height: var(--leading-body-sm);
}

/* ---------- 3c. Health Check-Up Programs ---------- */
.pcheckups {
	padding-block: var(--space-9);
}

.pcheckups__note {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	color: var(--color-mist);
}

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

/* ---------- 3. Specialties ---------- */
.pspecialties {
	padding-block: var(--space-9);
}

.pspecialties__panel p {
	margin: 0 0 var(--space-3);
}

.pspecialties__panel p:last-child {
	margin-bottom: 0;
}

/* ---------- 4. The Journey ---------- */
.pjourney {
	padding-block: var(--space-9);
	background-color: var(--color-ink);
	color: var(--color-cream);
}

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

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

.pjourney__process {
	margin-block-start: var(--space-8);
}

.pjourney__role {
	margin: var(--space-2) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-body-sm);
}

.pjourney__role--mg {
	color: var(--color-cream);
}

.pjourney__role--mg strong {
	color: var(--color-gold-soft);
}

.pjourney__role--patient {
	color: var(--color-gold-soft);
}

.pjourney__role--patient strong {
	color: var(--color-cream);
}

.pjourney__privacy-note {
	margin: var(--space-8) 0 0;
	padding: var(--space-5);
	border: 1px dashed rgba(var(--color-cream-rgb), 0.3);
	border-radius: var(--radius-md);
	max-width: 68ch;
	font-size: var(--text-sm);
	color: var(--color-cream);
}

/* ---------- 5. Photo gallery ---------- */
.pgallery {
	padding-block: var(--space-9);
}

.pgallery__grid {
	margin-block-start: var(--space-8);
}

.pgallery__credit {
	margin: var(--space-5) 0 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-mist);
}

/* ---------- 6. FAQ ---------- */
.pfaq {
	padding-block: var(--space-9);
}

/* ---------- 7. Final CTA ----------
   .penquiry-cta reuses .enquiry-cta's ink background/spacing wholesale
   (see components.css) — .penquiry-cta__actions is the one addition,
   for laying the two buttons out side by side. */
.penquiry-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	flex-shrink: 0;
}