/* ==========================================================================
   TBT Global Widget Styles
   Shared stylesheet for widgets that don't require their own CSS file.
   ========================================================================== */

:root {
	--tbt-font-heading: "Founders Grotesk", Sans-serif;
	--tbt-font-body: "Inter Tight", Sans-serif;

	/* Brand colours */
	--tbt-navy:           #010028;
	--tbt-acid:           #CCFF8C;
	--tbt-ocean:          #96BAF9;
	--tbt-white:          #FFFFFF;

	/* Ocean blue UI scale — dark to light */
	--tbt-ui-0:           #1E1D34;
	--tbt-ui-1:           #232243;
	--tbt-ui-2:           #373658;
	--tbt-ui-3:           #565576;
	--tbt-ui-4:           #8C8BA6;
	--tbt-ui-5:           #ABABC2;

	/* Typography scale */
	--tbt-font-xs:        0.65rem;
	--tbt-font-sm:        0.8rem;
	--tbt-font-base:      0.95rem;
	--tbt-font-base-lg:   1rem;
	--tbt-font-md:        1.1rem;
	--tbt-font-lg:        1.375rem;
	--tbt-font-xl:        1.5625rem;
	--tbt-font-2xl:       3.125rem;
	--tbt-font-3xl:       4rem;
	--tbt-font-4xl:       5rem;
	--tbt-font-fluid:     8vw;
	--tbt-font-display:   8.75rem;

	/* Spacing */
	--tbt-radius-sm:      4px;
	--tbt-radius-pill:    999px;

	/* Transitions */
	--tbt-transition:      0.2s ease;
	--tbt-transition-slow: 0.35s ease;
}

@media ( max-width: 1024px ) {
	:root {

		/* Typography scale */
		/* --tbt-font-xs:        0.65rem;
		--tbt-font-sm:        0.8rem;
		--tbt-font-base:      0.95rem;
		--tbt-font-base-lg:   1rem;
		--tbt-font-md:        1.1rem;
		--tbt-font-lg:        1.375rem;
		--tbt-font-xl:        1.5625rem; */
		--tbt-font-2xl:       2.5rem;
		--tbt-font-3xl:       3rem;
		--tbt-font-4xl:       4rem;
		/* --tbt-font-fluid:     8vw;
		--tbt-font-display:   8.75rem; */
	}
}

/* ===== TBT BUTTONS ===== */

.tbt-btn {
	display:         inline-block;
	padding:         14px 34px;
	border-radius:   var(--tbt-radius-pill);
	font-size:       22px;
	font-family: var(--tbt-font-heading);
	line-height: 0.9;
	font-weight:     700;
	text-transform:  uppercase;
	text-decoration: none;
	cursor:          pointer;
	transition:      all var(--tbt-transition);
	line-height:     1;
}

.tbt-btn:hover {
	text-decoration: underline;
}

/* Primary — lime green */
.tbt-btn--primary {
	background:   var(--tbt-acid);
	color:        var(--tbt-navy) !important;
}
.tbt-btn--primary:hover {
	box-shadow: 0 0 0 2px var(--tbt-navy), 0 0 0 4px var(--tbt-acid);
}

/* Secondary — white outline */
.tbt-btn--secondary {
	background:   var(--tbt-white) !important;
	color:        var(--tbt-navy) !important;
}
.tbt-btn--secondary:hover {
	box-shadow: 0 0 0 2px var(--tbt-navy), 0 0 0 4px var(--tbt-white);
}

/* Dark — navy fill, white outline */
.tbt-btn--dark {
	background:   var(--tbt-navy);
	color:        var(--tbt-white);
	border-color: var(--tbt-white);
}
.tbt-btn--dark:hover {
	background: var(--tbt-white);
	color:      var(--tbt-navy);
}

/* Ghost — no background, lime outline */
.tbt-btn--ghost {
	background:   transparent;
	color:        var(--tbt-acid);
	border-color: var(--tbt-acid);
}
.tbt-btn--ghost:hover {
	background: var(--tbt-acid);
	color:      var(--tbt-navy);
}

