/*
 * Directory listing — single page.
 *
 * One stylesheet for every listing type. Heart Places, GCN Teams, Events,
 * Resources and the rest share the same page shape — image hero, lead, prose
 * sections, an aside card of details, an optional gallery and map — so they
 * share these rules rather than each carrying a near-identical copy.
 *
 * Everything reads from gcn-tokens.css, which resolves to the GCN palette in
 * the Bricks Style Manager, so a colour change reaches every listing type at
 * once. A post type that genuinely needs to differ adds a modifier class on the
 * section rather than a second stylesheet.
 *
 * Spacing is in px/rem rather than the theme's --space-* tokens: those are
 * defined twice with conflicting values.
 */
/* ---------- Hero ----------------------------------------------------------
 *
 * The listing's own photograph, darkened left to right so the text sits on the
 * solid end of the gradient and the picture stays readable on the open end.
 * The image arrives as --gcn-hero-image, set inline per listing by
 * inc/listing-fields.php; a listing with no photograph falls back to the flat
 * dark ground below, which is why every colour here is chosen to work on dark
 * whether or not the image loads.
 * ------------------------------------------------------------------------- */

.gcn-listing__hero {
	position: relative;
	display: flex;
	/* A Bricks section is a column flex, so the vertical axis is the main axis:
	   align-items would have moved the content sideways. */
	flex-direction: column;
	justify-content: flex-end;
	min-height: 420px;
	background-color: #10161c;
	background-image: var(--gcn-hero-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	isolation: isolate;
}

.gcn-listing__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgba(9, 13, 17, 0.94) 0%,
		rgba(9, 13, 17, 0.86) 34%,
		rgba(9, 13, 17, 0.55) 66%,
		rgba(9, 13, 17, 0.22) 100%
	);
}

/* On a narrow screen the text spans the full width, so the gradient has to run
   top to bottom instead or the right-hand words fall off the dark end. */
@media (max-width: 767px) {

	.gcn-listing__hero {
		min-height: 340px;
	}

	.gcn-listing__hero::before {
		background: linear-gradient(
			180deg,
			rgba(9, 13, 17, 0.55) 0%,
			rgba(9, 13, 17, 0.88) 55%,
			rgba(9, 13, 17, 0.95) 100%
		);
	}
}

/* The identity block keeps to the dark end of the gradient. */
.gcn-listing__identity {
	max-width: 620px;
}

.gcn-listing__crumbs {
	font-size: var(--gcn-text-sm);
	color: rgba(255, 255, 255, 0.62);
}

.gcn-listing__crumbs a,
.gcn-listing__crumbs .item {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.gcn-listing__crumbs a:hover {
	color: var(--gcn-text-inverse);
}

.gcn-listing__eyebrow {
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-brand-border);
}

.gcn-listing__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.gcn-listing__name {
	margin: 8px 0 0;
	font-size: var(--gcn-text-3xl);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text-inverse);
	text-wrap: balance;
}

.gcn-listing__badges {
	margin-top: var(--gcn-space-4);
}

/* ---------- Chips --------------------------------------------------------- */

/* flex-direction is stated because Bricks' .brxe-block is a column flex at the
   same specificity, and its stylesheet loads after this one. */
.gcn-chips {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
}

/* Each chip arrives in its own Bricks shortcode wrapper. Those wrappers are
   blocks, so as flex children they each claim a row; display:contents drops
   them out of the layout and lets the chips themselves be the flex items.
   Keyed on .gcn-chips so every chip row on the site behaves the same. */
.gcn-chips > .brxe-shortcode {
	display: contents;
}

.gcn-chip {
	display: inline-block;
	padding: 5px 13px;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	line-height: 1.5;
	border-radius: var(--gcn-radius-pill);
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border: 1px solid var(--gcn-brand-border);
}

.gcn-chip--positive {
	color: var(--gcn-positive);
	background: var(--gcn-positive-soft);
	border-color: var(--gcn-positive-soft);
}

.gcn-chip--neutral {
	color: var(--gcn-text-soft);
	background: var(--gcn-surface-sunken);
	border-color: var(--gcn-rule);
}

/* On the hero the chips sit on a photograph, so they are frosted rather than
   tinted: a pale fill would disappear against a light patch of image. */
.gcn-listing__hero .gcn-chip {
	color: var(--gcn-text-inverse);
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
}

.gcn-listing__hero .gcn-chip--positive {
	color: #8ff0cd;
	background: rgba(30, 113, 74, 0.34);
	border-color: rgba(143, 240, 205, 0.4);
}

/* ---------- Address ------------------------------------------------------- */

.gcn-address {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: var(--gcn-space-4);
	font-size: var(--gcn-text-base);
	color: var(--gcn-text-muted);
}

.gcn-address .gcn-pin {
	flex: 0 0 auto;
	color: var(--gcn-brand);
}

