/*
 * GCN Directory — archive listings and search.
 *
 * GeoDirectory renders archives with AyeCode UI, a Bootstrap 5 build, so the
 * markup is .card / .card-body / .form-control and cannot be restructured from
 * a template. This restyles that markup in place using the tokens in
 * gcn-tokens.css, which means it applies everywhere GeoDirectory draws a loop:
 * every post-type archive, search results, and listing widgets.
 *
 * Loaded only on GeoDirectory pages (body.geodir-page).
 */

/* ==========================================================================
   Search form
   ========================================================================== */

.geodir-search-container .geodir-search-form-wrapper {
	padding: var(--gcn-space-5);
	margin-bottom: var(--gcn-space-6) !important;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

.geodir-search-container .geodir-search.row {
	row-gap: var(--gcn-space-3);
}

.geodir-search-container .form-control,
.geodir-search-container .form-select,
.geodir-search-container .select2-selection {
	height: auto;
	min-height: 44px;
	padding: 10px 14px;
	font-size: var(--gcn-text-base);
	color: var(--gcn-text);
	background-color: var(--gcn-surface);
	border: 1px solid var(--gcn-rule-strong);
	border-radius: var(--gcn-radius-sm);
	box-shadow: none;
	transition: border-color var(--gcn-duration) var(--gcn-ease), box-shadow var(--gcn-duration) var(--gcn-ease);
}

.geodir-search-container .form-control::placeholder {
	color: var(--gcn-text-faint);
}

.geodir-search-container .form-control:focus,
.geodir-search-container .form-select:focus,
.geodir-search-container .select2-container--open .select2-selection {
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
	outline: none;
}

/* The submit and "more filters" pair. */
.geodir-search-container .geodir_submit_search,
.geodir-search-container .geodir-search-button-toggle,
.geodir-search-container .btn-primary {
	min-height: 44px;
	padding-inline: var(--gcn-space-5);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast);
	background-color: var(--gcn-brand);
	border: 1px solid var(--gcn-brand);
	border-radius: var(--gcn-radius-sm);
	transition: background-color var(--gcn-duration) var(--gcn-ease);
}

.geodir-search-container .geodir_submit_search:hover,
.geodir-search-container .btn-primary:hover {
	background-color: var(--gcn-brand-strong);
	border-color: var(--gcn-brand-strong);
}

/* The advanced panel: AyeCode ships it as .bg-light, which reads as a grey slab. */
.geodir-search-container .customize_filter_inner {
	margin-top: var(--gcn-space-4) !important;
	padding: var(--gcn-space-4) var(--gcn-space-3) var(--gcn-space-1) !important;
	background: var(--gcn-surface-sunken) !important;
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
}

.geodir-search-container label,
.geodir-search-container .gd-search-field-title {
	margin-bottom: var(--gcn-space-1);
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: 0.02em;
	color: var(--gcn-text-muted);
}

/* ==========================================================================
   Toolbar — sort, layout switch, saved search
   ========================================================================== */

.geodir-sort-by .btn,
.geodir-loop-actions .btn,
.geodir-save-search .btn {
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-soft);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule-strong);
	border-radius: var(--gcn-radius-sm);
}

.geodir-sort-by .btn:hover,
.geodir-loop-actions .btn:hover {
	color: var(--gcn-brand-strong);
	border-color: var(--gcn-brand-border);
	background: var(--gcn-brand-soft);
}

/* ==========================================================================
   Listing cards
   ========================================================================== */

