/* =====================================================
   GB OPPORTUNITIES
   Colors, sizes and layout come from
   Opportunities > Design Settings.
   Fonts are inherited from the theme on purpose.
===================================================== */

.gbo-list,
.gbo-single {
	--gbo-forest: #1B4332;
	--gbo-forest-mid: #2D6A4F;
	--gbo-clay: #B8906A;
	--gbo-line: #E3DFD4;
	--gbo-ink: #262623;
	--gbo-soft: #55564F;
	--gbo-gap: 40px;
	--gbo-radius: 2px;
	--gbo-ratio: 4 / 3;
	--gbo-title: 34px;
	--gbo-maxw: 1100px;
}

.gbo-cols-1 { --gbo-cols: 1; }
.gbo-cols-2 { --gbo-cols: 2; }
.gbo-cols-3 { --gbo-cols: 3; }
.gbo-cols-4 { --gbo-cols: 4; }

@media (max-width: 1000px) {
	.gbo-cols-3,
	.gbo-cols-4 { --gbo-cols: 2; }
}

@media (max-width: 640px) {
	.gbo-cols-2,
	.gbo-cols-3,
	.gbo-cols-4 { --gbo-cols: 1; }
}


/* ---------- CONTAINER ---------- */

.gbo-list {
	max-width: var(--gbo-maxw);
	margin: 0 auto;
}


/* ---------- LAYOUT: LIST ---------- */

.gbo-layout-list .gbo-card {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--gbo-gap);
	align-items: center;
	padding: 56px 0;
	border-bottom: 1px solid var(--gbo-line);
}

.gbo-layout-list .gbo-card:first-child { padding-top: 8px; }
.gbo-layout-list .gbo-card:last-child { border-bottom: 0; }

.gbo-layout-list.gbo-zigzag .gbo-card:nth-child(even) .gbo-media { order: 2; }


/* ---------- LAYOUT: GRID ---------- */

.gbo-layout-grid .gbo-cards {
	display: grid;
	grid-template-columns: repeat(var(--gbo-cols, 3), minmax(0, 1fr));
	gap: var(--gbo-gap);
}


/* ---------- LAYOUT: GRID + SLIDER CARD SHAPE (photo on top) ---------- */

.gbo-layout-grid .gbo-card,
.gbo-layout-slider .gbo-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.gbo-layout-grid .gbo-stats,
.gbo-layout-slider .gbo-stats {
	grid-template-columns: 1fr;
}


/* ---------- LAYOUT: SLIDER ---------- */

.gbo-slider { position: relative; }

.gbo-track {
	display: flex;
	gap: var(--gbo-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.gbo-track::-webkit-scrollbar { display: none; }

.gbo-track:focus-visible {
	outline: 2px solid var(--gbo-forest);
	outline-offset: 4px;
}

.gbo-layout-slider .gbo-card {
	flex: 0 0 calc((100% - var(--gbo-gap) * (var(--gbo-cols, 3) - 1)) / var(--gbo-cols, 3));
	scroll-snap-align: start;
}

.gbo-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 26px;
}

.gbo-dots {
	display: flex;
	gap: 8px;
}

.gbo-list .gbo-dots button {
	width: 9px;
	height: 9px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gbo-line);
	cursor: pointer;
}

.gbo-list .gbo-dots button.is-active { background: var(--gbo-forest); }

.gbo-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	border: 1.5px solid var(--gbo-forest);
	border-radius: 50%;
	background: #fff;
	color: var(--gbo-forest);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.gbo-arrow:hover:not(:disabled) {
	background: var(--gbo-forest);
	color: #fff;
}

.gbo-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.gbo-arrow:focus-visible,
.gbo-dots button:focus-visible,
.gbo-thumbs button:focus-visible {
	outline: 2px solid var(--gbo-forest);
	outline-offset: 2px;
}

/* Nothing to scroll: hide the controls */
.gbo-static .gbo-nav,
.gbo-static .gbo-arrow { display: none; }


/* ---------- PHOTO ---------- */

.gbo-media { position: relative; }

.gbo-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--gbo-ratio);
	object-fit: cover;
	border-radius: var(--gbo-radius);
}

.gbo-noimage {
	width: 100%;
	aspect-ratio: var(--gbo-ratio);
	background: var(--gbo-forest);
	border-radius: var(--gbo-radius);
}

.gbo-tag {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 6px 12px;
	background: #fff;
	color: var(--gbo-forest);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 2px;
}

.gbo-tag-closed,
.gbo-tag-funded {
	background: var(--gbo-ink);
	color: #fff;
}


/* ---------- TEXT ---------- */

.gbo-badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 12px;
	background: var(--gbo-forest);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 2px;
}

.gbo-list .gbo-title {
	margin: 0 0 18px;
	font-size: var(--gbo-title);
	line-height: 1.15;
	color: var(--gbo-forest);
}

.gbo-layout-grid .gbo-title,
.gbo-layout-slider .gbo-title {
	font-size: calc(var(--gbo-title) * 0.75);
}

.gbo-list .gbo-title a {
	color: inherit;
	text-decoration: none;
}

.gbo-list .gbo-title a:hover { color: var(--gbo-forest-mid); }

.gbo-summary {
	margin: 0 0 22px;
	color: var(--gbo-soft);
	line-height: 1.7;
}


/* ---------- KEY FACTS ---------- */

.gbo-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	margin: 0 0 22px;
	border-top: 1px solid var(--gbo-line);
}

.gbo-stat {
	padding: 12px 0;
	border-bottom: 1px solid var(--gbo-line);
}