.gcn-listing__hero .gcn-address {
	color: rgba(255, 255, 255, 0.82);
}

.gcn-listing__hero .gcn-address .gcn-pin {
	color: var(--gcn-brand-border);
}

/* ---------- Body ---------------------------------------------------------- */

.gcn-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: var(--gcn-space-16);
	align-items: start;
}

.gcn-listing__lead {
	font-size: var(--gcn-text-xl);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text);
}

.gcn-listing__prose {
	font-size: var(--gcn-text-lg);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

.gcn-listing__prose p {
	margin: 0 0 1em;
}

.gcn-listing__prose p:last-child {
	margin-bottom: 0;
}

.gcn-listing__divider {
	height: 1px;
	margin: var(--gcn-space-6) 0;
	background: var(--gcn-rule);
	border: 0;
}

.gcn-listing__section {
	margin-top: var(--gcn-space-8);
}

.gcn-listing__section-title {
	margin: 0 0 var(--gcn-space-3);
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text);
}

/* ---------- Gallery ------------------------------------------------------- */

.gcn-listing__gallery {
	margin-top: var(--gcn-space-8);
}

.gcn-listing__gallery ul {
	margin: 0;
	padding: 0;
	align-items: start;
}

.gcn-listing__gallery li {
	overflow: hidden;
	border-radius: var(--gcn-radius-md);
}

/* The gallery paints each photo as a background on a div, not an <img>. */
.gcn-listing__gallery .bricks-layout-inner.image {
	transition: transform 0.35s var(--gcn-ease);
}

.gcn-listing__gallery a:hover .bricks-layout-inner.image {
	transform: scale(1.04);
}

/* ---------- Aside card ---------------------------------------------------- */

.gcn-listing__card {
	position: sticky;
	top: 110px;
	padding: var(--gcn-space-6) var(--gcn-space-6) var(--gcn-space-8);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

.gcn-listing__card-title {
	margin: 0 0 var(--gcn-space-4);
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-muted);
}

/* A group with no surviving rows would otherwise leave a stranded heading. */
.gcn-listing__card-group:not(:has(.gcn-detail)) {
	display: none;
}

/* Only a group that follows another group with rows gets a divider. An
   adjacent-sibling rule still matches across a display:none group, which drew a
   rule above the first visible group on a sparse listing; :has() on both sides
   of a general sibling combinator asks the question that actually matters. */
.gcn-listing__card-group:has(.gcn-detail) ~ .gcn-listing__card-group:has(.gcn-detail) {
	margin-top: var(--gcn-space-6);
	padding-top: var(--gcn-space-6);
	border-top: 1px solid var(--gcn-rule);
}

/* Each row arrives inside its own .brxe-shortcode wrapper, so the gap lives on
   the row rather than on a sibling combinator. */
/* --------------------------------------------------------------------------
   Detail row

   The one definition, in the sheet every listing single loads, so People,
   Heart Places, Teams, Events and Organizations cannot drift apart.

   An icon column, then the label over the value. The icon is drawn from a
   token as a mask, so it takes its colour from the palette and needs no icon
   font — and it is chosen in PHP from the field, so a template does not have
   to name one.
   -------------------------------------------------------------------------- */

.gcn-detail {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	column-gap: var(--gcn-space-3);
	margin-top: var(--gcn-space-5);
}

.gcn-detail__icon {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	background-color: var(--gcn-brand);
	-webkit-mask-image: var(--gcn-detail-icon);
	mask-image: var(--gcn-detail-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* A row with no icon keeps its text in the second column. */
.gcn-detail__text {
	grid-column: 2;
	min-width: 0;
}

.gcn-detail__label {
	display: block;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	letter-spacing: 0.01em;
	color: var(--gcn-text-muted);
}

.gcn-detail__value {
	display: block;
	margin-top: 2px;
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text);
}

.gcn-detail__value a {
	color: var(--gcn-brand-strong);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	word-break: break-word;
}

.gcn-detail__value a:hover {
	border-bottom-color: currentColor;
}


/* ---------- Map ----------------------------------------------------------- */

.gcn-listing__map-section {
	background: var(--gcn-surface-sunken);
	border-top: 1px solid var(--gcn-rule);
}

.gcn-listing__map .geodir-map-wrap,
.gcn-listing__map .geodir_map_container {
	overflow: hidden;
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-md);
}

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 991px) {

	.gcn-listing__body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gcn-space-10);
	}

	.gcn-listing__card {
		position: static;
	}
}

/* ---------- Business hours ------------------------------------------------ */

.gcn-hours {
	display: grid;
	gap: 4px;
	margin-top: 4px;
}

.gcn-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--gcn-space-3);
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text-soft);
}

.gcn-hours__day {
	color: var(--gcn-text-muted);
}

.gcn-hours__row--today {
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text);
}

.gcn-hours__row--today .gcn-hours__day {
	color: var(--gcn-brand-strong);
}