/**
 * Rasa June – Case Study Images
 *
 * One widget, seven layouts (see class-case-study-images-widget.php):
 * full-width, large-contained, 50/50, 60/40, 40/60, portrait+landscape,
 * three-image grid. Scoped under .rjcs-images.
 *
 * "Layout" (column ratios below) and "Presentation Width" (the
 * .rjcs-width-* classes) are independent — any layout can be Contained,
 * Wide or Full Bleed. Gaps, radius, ratio/crop and captions are all
 * Elementor-editable; the column ratios below are each layout's
 * defining, non-editable structure.
 */

.rjcs-images,
.rjcs-images *,
.rjcs-images *::before,
.rjcs-images *::after {
	box-sizing: border-box;
}

.rjcs-images {
	width: 100%;
	max-width: 100%;
}

.rjcs-images__inner {
	width: 100%;
}

.rjcs-images img {
	display: block;
	width: 100%;
	height: auto;
}

.rjcs-images__caption {
	margin: 12px 0 0;
}

/* Full width / large contained: single image. */
.rjcs-images__single {
	width: 100%;
}

.rjcs-images--large .rjcs-images__single {
	max-width: 70%;
	margin-left: auto;
	margin-right: auto;
}

/* Two/three image row, shared base. */
.rjcs-images__row {
	display: grid;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.rjcs-images__col {
	min-width: 0;
}

/* 50/50 */
.rjcs-images--fifty-fifty .rjcs-images__col-1,
.rjcs-images--fifty-fifty .rjcs-images__col-2 {
	max-width: none;
}
.rjcs-images--fifty-fifty .rjcs-images__row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* 60/40 */
.rjcs-images--sixty-forty .rjcs-images__row {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

/* 40/60 */
.rjcs-images--forty-sixty .rjcs-images__row {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

/* Portrait + landscape: distinct column ratio and per-image aspect ratio,
   not just a relabeled 40/60. These two ratios are intentionally fixed
   (the widget's "Image Ratio" control is hidden for this layout). */
.rjcs-images--portrait-landscape .rjcs-images__row {
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
}
.rjcs-images--portrait-landscape .rjcs-images__col-2 {
	align-self: center;
}
.rjcs-images--portrait-landscape .rjcs-images__col-1 img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.rjcs-images--portrait-landscape .rjcs-images__col-2 img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Three-image grid */
.rjcs-images--three-grid .rjcs-images__row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Presentation width utility — identical pattern to Project Hero /
   Web Presentation. Applies to the whole image block regardless of
   layout. !important wins over the per-instance "Contained Width"
   slider's inline style when Wide/Full Bleed is selected. */
.rjcs-width-contained {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.rjcs-width-wide {
	width: min(calc(100dvw - 48px), 1600px) !important;
	max-width: 1600px !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: clamp(24px, 5vw, 80px) !important;
	padding-right: clamp(24px, 5vw, 80px) !important;
}

.rjcs-width-full_bleed {
	width: 100dvw !important;
	max-width: 100dvw !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Horizontal section padding would shift a viewport breakout and create
   overflow. Wide owns its safe inset; Full Bleed is intentionally edge-to-edge. */
.rjcs-images--width-wide,
.rjcs-images--width-full_bleed {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Tablet: two-image layouts keep side-by-side but the three-grid moves to
   2 + 1 so images stay large enough to read — not a shrunk desktop grid. */
@media (max-width: 1024px) and (min-width: 768px) {
	.rjcs-images--three-grid .rjcs-images__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.rjcs-images--three-grid .rjcs-images__col-3 {
		grid-column: 1 / -1;
	}
}

/* Mobile: every multi-image layout restacks to a single column. Full
   Bleed stays available (the width utility above is not overridden
   here on purpose). */
@media (max-width: 767px) {
	.rjcs-images--large .rjcs-images__single {
		max-width: 100%;
	}

	.rjcs-images__row {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.rjcs-images__col,
	.rjcs-images--fifty-fifty .rjcs-images__col-1,
	.rjcs-images--fifty-fifty .rjcs-images__col-2,
	.rjcs-images--sixty-forty .rjcs-images__col-1,
	.rjcs-images--sixty-forty .rjcs-images__col-2,
	.rjcs-images--forty-sixty .rjcs-images__col-1,
	.rjcs-images--forty-sixty .rjcs-images__col-2,
	.rjcs-images--portrait-landscape .rjcs-images__col-1,
	.rjcs-images--portrait-landscape .rjcs-images__col-2,
	.rjcs-images--three-grid .rjcs-images__col {
		max-width: 100%;
	}

	.rjcs-images--three-grid .rjcs-images__col-3 {
		grid-column: auto;
	}

	.rjcs-width-wide {
		width: calc(100dvw - 40px) !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}