/* BlueWave Image Grid — scoped under .bw-image-grid */

/* ---- Section ---- */
.bw-image-grid {
	background: #ffffff;
}

.bw-image-grid__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 15px;
}

/* ---- Section header ---- */
.bw-image-grid__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 64px;
}

.bw-image-grid__eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 400;
	color: #023c5a;
	margin-bottom: 14px;
}

.bw-image-grid__heading {
	font-size: 49px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #0b2233;
	margin: 0 0 16px;
}

.bw-image-grid__heading .bw-image-grid__span {
	font-style: italic;
	font-weight: 400;
	color: #1f6489;
}

.bw-image-grid__subtitle {
	font-size: 17px;
	line-height: 1.55;
	color: #2a4154;
	margin: 0;
}

/* ---- Grid — asymmetric (default) ---- */
.bw-image-grid__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1.3fr;
	grid-auto-rows: 280px;
	gap: 18px;
}

/* ---- Grid — uniform mode ---- */
/* columns and row height are set via CSS custom properties from PHP */
.bw-image-grid__grid--uniform {
	grid-template-columns: repeat(var(--bw-ig-cols, 3), 1fr);
}

/* In uniform mode all tiles are the same height — tall spanning is suppressed in PHP */

/* ---- Tile ---- */
/* Border-radius is fixed at 30px and !important on both the tile and the
   image itself — deliberately not left to the editable "Tile border
   radius" control or a plain background-color, so it can't be masked by a
   stale cached Elementor CSS value again. Applying it directly to the
   <img> also means the image's own rounded shape is what's visible,
   independent of whatever the tile's background is doing. */
.bw-image-tile {
	border-radius: 30px !important;
	overflow: hidden;
	position: relative;
	background: transparent;
	/* No inherited pointer-events restrictions — needed for the link/card
	   click-through to work reliably regardless of ancestor styling. */
	pointer-events: auto;
	/* Forces this element onto its own compositing layer so the rounded-
	   corner clip stays correct while the child <img> is scaled on hover.
	   Without this, Safari/Chrome can let the transformed image's square
	   corners briefly escape the border-radius clip, making the radius
	   look like it changes on hover. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

.bw-image-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(135deg, rgba(241, 194, 134, 0.18) 0%, rgba(186, 132, 84, 0.16) 100%),
		linear-gradient(180deg, rgba(60, 38, 22, 0.03) 25%, rgba(40, 26, 14, 0.50) 100%);
	pointer-events: none;
	transition: opacity .35s ease;
	z-index: 1;
}

.bw-image-tile:hover::after {
	opacity: 0;
}

.bw-image-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 30px !important;
	/* Only transform/filter change on hover — radius is never touched, so
	   it can't visually shift. */
	transition: transform .5s ease, filter .4s ease;
	filter: saturate(1.25) brightness(1.08) contrast(1.04);
}

.bw-image-tile:hover img {
	transform: scale(1.04);
}

/* Tall tile spans 2 rows and has no background fill behind it.
   !important guards against Elementor's cached per-page CSS still holding
   an older "Tile background color" rule for .bw-image-tile before the
   cache is regenerated. */
.bw-image-tile--tall {
	grid-row: span 2;
	background: transparent !important;
}

.bw-image-tile--tall img {
	filter: saturate(1.05) brightness(0.94) contrast(1.05);
}

/* ---- Label pill ---- */
.bw-image-tile__label {
	position: absolute;
	left: 18px;
	bottom: 18px;
	background: rgba(255, 255, 255, 0.92);
	color: #023c5a;
	border-radius: 999px;
	padding: 8px 14px;
	font-style: italic;
	font-size: 14px;
	line-height: 1.3;
	z-index: 2;
}

/* ---- CTA row ---- */
.bw-image-grid__ctas {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 48px;
}

.bw-image-grid__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
	border: 1.5px solid transparent;
	white-space: nowrap;
	cursor: pointer;
}

.bw-image-grid__btn:hover {
	transform: translateY(-1px);
}

.bw-image-grid__btn:hover .bw-btn-arrow {
	transform: translateX(3px);
}

.bw-image-grid__btn--primary {
	background: #023c5a;
	color: #ffffff;
	border-color: #023c5a;
}

.bw-image-grid__btn--primary:hover {
	background: #02283c;
	border-color: #02283c;
}

.bw-image-grid__btn--secondary {
	background: transparent;
	color: #023c5a;
	border-color: #023c5a;
}

.bw-image-grid__btn--secondary:hover {
	background: #023c5a;
	color: #ffffff;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	/* Asymmetric: collapse to 2 equal columns */
	.bw-image-grid__grid:not(.bw-image-grid__grid--uniform) {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 240px;
	}
	.bw-image-tile--tall {
		grid-row: auto;
	}
	/* Uniform: clamp to max 2 columns so tiles don't get tiny */
	.bw-image-grid__grid--uniform {
		grid-template-columns: repeat(min(var(--bw-ig-cols, 3), 2), 1fr);
	}
	.bw-image-grid__heading { font-size: 38px; }
}

@media (max-width: 767px) {
	.bw-image-grid { padding: 50px 0; }
	.bw-image-grid__inner { padding: 0 20px; }
	/* Both modes: single column on mobile */
	.bw-image-grid__grid:not(.bw-image-grid__grid--uniform) {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}
	.bw-image-grid__grid--uniform {
		grid-template-columns: 1fr;
	}
	.bw-image-grid__heading { font-size: 30px; }
	.bw-image-grid__head { margin-bottom: 40px; }
}