/*
Organizations Listing (and future Challenges/Campaigns listings, which reuse the same
card/pagination classes once those pages exist).
 */
.ListingInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	padding-inline:                var(--Viewport-InlinePadding);
}

.ListingTitle {
	color:                         #ffffff;
	font-size:                     32px;
	line-height:                   1;
	margin:                        0 0 24px;
}

/*
Search toolbar — a plain input, not a Form/* component, since it only ever posts as a
PaginatedList filter param (see JS/Listing.js), never a real form submission.
 */
.ListingToolbar {
	margin-bottom:                 24px;
}

.ListingSearch {
	align-items:                   center;
	background-color:              rgba(255, 255, 255, 0.08);
	border:                        1px solid rgba(255, 255, 255, 0.16);
	border-radius:                 12px;
	display:                       flex;
	height:                        56px;
	padding-inline:                16px;
}

.ListingSearchIcon {
	background-color:              rgba(255, 255, 255, 0.6);
	flex-shrink:                   0;
	height:                        20px;
	mask:                          url("/Images/IconSearch.svg") no-repeat center / contain;
	width:                         20px;
}

.ListingSearchInput {
	appearance:                    none;
	background:                    transparent;
	border:                        none;
	color:                         #ffffff;
	flex:                          1;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     16px;
	margin-left:                   12px;
	padding:                       0;
}

.ListingSearchInput::placeholder {
	color:                         rgba(255, 255, 255, 0.6);
}

.ListingSearchInput:focus-visible {
	outline:                       none;
}

/*
Cards — the white rounded box holds only the logo; the title sits below it in the page's
own white text, per the Sketch Organizations frame (not a bordered card containing both).
 */
.ListingCards {
	display:                       flex;
	flex-direction:                column;
	gap:                           24px;
}

.ListingCard {
	color:                         #ffffff;
	display:                       flex;
	flex-direction:                column;
	gap:                           16px;
	text-decoration:               none;
}

.ListingCardImageArea {
	align-items:                   center;
	background-color:              #ffffff;
	border-radius:                 24px;
	display:                       flex;
	height:                        180px;
	justify-content:               center;
	overflow:                      hidden;
	padding:                       24px;
}

.ListingCardImage {
	max-height:                    100%;
	max-width:                     100%;
	object-fit:                    contain;
}

.ListingCardTitle {
	font-size:                     16px;
	font-weight:                   700;
	line-height:                   20px;
}

.ListingEmptyState {
	color:                         rgba(255, 255, 255, 0.8);
	padding:                       40px 0;
	text-align:                    center;
}

/*
Pagination — Sketch Pagination/Full: 40x40 circular cells at a 48px pitch (8px gap),
arrows either side. Colors read off the Pagination/Page/Active and .../Default symbols.
 */
.Pagination {
	align-items:                   center;
	display:                       flex;
	gap:                           8px;
	justify-content:               center;
	margin-top:                    40px;
}

.PaginationPages {
	align-items:                   center;
	display:                       flex;
	gap:                           8px;
}

.PaginationArrow {
	align-items:                   center;
	border-radius:                 50%;
	color:                         #ffffff;
	display:                       flex;
	height:                        40px;
	justify-content:               center;
	width:                         40px;
}

.PaginationArrowIcon {
	background-color:              currentColor;
	height:                        16px;
	mask:                          url("/Images/IconBackArrow.svg") no-repeat center / contain;
	width:                         16px;
}

.PaginationArrowForward .PaginationArrowIcon {
	transform:                     rotate(180deg);
}

.PaginationArrowDisabled {
	opacity:                       0.3;
	pointer-events:                none;
}

.PaginationPage,
.PaginationEllipsis {
	align-items:                   center;
	border-radius:                 50%;
	color:                         #ffffff;
	display:                       flex;
	font-weight:                   700;
	height:                        40px;
	justify-content:               center;
	text-decoration:               none;
	width:                         40px;
}

.PaginationEllipsis {
	color:                         rgba(255, 255, 255, 0.6);
	font-weight:                   400;
}

.PaginationPageActive {
	background-color:              var(--Colors-Brand-Secondary);
	color:                         var(--Colors-Brand-Primary);
}

/*
Suggestion panel — "Have a charity in mind?" / Add Suggestion, with the globe
illustration clipped to the panel's rounded corners.
 */
.ListingSuggestion {
	background-color:              rgba(255, 255, 255, 0.06);
	border-radius:                 24px;
	margin-top:                    48px;
	overflow:                      hidden;
	padding:                       24px 24px 148px;
	position:                      relative;
}

.ListingSuggestionTitle {
	color:                         #ffffff;
	font-size:                     28px;
	line-height:                   1.15;
	margin:                        0 0 24px;
	max-width:                     220px;
	position:                      relative;
}

.ListingSuggestionButton {
	position:                      relative;
	width:                         100%;
	z-index:                       1;
}

.ListingSuggestionImage {
	bottom:                        12px;
	pointer-events:                none;
	position:                      absolute;
	right:                         12px;
	width:                         150px;
}