/**
 * Travel26 Image Collage
 *
 * Contents
 * 1. Variables and grid
 * 2. Photos
 * 3. Dots decoration
 * 4. Experience badge
 * 5. Responsive
 *
 * Colours read the Inoforest Core Design System when it is active, with the Travel26 design as fallback.
 */

/* 1. Variables and grid ------------------------------------------------------ */
.travel26-collage {
	--travel26-collage-gap: 20px;
	--travel26-collage-radius: 24px;
	--travel26-collage-offset: 60px;
	--travel26-collage-dots: var(--inoforest-color-accent, #ff6a3d);
	--travel26-collage-badge-bg: var(--inoforest-color-primary, #0b7a75);
	--travel26-collage-badge-color: #fff;
	--travel26-collage-badge-border: #fff;
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--travel26-collage-gap);
	padding-bottom: 40px;
}

/* 2. Photos ------------------------------------------------------------------- */
.travel26-collage__img {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: #f4f8f8;
	border-radius: var(--travel26-collage-radius);
}

.travel26-collage .travel26-collage__img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.travel26-collage__img--1 {
	grid-row: span 2;
	aspect-ratio: 3 / 4.4;
}

.travel26-collage__img--2 {
	aspect-ratio: 1;
	margin-top: var(--travel26-collage-offset);
}

.travel26-collage__img--3 {
	aspect-ratio: 1;
}

/* 3. Dots decoration ------------------------------------------------------------ */
.travel26-collage__dots {
	position: absolute;
	/* The start side: left, or right in right-to-left languages (where a negative left offset would widen the page). */
	inset-inline-start: var(--travel26-collage-dots-x, -40px);
	bottom: var(--travel26-collage-dots-y, 0);
	z-index: 0;
	width: var(--travel26-collage-dots-size, 120px);
	height: var(--travel26-collage-dots-size, 120px);
	background-image: radial-gradient(var(--travel26-collage-dots) 2px, transparent 2px);
	background-size: 16px 16px;
	opacity: 0.35;
	pointer-events: none;
}

/* 4. Experience badge ------------------------------------------------------------- */
.travel26-collage__badge {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 28px;
	color: var(--travel26-collage-badge-color);
	white-space: nowrap;
	background: var(--travel26-collage-badge-bg);
	border: 6px solid var(--travel26-collage-badge-border);
	border-radius: 24px;
	box-shadow: 0 14px 40px rgba(13, 27, 42, 0.1);
	transform: translateX(-50%);
}

.travel26-collage__badge strong {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1;
}

.travel26-collage__badge span {
	font-weight: 600;
	line-height: 1.3;
}

/* 5. Responsive -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.travel26-collage {
		--travel26-collage-gap: 12px;
		grid-template-columns: 1fr 1fr;
	}

	.travel26-collage__badge {
		padding: 14px 18px;
	}

	.travel26-collage__badge strong {
		font-size: 2.2rem;
	}

	/* The design's 15 px base font on phones. */
	.travel26-collage__badge span {
		font-size: 15px;
	}
}