/**
 * About Us (page 5984) — alignment corrections.
 *
 * wrc-container.css puts every top-level section on one alignment line, but it
 * deliberately stops there: "the internal layout each page author built is left
 * exactly as it is". On About Us three sections were built with insets of their
 * own, so their contents sat right of the line the section above them uses —
 * measured at a 1440px viewport, where the line is 30px:
 *
 *                                        content started at
 *     MANDATE (image + text)                       30   <- the standard
 *     VISION, MISSION AND VALUES (heading)         70
 *     OUR VISION / MISSION / VALUES (cards)        81
 *     WRC PRIMARY FUNCTION (heading)               70
 *
 * The homepage builds the same heading-plus-label row (LATEST NEWS) with no
 * inset at all, so the standard being restored here is the site's own.
 *
 * Everything is written as an override of Elementor's own custom properties
 * (`--padding-left`, `--width`), which `.e-con` already consumes, rather than
 * as a competing `padding`/`width` declaration. The leading `body` supplies the
 * extra specificity needed to outrank Elementor's per-page stylesheet whatever
 * order the two are enqueued in.
 *
 * Element IDs are Elementor's and are stable for the life of the element. If a
 * section below is rebuilt from scratch in the editor its rule stops matching —
 * the fix is then to correct the padding in Elementor directly, not to relabel
 * the ID here.
 */

/* ==========================================================================
 * 1. Section headings
 *
 * `252e7a7` = "VISION, MISSION AND VALUES", `eb7a498` = "WRC PRIMARY FUNCTION".
 * Both carry `--padding-left: 40px` at every breakpoint. Only the horizontal
 * inset is dropped; their vertical padding is section spacing and is left as
 * the author set it.
 * ========================================================================== */

body .elementor-5984 .elementor-element.elementor-element-252e7a7,
body .elementor-5984 .elementor-element.elementor-element-eb7a498 {
	--padding-left: 0px;
}

/* ==========================================================================
 * 2. The Vision / Mission / Values card row
 *
 * The row (`194f56b4`) is a `justify-content: center` flex row, so any width
 * the three cards leave unused is split into equal insets at both ends.
 *
 * Desktop: the cards are 23% / 45% / 23% = 91%. The missing 9%, plus the two
 * 10px gaps, became ~51px of inset on each side. Re-expressing each width as
 * its share of the row *after* the gaps are taken out makes the three cards
 * plus their gaps fill the row exactly, so the centring has nothing left to
 * distribute — while keeping the author's 23:45:23 proportions.
 *
 *     23 + 45 + 23 = 91   (the divisor below)
 *     20px          = 2 gaps x 10px
 * ========================================================================== */

@media ( min-width: 1025px ) {

	/* OUR VISION, OUR VALUES */
	body .elementor-5984 .elementor-element.elementor-element-43264079,
	body .elementor-5984 .elementor-element.elementor-element-bfc1242 {
		--width: calc( ( 100% - 20px ) * 23 / 91 );
	}

	/* OUR MISSION — deliberately the wide one; it carries the most copy. */
	body .elementor-5984 .elementor-element.elementor-element-b2a401a {
		--width: calc( ( 100% - 20px ) * 45 / 91 );
	}
}

/*
 * Tablet: the cards are pinned to a fixed `width: 593px` here, which is both
 * narrower than the row and unrelated to it — at a 900px viewport that left
 * them inset 116px, a worse break than on desktop. One card per row is what
 * 593px already produced, so full width preserves the stacking and puts each
 * card's edges on the line.
 */
@media ( min-width: 768px ) and ( max-width: 1024px ) {

	body .elementor-5984 .elementor-element.elementor-element-43264079,
	body .elementor-5984 .elementor-element.elementor-element-b2a401a,
	body .elementor-5984 .elementor-element.elementor-element-bfc1242 {
		--width: 100%;
	}
}

/*
 * Below 768px the cards are already full width and stacked, and the row takes
 * over the side inset itself (`--padding-left/right: 8%`) — left alone.
 */

/* ==========================================================================
 * 3. The WRC PRIMARY FUNCTION blocks
 *
 * Five coloured blocks — Coordination, Establish research, Stimulate and fund,
 * Effective transfer, Enhance knowledge — that were unequal at every screen
 * size, for a different reason at each one.
 *
 * Measured before this section existed:
 *
 *     1440px   heights 346 / 376 / 376 / 375 / 376   ragged bottom edge
 *      910px   five columns of 82px, heights 1001 / 625 / 743 / 826 / 1001
 *      553px   stacked correctly, but widths 446 / 446 / 446 / 446 / 506
 *
 * The structure explains the last two. Four of the blocks sit inside their own
 * flex column; the fifth ("Enhance knowledge") sits directly in the grid with
 * no column around it. So any styling applied to the columns misses that one.
 * ========================================================================== */