/* Size modifier — large */
.tbt-btn--lg {
	padding:   16px 40px;
	font-size: var(--tbt-font-base-lg);
}

/* Size modifier — small */
.tbt-btn--sm {
	padding:   8px 18px;
	font-size: var(--tbt-font-xs);
}


.tbt-campaigns,
.tbt-faq,
.tbt-map-panel,
.tbt-map-wrap {
  font-family: var(--tbt-font-body);
}

.tbt-campaigns,
.tbt-faq,
.tbt-map-panel,
.tbt-map-wrap {
	h2, h3 {
		font-weight: 800;
		text-transform: uppercase;
		font-family: var(--tbt-font-heading);
		line-height: 0.9em;
	}
	.site-boxed-container {
		max-width: 1300px;
		width: 90%;
		margin-inline: auto;
		padding: 0 20px;
	}
}

@media ( max-width: 768px ) {
	.tbt-campaigns,
	.tbt-faq,
	.tbt-map-panel,
	.tbt-map-wrap {
		.site-boxed-container {
			width: 100%;
		}
	}
}

/* -------------------------------------------------------------------------
   FAQ Accordion
   ------------------------------------------------------------------------- */
.tbt-faq-heading {
	font-size:    var(--tbt-font-3xl);
	font-weight:   800;
	text-transform: uppercase;
	color:         var(--tbt-acid);
	margin-bottom: 32px;
	font-family: var(--tbt-font-heading)
}

.tbt-faq-list {
	border-top: 1px solid var(--tbt-acid);
}

.tbt-faq-item {
	border-bottom: 1px solid var(--tbt-acid);
}

.tbt-faq-item.is-open {
	background:  var(--tbt-ui-0);
}

.tbt-faq-trigger {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         25px 30px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	gap:             16px;
}

.tbt-faq-trigger:hover,
.tbt-faq-trigger:active,
.tbt-faq-trigger:focus {
	background:  var(--tbt-ui-0);
}

.tbt-faq-question {
	font-size:   var(--tbt-font-lg);
	font-weight: 500;
	color:       var(--tbt-white);
	line-height: 1.4;
}

.tbt-faq-item.is-open .tbt-faq-question {
	color: var(--tbt-acid);
}

.tbt-faq-chevron {
	flex-shrink:     0;
	width:           36px;
	height:          36px;
	border:          1px solid var(--tbt-ui-3);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      transform 0.3s ease;
}

.tbt-faq-item.is-open .tbt-faq-chevron {
	transform:    rotate(180deg);
	border-color: var(--tbt-acid);
}

.tbt-faq-answer {
	max-height: 0;
	overflow:   hidden;
	transition: max-height var(--tbt-transition-slow);
}

.tbt-faq-answer-inner {
	padding:     0 30px 35px;
	color:       var(--tbt-white);
	font-size:   var(--tbt-font-md);
	line-height: 1.7;
}

.tbt-faq-answer-inner p {
	margin-bottom: 1em;
	max-width: 50em;
}

.tbt-faq-answer-inner p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 768px ) {
	.tbt-faq-trigger {
		padding: 18px 12px;
	}

	.tbt-faq-question {
		font-size: var(--tbt-font-md);
	}

	.tbt-faq-answer-inner {
		font-size:   var(--tbt-font-base);
		padding:     0 16px 24px;
	}

	.tbt-faq-chevron {
		width:  30px;
		height: 30px;
	}
}

/* -------------------------------------------------------------------------
   Campaigns List
   ------------------------------------------------------------------------- */
.tbt-campaigns-header {
   margin:0 0 5em;
}
.tbt-campaigns {
	margin: 7em 0;
}

.tbt-campaigns-heading {
	font-size:    var(--tbt-font-4xl);
	font-weight:   800;
	text-transform: uppercase;
	color:         var(--tbt-acid);
	margin-bottom: 0.1em;
	font-family: var(--tbt-font-heading)
}

