/**
 * Enjaz responsive typography and CTA safety layer.
 *
 * Loaded after every page-specific bundle so legacy service templates and the
 * newer editorial templates share one readable mobile scale without changing
 * their markup, artwork, or interaction logic.
 * The mobile refinements also cover long editorial titles and touch targets.
 */

body.enjaz-v2 main :where(h1, h2, h3) {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/*
 * Arabic display faces need more vertical room for connected forms, dots and
 * diacritics. Several legacy/page-specific rules used Latin-style negative
 * tracking and line-heights near 1, which visibly collide on wrapped Arabic
 * headings at desktop and tablet widths.
 */
html[dir="rtl"] body.enjaz-v2 main h1 {
	line-height: 1.22 !important;
	letter-spacing: normal !important;
}

/* Article cards have an editorial scale, not the section-heading scale.
 * Keep full titles visible, including mixed Arabic/Latin search phrases. */
html body.enjaz-v2 main .enjaz-post-card h2.enjaz-post-card__title {
	font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
	line-height: 1.5 !important;
	margin-block: 0.75rem 1rem;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

html body.enjaz-v2 main .enjaz-post-card__title a {
	font-size: inherit;
	line-height: inherit;
}

@media (max-width: 720px) {
	html body.enjaz-v2 main .enjaz-post-card h2.enjaz-post-card__title,
	html[dir] body.enjaz-v2 main .ej2-en-insight h3 {
		font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
		line-height: 1.5 !important;
		margin-block: 0.75rem 1rem;
		text-wrap: pretty;
	}

	html body.enjaz-v2 main h2#enjaz-related-heading {
		font-size: clamp(1.625rem, 7vw, 1.875rem) !important;
		line-height: 1.4 !important;
	}

	html body.enjaz-v2 main :is(.enjaz-post-card__media, .ej2-en-insight__media):has(img) {
		display: block;
		inline-size: 100%;
		min-block-size: 0;
		block-size: auto;
		aspect-ratio: 16 / 9;
	}

	html body.enjaz-v2 main :is(.enjaz-post-card__media, .ej2-en-insight__media) img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 16 / 9;
		object-fit: contain;
		transform: none;
	}

	html body.enjaz-v2.single-post main .enjaz-article-hero__media {
		margin-block-start: 1.75rem;
	}

	html body.enjaz-v2.single-post main .enjaz-article-hero__media img {
		object-fit: contain;
	}
}

html[dir="rtl"] body.enjaz-v2 main h2:not(.hero-subtitle):not(.title-sub):not(.text-2xl):not(.enjaz-post-card__title) {
	line-height: 1.25 !important;
	letter-spacing: normal !important;
}

html[dir="rtl"] body.enjaz-v2 main h3 {
	line-height: 1.36 !important;
	letter-spacing: normal !important;
}

/*
 * Several legacy English templates used display line-heights below 1.05.
 * Preserve their scale and composition, but give multi-line Latin headings
 * enough vertical room to avoid colliding ascenders and descenders.
 */
html[dir="ltr"] body.enjaz-v2 main h1 {
	line-height: 1.14 !important;
}

html[dir="ltr"] body.enjaz-v2 main h2:not(.hero-subtitle):not(.title-sub):not(.enjaz-post-card__title) {
	line-height: 1.2 !important;
}

body.enjaz-v2 main :where(
	section[class*="cta" i],
	section[id="contact"],
	.ej2-final,
	.enhanced-cta,
	.enjaz-faq-cta
) {
	max-inline-size: 100%;
	overflow: hidden;
}

body.enjaz-v2 main :where(
	section[class*="cta" i],
	section[id="contact"],
	.ej2-final,
	.enhanced-cta,
	.enjaz-faq-cta
) :where(.container, [class*="container"], [class*="inner"], [class*="content"], [class*="wrapper"]) {
	min-inline-size: 0;
	max-inline-size: 100%;
}

body.enjaz-v2 main :where(
	section[class*="cta" i],
	section[id="contact"],
	.ej2-final,
	.enhanced-cta,
	.enjaz-faq-cta
) :where(a, button) {
	min-block-size: 3rem;
	white-space: normal;
}

