/* ── Services › "Why Webgold" bento grid (page 445) ──────────────────────────────────────────────────────────────
   Every rule is scoped to .wg-why-bento. Elementor structure (built 2026-10-27, approved "Bento style 1"):
     grid container .wg-why-bento
       └ card container .wg-why-bento__card + --launch | --path | --market | --ahead
           ├ HTML widget .wg-why-bento__art — decorative <img alt=""> with a 1x/2x srcset, explicit width/height, lazy
           └ container .wg-why-bento__text — Pe Text Wrappers .wg-why-bento__title (<h3>) and .wg-why-bento__body
   Desktop: three tracks sized from the approved 1140px design (466 / 217 / 429 px at 14px gaps), so
   row 1 is 466 | 660 (launch | path) and row 2 is 697 | 429 (market | ahead); rows 520px tall.
   Tablet (≤1024): two equal columns; market and ahead span both. Mobile (≤767): one column, art above the text.
   Entrance: a scroll-linked staggered fade-up (CSS only, so Barba arrivals need no script); off without support
   or with reduced motion. The old four-card grid (186f389f) stays in the page, hidden on all devices. */

/* Display is set here, not left to Elementor's per-page CSS: until that is regenerated the containers would inherit
   the section's --display: flex. */
.e-con.wg-why-bento {
	--display: grid;
	--wg-why-gap: 14px;
	--padding-top: 20px;
	--padding-right: 20px;
	--padding-bottom: 20px;
	--padding-left: 20px;
}

.e-con.e-grid.wg-why-bento > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 466fr) minmax(0, 217fr) minmax(0, 429fr);
	grid-template-rows: none;
	grid-auto-rows: minmax(min(520px, 45vw), auto);
	grid-auto-flow: row;
	gap: var(--wg-why-gap);
	align-items: stretch;
	justify-items: stretch;
}

/* Card */
.wg-why-bento .e-con.wg-why-bento__card {
	--display: flex;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--border-radius: 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	min-height: 0;
	overflow: hidden;
	/* The colour keeps the card dark while Elementor's lazy-background rule (background-image: none !important on
	   not-yet-observed sections and everything in them) holds back the gradient. */
	background-color: #191919;
	background-image: linear-gradient(135deg, #191919 0%, #171818 50%, #191919 100%);
	border: 1px solid #414242;
	border-radius: 20px;
}

.wg-why-bento .e-con.wg-why-bento__card--path,
.wg-why-bento .e-con.wg-why-bento__card--market {
	grid-column: span 2;
}

/* Art: top of the card at full card width (the files are drawn to the 1140px card widths) */
.wg-why-bento .wg-why-bento__art {
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
	line-height: 0;
}

.wg-why-bento .wg-why-bento__art img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Text: bottom-left. Title and body selectors are (0,5,1) so they outrank the Pe Text Wrapper's own per-widget
   rules in post-445.css (Paragraph size prints `.elementor-445 .elementor-element.elementor-element-<id> .text-wrapper p
   { font: var(--text-p-large) }`, 0,4,1), so sizes here win over the widget's size controls. */
.wg-why-bento .e-con.wg-why-bento__text {
	--display: flex;
	--padding-top: 0px;
	--padding-right: 30px;
	--padding-bottom: 30px;
	--padding-left: 30px;
	--row-gap: 12px;
	--column-gap: 0px;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 100%;
	margin-top: auto;
}

.e-con.wg-why-bento .wg-why-bento__title.elementor-widget-petextwrapper .text-wrapper > :is(h3, p) {
	margin: 0;
	font-family: var(--h2_typo-font-family), sans-serif;
	font-weight: var(--h2_typo-font-weight, 400);
	font-size: 38px;
	line-height: 1.1;
	letter-spacing: var(--h2_typo-letter-spacing, .02em);
	color: #F1C36D;
}

.e-con.wg-why-bento .wg-why-bento__body.elementor-widget-petextwrapper .text-wrapper > p {
	margin: 0;
	font-family: var(--body_typo-font-family), sans-serif;
	font-size: 19px;
	line-height: 1.45;
	letter-spacing: normal;
	color: #FAF8F5;
}

/* We Know This Market: the globe fills the card height on the right; the text column stays clear of it */
.wg-why-bento .e-con.wg-why-bento__card--market .wg-why-bento__art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: auto;
	height: 100%;
}

