/*
 * LB2 - client adjustments of Aug 2026 (loaded after all other styles).
 * 1) 1920px-wide layout
 * 2) Homepage carousel: panoramic panning effect + caption + award overlays
 * 3) Homepage grid: fluid 3-column layout (was fixed 317px tiles)
 */

/* ------------------------------------------------ 1. wider layout (1920px) */
/* Divi's .container/.et_pb_row are width:80%; give the wide design more room.
   The 1920px cap itself lives in theme-customizer.css. */
.container,
.et_pb_row {
	width: 90%;
}

/* single project pages: the new 2000px images fill the wider column */
.single-featured-image a {
	position: relative;
	display: block;
	line-height: 0;
}
.single-featured-image img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* project-page heroes capped like the carousels (86vh). The services page
   hero is a fullwidth gallery, already capped by the carousel rules below;
   the contact page photo is deliberately NOT capped. */
.single-featured-image img {
	width: 100%;
	max-height: 75vh;
	min-height: 320px;
	object-fit: cover;
}

/* contact page: the map used to be a fixed 960px iframe */
#lb2-gmap iframe {
	width: 100%;
}

/* services + contact hero photos (960px sources) stretch to the wider
   container; replace with higher-res versions when the client provides them */
.et_pb_image_0 img {
	width: 100%;
}

/* ------------------------- 2. carousel: panning, caption, award overlays */
.et_pb_gallery_fullwidth .et_pb_gallery_image {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 2000 / 1123;
	max-height: 86vh;   /* hero never taller than the viewport */
	min-height: 320px;  /* keeps the hero readable on mobile */
}
.et_pb_gallery_fullwidth .et_pb_gallery_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: lb2-pan 20s infinite alternate;
	will-change: transform;
}
@keyframes lb2-pan {
	from { transform: scale(1.1) translateX(-3.2%); }
	to   { transform: scale(1.2) translateX(3.2%); }
}
@media (prefers-reduced-motion: reduce) {
	.et_pb_gallery_fullwidth .et_pb_gallery_image img { animation: none; }
}

/* tagline shown on every slide (bottom left) */
.lb2-slide-caption {
	position: absolute;
	left: 3.2%;
	bottom: 7%;
	z-index: 3;
	color: #fff;
	text-align: left;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
.lb2-slide-caption p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	color: #fff;
}
.lb2-slide-caption strong {
	font-weight: 700;
}

/* award distinctions (top right) - kayak + Kangaroo TV, carousel and
   single pages (the new images no longer have the text baked in) */
.lb2-distinction {
	position: absolute;
	top: 4.5%;
	right: 3.2%;
	z-index: 3;
	color: #fff;
	text-align: right;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	pointer-events: none;
}
.lb2-distinction h3 {
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0;
	padding: 0;
	text-transform: none;
}
.lb2-distinction p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	color: #fff;
}

@media only screen and (max-width: 980px) {
	.lb2-slide-caption p { font-size: 15px; }
	.lb2-distinction h3 { font-size: 18px; }
	.lb2-distinction p { font-size: 12px; }
}
@media only screen and (max-width: 568px) {
	.lb2-slide-caption p { font-size: 11px; }
	.lb2-distinction h3 { font-size: 13px; }
	.lb2-distinction p { font-size: 9px; }
}

/* --------------------------------- 3. home grid: fluid 3-column layout */
.home article.post,
.home article.post img,
.home article.post .text-div {
	min-width: 0;
	max-width: none;
}
.home article.post {
	width: 32.9%;
	margin: 0 0 12px 0;
}
.home article.post img {
	width: 100%;
	max-height: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.home article.post .text-div {
	width: 100%;
	max-height: none;
}
@media only screen and (max-width: 980px) {
	.home article.post { width: 49%; }
}
@media only screen and (max-width: 640px) {
	.home article.post { width: 100%; }
}