.tbt-campaigns-intro {
	font-size:     var(--tbt-font-lg);
	line-height:   1.6;
	max-width:     39em;
	color:         var(--tbt-white);
}

/* Toolbar */
.tbt-campaigns-toolbar {
	border-top: 1px solid var(--tbt-acid);
	border-bottom: 1px solid var(--tbt-acid);
	margin-bottom:   0;
	padding: 1.4em 0;
}

.tbt-campaigns-toolbar .site-boxed-container {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	flex-wrap:       wrap;
}

.tbt-campaigns-filters {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}

.tbt-campaigns-sort {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.tbt-filter-label {
	font-size: 24px;
	font-weight: 700;
	font-family: var(--tbt-font-heading);
	color:          var(--tbt-ui-4);
	white-space:    nowrap;
	margin-right: 0.5em;
}

.tbt-filter-pills {
	display:   flex;
	gap:       8px;
	flex-wrap: wrap;
}

.tbt-filter-pill {
	padding:       7px 22px;
	border-radius: 999px;
	border:        1px solid var(--tbt-ui-2);
	background:    transparent;
	color:         var(--tbt-white);
	font-weight: 500;
	font-size:     var(--tbt-font);
	cursor:        pointer;
	transition:    all 0.2s;
}

.tbt-filter-pill:hover,
.tbt-filter-pill:focus {
	color: var(--tbt-acid);
	background-color: transparent;
}

.tbt-filter-pill.is-active {
	border-color: var(--tbt-acid);
	color:        var(--tbt-acid);
}

.tbt-sort-select {
	background:    transparent;
	/* border:        1px solid var(--tbt-acid); */
	border: none;
	font-family: var(--tbt-font-body);
	color:         var(--tbt-white);
	padding:       6px 12px;
	border-radius: 4px;
	font-size:     var(--tbt-font-base-lg);
	cursor:        pointer;
}

/* List */
.tbt-campaigns-list {
	border-bottom: 1px solid var(--tbt-acid);
}

/* Row trigger */
.tbt-campaign-trigger {
	display:       flex;
	align-items:   flex-start;
	width:         100%;
	padding:       1.5em 20px;
	background:    transparent;
	border:        none;
	border-radius: 0px !important;
	border-bottom: 1px solid var(--tbt-acid);
	cursor:        pointer;
	text-align:    left;
	gap:           30px;
	color:         var(--tbt-white);
}

.tbt-campaign-trigger:hover,
.tbt-campaign-trigger:focus {
	background: var(--tbt-ui-0);

	.tbt-campaign-title {
		color: var(--tbt-acid);
	}

}

.tbt-campaign-item.is-open .tbt-campaign-trigger {
	border-bottom: none;
}

.tbt-campaign-item.is-open {
	background: var(--tbt-ui-0);
}

.tbt-campaign-item.is-open .tbt-campaign-title {
	color: var(--tbt-acid);
}



.tbt-campaign-number {
	font-size:   var(--tbt-font-2xl);
	font-family: var(--tbt-font-heading);
	font-weight: 800;
	line-height: 1em;
	color:       var(--tbt-ui-3);
	min-width:   36px;
}

.tbt-campaign-info {
	flex:           1;
	min-width:      0;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.tbt-campaign-title {
	font-size:      var(--tbt-font-2xl);
	font-family:    var(--tbt-font-heading);
	font-weight:    800;
	line-height:    1em;
	text-transform: uppercase;
	color:          var(--tbt-white);
	transition:     color 0.2s;
	white-space:    normal;
}

.tbt-campaign-org {
	font-size: var(--tbt-font-body);
	color:     var(--tbt-ui-4);
	font-weight: 500;
}

/* Tags */
.tbt-campaign-tags {
	display:     flex;
	gap:         6px;
	align-items: center;
	flex-shrink: 0;
}

.tbt-tag {
	font-size:      var(--tbt-font-sm);
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:        6px 13px 5px;
	border-radius:  4px;
}

.tbt-tag--type {
	background: var(--tbt-ui-1);
	color:    var(--tbt-ui-4);
}

.tbt-tag--type-bright {
	background: var(--tbt-ui-3);
	color:    var(--tbt-white);
}

.tbt-tag--country {
	background: rgba(204,255,140,0.25);
	color:      var(--tbt-acid);
}

/* Chevron — same pattern as FAQ widget */
.tbt-campaign-chevron {
	flex-shrink:     0;
	width:           36px;
	height:          36px;
	border:          1px solid var(--tbt-ui-2);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      transform 0.3s ease;
}

.tbt-campaign-item.is-open .tbt-campaign-chevron {
	transform:    rotate(180deg);
	border-color: var(--tbt-acid);
}

/* Body */
.tbt-campaign-body {
	max-height:    0;
	overflow:      hidden;
	transition:    max-height 0.4s ease;
	border-bottom: 1px solid var(--tbt-acid);
}

.tbt-campaign-body-inner.has-photo {
	display:               grid;
	grid-template-columns: 42% 1fr;
	gap:                   20px;
	padding:               0;
}

.tbt-campaign-body-inner.no-photo {
	padding:   0;
	max-width: 860px;

	.tbt-campaign-detail {
		padding: 0px 50px 30px;
	}
}

.tbt-campaign-photo img {
	width:         100%;
	aspect-ratio: 1 / 1;
	object-fit:    cover;
	vertical-align: top;
}

.tbt-campaign-about-label {
	font-size:   var(--tbt-font-xl);
	font-family: var(--tbt-font-heading);
	font-weight:    800;
	color:          var(--tbt-acid);
	margin-bottom:  12px;
}

.tbt-campaign-project-info {
	font-size:   var(--tbt-font-md);
	color: var(--tbt-white);
	line-height: 1.7;
}

.tbt-campaign-project-info p {
	margin-bottom: 1em;
}

/* Contextual spacing for campaign action button */
.tbt-campaign-detail .tbt-btn {
	margin-top: 18px;
}

.tbt-campaign-detail {
	padding: 30px 50px;
}

/* Filter transitions */
.tbt-campaign-item {
	transition: opacity var(--tbt-transition), transform var(--tbt-transition);
}

.tbt-campaign-item.is-leaving {
	opacity:   0;
	transform: translateY(10px);
}

.tbt-campaign-item.is-entering {
	opacity:   0;
	transform: translateY(-10px);
}

/* Mobile */
@media ( max-width: 768px ) {
	.tbt-campaigns-toolbar {
		flex-direction: column;
		align-items:    flex-start;
	}

	.tbt-campaign-trigger {
		flex-wrap: wrap;
		gap:       10px;
		padding: 1em 10px;
	}

	.tbt-campaign-tags {
		width:           100%;
		justify-content: flex-start;
		order:           3;
		padding-left:    52px;
	}

	.tbt-campaign-number {
		font-size:   var(--tbt-font-xl);
	}

	.tbt-campaign-title {
		font-size:   var(--tbt-font-xl);
	}
	.tbt-campaign-org {
		font-size: var(--tbt-font-sm);
	}

	.tbt-campaign-body-inner.has-photo {
		grid-template-columns: 1fr;
	}

	.tbt-tag {
		font-size: 0.6rem;
	}

	.tbt-filter-pill {
		padding:       5px 16px;
		font-size:     var(--tbt-font-sm);
	}
	.tbt-sort-select {
		font-size:     var(--tbt-font-sm);
	}

}

@media ( min-width: 769px ) and ( max-width: 1150px ) {
	.tbt-campaign-body-inner.has-photo {
		grid-template-columns: 1fr;
	}

	.tbt-campaign-trigger {
		flex-wrap: wrap;
	}

	.tbt-campaign-tags {
		width:            100%;
		justify-content:  flex-start;
		order:            3;
		padding-left:     52px;
	}

	.tbt-campaign-photo {
		order: 1;
	}

	.tbt-campaign-detail {
		order: 0;
	}
}

/* -------------------------------------------------------------------------
   Signposts
   ------------------------------------------------------------------------- */

.tbt-signposts-header {
	text-align:     center;
	/* margin-bottom:  48px; */
	padding:        7em 20px 7em;
}

.tbt-signposts-heading {
	font-size:      var(--tbt-font-display);
	font-weight:    900;
	color:          var(--tbt-navy);
	text-transform: uppercase;
	font-family:    var(--tbt-font-heading);
	margin-bottom:  16px;
	line-height:    1;
}

.tbt-signposts-intro {
	font-size:   var(--tbt-font-lg);
	color:       var(--tbt-navy);
	max-width:   38em;
	margin:      0 auto;
	line-height: 1.6;
	font-family: var(--tbt-font-body);
}

.tbt-signposts-grid {
	display: grid;
	gap:     4px;
	background: var(--tbt-navy);
	padding: 4px;
}

.tbt-signposts-grid--3 {
	grid-template-columns: repeat(3, 1fr);

	.tbt-signpost {
		aspect-ratio:    5/6;
	}
}

.tbt-signposts-grid--2 {
	grid-template-columns: repeat(2, 1fr);

	.tbt-signpost {
		aspect-ratio:    8/5;
	}
}

.tbt-signpost {
	display:         block;
	position:        relative;
	text-decoration: none;
	overflow:        hidden;
}

.tbt-signpost-image {
	position:        absolute;
	inset:           0;
	background:      var(--tbt-ui-1);
}

.tbt-signpost-image img {
	width:      100%;
	height:     100%;
	filter: grayscale(0.6);
	object-fit: cover;
	transition: transform 0.6s ease;
	display:    block;
}

.tbt-signpost:hover .tbt-signpost-image img {
	transform: scale(1.05);
}

.tbt-signpost-overlay {
	position:   absolute;
	inset:      0;
	background: rgba(1, 0, 40, 0.3);
	);
	transition: opacity var(--tbt-transition);
}

.tbt-signpost:hover .tbt-signpost-overlay {
	opacity: 0.65;
}

.tbt-signpost-label {
	position:       absolute;
	inset:          0;
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        24px;
	font-size:      var(--tbt-font-4xl);
	font-weight:    900;
	max-width: 6em;
	text-transform: uppercase;
	text-align:     center;
	color:          var(--tbt-acid);
	font-family:    var(--tbt-font-heading);
	line-height:    0.85;
	margin: 0 auto;
	transition: transform 0.6s ease;
	z-index:        1;
}
.tbt-signpost:hover .tbt-signpost-label {
	transform: scale(0.975);
}

/*
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.tbt-signposts-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.tbt-signposts-grid--3 .tbt-signpost:last-child:nth-child(odd) {
		grid-column: span 2;
	}
} */

@media ( max-width: 768px ) {
	.tbt-signposts-grid--3,
	.tbt-signposts-grid--2 {
		grid-template-columns: 1fr;
	}

	.tbt-signpost {
		aspect-ratio: 16/8 !important;
	}

	.tbt-signpost-label {
		font-size: var(--tbt-font-3xl);
	}

	.tbt-signposts-heading {
		font-size: var(--tbt-font-4xl);
	}

	.tbt-signposts-intro {
		font-size:   var(--tbt-font-md);
	}

	.tbt-campaign-detail {
		padding: 20px 20px;
		font-size: var(--tbt-font-base);
	}
	.tbt-campaign-project-info {
		font-size: var(--tbt-font-base);
	}
}

@media ( min-width: 768px )  and ( max-width: 1280px ) {
	.tbt-signpost-label {
		font-size: var(--tbt-font-3xl);
	}

	.tbt-signposts-heading {
		font-size: var(--tbt-font-3xl);
	}
}