.geodir-post > .card,
.geodir-loop-container .card {
	overflow: hidden;
	background: var(--gcn-surface-raised);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
	transition:
		transform var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.geodir-post > .card:hover {
	transform: translateY(-2px);
	border-color: var(--gcn-rule-strong);
	box-shadow: var(--gcn-shadow-lg);
}

.geodir-post .card-img-top {
	border-radius: 0;
}

.geodir-post .card-img-top img {
	transition: transform 0.4s var(--gcn-ease);
}

.geodir-post > .card:hover .card-img-top img {
	transform: scale(1.04);
}

/* Deliberately not a column flex: GeoDirectory wraps each badge in its own
   .gd-badge-meta span, and as flex items consecutive badges each take a full
   row. Normal flow lets them sit on one line; spacing comes from margins. */
.geodir-post .card-body {
	padding: var(--gcn-space-5) !important;
}

.geodir-post .card-body > * {
	margin-top: var(--gcn-space-3);
}

.geodir-post .card-body > *:first-child {
	margin-top: 0;
}

/* Consecutive badges belong to one row, so only the first one carries the gap. */
.geodir-post .card-body > .gd-badge-meta {
	margin-top: var(--gcn-space-3);
}

.geodir-post .card-body > .gd-badge-meta + .gd-badge-meta {
	margin-top: 0;
}

.geodir-post .geodir-entry-title,
.geodir-post .geodir-entry-title.h5 {
	margin: 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-snug);
	letter-spacing: var(--gcn-tracking-tight);
}

.geodir-post .geodir-entry-title a {
	color: var(--gcn-text);
	text-decoration: none;
}

.geodir-post .geodir-entry-title a:hover {
	color: var(--gcn-brand-strong);
}

.geodir-post .geodir-output-location,
.geodir-post .geodir-post-meta,
.geodir-post .card-body p {
	font-size: var(--gcn-text-base);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-soft);
}

/* --------------------------------------------------------------------------
   Excerpt

   GeoDirectory clips the excerpt with an inline max-height and drops an
   absolutely positioned "Read more" over it behind a white gradient, so the
   link lands on top of the last line of text and every card ends up a
   different height. Both the clip and the link position are inline styles, so
   overriding them needs !important. Clamp the text to a fixed number of lines
   instead and put the link back in the flow.
   -------------------------------------------------------------------------- */

.geodir-post .geodir-field-post_content {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	max-height: none !important;
	overflow: hidden !important;
	font-size: var(--gcn-text-base);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-soft);
}

/* Hidden rather than restyled: the anchor sits inside the clamped box, so any
   version of it that stays in the flow is clipped along with the text. The card
   title already links to the listing and the whole card is the target. */
.geodir-post .gd-read-more-fade {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.geodir-post .gd-badge {
	padding: 4px 10px;
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: var(--gcn-radius-pill);
}

.geodir-post .gd-badge[data-badge="featured"] {
	color: var(--gcn-accent);
	background: var(--gcn-accent-soft);
	border: 1px solid var(--gcn-accent-border);
}

/* --------------------------------------------------------------------------
   Favourite
   -------------------------------------------------------------------------- */

.geodir-post .geodir-addtofav {
	color: var(--gcn-text-faint);
}

.geodir-post .geodir-addtofav:hover,
.geodir-post .geodir-addtofav.gd-fav-active {
	color: var(--gcn-critical);
}

/* ==========================================================================
   Grid rhythm
   ========================================================================== */

/* The grid is .geodir-listing-posts, not .geodir-loop-container — that is the
   outer wrapper. Setting the gutters on the wrapper did nothing while the
   margin reset below removed AyeCode's own .mb-4, which left the rows touching. */
.geodir-listing-posts.row,
.geodir-loop-container .row {
	--bs-gutter-x: var(--gcn-space-6);
	--bs-gutter-y: var(--gcn-space-6);
}

/* Spacing comes from the row gutter, so the per-card margin would double it. */
.geodir-post.col {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.geodir-pagination .page-link,
.geodir-page .pagination .page-link {
	min-width: 40px;
	font-size: var(--gcn-text-base);
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-soft);
	text-align: center;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-sm);
	margin-inline: 3px;
}

/* AyeCode marks the current page on the link itself, as
   <span class="page-link current active">, not on the parent .page-item, so a
   .page-item.active .page-link rule never matches. */
