/**
 * A WaterWise Nation campaign page (page 5377).
 *
 * Two sections are styled here, both built from ordinary Elementor widgets so
 * the copy, links and images stay editable in the page editor:
 *
 *   1. EXPERT OPINIONS  — three image-box widgets turned into photo cards with
 *      the caption panel overlapping the image and an auto-numbered badge.
 *      The numbers come from the card's position in the row, so adding or
 *      reordering a card in Elementor renumbers the row on its own.
 *
 *   2. WATER RESOURCE HUB — one white index panel per audience, each an icon +
 *      heading + icon-list widget, with the documents in two columns of
 *      hairline rows. Every document is one icon-list item (text + link),
 *      which is what makes the list editable on the page itself.
 *
 *   3. WATER SAVING TIPS — all eight tips as numbered steps on a connecting
 *      rule, in place of the four-at-a-time carousel. One image-box widget per
 *      tip, numbered by position, so adding one is Duplicate and retype.
 *
 * Colours are the WRC palette: navy #0D3276 (the page's own heading colour) and
 * WRC dark blue #094E9C for type and links, with cyan tints behind the icons.
 * Cyan itself is never used for text — 2.5:1 on white — so every label and link
 * takes one of the two blues.
 */

/* ==========================================================================
 * 1. Expert opinions
 * ========================================================================== */

/* The three columns carry a stray 1px divider from the previous layout. */
.e-con:has(> .wrc-eo-card) {
	border: 0 !important;
}

/* The photo band. Fixed height + cover keeps the three cards aligned even
 * though the source images have different aspect ratios. */
/* The panels are stretched to a common bottom edge: the column containers are
 * already equal height, so the card fills its column and the caption panel
 * takes whatever height the photo leaves. Without this the panel is only as
 * tall as its own text and a three-line title (the irrigation card) hangs
 * lower than the other two. */
.wrc-eo-card {
	display: flex;
	flex: 1 1 auto;
}

.wrc-eo-card .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}

.wrc-eo-card .elementor-image-box-img {
	flex: 0 0 auto;
}

.wrc-eo-card .elementor-image-box-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.wrc-eo-card .elementor-image-box-img {
	width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	line-height: 0;
}

.wrc-eo-card .elementor-image-box-img a,
.wrc-eo-card .elementor-image-box-img img {
	display: block;
	width: 100%;
}

