/* ==========================================================================
   CSR — "Supporting Saudi Vision 2030"

   Page 121, section 037a3b0: an intro column (ed18676) and four icon-box cards
   — 56165b8, 51302e7, e6ef607, 146c50d — in one flex row.

   Scoped to those four ids on one section of one page. Nothing here applies by
   class or by type, and nothing can reach another CSR section.

   ------------------------------------------------------------------------
   WHAT WAS WRONG

   The cards were laid out `align-self: center` with content heights set by
   their own copy, so each one floated to a different height and everything
   inside it came along. Measured at 1440, English:

                        card top   icon      heading   paragraph
     Strengthening       3301      3311      3384      3448
     Developing          3325      3335      3408      3452
     Improving           3325      3335      3408      3452
     Driving             3315      3325      3398      3462

   — a 24px spread on the icons and headings and 14px on the paragraphs. Arabic
   was worse: 38px on the icons, because its copy breaks differently again.

   The divider between each pair of cards is that card's own `border-left`, so
   its height and its position were the card's: four rules of four different
   lengths, each starting somewhere else.

   ------------------------------------------------------------------------
   THE FIX — two declarations, each answering one of the two causes

   1. `align-self: stretch` gives every card the row's full height, which the
      intro column already sets. Equal heights mean the four borders become one
      set of rules: same length, same top, same bottom.

   2. `justify-content: flex-start` then stacks each card's content from that
      shared top rather than centring it in the new taller box. Centring it
      would have put the icons back where they started, at four heights again.

   With those two the icons line up (they are all the same 55px) and so do the
   headings. The paragraphs still would not, because a heading is one, two or
   three lines depending on its words — so the headings take a floor:

   3. `min-block-size` on the heading, set to the longest heading IN THAT
      LANGUAGE. English runs to three lines ("Strengthening Local
      Manufacturing"); Arabic's longest is two. Giving Arabic the English value
      would hang an empty line under every Arabic heading and push its
      paragraphs 20px down for nothing, so each language gets its own measured
      value. This is the part that must not be mirrored.

   `lh` is the element's own line-height, so the floor follows the type rather
   than a pixel number that would need revisiting. The same unit is already
   used on the Initiatives cards in this folder.

   ------------------------------------------------------------------------
   DESKTOP ONLY, AND WHY

   Below 1025 the row sets `flex-wrap: wrap` and every card takes the full
   width, one per line, all 210px tall and already identical — measured at
   1024, 768 and 390. There is nothing to align there, and a heading floor
   would only add blank space under headings that already fit on one line.

   Written as `not all and (max-width: 1024px)` rather than `min-width: 1025px`.
   On a scaled display the viewport can be a fraction of a pixel wide — 1024.8 —
   where `max-width: 1024px` and `min-width: 1025px` are BOTH false and neither
   set of rules applies. This form switches on exactly where Elementor's tablet
   styles switch off. The same reasoning is written up in csr-ehs-cards.css,
   where it was first needed.
   ========================================================================== */

@media not all and (max-width: 1024px) {

	/* ----------------------------------------------------------------------
	   THE FOUR CARDS — one height, one top, content from the top.
	   -------------------------------------------------------------------- */

	.elementor-121 .elementor-element.elementor-element-56165b8,
	.elementor-121 .elementor-element.elementor-element-51302e7,
	.elementor-121 .elementor-element.elementor-element-e6ef607,
	.elementor-121 .elementor-element.elementor-element-146c50d {
		align-self: stretch;
		justify-content: flex-start;
	}

	/* ----------------------------------------------------------------------
	   THE HEADINGS — a floor, so the paragraphs beneath them start together.

	   Three lines is the longest English heading on this section, measured.
	   -------------------------------------------------------------------- */

	.elementor-121 .elementor-element-037a3b0 .elementor-icon-box-title {
		min-block-size: 3lh;
	}

	/*
	 * Arabic's longest heading on this section is two lines, measured on the
	 * page rather than assumed from the English. Two is the floor it needs;
	 * three would leave an empty line under every one of them.
	 */
	[dir="rtl"] .elementor-121 .elementor-element-037a3b0 .elementor-icon-box-title {
		min-block-size: 2lh;
	}
}