.geodir-page .pagination .page-link.active,
.geodir-page .pagination .page-link.current,
.geodir-page .pagination .page-item.active .page-link {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

/* The current page is not a link, so it must not react to hover. */
.geodir-page .pagination span.page-link.current:hover {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

/* Centred under the grid, with room between it and the last row of cards. */
.geodir-loop-paging-container {
	margin-top: var(--gcn-space-10);
}

.geodir-loop-paging-container .aui-nav-links,
.geodir-page .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gcn-space-1);
}

.geodir-loop-paging-container .navigation,
.geodir-loop-paging-container section {
	width: 100%;
}

.geodir-page .pagination .page-link:hover {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-color: var(--gcn-brand-border);
}

/* ==========================================================================
   Whole-card affordance

   With the "Read more" link removed, the card needs to read as one target.
   The title anchor is stretched across the card; the favourite control and any
   badge links are lifted back above it so they stay clickable.
   ========================================================================== */

.geodir-post > .card {
	position: relative;
}

.geodir-post .geodir-entry-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.geodir-post .gd-fav-info-wrap,
.geodir-post .gd-badge-meta,
.geodir-post .card-img-top a {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Favourite
   AyeCode marks the control with .h5, so it renders at heading size next to a
   three-line excerpt. It is a secondary action and should read as one.
   -------------------------------------------------------------------------- */

.geodir-post .geodir-addtofav,
.geodir-post .geodir-addtofav.h5 {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	font-size: var(--gcn-text-sm) !important;
	font-weight: var(--gcn-weight-medium);
	color: var(--gcn-text-muted);
}

.geodir-post .geodir-fav-text {
	font-size: var(--gcn-text-sm);
}

.geodir-post .gd-fav-info-wrap {
	margin-top: var(--gcn-space-1);
}

/* --------------------------------------------------------------------------
   Address on a card
   GeoDirectory emits the schema.org PostalAddress parts separated by <br>,
   which is right on a detail page and four lines too tall on a card. Flatten
   it to a single muted line and let it truncate.
   -------------------------------------------------------------------------- */

.geodir-post .geodir-field-address {
	display: block;
	overflow: hidden;
	/* Zero here collapses the newlines between the parts, which would otherwise
	   render as a space before each comma. The parts set their own size back. */
	font-size: 0;
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.geodir-post .geodir-field-address br {
	display: none;
}

.geodir-post .geodir-field-address span {
	font-size: var(--gcn-text-sm);
}

/* General sibling, not adjacent: the parts are separated by <br> elements, so
   span + span never matches. */
.geodir-post .geodir-field-address span ~ span::before {
	content: ", ";
}

/* A pin before the address. Drawn as a masked SVG rather than an icon font:
   the shortcode drops its icon when show='value', and a mask takes its colour
   from the token so it cannot drift from the rest of the palette. */
.geodir-post .geodir-field-address::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: 6px;
	vertical-align: -1px;
	background-color: var(--gcn-brand);
	-webkit-mask-image: var(--gcn-icon-pin);
	mask-image: var(--gcn-icon-pin);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.geodir-post .geodir-field-address .geodir-i-location,
.geodir-post .geodir-field-address i {
	margin-right: var(--gcn-space-2);
	color: var(--gcn-brand);
}

/* --------------------------------------------------------------------------
   Contact icons

   Website, Facebook and X, as quiet circular buttons on one row. GeoDirectory
   renders each as a .gd-badge anchor with a float, so the float is cleared and
   the row rebuilt with flex; inline bg/border colours from the shortcode are
   overridden here so the palette stays in the token file.
   -------------------------------------------------------------------------- */

.geodir-post .gd-badge-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	align-items: center;
}

.geodir-post a.gd-badge[data-badge="website"],
.geodir-post a.gd-badge[data-badge="facebook"],
.geodir-post a.gd-badge[data-badge="twitter"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none !important;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0 !important;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted) !important;
	background-color: var(--gcn-surface) !important;
	border: 1px solid var(--gcn-rule-strong) !important;
	border-radius: var(--gcn-radius-pill);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease);
}