@media (max-width: 720px) {
	/* Arabic display type needs room for connected glyphs and stacked dots. */
	html[dir="rtl"] body.enjaz-v2 main h1 {
		font-size: clamp(2.05rem, 9.2vw, 2.35rem) !important;
		line-height: 1.22 !important;
		letter-spacing: normal !important;
	}

	html[dir="rtl"] body.enjaz-v2 main h2:not(.hero-subtitle):not(.title-sub):not(.text-2xl):not(.enjaz-post-card__title) {
		font-size: clamp(1.85rem, 8.8vw, 2.2rem) !important;
		line-height: 1.25 !important;
		letter-spacing: normal !important;
	}

	html[dir="rtl"] body.enjaz-v2 main h3 {
		line-height: 1.38 !important;
		letter-spacing: normal !important;
	}

	/* Long editorial titles should introduce the article, not fill the screen. */
	html[dir="rtl"] body.enjaz-v2.single-post main .enjaz-article-hero h1 {
		font-size: clamp(1.625rem, 6.8vw, 1.875rem) !important;
		line-height: 1.45 !important;
		margin-block-end: 1.5rem;
		text-wrap: pretty;
	}

	/* English keeps a slightly tighter rhythm while respecting the same width. */
	html[dir="ltr"] body.enjaz-v2 main h1 {
		font-size: clamp(2rem, 9vw, 2.4rem) !important;
		line-height: 1.16 !important;
	}

	/* FAQ questions are interactive labels, not section-scale display titles. */
	html[dir="rtl"] body.enjaz-v2 main.enjaz-faq-main .faq-item summary h2.text-base {
		font-size: clamp(1.1rem, 5.3vw, 1.3rem) !important;
		line-height: 1.55 !important;
		text-wrap: pretty;
	}

	/* Long archive titles need editorial hierarchy without occupying a screen. */
	html[dir="rtl"] body.enjaz-v2 main.enjaz-author-archive .enjaz-author-archive__stream h2.enjaz-post-card__title {
		font-size: clamp(1.25rem, 5.8vw, 1.5rem) !important;
		line-height: 1.5 !important;
		text-wrap: pretty;
	}

	body.enjaz-v2 main .ej2-en-insight h3 {
		font-size: clamp(1.18rem, 5.6vw, 1.35rem) !important;
		line-height: 1.5 !important;
		text-wrap: pretty;
	}

	html[dir="ltr"] body.enjaz-v2 main h2:not(.hero-subtitle):not(.title-sub):not(.enjaz-post-card__title) {
		font-size: clamp(1.8rem, 8.5vw, 2.2rem) !important;
		line-height: 1.22 !important;
	}

	body.enjaz-v2 main :where(
		[class*="intro"],
		[class*="lead"],
		[class*="description"],
		[class*="subtitle"],
		[class*="summary"]
	) {
		line-height: 1.75;
	}

	body.enjaz-v2 main :where(
		section[class*="cta" i],
		section[id="contact"],
		.ej2-final,
		.enhanced-cta,
		.enjaz-faq-cta
	) {
		inline-size: 100%;
	}

	body.enjaz-v2 main :where(
		section[class*="cta" i],
		section[id="contact"],
		.ej2-final,
		.enhanced-cta,
		.enjaz-faq-cta
	) :where(.cta-actions, .cta-buttons, [class*="cta__actions"], [class*="cta__buttons"], .ej2-final__paths) {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0.75rem;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	body.enjaz-v2 main :where(
		section[class*="cta" i],
		section[id="contact"],
		.ej2-final,
		.enhanced-cta,
		.enjaz-faq-cta
	) :where(.cta-actions, .cta-buttons, [class*="cta__actions"], [class*="cta__buttons"], .ej2-final__paths) > :where(a, button) {
		inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 3rem;
		justify-content: center;
		text-align: center;
	}

	/* Give stand-alone actions a reliable finger-sized hit area without
	 * inflating inline links inside article paragraphs. */
	body.enjaz-v2 main :where(
		.ej2-en-insight__link,
		.enjaz-text-link,
		.ej2-service-panel__cta,
		.card-link,
		.ejx-text-link,
		.ejx-contact-map,
		.filter-btn,
		.badge-link
	) {
		display: inline-flex;
		min-block-size: 2.75rem !important;
		min-height: 2.75rem !important;
		align-items: center;
		padding-block: 0.45rem;
	}

	body.enjaz-v2 .enjaz-footer :where(
		.enjaz-footer__links a,
		.enjaz-footer__contact a
	) {
		display: inline-flex;
		min-block-size: 2.75rem !important;
		min-height: 2.75rem !important;
		align-items: center;
	}
}

/* Keep restored related covers compact at every breakpoint, not only phones. */
body.enjaz-v2 .enjaz-related .enjaz-post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}
body.enjaz-v2 .enjaz-related .enjaz-post-card {
	min-inline-size: 0;
}
body.enjaz-v2 .enjaz-related .enjaz-post-card__media:has(img) {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
}
body.enjaz-v2 .enjaz-related .enjaz-post-card__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}
@media (min-width: 48rem) {
	body.enjaz-v2 .enjaz-related .enjaz-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 64rem) {
	body.enjaz-v2 .enjaz-related .enjaz-post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}