/* ==========================================================================
   SUDAIR PHARMA — CSR: OUR CSR PILLARS

   Four stacked horizontal cards. Scoped under .sud-cp, a class that exists on
   one section of one page.

   ALMOST NOTHING IS HERE ON PURPOSE
   The card's white fill, its border, its radius, its padding and its shadow are
   Elementor panel settings. So is the pale green icon tile, the green rule
   between the icon and the copy (a left border on the copy container), every
   gap, and all of the typography. Each pillar is four widgets deep and every
   one of them opens in the editor.

   What is left here is only what the panel has no control for:

     - holding the icon tile square
     - keeping the four inline SVGs on one optical weight
     - the hover lift
     - shrinking the tile on a phone so the copy keeps a usable measure
   ========================================================================== */

.sud-cp {
	--cp-green: #006344;
	--cp-ink: #0B3B2E;
	--cp-body: #55665E;
	--cp-line: #DDE9E3;
	--cp-tile: #EAF3EE;
	--cp-ease: cubic-bezier(.22, 1, .36, 1);
}

.sud-cp *,
.sud-cp *::before,
.sud-cp *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   THE ICON TILE

   Elementor sets the width; a square needs the height to follow it, and there
   is no "match the width" height control.
   -------------------------------------------------------------------------- */

.sud-cp .sud-cp__ico { aspect-ratio: 1; }

/*
 * One optical weight across all four.
 *
 * The icons are line drawings sharing a 24 grid and a 1.6 stroke, and they are
 * inlined by Elementor, so they take the icon colour from the panel. Fixing the
 * stroke here as well means an icon swapped in later that carries its own
 * heavier stroke still sits at the same weight as its neighbours.
 */
.sud-cp .sud-cp__ico svg {
	inline-size: 100%;
	block-size: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   THE CARD
   -------------------------------------------------------------------------- */

@media (hover: hover) {
	.sud-cp .sud-cp__card {
		transition: border-color .3s var(--cp-ease), box-shadow .3s var(--cp-ease);
	}

	.sud-cp .sud-cp__card:hover {
		border-color: #C6DCD0;
		box-shadow: 0 8px 20px rgba(0, 99, 68, .07);
	}
}

/* The description sets its own rhythm; the editor's paragraph margin does not. */
.sud-cp .sud-cp__desc p { margin: 0; }

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

   The cards stay horizontal at every width, as the brief asks. Only the tile
   shrinks — at 375px a 78px tile plus its gutters leaves the copy about 150px,
   which is too narrow a measure for a title of this length.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sud-cp .sud-cp__ico {
		inline-size: 54px;
		min-inline-size: 54px;
	}

	/*
	 * Keep the card horizontal on a phone — logo tile, then the copy beside it,
	 * exactly as it reads on a desktop.
	 *
	 * Two Elementor defaults conspired against that. A container is given
	 * `--width: 100%`, and a flex container is `flex-wrap: wrap`. So the row
	 * measured 54 + 14 gap + a 293px body against 295px of inner width, and the
	 * body dropped onto its own line, leaving the logo stranded above the text.
	 *
	 * Written at four classes because Elementor's own per-element rules are
	 * three and load after this file; three here would tie and lose.
	 */
	.sud-cp .sud-cp__card {
		--flex-wrap: nowrap;
		flex-wrap: nowrap;
	}

	.sud-cp .sud-cp__card > .e-con.sud-cp__body {
		--width: auto;
		flex: 1 1 auto;
		min-inline-size: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sud-cp .sud-cp__card { transition: none; }
}

/* --------------------------------------------------------------------------
   RTL — THE RULE BETWEEN THE ICON AND THE COPY

   The green rule is the copy container's border, set in the Elementor panel as
   `0 0 0 2px`, with a matching 22px left padding (16px on tablet and phone) as
   the space between the rule and the text. Elementor writes both as PHYSICAL
   left-side values and does not mirror them for Arabic.

   The card itself does mirror — it is a flex row, so in RTL the icon moves to
   the right and the copy to its left. But the copy's border and padding stay
   on its physical LEFT edge, which is now the far edge of the card, away from
   the icon. Measured at 1440px: the rule at x 154, the icon at x 1219-1297,
   and the text running flush against the icon gap with nothing between.

   So in RTL the two sides are swapped. The values are read from the same
   variables Elementor emits for the panel settings, not re-typed here — so the
   rule keeps whatever width the panel gives it, and the text keeps its 22px /
   16px inset at each breakpoint, in both languages.
   -------------------------------------------------------------------------- */

[dir="rtl"] .sud-cp .e-con.sud-cp__body {
	border-left-width: var(--border-right-width, 0px);
	border-right-width: var(--border-left-width, 2px);
	padding-left: var(--padding-right, 0px);
	padding-right: var(--padding-left, 22px);
}