/**
 * The Directory homepage.
 *
 * homepage-layout.json gives ten sections a display style each — icon tiles,
 * map plus cards, plain cards, logo cards, map/list. This renders those five
 * treatments from one card, varied by modifier, rather than five unrelated
 * layouts: the page has to read as one thing, and a reader scanning it is
 * comparing sections, not admiring them separately.
 */

.gcn-home {
	--gcn-home-gutter: var(--gcn-space-6);
}

/* ==========================================================================
   Hero and search
   ========================================================================== */

.gcn-home__hero {
	position: relative;
	overflow: hidden;
	color: var(--gcn-text-inverse);
	background:
		radial-gradient(70% 120% at 8% 0%, rgba(28, 158, 128, 0.55) 0%, rgba(20, 122, 100, 0) 62%),
		radial-gradient(60% 110% at 100% 100%, rgba(214, 141, 48, 0.3) 0%, rgba(191, 124, 42, 0) 56%),
		linear-gradient(155deg, #10241f 0%, #0a1412 58%, #101d1a 100%);
}

.gcn-home__hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--gcn-brand-rule);
}

.gcn-home__hero > .brxe-container {
	position: relative;
	z-index: 1;
}

.gcn-home__title {
	max-width: 18ch;
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	font-weight: var(--gcn-weight-bold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: #fff;
}

.gcn-home__standfirst {
	max-width: 56ch;
	font-size: var(--gcn-text-xl);
	line-height: var(--gcn-leading-relaxed);
	color: rgba(255, 255, 255, 0.82);
}

/* GeoDirectory's search form, brought onto the site's own surface. */
.gcn-home__search .geodir-listing-search,
.gcn-home__search .gd-search-bar-wrap {
	padding: var(--gcn-space-4);
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--gcn-radius-lg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.gcn-home__search input,
.gcn-home__search select {
	border-radius: var(--gcn-radius-md) !important;
}

/* ==========================================================================
   Explore tiles
   ========================================================================== */

.gcn-home__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--gcn-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-home__tile-link {
	display: flex;
	flex-direction: column;
	gap: var(--gcn-space-2);
	height: 100%;
	padding: var(--gcn-space-6);
	color: inherit;
	text-decoration: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	transition:
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-home__tile-link:hover {
	color: inherit;
	border-color: var(--gcn-brand-border);
	box-shadow: var(--gcn-shadow-md);
	transform: translateY(-2px);
}

.gcn-home__tile-icon {
	width: 1.7rem;
	height: 1.7rem;
	background-color: var(--gcn-brand);
	-webkit-mask: var(--gcn-detail-icon) center / contain no-repeat;
	mask: var(--gcn-detail-icon) center / contain no-repeat;
}

.gcn-home__tile-label {
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

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

/* ==========================================================================
   Sections
   ========================================================================== */

.gcn-home__section + .gcn-home__section {
	margin-top: var(--gcn-space-16);
}

.gcn-home__section-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-4);
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--gcn-space-6);
}

.gcn-home__section-title {
	font-size: var(--gcn-text-2xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-home__section-stand {
	margin-top: var(--gcn-space-2);
	max-width: 60ch;
	font-size: var(--gcn-text-md);
	color: var(--gcn-text-muted);
}

/*
 * The member flag.
 *
 * These two sections are already hidden from anyone without collaboration
 * access, so the flag is not a lock — it tells a member who CAN see it that
 * what they are looking at is not public, which matters before they share a
 * link to it.
 */
.gcn-home__member-flag {
	padding: 0.35em 0.85em;
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-notice);
	background: var(--gcn-notice-soft);
	border-radius: var(--gcn-radius-pill);
}

/*
 * The right-hand side of a section head: the member flag, and the Add button.
 */
.gcn-home__section-aside {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-3);
	align-items: center;
}

/*
 * Add, from where you already are.
 *
 * Quieter than the header's Add listing button on purpose — this is one of
 * eight on the page, and the records are what the reader came for.
 */
.gcn-home__section-add {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-1);
	padding: 0.5em 1.05em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	text-decoration: none;
	white-space: nowrap;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-brand-border);
	border-radius: var(--gcn-radius-pill);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-home__section-add:hover,
.gcn-home__section-add:focus-visible {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
	outline: none;
}

.gcn-home__section-add span {
	font-size: 1.05em;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.gcn-home__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--gcn-home-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-home__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	transition:
		border-color var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-home__card-link:hover {
	color: inherit;
	border-color: var(--gcn-brand-border);
	box-shadow: var(--gcn-shadow-md);
	transform: translateY(-2px);
}

.gcn-home__card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--gcn-surface-sunken);
}

.gcn-home__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-home__card-link:hover .gcn-home__card-media img {
	transform: scale(1.04);
}

/* No picture: a monogram, so the grid keeps its rhythm. */
.gcn-home__card-media--mark {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--gcn-text-2xl);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-wide);
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

.gcn-home__card-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.25em;
	padding: var(--gcn-space-5);
}

.gcn-home__card-title {
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
}

.gcn-home__card-link:hover .gcn-home__card-title {
	color: var(--gcn-brand-strong);
}

