/* Green Orbit: FAQs at the bottom of a trip page (loaded on trips only, functions.php).
   The same look as the FAQ band on Contact Us (contact.css section 6; Build/site-setup/contact-us.js): sky band, palms, a numbered
   card per question in a pastel tint with a round icon. The Contact Us rules hang on Elementor containers, so these are the same
   values on plain markup (Core's single-trip.php). Change one, change the other. The nine tints are the same, by place in Green Orbit > FAQs. */

.go-tfaq {
	--go-faq-green: #02503C;
	--go-faq-sky-top: #CDE8F6;
	--go-faq-sky-mid: #E9F4F6;
	--go-faq-paper: #FBF8EC;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	box-sizing: border-box;
	width: 100%;
	margin-top: 64px;
	padding: 64px 0 56px;
	background: linear-gradient(180deg, var(--go-faq-sky-top) 0%, var(--go-faq-sky-mid) 24%, var(--go-faq-paper) 58%, var(--go-faq-paper) 100%);
	counter-reset: go-faq;
}

.go-tfaq__palm {
	position: absolute;
	top: 0;
	z-index: 0;
	width: clamp(140px, 18vw, 300px);
	height: auto;
	margin: 0;
	pointer-events: none;
}

.go-tfaq__palm--left {
	left: 0;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%), linear-gradient(90deg, #000 60%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, #000 50%, transparent 100%), linear-gradient(90deg, #000 60%, transparent 100%);
	mask-composite: intersect;
}

.go-tfaq__palm--right {
	right: 0;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%), linear-gradient(270deg, #000 60%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, #000 50%, transparent 100%), linear-gradient(270deg, #000 60%, transparent 100%);
	mask-composite: intersect;
}

.go-tfaq__flight {
	position: absolute;
	top: 6px;
	right: 4%;
	width: clamp(150px, 20vw, 260px);
	height: auto;
	color: var(--go-green-700);
	pointer-events: none;
}

.go-tfaq__head {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.go-tfaq__head h2 {
	position: relative;
	margin: 0;
	padding: 0 56px;
	font-family: var(--go-font-body);
	font-weight: 800;
	font-size: clamp(54px, 8vw, 96px);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--go-forest-800);
}

.go-tfaq__head h2::before,
.go-tfaq__head h2::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 34px;
	height: 34px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 22px 3px no-repeat,
		linear-gradient(currentColor, currentColor) 6px 15px / 22px 3px no-repeat,
		linear-gradient(currentColor, currentColor) 0 30px / 22px 3px no-repeat;
	color: var(--go-green-700);
	transform: translateY(-50%) rotate(-14deg);
}

.go-tfaq__head h2::before {
	left: 0;
}

.go-tfaq__head h2::after {
	right: 0;
	transform: translateY(-50%) scaleX(-1) rotate(-14deg);
}

.go-tfaq__sub {
	margin: 0;
	line-height: 27.2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--go-forest-800);
}

.go-tfaq__tag {
	margin: 0;
	line-height: 27.2px;
	font-family: var(--go-font-accent);
	font-style: italic;
	font-size: 22px;
	color: var(--go-green-700);
}

.go-tfaq .go-tfaq__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	box-sizing: border-box;
	width: calc(100% - 2 * var(--go-gutter));
	max-width: var(--go-content-width);
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.go-tfaq__card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	margin: 0;
	padding: 22px 20px;
	border-radius: 22px;
	background: var(--faq-tint, #EAF6EE);
	box-shadow: 0 2px 0 rgba(255, 255, 255, .7) inset, 0 8px 22px rgba(10, 45, 39, .07);
	counter-increment: go-faq;
}

.go-tfaq__card::before {
	content: counter(go-faq);
	position: absolute;
	top: -12px;
	left: -8px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--faq-badge, #2E7D32);
	color: var(--go-white);
	font-family: var(--go-font-body);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(10, 45, 39, .22);
}

.go-tfaq__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .72);
	color: var(--faq-badge, #2E7D32);
}

.go-tfaq__icon .go-icon {
	width: 32px;
	height: 32px;
	color: var(--faq-badge, #2E7D32);
}

.go-tfaq__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.go-tfaq__body h3 {
	margin: 0;
	font-family: var(--go-font-body);
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--go-forest-800);
}

.go-tfaq__body p {
	margin: 0;
	font-family: var(--go-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: #36474A;
}

.go-tfaq__card--1 { --faq-tint: #E5F4EA; --faq-badge: #2E7D32; }
.go-tfaq__card--2 { --faq-tint: #FCF1D2; --faq-badge: #E69A0B; }
.go-tfaq__card--3 { --faq-tint: #DDF1F1; --faq-badge: #14A3A8; }
.go-tfaq__card--4 { --faq-tint: #FCE4E0; --faq-badge: #E5604F; }
.go-tfaq__card--5 { --faq-tint: #E9E6F7; --faq-badge: #7A67C7; }
.go-tfaq__card--6 { --faq-tint: #E4F2DA; --faq-badge: #5E9A25; }
.go-tfaq__card--7 { --faq-tint: #DDF1EE; --faq-badge: #14A3A8; }
.go-tfaq__card--8 { --faq-tint: #FCF1D2; --faq-badge: #E69A0B; }
.go-tfaq__card--9 { --faq-tint: #FCE4E0; --faq-badge: #E5604F; }

@media (max-width: 1024px) {
	.go-tfaq .go-tfaq__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.go-tfaq {
		gap: 20px;
		margin-top: 40px;
		padding: 32px 0 36px;
	}

	.go-tfaq__head h2 {
		padding: 0 36px;
		font-size: clamp(44px, 14vw, 56px);
	}

	.go-tfaq__sub {
		line-height: 25.6px;
		font-size: 11.5px;
		letter-spacing: .18em;
	}

	.go-tfaq__tag {
		line-height: 25.6px;
		font-size: 18px;
	}

	.go-tfaq__flight {
		display: none;
	}

	.go-tfaq .go-tfaq__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		margin-bottom: 28px;
	}

	.go-tfaq__card {
		padding: 14px;
	}

	.go-tfaq__body h3 {
		font-size: 16px;
	}

	.go-tfaq__palm {
		width: 84px;
	}

	.go-tfaq__icon .go-icon {
		width: 22px;
		height: 22px;
	}

	.go-tfaq__card::before {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}
}