/* ==========================================================================
   SUDAIR PHARMA — LOCALIZING HIGH-VALUE MANUFACTURING (Elementor-native)

   The section itself is built from real Elementor containers and widgets — the
   photograph is an image widget, the icon an icon widget, the number and title
   headings, the description a text editor. The overlap, the panel radius, the
   padding and the card widths are all Elementor settings stored in the page
   data, so everything opens and edits normally in the editor.

   This file adds only what Elementor's controls cannot express cleanly:

     1. the dark green wash over the lower part of each photograph, which is a
        gradient the image widget has no control for;
     2. lifting the icon up over the join, which needs a negative margin on the
        widget's own wrapper;
     3. equal-height cards, which needs the panel to grow.

   Scoped under .sud-hv, a class on one section of one page.
   ========================================================================== */

.sud-hv {
	--hv-green: #006344;
	--hv-deep: #0A4A34;
	--hv-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.sud-hv .sud-hv__intro { max-inline-size: 74ch; }

/* --------------------------------------------------------------------------
   CARDS

   Equal height across the row: the card stretches, the panel grows into it, so
   four descriptions of different lengths still end level.
   -------------------------------------------------------------------------- */

.sud-hv .sud-hv__card { align-self: stretch; }

.sud-hv .sud-hv__panel {
	flex: 1 1 auto;
	position: relative;

	box-shadow:
		0 1px 2px rgba(11, 31, 23, .04),
		0 14px 34px rgba(11, 31, 23, .09);
}

/* --------------------------------------------------------------------------
   PHOTOGRAPH

   A fixed frame with the picture cropped to fill it, so four images of
   different proportions present identically.
   -------------------------------------------------------------------------- */

.sud-hv .sud-hv__media img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 18px;
}

.sud-hv .sud-hv__media { position: relative; }

/*
 * The dark green wash into which the panel rises. A gradient, so it grades from
 * nothing at the middle of the picture to solid at its foot — the image widget
 * offers no control for this, which is why it lives here.
 */
.sud-hv .sud-hv__media::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 62%;
	border-radius: 0 0 18px 18px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(4, 48, 33, 0) 0%, rgba(4, 48, 33, .55) 45%, rgba(4, 48, 33, .92) 100%);
}

/* --------------------------------------------------------------------------
   ICON

   Elementor draws the circle (stacked view, circle shape, brand colour, its own
   padding). All that is left is to lift it so it straddles the join between the
   photograph and the panel.
   -------------------------------------------------------------------------- */

.sud-hv .sud-hv__icon {
	position: relative;
	z-index: 3;
	line-height: 0;
}

.sud-hv .sud-hv__icon .elementor-icon {
	box-shadow: 0 6px 18px rgba(10, 74, 52, .28);
}

/*
 * ENGLISH: the circle sits at the photograph's bottom-LEFT corner.
 *
 * Shared by every photo card built from this component — the .sud-hv__icon
 * widget inside a .sud-hv__card — which is three rows on three pages:
 *   Localization (125) "Localizing High-Value Pharmaceutical Manufacturing"
 *   Manufacture  (549) "Manufacturing Technologies"
 *   CSR          (121) "Environmental, Health, & Safety"
 *
 * Each icon widget places its circle with Elementor's own alignment, written
 * per widget as `text-align: end` on the wrapper — the right-hand edge in
 * English. Aligning the wrapper to the left moves the circle to the other end
 * of the same line: the same 22px from the photograph's edge (the panel's own
 * padding, identical on both sides), the same height, size and styling.
 *
 * English only — `html:not([dir="rtl"])` — because the Arabic cards keep their
 * circle on the right (see the row-scoped RTL rule below and in
 * csr-ehs-cards.css / manufacture-rtl.css). Keyed on the component's classes,
 * so no other icon on the site can match.
 */
html:not([dir="rtl"]) .sud-hv__card .elementor-widget-icon.sud-hv__icon .elementor-icon-wrapper {
	text-align: left;
}