/*
 * The icon-to-caption gap, which is inconsistent at every breakpoint: 20px on
 * three of the blocks and 2px on the other two, with two of the 20px blocks
 * pulling their caption back up again with a -20px margin. Normalised to one
 * value, and the margin that cancelled it removed with it.
 */
body .elementor-5984 .elementor-element.elementor-element-547d578,
body .elementor-5984 .elementor-element.elementor-element-af56af5,
body .elementor-5984 .elementor-element.elementor-element-e8c57a5,
body .elementor-5984 .elementor-element.elementor-element-65776ae,
body .elementor-5984 .elementor-element.elementor-element-ed5bc26 {
	--gap: 2px;
	--row-gap: 2px;
	--column-gap: 2px;
}

body .elementor-5984 .elementor-element.elementor-element-547d578 > .elementor-widget-text-editor,
body .elementor-5984 .elementor-element.elementor-element-af56af5 > .elementor-widget-text-editor,
body .elementor-5984 .elementor-element.elementor-element-e8c57a5 > .elementor-widget-text-editor,
body .elementor-5984 .elementor-element.elementor-element-65776ae > .elementor-widget-text-editor,
body .elementor-5984 .elementor-element.elementor-element-ed5bc26 > .elementor-widget-text-editor {
	margin-top: 0;
}

/*
 * Wherever the blocks share a row they are levelled by the layout rather than
 * by hand. Each block's column already stretches to a common height, so
 * `height: 100%` makes the block fill it — every block is as tall as the
 * tallest whatever its copy says, and editing the text cannot unlevel them.
 *
 * This replaces per-block bottom padding of 40 / 68 / 50 / 67 / 40px, which had
 * been measured against each block's own text length and had already drifted on
 * two of the five.
 */
@media ( min-width: 768px ) {

	body .elementor-5984 .elementor-element.elementor-element-547d578,
	body .elementor-5984 .elementor-element.elementor-element-af56af5,
	body .elementor-5984 .elementor-element.elementor-element-e8c57a5,
	body .elementor-5984 .elementor-element.elementor-element-65776ae,
	body .elementor-5984 .elementor-element.elementor-element-ed5bc26 {
		height: 100%;
		justify-content: flex-start; /* so the five icons sit on one line */
	}
}

/* Desktop: one uniform padding in place of the five hand-tuned values. */
@media ( min-width: 1025px ) {

	body .elementor-5984 .elementor-element.elementor-element-547d578,
	body .elementor-5984 .elementor-element.elementor-element-af56af5,
	body .elementor-5984 .elementor-element.elementor-element-e8c57a5,
	body .elementor-5984 .elementor-element.elementor-element-65776ae,
	body .elementor-5984 .elementor-element.elementor-element-ed5bc26 {
		--padding-top: 50px;
		--padding-bottom: 50px;
	}
}

/*
 * Tablet. The grid kept its five columns all the way down to 768px, so at a
 * 910px viewport each cell was 164px — and the columns then took `--width: 50%`
 * of that, leaving each block 82px wide with its caption broken over a dozen
 * lines and the row a thousand pixels tall.
 *
 * Two per row is what 164px was never going to be. The columns fill their cell
 * again, and the fifth block needs no rule because it has no column to correct.
 */
@media ( min-width: 768px ) and ( max-width: 1024px ) {

	body .elementor-5984 .elementor-element.elementor-element-2c659d7c > .e-con-inner {
		grid-template-columns: repeat( 2, 1fr );
	}

	body .elementor-5984 .elementor-element.elementor-element-2354f467,
	body .elementor-5984 .elementor-element.elementor-element-59fc6a4,
	body .elementor-5984 .elementor-element.elementor-element-f6480b4,
	body .elementor-5984 .elementor-element.elementor-element-f0006af {
		--width: 100%;
	}
}

/*
 * Mobile. The blocks stack one per row correctly, but the four that sit inside
 * a column inherit that column's 30px side padding and the fifth — which has no
 * column — does not, so it ran 60px wider than the rest.
 *
 * Given the same inset through `--width`, the variable `.e-con` already resolves
 * its width from. A plain `margin` does nothing here: Elementor sets the width to
 * `var( --width )`, so at 100% the box stays full-bleed and the margin is simply
 * ignored. Narrowing it makes it a start-aligned grid item, hence the centring.
 */
@media ( max-width: 767px ) {

	body .elementor-5984 .elementor-element.elementor-element-ed5bc26 {
		--width: calc( 100% - 60px );

		justify-self: center;
	}
}