.gbo-stat dt {
	margin: 0 0 2px;
	font-size: 13px;
	color: var(--gbo-soft);
}

.gbo-stat dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gbo-ink);
}


/* ---------- BUTTON + LINK ---------- */

.gbo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.gbo-list a.gbo-btn,
.gbo-single a.gbo-btn {
	display: inline-block;
	padding: 13px 28px;
	background: var(--gbo-forest);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 3px;
	transition: background 0.2s ease;
}

.gbo-list a.gbo-btn:hover,
.gbo-single a.gbo-btn:hover { background: var(--gbo-forest-mid); }

.gbo-list a.gbo-more {
	color: var(--gbo-forest);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid var(--gbo-clay);
	padding-bottom: 2px;
}

.gbo-list a.gbo-more:hover { color: var(--gbo-forest-mid); }

.gbo-empty {
	padding: 40px 0;
	color: var(--gbo-soft);
}


/* ---------- LISTING PAGE ---------- */

.gbo-single .gbo-back { margin: 0 0 20px; }

.gbo-single .gbo-back a {
	color: var(--gbo-forest);
	font-weight: 600;
	text-decoration: none;
}

.gbo-single .gbo-stats { margin-top: 4px; }

.gbo-single .gbo-body {
	margin: 8px 0 28px;
	line-height: 1.75;
}

.gbo-gallery { margin-bottom: 28px; }

.gbo-gallery .gbo-track { gap: 0; }

.gbo-slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.gbo-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--gbo-radius);
}

.gbo-slider-wide .gbo-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.gbo-slider-wide .gbo-prev { left: 14px; }
.gbo-slider-wide .gbo-next { right: 14px; }

.gbo-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
}

.gbo-single .gbo-thumbs button {
	flex: 0 0 84px;
	min-height: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--gbo-radius);
	background: none;
	opacity: 0.65;
	cursor: pointer;
}

.gbo-single .gbo-thumbs button.is-active {
	border-color: var(--gbo-forest);
	opacity: 1;
}

.gbo-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}


/* ---------- VIDEO ---------- */

.gbo-video-section { margin: 0 0 28px; }

.gbo-single .gbo-subhead {
	margin: 0 0 14px;
	color: var(--gbo-forest);
}

.gbo-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--gbo-radius);
	overflow: hidden;
}

.gbo-video iframe,
.gbo-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ---------- MOBILE ---------- */

@media (max-width: 820px) {

	.gbo-layout-list .gbo-card {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 36px 0;
	}

	.gbo-layout-list.gbo-zigzag .gbo-card:nth-child(even) .gbo-media { order: 0; }

	.gbo-stats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.gbo-layout-grid .gbo-cards { gap: 36px; }
}


/* =====================================================
   LAYOUT: DETAILED (full details of every listing)
===================================================== */

/* "View all opportunities" button under homepage cards */
.gbo-all {
	margin-top: 40px;
	text-align: center;
}

/* Jump to bar */
.gbo-jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 8px;
	padding: 0 0 26px;
	border-bottom: 1px solid var(--gbo-line);
}

.gbo-jump span {
	margin-right: 4px;
	font-size: 13px;
	color: var(--gbo-soft);
}

.gbo-list .gbo-jump a {
	padding: 8px 16px;
	border: 1.5px solid var(--gbo-forest);
	border-radius: 999px;
	color: var(--gbo-forest);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.gbo-list .gbo-jump a:hover,
.gbo-list .gbo-jump a:focus-visible {
	background: var(--gbo-forest);
	color: #fff;
}

/* One full block per listing */
.gbo-detail {
	padding: 64px 0;
	border-bottom: 1px solid var(--gbo-line);
	scroll-margin-top: 24px;
}

.gbo-detail:last-child { border-bottom: 0; }

.gbo-layout-detailed .gbo-jump + .gbo-detail { padding-top: 48px; }

.gbo-detail-top {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--gbo-gap);
	align-items: start;
}

.gbo-detail-media { min-width: 0; }

.gbo-detail .gbo-gallery { margin-bottom: 0; }

.gbo-detail .gbo-slide img { aspect-ratio: var(--gbo-ratio); }

.gbo-detail .gbo-media .gbo-noimage { aspect-ratio: var(--gbo-ratio); }

.gbo-detail-head .gbo-stats { grid-template-columns: 1fr; }

.gbo-detail-head .gbo-title { margin-bottom: 20px; }

/* Full description + video, under the photo and facts */
.gbo-detail-body {
	max-width: 780px;
	margin-top: 36px;
	color: var(--gbo-ink);
	line-height: 1.8;
}

.gbo-detail-body > :first-child { margin-top: 0; }
.gbo-detail-body > :last-child { margin-bottom: 0; }

.gbo-detail .gbo-video-section {
	max-width: 780px;
	margin: 36px 0 0;
}

.gbo-detail .gbo-subhead {
	margin: 0 0 14px;
	color: var(--gbo-forest);
}

.gbo-list .gbo-thumbs button {
	flex: 0 0 84px;
	min-height: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--gbo-radius);
	background: none;
	opacity: 0.65;
	cursor: pointer;
}

.gbo-list .gbo-thumbs button.is-active {
	border-color: var(--gbo-forest);
	opacity: 1;
}

@media (max-width: 900px) {
	.gbo-detail { padding: 44px 0; }
	.gbo-detail-top { grid-template-columns: 1fr; gap: 28px; }
	.gbo-detail-body,
	.gbo-detail .gbo-video-section { margin-top: 28px; }
}