/* ==========================================================================
   CSR — "CSR Initiatives", the two side-by-side cards

   Scoped to two element ids on one section of one page. Nothing here can reach
   another section, and there is no rule that applies by class or by type.

   WHAT WAS WRONG
   The cards were never misaligned as boxes: identical width, top, bottom and
   height, with an even 20px between them. Two things inside them were.

   1. The paragraph. Card A carried margins of -22 / 0 / 0 / 43 and card B
      -51 / 0 / 0 / 0, so B's copy sat 43px further left and 29px higher, up
      over its own divider. That is fixed in the page data, not here — see
      notes/scripts/align-csr-cards.php — because it is content positioning and
      belongs in the fields the editor shows.

   2. The green panel, which is what this file is for.

   THE GREEN PANEL
   Each card's photograph and its green wash sit in an ABSOLUTELY positioned
   overlay pinned to the top of the card, whose height is whatever its copy
   happens to need. Card A's came to 380px and card B's to 417px, so the line
   where the green meets the white logo area fell 37px lower in one card than
   the other — the most visible thing wrong with the pair.

   The row of logos below it does NOT move: it starts 420px down in BOTH cards,
   and it is the same 420px in each because that offset is set by the design,
   not by the copy. So the panel already has a correct height defined for it —
   it should end where the logos begin — and letting the copy decide it instead
   was the mistake.

   `calc(420px - 1px)` is written that way rather than as 419 because the two
   numbers mean different things: 420 is the logos' own offset, and the 1px is
   the card's border, which the absolutely-positioned panel starts inside. If
   either ever changes, the relationship still reads correctly.

   NOT `calc(420px + 24px)`, which was tried first and reaches the top of the
   white strip's PADDING BOX at 445. The logo row is pulled 40px up out of that
   box by its own margin, so a panel ending at 445 covered the four icons.

   DESKTOP ONLY
   Below 1025px the cards stack full width, one under the other. There is no
   pair to align at that point, and each panel reads correctly at its natural
   height, so this is left to the tablet and mobile rules already in place.
   ========================================================================== */

@media (min-width: 1025px) {
	.elementor-121 .elementor-element.elementor-element-ce6f9d9.e-con,
	.elementor-121 .elementor-element.elementor-element-a964f5b.e-con {
		height: calc(420px - 1px);
	}
}

/* --------------------------------------------------------------------------
   THE SUBHEADING RESERVES THE SAME HEIGHT IN BOTH CARDS

   With the paragraph padding matched in the page data (see
   notes/scripts/align-csr-cards.php, second pass) English lines up exactly —
   eyebrow, subheading and copy all start at the same offset in both cards, at
   every breakpoint. Arabic still did not, and for a different reason:

                      card A                       card B
     English  h2      2 lines  40.3px              2 lines  40.3px    aligned
     Arabic   h2      1 line   24.3px              2 lines  48.6px    24.3px out

   The Arabic subheadings are simply different lengths — "دعم مجتمعات المرضى"
   sets on one line, "نرفع الوعي، ونُحسّن جودة الحياة" needs two — so card B's
   copy starts one line lower. Nothing is mis-set; there is no wrong value to
   correct. The two cards just have no shared idea of how tall a subheading is.

   So they are given one. `2lh` is two of the element's OWN line-heights, so it
   reads as "a subheading occupies two lines here" rather than as a pixel
   figure, and it re-measures itself at every breakpoint and in either language
   without a media query or a second value.

   It is a MINIMUM, which is what makes it safe in both languages at once:

     English  both headings already set to exactly 2 lines, so it changes
              nothing at all — 40.32px asked for, 40.3px already there
     Arabic   card A is held open to two lines, card B already needs two, and
              the copy beneath them starts level

   A heading that ever needs three lines keeps all three. Because it costs
   English nothing, no [dir="rtl"] variant is needed and neither language is
   forced to match the other's height — only the two cards within a language
   are brought into step, which is what the brief asks for.

   Scoped to the two inner containers by id, so it reaches these two cards and
   nothing else on the page or the site. `lh` is supported by every browser
   this site targets; where it is not, the declaration is ignored and the cards
   behave exactly as they do today.
   -------------------------------------------------------------------------- */

.elementor-121 .elementor-element.elementor-element-ecbea2d > h2,
.elementor-121 .elementor-element.elementor-element-773682f > h2 {
	min-block-size: 2lh;
}