/* ---------- Shared box styles ---------- */

.cgb-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eeeeee;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	overflow: hidden;
	border-radius: 4px;
}
.cgb-box {
	background-position: center center;
}

.cgb-box::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 1;
}

.cgb-box-title {
	position: relative;
	z-index: 2;
	color: #ffffff;
	font-weight: 700;
	font-size: 1.1rem;
	text-align: center;
	padding: 0 16px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	max-width: 100%;
}
.cgb-box-title * {
	color: inherit; /* Content-field HTML can still override via its own inline style. */
}

.cgb-video-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.cgb-video-bg iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center center;
	border: 0;
	pointer-events: none;
}

@supports not (object-fit: cover) {
	.cgb-video-bg iframe {
		top: 50%;
		left: 50%;
		width: 300%;
		height: 300%;
		transform: translate(-50%, -50%);
	}
}

.cgb-video-bg video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

.cgb-video-toggle {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.cgb-video-toggle:hover {
	background: rgba(0, 0, 0, 0.8);
}

.cgb-gallery-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.cgb-gallery-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.cgb-gallery-slide.is-active {
	opacity: 1;
}

/* ---------- Layout 1: 13-panel grid ----------
   Rows use fr units (not fixed px) so the admin-set inline `height`
   on .cgb-grid-13 actually controls each row's size. */

.cgb-grid-13 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 16px;
	margin: 40px auto;
	padding: 0 16px;
	box-sizing: content-box;
}

.cgb-pos-1  { grid-column: 1; grid-row: 1; }
.cgb-pos-2  { grid-column: 2; grid-row: 1; }
.cgb-pos-3  { grid-column: 3; grid-row: 1; }
.cgb-pos-4  { grid-column: 4; grid-row: 1; }
.cgb-pos-5  { grid-column: 1; grid-row: 2; }
.cgb-pos-6  { grid-column: 4; grid-row: 2; }
.cgb-pos-7  { grid-column: 1; grid-row: 3; }
.cgb-pos-8  { grid-column: 4; grid-row: 3; }
.cgb-pos-9  { grid-column: 1; grid-row: 4; }
.cgb-pos-10 { grid-column: 2; grid-row: 4; }
.cgb-pos-11 { grid-column: 3; grid-row: 4; }
.cgb-pos-12 { grid-column: 4; grid-row: 4; }
.cgb-pos-13 { grid-column: 2 / 4; grid-row: 2 / 4; }

@media (max-width: 782px) {
	.cgb-grid-13 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 160px) 260px repeat(3, 160px);
		height: auto !important;
	}

	/* First 6 boxes, 2 per row */
	.cgb-pos-1 { grid-column: 1; grid-row: 1; }
	.cgb-pos-2 { grid-column: 2; grid-row: 1; }
	.cgb-pos-3 { grid-column: 1; grid-row: 2; }
	.cgb-pos-4 { grid-column: 2; grid-row: 2; }
	.cgb-pos-5 { grid-column: 1; grid-row: 3; }
	.cgb-pos-6 { grid-column: 2; grid-row: 3; }

	/* Merged center panel: full width, sitting in the middle of the stack */
	.cgb-pos-13 { grid-column: 1 / 3; grid-row: 4; }

	/* Last 6 boxes, 2 per row */
	.cgb-pos-7  { grid-column: 1; grid-row: 5; }
	.cgb-pos-8  { grid-column: 2; grid-row: 5; }
	.cgb-pos-9  { grid-column: 1; grid-row: 6; }
	.cgb-pos-10 { grid-column: 2; grid-row: 6; }
	.cgb-pos-11 { grid-column: 1; grid-row: 7; }
	.cgb-pos-12 { grid-column: 2; grid-row: 7; }
}

/* ---------- Layout 2: Featured panel + thumbnails + bottom row ----------
   4 columns total.
   - Featured panel: columns 1-2, rows 1-3 (large, top-left)
   - Side thumbnails: columns 3-4, rows 1-3 (6 boxes, 3 rows x 2 cols)
   - Bottom row: columns 1-4, row 4 (4 boxes spanning the full width) */

.cgb-grid-3 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 10px;
	margin: 40px auto;
	padding: 0 16px;
	box-sizing: content-box;
}

.cgb-g3-pos-1 { grid-column: 1 / 3; grid-row: 1 / 4; } /* large featured panel */

/* Side thumbnails: column 3 gets 2–4, column 4 gets 5–7. */
.cgb-g3-pos-2 { grid-column: 3; grid-row: 1; }
.cgb-g3-pos-3 { grid-column: 3; grid-row: 2; }
.cgb-g3-pos-4 { grid-column: 3; grid-row: 3; }
.cgb-g3-pos-5 { grid-column: 4; grid-row: 1; }
.cgb-g3-pos-6 { grid-column: 4; grid-row: 2; }
.cgb-g3-pos-7 { grid-column: 4; grid-row: 3; }

/* Bottom row: 4 panels spanning the full width. */
.cgb-g3-pos-8  { grid-column: 1; grid-row: 4; }
.cgb-g3-pos-9  { grid-column: 2; grid-row: 4; }
.cgb-g3-pos-10 { grid-column: 3; grid-row: 4; }
.cgb-g3-pos-11 { grid-column: 4; grid-row: 4; }

.cgb-grid-3 .cgb-box-title { font-size: 0.85rem; }
.cgb-grid-3 .cgb-g3-pos-1 .cgb-box-title { font-size: 1.3rem; }

@media (max-width: 700px) {
	.cgb-grid-3 {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 260px repeat(5, 160px);
		height: auto !important;
	}

	/* Featured panel: full width, own row */
	.cgb-g3-pos-1 { grid-column: 1 / 3; grid-row: 1; }

	/* Everything else: 2 columns per row */
	.cgb-g3-pos-2  { grid-column: 1; grid-row: 2; }
	.cgb-g3-pos-3  { grid-column: 2; grid-row: 2; }
	.cgb-g3-pos-4  { grid-column: 1; grid-row: 3; }
	.cgb-g3-pos-5  { grid-column: 2; grid-row: 3; }
	.cgb-g3-pos-6  { grid-column: 1; grid-row: 4; }
	.cgb-g3-pos-7  { grid-column: 2; grid-row: 4; }
	.cgb-g3-pos-8  { grid-column: 1; grid-row: 5; }
	.cgb-g3-pos-9  { grid-column: 2; grid-row: 5; }
	.cgb-g3-pos-10 { grid-column: 1; grid-row: 6; }
	.cgb-g3-pos-11 { grid-column: 2; grid-row: 6; }
}