.gcn-home__card-note {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

/*
 * Logo cards.
 *
 * A partner's mark is a logo on a white ground, not a photograph — cropping it
 * to fill would cut it, so it is contained and given room.
 */
.gcn-home__card--logo .gcn-home__card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: var(--gcn-space-5);
	background: var(--gcn-surface);
}

.gcn-home__card--logo .gcn-home__card-media img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.gcn-home__card--logo .gcn-home__card-link:hover .gcn-home__card-media img {
	transform: none;
}

.gcn-home__card--logo .gcn-home__card-text {
	padding-top: 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Primary action
   -------------------------------------------------------------------------- */

.gcn-home__section-action {
	margin-top: var(--gcn-space-6);
}

.gcn-home__action {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 0.75em 1.4em;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	text-decoration: none;
	background: transparent;
	border-radius: var(--gcn-radius-md);
	box-shadow: inset 0 0 0 1px var(--gcn-brand-border);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

.gcn-home__action:hover {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
}

.gcn-home__action::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	background-color: currentColor;
	-webkit-mask: var(--gcn-icon-arrow-out) center / contain no-repeat;
	mask: var(--gcn-icon-arrow-out) center / contain no-repeat;
}

/* ==========================================================================
   Map band, shared by Heart Places and Hubs
   ========================================================================== */

.gcn-home__map {
	margin-bottom: var(--gcn-space-6);
	overflow: hidden;
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
}

@media (max-width: 640px) {

	.gcn-home {
		--gcn-home-gutter: var(--gcn-space-4);
	}

	.gcn-home__section + .gcn-home__section {
		margin-top: var(--gcn-space-12);
	}
}

/*
 * The section footer: the way out, and how much is behind it.
 *
 * Four records per section is a sample, so the count matters — without it a
 * reader cannot tell a section holding five from one holding fifty.
 */
.gcn-home__section-action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-4);
	align-items: center;
	margin-top: var(--gcn-space-6);
}

.gcn-home__section-count {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

/* ==========================================================================
   The hero's two columns
   ==========================================================================
   The Directory page's third entry point for adding content: the workbook asks
   for it "from the right-hand Add Content area", so the hero splits — the
   search on the left, the panel on the right — and stacks on a narrow screen.
   ========================================================================== */

/*
 * flex-direction is stated, not assumed: a Bricks container is already a
 * column flex parent, so `display: flex` alone leaves the two blocks stacked
 * and full width.
 */
.gcn-home__hero-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gcn-space-10);
	align-items: flex-start;
}

.gcn-home__hero-main {
	flex: 1 1 30rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gcn-space-6);
}

.gcn-home__hero-aside {
	flex: 0 1 22rem;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Add Content
   --------------------------------------------------------------------------
   It sits on the dark hero, so it is a pane of light rather than a white card:
   translucent, so the gradient still reads behind it.
   -------------------------------------------------------------------------- */

.gcn-addpanel {
	padding: var(--gcn-space-6);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--gcn-radius-lg);
	backdrop-filter: blur(6px);
}

.gcn-addpanel__eyebrow {
	margin: 0;
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.gcn-addpanel__title {
	margin: 0.2em 0 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: #fff;
}

.gcn-addpanel__lead {
	margin: var(--gcn-space-2) 0 var(--gcn-space-5);
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: rgba(255, 255, 255, 0.72);
}

.gcn-addpanel__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-addpanel__item + .gcn-addpanel__item {
	margin-top: var(--gcn-space-1);
}

.gcn-addpanel__link {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-3);
	padding: var(--gcn-space-2) var(--gcn-space-3);
	color: #fff;
	text-decoration: none;
	border-radius: var(--gcn-radius-md);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

.gcn-addpanel__link:hover,
.gcn-addpanel__link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.gcn-addpanel__icon {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--gcn-radius-sm);
}

.gcn-addpanel__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.86);
	-webkit-mask: var(--gcn-detail-icon, var(--gcn-icon-tag)) center / 1rem no-repeat;
	mask: var(--gcn-detail-icon, var(--gcn-icon-tag)) center / 1rem no-repeat;
}

.gcn-addpanel__text {
	display: block;
	min-width: 0;
}

.gcn-addpanel__label {
	display: block;
	font-size: var(--gcn-text-base);
	font-weight: var(--gcn-weight-medium);
	line-height: var(--gcn-leading-snug);
}

.gcn-addpanel__blurb {
	display: block;
	font-size: var(--gcn-text-xs);
	line-height: var(--gcn-leading-snug);
	color: rgba(255, 255, 255, 0.58);
}

.gcn-addpanel__all,
.gcn-addpanel__cta {
	display: inline-block;
	margin-top: var(--gcn-space-4);
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: #fff;
	text-decoration: none;
}

.gcn-addpanel__all {
	padding-left: var(--gcn-space-3);
	color: rgba(255, 255, 255, 0.72);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.gcn-addpanel__all:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* Logged out there is one thing to do, so it is a button rather than a list. */
.gcn-addpanel__cta {
	padding: 0.7em 1.4em;
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-radius: var(--gcn-radius-md);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

.gcn-addpanel__cta:hover {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand-strong);
}

@media (max-width: 860px) {

	.gcn-home__hero-row {
		flex-direction: column;
		gap: var(--gcn-space-8);
	}

	.gcn-home__hero-aside {
		flex: 1 1 100%;
	}
}