.geodir-post a.gd-badge[data-badge="website"]:hover,
.geodir-post a.gd-badge[data-badge="facebook"]:hover,
.geodir-post a.gd-badge[data-badge="twitter"]:hover {
	color: var(--gcn-brand-strong) !important;
	background-color: var(--gcn-brand-soft) !important;
	border-color: var(--gcn-brand-border) !important;
}

.geodir-post a.gd-badge i {
	margin: 0;
}

/* The shortcode still emits an empty label span next to the icon. */
.geodir-post a.gd-badge .gd-secondary:empty,
.geodir-post a.gd-badge .gv-secondary:empty {
	display: none;
}

/* Status badges keep their pill shape and sit on their own row above these. */
.geodir-post .gd-badge:not([data-badge="website"]):not([data-badge="facebook"]):not([data-badge="twitter"]) {
	float: none !important;
	margin: 0 !important;
}



/* ==========================================================================
   First section

   The header templates set a shared top rhythm on the first section after a
   sticky header (--section-space-m, about 120px). That suits a page opening on
   a hero; an archive opens on a filter bar, which reads as stranded that far
   below the header. Overriding needs !important because the shared rule
   carries it.
   ========================================================================== */

body.geodir-archive #brx-content > .brxe-section:first-child,
body.geodir-page-single #brx-content > .brxe-section:first-child,
body[class*="geodir-page-cpt-"] #brx-content > .brxe-section:first-child {
	padding-top: var(--gcn-space-8) !important;
}

/* ==========================================================================
   Archive map

   Sits between the search panel and the listings. Styled to match the search
   panel above it so the two read as one control surface rather than a map
   dropped into the page.
   ========================================================================== */

.geodir-archive .geodir-map-wrap,
.geodir-page .geodir-wgt-map .geodir-map-wrap {
	overflow: hidden;
	margin-bottom: var(--gcn-space-6);
	background: var(--gcn-surface-sunken);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
}

/* GeoDirectory's sticky-map trigger is a Bootstrap secondary button. */
.geodir-page .trigger_sticky {
	color: var(--gcn-text-soft);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule-strong);
	border-radius: var(--gcn-radius-sm);
}

.geodir-page .trigger_sticky:hover {
	color: var(--gcn-brand-strong);
	border-color: var(--gcn-brand-border);
	background: var(--gcn-brand-soft);
}

/* ==========================================================================
   People cards
   ==========================================================================

   A person's card carries a portrait rather than a photograph of a place, so
   the left column becomes a round frame instead of a 16:9 banner. The portrait
   shortcode returns either an <img> or an initials tile, and both sit in the
   same frame.

   Everything on this card is consent-gated in PHP — see
   bin/apply-remaining-cards.php. Nothing here should ever be used to hide a
   field that PHP has decided to print: CSS is not a privacy control.
   ========================================================================== */

/*
 * The grid.
 *
 * GeoDirectory lays the loop out with Bootstrap's row-cols classes, which said
 * two per row at every desktop width and one per row wherever that stylesheet
 * is not in charge — so a page of four people read as a column of banners.
 * Stating the grid here makes the People archive independent of which loop
 * layout the template asks for: as many columns as fit, each card the same
 * height as its neighbours.
 */
.geodir-page-cpt-gd_person .geodir-listing-posts,
.geodir-page-cpt-gd_person .geodir-category-list-view {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	align-content: start;
	align-items: stretch;
	gap: var(--gcn-space-6);
}

.geodir-page-cpt-gd_person .geodir-listing-posts > .geodir-post,
.geodir-page-cpt-gd_person .geodir-category-list-view > .geodir-post {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: none;
}

/*
 * Cards in a row share a height.
 *
 * The grid view sets align-items: start further up this file — right for a
 * masonry-ish grid of mixed cards, wrong here, where a row of portraits with
 * bios of different lengths ended up ragged. Named with the same three classes
 * plus the post type so it wins on merit rather than on order.
 */
.geodir-page-cpt-gd_person .geodir-loop-container .geodir-listing-posts.geodir-gridview,
.geodir-page-cpt-gd_person .geodir-loop-container .geodir-listing-posts {
	align-items: stretch;
}