/*
 * RTL: the circle stays on the RIGHT.
 *
 * Elementor aligns the icon with `text-align: end` on its wrapper. That is a
 * LOGICAL value — the right-hand side in English, which is where the design
 * puts the circle (22px in from the photograph's right edge on all four cards),
 * but the LEFT side in Arabic, where all four landed 22px in from the left.
 * In RTL the side is stated physically instead.
 *
 * Scoped to this section's row (page 125, 390b17e) rather than to .sud-hv:
 * the Manufacture page's "Manufacturing Technologies" cards carry .sud-hv too,
 * and they, like the CSR "Environmental, Health, & Safety" cards, have their
 * own row-scoped rule (manufacture-rtl.css, csr-ehs-cards.css).
 */
[dir="rtl"] .elementor-125 .elementor-element-390b17e .sud-hv__icon .elementor-icon-wrapper {
	text-align: right;
}

/*
 * RTL: the section's text starts where English's does, mirrored.
 *
 * Two editor offsets are written for the left side and did not follow the
 * reading direction:
 *
 *  - The title and intro above the cards sit in a container (3852ece) with a
 *    45px left margin on desktop. Elementor applies container margins through
 *    --margin-inline-start/-end, but on the Arabic site (body.rtl) it maps the
 *    start margin to the editor's RIGHT value, so the 45px stayed on the left.
 *    The block started 48px from the right edge in Arabic against 93px from the
 *    left in English — well outside the other sections of the page. Restoring
 *    the normal mapping puts the editor's own margin on the start side, at every
 *    breakpoint (it is 0 on tablet and phone).
 *
 *    The container is also set to width 100%, and 100% plus a 45px margin is
 *    wider than the page: in English that is the 21px horizontal scroll this
 *    page has on desktop, and mirrored it would give Arabic the same. With width
 *    `auto` the flex column sizes it to the space left after its margin instead
 *    — the text starts in the same place, nothing overflows. (Where the margin
 *    is 0, tablet and phone, auto and 100% are the same width.)
 *
 *  - Each card's title and description carries a 2px left margin (a widget
 *    margin, written as a plain physical `margin`), so in Arabic the text sat
 *    22px from the photograph's right edge instead of the 24px it has from the
 *    left in English. Applied on the start side here.
 */
[dir="rtl"] .elementor-125 .elementor-element.elementor-element-3852ece {
	--margin-inline-start: var(--margin-left);
	--margin-inline-end: var(--margin-right);
	--width: auto;
}

[dir="rtl"] .elementor-125 .elementor-element-390b17e .elementor-element:is(.sud-hv__title, .sud-hv__desc) {
	margin-left: 0;
	margin-right: 2px;
}

/* --------------------------------------------------------------------------
   TYPE

   Two classes, because the kit styles headings at `.elementor-kit-5 h3` — a
   tag-plus-class selector that outranks a single class.
   -------------------------------------------------------------------------- */

.sud-hv .sud-hv__num .elementor-heading-title { line-height: 1; margin-block-end: 6px; }

.sud-hv .sud-hv__title .elementor-heading-title {
	text-transform: none;
	text-wrap: balance;
	margin-block-end: 10px;
}

.sud-hv .sud-hv__desc p { margin: 0; }

/* --------------------------------------------------------------------------
   RESPONSIVE

   The card widths themselves are Elementor's (25% / 50% / 100%); only the
   overlap is re-tuned here, because it is a fixed pixel value and a wider card
   at two-per-row needs a deeper one to look the same.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (min-width: 768px) {
	.sud-hv .sud-hv__media img { aspect-ratio: 4 / 3; }

	/*
	 * Two per row, gap included.
	 *
	 * The cards carry a 50% tablet width from Elementor, but two of those plus
	 * the row's 20px column gap come to more than the row holds, so each card
	 * wrapped onto a line of its own. Elementor's width control takes a plain
	 * percentage and cannot subtract the gap, so the basis is set here instead:
	 * half the row minus half the gap, which is the pair fitting exactly with
	 * the outer edges still flush to the site grid.
	 */
	.sud-hv .sud-hv__card { flex-basis: calc(50% - 10px); }
}

@media (max-width: 767px) {
	/* One per row is the widest a card gets, so the picture goes landscape. */
	.sud-hv .sud-hv__media img { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-hv * { transition: none !important; }
}