.wg-why-bento .wg-why-bento__card--market .wg-why-bento__art img {
	width: auto;
	height: 100%;
}

.wg-why-bento .e-con.wg-why-bento__card--market .wg-why-bento__text {
	max-width: 55%;
}

/* Tablet: two equal columns; the two lower cards span both, art on the right */
@media (max-width: 1024px) {
	.e-con.e-grid.wg-why-bento > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.wg-why-bento .e-con.wg-why-bento__card--path {
		grid-column: auto;
	}

	.wg-why-bento .e-con.wg-why-bento__card--market,
	.wg-why-bento .e-con.wg-why-bento__card--ahead {
		grid-column: 1 / -1;
	}

	.wg-why-bento .e-con.wg-why-bento__card--market {
		min-height: 440px;
	}

	.wg-why-bento .e-con.wg-why-bento__card--ahead {
		flex-direction: row-reverse;
		align-items: center;
	}

	.wg-why-bento .e-con.wg-why-bento__card--ahead .wg-why-bento__art {
		width: 48%;
	}

	.wg-why-bento .e-con.wg-why-bento__card--ahead .wg-why-bento__text {
		flex: 1 1 0;
		width: auto;
		align-self: flex-end;
		margin-top: 0;
	}

	.e-con.wg-why-bento .wg-why-bento__title.elementor-widget-petextwrapper .text-wrapper > :is(h3, p) {
		font-size: 34px;
	}

	.e-con.wg-why-bento .wg-why-bento__body.elementor-widget-petextwrapper .text-wrapper > p {
		font-size: 18px;
	}
}

/* Mobile: one column, art on top and the text below it in normal flow */
@media (max-width: 767px) {
	.e-con.e-grid.wg-why-bento > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.wg-why-bento .e-con.wg-why-bento__card,
	.wg-why-bento .e-con.wg-why-bento__card--market,
	.wg-why-bento .e-con.wg-why-bento__card--ahead {
		grid-column: auto;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
	}

	.wg-why-bento .e-con.wg-why-bento__card--ahead .wg-why-bento__art {
		width: 100%;
	}

	.wg-why-bento .e-con.wg-why-bento__card--ahead .wg-why-bento__text {
		flex: 0 0 auto;
		width: 100%;
		align-self: stretch;
	}

	.wg-why-bento .e-con.wg-why-bento__card--market .wg-why-bento__art {
		position: static;
		align-self: flex-end;
		height: 260px;
	}

	.wg-why-bento .e-con.wg-why-bento__card--market .wg-why-bento__text {
		max-width: none;
	}

	.wg-why-bento .e-con.wg-why-bento__text {
		--padding-top: 4px;
		--padding-right: 24px;
		--padding-bottom: 26px;
		--padding-left: 24px;
		--row-gap: 10px;
	}

	.e-con.wg-why-bento .wg-why-bento__title.elementor-widget-petextwrapper .text-wrapper > :is(h3, p) {
		font-size: 30px;
	}

	.e-con.wg-why-bento .wg-why-bento__body.elementor-widget-petextwrapper .text-wrapper > p {
		font-size: 17px;
	}
}

/* Entrance: staggered fade-up, driven by each card's own scroll position */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wg-why-bento .e-con.wg-why-bento__card {
			animation: wg-why-bento-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}

		.wg-why-bento .e-con.wg-why-bento__card:nth-child(even) {
			animation-range: entry 12% entry 82%;
		}
	}
}

@keyframes wg-why-bento-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 48px, 0);
	}
}