.geodir-page-cpt-gd_person .geodir-post > .card {
	height: 100%;
}

.geodir-page-cpt-gd_person .geodir-post .card-img-top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gcn-space-6) var(--gcn-space-6) 0;
	background: transparent;
}

.geodir-page-cpt-gd_person .geodir-post .card-img-top img,
.geodir-page-cpt-gd_person .geodir-post .gcn-person__initials {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
}

.geodir-page-cpt-gd_person .geodir-post .gcn-person__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
}

/* The portrait is decoration on a card, so it does not zoom on hover. */
.geodir-page-cpt-gd_person .geodir-post > .card:hover .card-img-top img {
	transform: none;
}

.geodir-page-cpt-gd_person .geodir-post .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: var(--gcn-space-5) var(--gcn-space-5) var(--gcn-space-6);
	text-align: center;
}

.geodir-page-cpt-gd_person .geodir-post .gcn-chips {
	justify-content: center;
}

/*
 * The detail row — Languages, and anything else consent allows.
 *
 * .gcn-detail is a two-column grid built for a left-aligned single, where the
 * icon sits in its own 20px track. On a centred card that track pinned the
 * icon to the far left with the text floating in the middle, so the row is
 * re-laid as a centred flex line for this card only.
 */
.geodir-page-cpt-gd_person .geodir-post .gcn-detail {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gcn-space-2);
	margin-top: auto;
	padding-top: var(--gcn-space-4);
}

.geodir-page-cpt-gd_person .geodir-post .gcn-detail__icon {
	margin-top: 0;
}

.geodir-page-cpt-gd_person .geodir-post .gcn-detail__text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.geodir-page-cpt-gd_person .geodir-post .gcn-person__card-bio {
	margin: 0;
}

.gcn-person__card-bio {
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
}

/* ==========================================================================
   GCN Team cards
   ========================================================================== */

/*
 * A facilitating team has no address worth printing, so its card leads on
 * scope and focus. The rows are tighter than a listing's because there are
 * more of them and none is a headline.
 */
.geodir-page-cpt-gd_gcn_team .geodir-post .gcn-detail {
	font-size: var(--gcn-text-sm);
}

/*
 * A card whose picture slot is empty.
 *
 * [gd_post_images] renders nothing when a listing has no photograph, but
 * GeoDirectory still emits the wrapper — containing only whitespace, so :empty
 * does not match it. Left alone it reserves space and draws the card's top
 * corners around nothing, which is what several Resources cards looked like
 * once their misattributed stock images were removed.
 *
 * :not(:has(*)) is the test that actually works here: no ELEMENT children,
 * whitespace notwithstanding.
 */
.geodir-post .card-img-top:not(:has(*)) {
	display: none;
}

/* ==========================================================================
   The loop toolbar — sort, view switch, save search
   ==========================================================================

   GeoDirectory renders this above the results as Bootstrap outline buttons, in
   Bootstrap's own blue, inside a div that carries `justify-content-end` but no
   `d-flex` — so the property does nothing and the controls sit as inline
   blocks with no gap, running into the first result.

   Three fixes: make the toolbar an actual flex row, give it room, and bring the
   buttons onto the site's palette. The markup is GeoDirectory's and cannot be
   changed from a template, so this styles what it emits.
   ========================================================================== */

.geodir-loop-actions-container [role="toolbar"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	align-items: center;
	margin-bottom: var(--gcn-space-6) !important;
}

