/*
 * FDSH Elementor Widgets — semantic mockup-fidelity extensions.
 * Extends validated widgets only; no page-specific or duplicate component architecture.
 */

/* Hero: configurable editorial split ratio while preserving legacy 50/50 fallback. */
.fdsh-hero--split-media-right .fdsh-hero__inner {
	grid-template-columns: minmax(0, var(--fdsh-hero-content-width, 50%)) minmax(0, 1fr);
}

.fdsh-hero--split-media-left .fdsh-hero__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--fdsh-hero-content-width, 50%));
}

.fdsh-hero .fdsh-button--outline {
	background: transparent;
	color: var(--fdsh-color-olive, #B6A700);
}

.fdsh-hero .fdsh-button--editorial-link {
	display: inline-flex;
	width: auto;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fdsh-color-olive, #B6A700);
	justify-content: flex-start;
	text-decoration: none;
}

.fdsh-hero .fdsh-button--editorial-link::after {
	content: "→";
	margin-left: 8px;
}

.fdsh-hero .fdsh-button--editorial-link:hover,
.fdsh-hero .fdsh-button--editorial-link:focus-visible {
	background: transparent;
	color: var(--fdsh-color-ink, #2B2927);
	transform: none;
}

/* Split Content: same semantic ratio control, with correct inverse for media-left. */
.fdsh-split--media-right .fdsh-split__inner,
.fdsh-split--editorial .fdsh-split__inner,
.fdsh-split--panel .fdsh-split__inner {
	grid-template-columns: minmax(0, var(--fdsh-split-content-width, 50%)) minmax(0, 1fr);
}

.fdsh-split--media-left .fdsh-split__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--fdsh-split-content-width, 50%));
}

/* Cards Grid: the intro description is a first-class independently styled element. */
.fdsh-cards--centered-intro .fdsh-cards__description {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Institutional dark band can be produced by the existing Metrics widget via Elementor background controls. */
.fdsh-metrics--intro-left-band .fdsh-metrics__item {
	min-width: 0;
}

/* Mobile always collapses split layouts to media then content where applicable. */
@media (max-width: 1024px) {
	.fdsh-hero--split-media-right .fdsh-hero__inner,
	.fdsh-hero--split-media-left .fdsh-hero__inner,
	.fdsh-split--media-right .fdsh-split__inner,
	.fdsh-split--media-left .fdsh-split__inner,
	.fdsh-split--editorial .fdsh-split__inner,
	.fdsh-split--panel .fdsh-split__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.fdsh-hero--split-media-right .fdsh-hero__media,
	.fdsh-hero--split-media-left .fdsh-hero__media,
	.fdsh-split--media-right .fdsh-split__media,
	.fdsh-split--media-left .fdsh-split__media {
		order: 1;
	}

	.fdsh-hero--split-media-right .fdsh-hero__content,
	.fdsh-hero--split-media-left .fdsh-hero__content,
	.fdsh-split--media-right .fdsh-split__content,
	.fdsh-split--media-left .fdsh-split__content {
		order: 2;
	}
}


/* Values & Principles — optional balanced final row for 5 editorial values.
   Uses a six-track grid so three items occupy row one and two items sit centered on row two. */
@media (min-width: 1025px) {
	.fdsh-widget.fdsh-values.fdsh-values--intro-left-values.fdsh-values--balanced-last-row.fdsh-values--count-5 .fdsh-values__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.fdsh-widget.fdsh-values.fdsh-values--intro-left-values.fdsh-values--balanced-last-row.fdsh-values--count-5 .fdsh-values__item {
		grid-column: span 2;
	}

	.fdsh-widget.fdsh-values.fdsh-values--intro-left-values.fdsh-values--balanced-last-row.fdsh-values--count-5 .fdsh-values__item:nth-child(4) {
		grid-column: 2 / span 2;
	}

	.fdsh-widget.fdsh-values.fdsh-values--intro-left-values.fdsh-values--balanced-last-row.fdsh-values--count-5 .fdsh-values__item:nth-child(5) {
		grid-column: 4 / span 2;
	}
}

/* ============================================================
   v0.13.2 — layout correctness fixes
   Generic fixes for validated widgets; no page-specific styling.
   ============================================================ */

/* Hero / media-background: the visual is a true background layer.
   Previous markup kept .fdsh-hero__visual in document flow, causing
   the title to render above a separate image block. */
.fdsh-hero--media-background {
	position: relative;
	isolation: isolate;
	padding-block: 0;
}

.fdsh-hero--media-background .fdsh-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	width: min(calc(100% - 48px), var(--fdsh-container));
	min-height: inherit;
}