.wrc-eo-card .elementor-image-box-img img {
	height: 210px !important;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.e-con:hover > .wrc-eo-card .elementor-image-box-img img {
	transform: scale(1.07);
}

/* The white caption panel, inset from the card edges and lifted over the
 * photo — the overlap is what gives the reference layout its depth. */
.wrc-eo-card .elementor-image-box-content {
	position: relative;
	z-index: 2;
	background: #ffffff;
	margin: -52px 24px 0;
	padding: 26px 78px 24px 28px;
	box-shadow: 0 14px 34px rgba(13, 50, 118, 0.14);
	min-height: 130px;
	text-align: left;
}

/* Card numbers.
 *
 * Taken from the card's position in the row rather than from a CSS counter or
 * a hand-set class, so adding, removing or reordering a card in Elementor
 * renumbers the row on its own. Six are defined; a seventh card would show an
 * empty badge, which is the signal to add the next line here. */
.e-con:nth-child(1) > .wrc-eo-card .elementor-image-box-content::after { content: "01"; }
.e-con:nth-child(2) > .wrc-eo-card .elementor-image-box-content::after { content: "02"; }
.e-con:nth-child(3) > .wrc-eo-card .elementor-image-box-content::after { content: "03"; }
.e-con:nth-child(4) > .wrc-eo-card .elementor-image-box-content::after { content: "04"; }
.e-con:nth-child(5) > .wrc-eo-card .elementor-image-box-content::after { content: "05"; }
.e-con:nth-child(6) > .wrc-eo-card .elementor-image-box-content::after { content: "06"; }

/* Auto-numbered badge: 01, 02, 03 … */
.wrc-eo-card .elementor-image-box-content::after {
	content: "";
	position: absolute;
	top: 24px;
	right: 22px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0D3276;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

.wrc-eo-card .elementor-image-box-title {
	margin: 0 0 10px;
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.wrc-eo-card .elementor-image-box-title,
.wrc-eo-card .elementor-image-box-title a {
	color: #0D3276;
}

.e-con:hover > .wrc-eo-card .elementor-image-box-title a {
	color: #094E9C;
}

/* Pinned to the foot of the panel so the three links line up as well. */
.wrc-eo-card .elementor-image-box-description {
	margin: 14px 0 0;
	padding-top: 0;
	margin-top: auto;
}

.wrc-eo-card .elementor-image-box-description a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #094E9C;
	text-decoration: none;
}

.wrc-eo-card .elementor-image-box-description a::after {
	content: "\2192"; /* → */
	transition: transform 0.25s ease;
}

.wrc-eo-card .elementor-image-box-description a:hover {
	text-decoration: underline;
}

.wrc-eo-card .elementor-image-box-description a:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
 * 2. Water resource hub
 *
 * A stacked index rather than three coloured columns: one white panel per
 * audience, its icon and label on a single line, and the documents flowing
 * down two columns of hairline rows beneath. Three columns of links could not
 * work here — the audiences hold 10, 16 and 4 documents, so the row was always
 * going to end ragged — and the panels also give the long Household list room
 * to read at a sensible measure instead of a narrow third of the page.
 *
 * Each row's icon says what the file is: a page for the PDFs, a speaker for the
 * campaign audio. Both come from the icon-list items themselves, so an editor
 * picks the icon in the same place they type the title and the link.
 * ========================================================================== */

/* Icon and label share the first line; the list is forced onto the next. */
.wrc-hub-icon {
	flex: 0 0 auto;
	margin-right: 14px !important;
}

.wrc-hub-icon .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: rgba(9, 78, 156, 0.08);
	font-size: 18px;
	line-height: 1;
}

.wrc-hub-title {
	flex: 1 1 auto;
}

.wrc-hub-title .elementor-heading-title {
	color: #0D3276;
}

.wrc-hub-list {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 20px !important;
}

/* Two columns, filled top to bottom, so the reading order down a column is
 * the order the editor put the items in. */
.wrc-hub-list .elementor-icon-list-items {
	padding: 0;
	margin: 0;
	list-style: none;
	columns: 2;
	column-gap: 48px;
}

.wrc-hub-list .elementor-icon-list-item {
	break-inside: avoid;
	margin: 0;
	border-top: 1px solid #EDF0F6;
}

.wrc-hub-list .elementor-icon-list-item > a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 4px;
	color: #16324F;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.wrc-hub-list .elementor-icon-list-icon {
	flex: 0 0 24px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	border-radius: 3px;
	background: rgba(0, 145, 199, 0.12);
}

.wrc-hub-list .elementor-icon-list-icon svg {
	margin: 0;
}

.wrc-hub-list .elementor-icon-list-text {
	padding: 0;
	line-height: 1.45;
}

.wrc-hub-list .elementor-icon-list-item > a:hover,
.wrc-hub-list .elementor-icon-list-item > a:focus-visible {
	color: #094E9C;
	background: #F5F8FC;
}

.wrc-hub-list .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.wrc-hub-list .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
 * 3. Water saving tips — numbered steps
 *
 * Was an eight-slide carousel: four tips visible, the rest behind arrows. All
 * eight are on the page now, four to a row, as numbered steps on a connecting
 * rule.
 *
 * ONE WIDGET PER TIP. Each tip is a single Elementor image-box — photo, title
 * and advice in one panel — because the first version of this section split a
 * tip across three widgets and made adding one a job with three parts. The
 * eight tips also sit in a single wrapping row rather than two rows of four,
 * which is what lets the number come from the tip's own position:
 *
 *   ::before on the content box   the badge, numbered by the :nth-child rules
 *                                 at the end of this block
 *   ::after  on the content box   the rule the badges sit on
 *   ::before on the title         the cyan notch at the badge's foot
 *
 * So adding a tip is: right-click a tip -> Duplicate -> change the image, title
 * and text. It numbers itself. Twelve numbers are defined; a thirteenth tip
 * shows an empty badge, which is the signal to add the next line.
 *
 * The column gutter is padding inside each card, not a flex gap, for two
 * reasons: four cards of exactly 25% always fit a row whatever the viewport,
 * and the connecting rule can run out through the gutter (right: -34px) to meet
 * the next badge instead of breaking at every column.
 * ========================================================================== */