.geodir-loop-actions-container .btn-group {
	gap: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.geodir-loop-actions-container .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 0.6em 1.1em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	line-height: 1.2;
	color: var(--gcn-text-soft);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	box-shadow: none;
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.geodir-loop-actions-container .btn:hover,
.geodir-loop-actions-container .btn:focus-visible {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-color: var(--gcn-brand-border);
}

/* Bootstrap's active state is a solid blue fill; this is the brand equivalent. */
.geodir-loop-actions-container .btn.active,
.geodir-loop-actions-container .btn[aria-expanded="true"] {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

.geodir-loop-actions-container .btn i {
	font-size: 0.9em;
	opacity: 0.75;
}

/* A group reads as one control: inner corners square, one shared border. */
.geodir-loop-actions-container .btn-group > .btn:not(:first-child) {
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.geodir-loop-actions-container .btn-group > .btn:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.geodir-loop-actions-container .btn-group > .btn:hover,
.geodir-loop-actions-container .btn-group > .btn.active {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Dropdowns
   -------------------------------------------------------------------------- */

.geodir-loop-actions-container .dropdown-menu {
	padding: var(--gcn-space-2) !important;
	margin-top: var(--gcn-space-2) !important;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	box-shadow: var(--gcn-shadow-md);
}

.geodir-loop-actions-container .dropdown-header {
	padding: var(--gcn-space-2) var(--gcn-space-3);
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-muted);
}

.geodir-loop-actions-container .dropdown-item {
	padding: 0.55em 0.85em;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-soft);
	border-radius: var(--gcn-radius-sm);
}

.geodir-loop-actions-container .dropdown-item:hover,
.geodir-loop-actions-container .dropdown-item:focus {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

.geodir-loop-actions-container .dropdown-item.active {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
}

/* ==========================================================================
   Search results page
   ========================================================================== */

/*
 * GeoDirectory's own admin hint box. Useful to an editor, but it is rendered
 * inside the results and inherits none of the page's spacing.
 */
.geodir-search-page .geodir-admin-hint,
.geodir-page .geodir-admin-hint {
	margin-bottom: var(--gcn-space-6);
	border-radius: var(--gcn-radius-md);
}

/*
 * A search can return one result. The loop container is a grid, so a single
 * card stretched the full width and its picture grew to match — which is why a
 * lone event looked nothing like the same event on its archive.
 */
.geodir-loop-container .geodir-listing-posts.geodir-gridview {
	align-items: start;
}

/* ==========================================================================
   List view
   ==========================================================================

   The toolbar's grid/list toggle swaps the row's `row-cols-md-N` class on the
   client. AyeCode's own rule for the list value is only:

       .row-cols-md-0 .card { display: inline-flex; flex-flow: row wrap }

   — no width on either child. So the picture and the text divided the row
   arbitrarily, which is what made a searched event look nothing like the same
   event on its archive.

   This gives the picture a fixed column and lets the text take the rest.
   Everything inside the card body is the post type's own card markup and is
   already styled; only the frame changes.
   ========================================================================== */

.row-cols-md-0 .card {
	flex-flow: row nowrap;
	align-items: stretch;
}

.row-cols-md-0 .card-img-top {
	flex: 0 0 clamp(180px, 26%, 300px);
	max-width: 300px;
	align-self: flex-start;
	background: var(--gcn-surface-sunken);
}

/*
 * The picture keeps its 16:9 box rather than stretching to the card's height.
 * GeoDirectory sizes that box with a padding-top pseudo-element and positions
 * the image absolutely inside it; forcing it to fill collapses the box to zero
 * height. align-self above stops it stretching and leaving a torn edge.
 */
.row-cols-md-0 .card-img-top .ratio {
	border-radius: 0;
}

.row-cols-md-0 .card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--gcn-space-5) var(--gcn-space-6) !important;
}

/* A card with no picture uses the whole row rather than leaving a gap. */
.row-cols-md-0 .card-img-top:not(:has(*)) {
	display: none;
}

/* The list is a stack of rows, so the rhythm comes from one gap. */
.row-cols-md-0 > * {
	margin-bottom: var(--gcn-space-4) !important;
}

@media (max-width: 640px) {

	.row-cols-md-0 .card {
		flex-flow: column nowrap;
	}

	.row-cols-md-0 .card-img-top {
		flex-basis: auto;
		max-width: none;
		align-self: stretch;
	}

	.row-cols-md-0 .card-body {
		padding: var(--gcn-space-4) !important;
	}
}