.fdsh-hero--media-background .fdsh-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
	min-width: 0;
	min-height: 0;
	pointer-events: none;
}

.fdsh-hero--media-background .fdsh-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.fdsh-hero--media-background .fdsh-hero__main-image,
.fdsh-hero--media-background .fdsh-hero__main-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fdsh-hero--media-background .fdsh-hero__content {
	position: relative;
	z-index: 3;
}

/* Split Content: left/right means physical placement on screen,
   independently of page text direction. Children restore RTL text. */
.fdsh-split--media-right .fdsh-split__inner,
.fdsh-split--media-left .fdsh-split__inner {
	direction: ltr;
}

.fdsh-split--media-right .fdsh-split__content {
	order: 1;
}
.fdsh-split--media-right .fdsh-split__media {
	order: 2;
}
.fdsh-split--media-left .fdsh-split__media {
	order: 1;
}
.fdsh-split--media-left .fdsh-split__content {
	order: 2;
}

html[dir="rtl"] .fdsh-split--media-right .fdsh-split__content,
html[dir="rtl"] .fdsh-split--media-left .fdsh-split__content {
	direction: rtl;
}

@media (max-width: 1024px) {
	.fdsh-hero--media-background .fdsh-hero__inner {
		width: min(calc(100% - 36px), var(--fdsh-container));
	}
}

@media (max-width: 767px) {
	.fdsh-hero--media-background .fdsh-hero__inner {
		width: min(calc(100% - 28px), var(--fdsh-container));
	}

	.fdsh-split--media-right .fdsh-split__media,
	.fdsh-split--media-left .fdsh-split__media {
		order: 1;
	}
	.fdsh-split--media-right .fdsh-split__content,
	.fdsh-split--media-left .fdsh-split__content {
		order: 2;
	}
}

/* CTA inline: lead visual is a real layout column and remains independently stylable. */
.fdsh-cta--inline .fdsh-cta__inner--with-icon .fdsh-cta__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}
.fdsh-cta--inline .fdsh-cta__content {
	min-width: 0;
	flex: 1 1 auto;
}


/* Viewport-wide Hero sections.
   v0.13.5: media-background is structurally independent from .fdsh-container.
   The content remains constrained, while the background layer can span the viewport. */
.fdsh-hero--media-background {
	position: relative;
	isolation: isolate;
}

.fdsh-hero--media-background > .fdsh-hero__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	pointer-events: none;
}

.fdsh-hero--media-background > .fdsh-hero__visual > .fdsh-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fdsh-hero--media-background > .fdsh-hero__inner {
	position: relative;
	z-index: 2;
}

/* True viewport background, independent of Elementor/container width. */
.fdsh-hero--media-background.fdsh-hero--full-bleed {
	overflow: visible;
}

.fdsh-hero--media-background.fdsh-hero--full-bleed > .fdsh-hero__visual {
	left: 50%;
	right: auto;
	width: 100vw;
	max-width: none;
	transform: translateX(-50%);
}

/* Keep non-background variants backward-compatible with the original full-bleed option. */
.fdsh-hero--full-bleed:not(.fdsh-hero--media-background) {
	position: relative;
	left: 50%;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

html[dir="rtl"] .fdsh-hero--media-background.fdsh-hero--full-bleed > .fdsh-hero__visual {
	left: 50%;
	right: auto;
}

/* v0.14.4 — Client request G01: justify institutional narrative copy.
   Intentionally excludes headings, labels, buttons, menus, header and footer. */
.fdsh-hero__description,
.fdsh-inspiration-hero__description,
.fdsh-inspiration-hero__point-text,
.fdsh-split__lead,
.fdsh-split__text,
.fdsh-split__checklist-copy,
.fdsh-split__checklist-text,
.fdsh-split__secondary-panel-text,
.fdsh-page-intro__body,
.fdsh-page-intro__feature-text,
.fdsh-cards__description,
.fdsh-cards__text,
.fdsh-editorial__section-description,
.fdsh-editorial__text,
.fdsh-metrics__intro-text,
.fdsh-metrics__text,
.fdsh-partners__description,
.fdsh-partners__intro-text,
.fdsh-project-links__text,
.fdsh-publications__text,
.fdsh-statement__text,
.fdsh-statement__body,
.fdsh-steps__description,
.fdsh-steps__text,
.fdsh-team__text,
.fdsh-values__description,
.fdsh-values__intro-text,
.fdsh-values__text,
.fdsh-cta__text,
.fdsh-contact-form__intro {
	text-align: justify !important;
	text-justify: inter-word;
}