.wrc-tip-card .elementor-image-box-wrapper {
	display: block;
	padding-right: 34px;
}

.wrc-tip-card .elementor-image-box-img {
	width: auto !important;
	margin: 0 !important;
	line-height: 0;
}

.wrc-tip-card .elementor-image-box-img img {
	width: 76px !important;
	height: 76px !important;
	object-fit: cover;
	border-radius: 4px;
}

.wrc-tip-card .elementor-image-box-content {
	position: relative;
	text-align: left;
}

.wrc-tip-card .elementor-image-box-content::before {
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 26px 0 22px;
	background: #0D3276;
	color: #ffffff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.wrc-tip-card .elementor-image-box-content::after {
	content: "";
	position: absolute;
	top: 49px;
	left: 46px;
	right: -34px;
	height: 1px;
	/* Tinted, not #E3E8F0: the section sits on a #EDFAFF band where a pale grey
	 * hairline disappears. */
	background: rgba( 13, 50, 118, 0.14 );
}

.wrc-tip-card .elementor-image-box-title {
	position: relative;
	margin: 0 0 10px;
}

.wrc-tip-card .elementor-image-box-title::before {
	content: "";
	position: absolute;
	top: -26px;
	left: 38px;
	width: 8px;
	height: 8px;
	background: #00AEEF;
}

.wrc-tip-card .elementor-image-box-description {
	margin: 0;
}

.e-con:nth-child(1) > .wrc-tip-card .elementor-image-box-content::before { content: "01"; }
.e-con:nth-child(2) > .wrc-tip-card .elementor-image-box-content::before { content: "02"; }
.e-con:nth-child(3) > .wrc-tip-card .elementor-image-box-content::before { content: "03"; }
.e-con:nth-child(4) > .wrc-tip-card .elementor-image-box-content::before { content: "04"; }
.e-con:nth-child(5) > .wrc-tip-card .elementor-image-box-content::before { content: "05"; }
.e-con:nth-child(6) > .wrc-tip-card .elementor-image-box-content::before { content: "06"; }
.e-con:nth-child(7) > .wrc-tip-card .elementor-image-box-content::before { content: "07"; }
.e-con:nth-child(8) > .wrc-tip-card .elementor-image-box-content::before { content: "08"; }
.e-con:nth-child(9) > .wrc-tip-card .elementor-image-box-content::before { content: "09"; }
.e-con:nth-child(10) > .wrc-tip-card .elementor-image-box-content::before { content: "10"; }
.e-con:nth-child(11) > .wrc-tip-card .elementor-image-box-content::before { content: "11"; }
.e-con:nth-child(12) > .wrc-tip-card .elementor-image-box-content::before { content: "12"; }

/* ==========================================================================
 * 4. Narrow screens
 * ========================================================================== */

@media (max-width: 1024px) {

}

@media (max-width: 900px) {

	.wrc-hub-list .elementor-icon-list-items {
		columns: 1;
	}
}

@media (max-width: 767px) {

	.wrc-tip-card .elementor-image-box-content::after {
		display: none;
	}

	.wrc-tip-card .elementor-image-box-wrapper {
		padding-right: 0;
	}

	.wrc-eo-card .elementor-image-box-img img {
		height: 190px;
	}

	.wrc-eo-card .elementor-image-box-content {
		margin: -44px 16px 0;
		padding: 22px 68px 20px 22px;
		min-height: 0;
	}

	.wrc-eo-card .elementor-image-box-content::after {
		top: 20px;
		right: 18px;
		width: 36px;
		height: 36px;
		font-size: 12px;
	}

	.wrc-eo-card .elementor-image-box-title {
		font-size: 17px;
	}
}