/**
 * Services & Engagement — a listing page like the others.
 *
 * WHAT THIS USED TO BE
 * This post type is the only one on the site that is an EXCHANGE — somebody
 * offering a thing or asking for one — and it was drawn to say so: a warm
 * tinted ground with a dot texture, one white card 900px wide pinned to it,
 * and OFFERED or WANTED set at an angle in the corner like a rubber stamp.
 *
 * WHY IT CHANGED
 * "Match this CPT design with the current theme, and make the page wider as
 * other pages are." A visitor moving from a Resource to a Service met what
 * looked like a different website, and the card held the content to 900px
 * while every other single page runs the full 1220px container.
 *
 * So the page furniture is now the site's: the same surface, the same brand
 * rule under the header, the same section headings with a hairline above them,
 * the same widths. What survives of the noticeboard is what carries meaning
 * rather than decoration — the OFFERING / WANTED badge, now a chip in the flow
 * like the price chip on a Resource, and the ledger of terms, which is the
 * right shape for the small print of an exchange.
 */

/* ==========================================================================
   The board
   ========================================================================== */

.gcn-service__board {
	position: relative;
	background: var(--gcn-surface);
}

/* A brand rule along the foot, as the header and footer carry. */
.gcn-service__board::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--gcn-brand-rule);
	opacity: 0.85;
}

.gcn-service__crumbs {
	margin-bottom: var(--gcn-space-6);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

.gcn-service__crumbs a {
	color: var(--gcn-text-muted);
	text-decoration: none;
}

.gcn-service__crumbs a:hover {
	color: var(--gcn-brand-strong);
	text-decoration: underline;
}

/* ==========================================================================
   The notice
   ========================================================================== */

/*
 * The card is back, and it runs the width of the container.
 *
 * Flattening it onto the page lost what the other detail pages have — a
 * surface with an edge and a shadow, the way the related-record cards and the
 * listing panels are drawn. What it keeps from the flattening is the width:
 * the old 900px cap is gone, so the card spans the same 1220px every other
 * single page uses.
 */
.gcn-service__notice {
	position: relative;
	max-width: none;
	margin: 0;
	padding: var(--gcn-space-12) var(--gcn-space-10) var(--gcn-space-10);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-lg);
}

@media (max-width: 640px) {

	.gcn-service__notice {
		padding: var(--gcn-space-10) var(--gcn-space-5) var(--gcn-space-6);
	}
}

/* --------------------------------------------------------------------------
   The stamp
   --------------------------------------------------------------------------
   [gcn_service_direction] renders the chip; here it becomes the stamp. Bricks
   wraps every shortcode in a block-level div, which as a flex child would
   claim the full width — display:contents lets the chip position itself.
   -------------------------------------------------------------------------- */

.gcn-service__notice > .brxe-shortcode {
	display: contents;
}

/*
 * OFFERING or LOOKING FOR, stamped into the card's corner.
 *
 * This is the one device this post type keeps for itself, and it earns its
 * place: direction is the first thing a reader of an exchange needs, and a
 * stamp says it before a word is read. Set at an angle, outlined rather than
 * filled, the way a rubber stamp lands on a paper notice.
 */
.gcn-service__notice .gcn-service__direction {
	position: absolute;
	top: var(--gcn-space-6);
	right: var(--gcn-space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	padding: 0.5em 1.1em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: var(--gcn-radius-sm);
	transform: rotate(-6deg);
	opacity: 0.85;
}

/* On a narrow card there is no corner to spare, so it leads the entry. */
@media (max-width: 640px) {

	.gcn-service__notice .gcn-service__direction {
		position: static;
		align-self: flex-start;
		margin-bottom: var(--gcn-space-4);
		transform: none;
	}
}

.gcn-service__direction--offer {
	color: var(--gcn-brand);
}

.gcn-service__direction--request {
	color: var(--gcn-accent);
}

/* The arrow the chip carries reads as clutter inside a stamp. */
.gcn-service__notice .gcn-service__direction::before {
	display: none;
}

/* --------------------------------------------------------------------------
   Identity
   -------------------------------------------------------------------------- */

.gcn-service__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-text-muted);
}

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

.gcn-service__title {
	max-width: 26ch;
	margin-top: var(--gcn-space-3);
	font-size: clamp(2.2rem, 4.4vw, 3.2rem);
	font-weight: var(--gcn-weight-bold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/*
 * [gcn_service_location] renders .gcn-address with its own inline SVG pin —
 * it does not use a .gcn-service__* class, so this styles what it actually
 * emits rather than a class invented to match the block name.
 */
.gcn-service__notice .gcn-address {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-2);
	margin-top: var(--gcn-space-3);
	font-size: var(--gcn-text-lg);
	color: var(--gcn-text-muted);
}

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

/*
 * The price as the chip a Resource uses, not the figure the noticeboard used.
 * It was set at 2xl bold and read as a second heading under the title —
 * "Donation" looked like a section, not a term.
 */
.gcn-service__price {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-top: var(--gcn-space-4);
	padding: 0.45em 1em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-accent);
	background: var(--gcn-accent-soft);
	border-radius: var(--gcn-radius-pill);
}

.gcn-service__price--free {
	color: var(--gcn-positive);
	background: var(--gcn-positive-soft);
}

.gcn-service__expiry {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	margin-top: var(--gcn-space-2);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

.gcn-service__expiry::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--gcn-icon-clock) center / contain no-repeat;
	mask: var(--gcn-icon-clock) center / contain no-repeat;
}

.gcn-service__expiry--soon {
	color: var(--gcn-notice);
	font-weight: var(--gcn-weight-medium);
}

.gcn-service__expiry--past {
	color: var(--gcn-critical);
}

/* --------------------------------------------------------------------------
   The picture
   --------------------------------------------------------------------------
   A wide strip across the notice rather than a portrait beside the title: the
   photograph here is evidence of the thing on offer, so it earns the width but
   not the top of the page.
   -------------------------------------------------------------------------- */

/*
 * width:100% and align-self are both needed. A Bricks block is a column flex
 * container that does not stretch its children, so a block-level child shrinks
 * to its content — which left this strip at 381px inside a 818px notice.
 */
.gcn-service__thumb {
	display: block;
	width: 100%;
	align-self: stretch;
	margin-top: var(--gcn-space-8);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-md);
}

.gcn-service__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Words
   -------------------------------------------------------------------------- */

.gcn-service__expired-note {
	margin-top: var(--gcn-space-8);
	padding: var(--gcn-space-4) var(--gcn-space-5);
	font-size: var(--gcn-text-md);
	color: var(--gcn-critical);
	background: var(--gcn-critical-soft);
	border-radius: var(--gcn-radius-md);
}

.gcn-service__lead {
	max-width: 60ch;
	margin-top: var(--gcn-space-8);
	font-size: var(--gcn-text-xl);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text);
}

.gcn-service__prose {
	max-width: 72ch;
	margin-top: var(--gcn-space-5);
	font-size: var(--gcn-text-lg);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

.gcn-service__prose p + p {
	margin-top: var(--gcn-space-4);
}

/* ==========================================================================
   The ledger
   ==========================================================================
   Terms as label and value on one line, hairline between — the small print of
   a classified advertisement. .gcn-detail is the site-wide row and normally
   stacks with an icon; inside the ledger it lies down and drops the icon.
   ========================================================================== */

.gcn-service__section {
	margin-top: var(--gcn-space-8);
	padding-top: var(--gcn-space-8);
	border-top: 1px solid var(--gcn-rule);
}

/* A section whose every row was empty leaves no heading behind. */
.gcn-service__section:not(:has(.gcn-detail)) {
	display: none;
}

/* The same heading a Resource or an Organization uses for its sections. */
.gcn-service__section-title {
	margin-bottom: var(--gcn-space-4);
	font-size: var(--gcn-text-xl);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	text-transform: none;
	color: var(--gcn-text);
}

.gcn-service__section .gcn-detail {
	display: grid;
	grid-template-columns: 16rem minmax(0, 68ch);
	gap: var(--gcn-space-4);
	align-items: baseline;
	padding: var(--gcn-space-4) 0;
	border-top: 1px solid var(--gcn-rule);
}

.gcn-service__section .gcn-detail__icon {
	display: none;
}

.gcn-service__section .gcn-detail__text {
	display: contents;
}

.gcn-service__section .gcn-detail__label {
	font-size: var(--gcn-text-md);
	color: var(--gcn-text-muted);
}

.gcn-service__section .gcn-detail__value {
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text);
}

.gcn-service__section .gcn-detail__value a {
	color: var(--gcn-brand-strong);
}

@media (max-width: 560px) {

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

/* ==========================================================================
   The response
   ==========================================================================
   One action, across the foot of the notice. An exchange has exactly one thing
   a reader can do about it.
   ========================================================================== */

/*
 * One action, in a panel. Across the full 1220px a single button reads as a
 * banner; held to a panel it reads as the one thing to do.
 */
.gcn-service__respond {
	max-width: 32rem;
	margin-top: var(--gcn-space-8);
	padding: var(--gcn-space-6);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
}

.gcn-service__cta {
	display: block;
	padding: 1em 1.6em;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast);
	text-align: center;
	text-decoration: none;
	background: var(--gcn-brand);
	border-radius: var(--gcn-radius-md);
	transition: background var(--gcn-duration) var(--gcn-ease);
}

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

.gcn-service__cta--secondary {
	margin-top: var(--gcn-space-3);
	color: var(--gcn-brand-strong);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--gcn-brand-border);
}

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

.gcn-service__respond-note {
	margin-top: var(--gcn-space-4);
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
	text-align: center;
}

/* The gallery sits inside the notice, so it takes the notice's rhythm. */
.gcn-service__notice .gcn-listing__gallery {
	margin-top: var(--gcn-space-10);
}

/* ==========================================================================
   Archive cards
   ==========================================================================
   The board again, in miniature: a coloured edge saying which way the exchange
   runs, the stamp small in the corner, and the price as the figure it is.
   ========================================================================== */

.geodir-page-cpt-gd_classifieds .geodir-post > .card {
	position: relative;
	overflow: hidden;
	border-left: 4px solid var(--gcn-rule-strong) !important;
}

/* :has() lets the card take its colour from the badge inside it. */
.geodir-page-cpt-gd_classifieds .geodir-post > .card:has(.gcn-service__direction--offer) {
	border-left-color: var(--gcn-brand) !important;
}

.geodir-page-cpt-gd_classifieds .geodir-post > .card:has(.gcn-service__direction--request) {
	border-left-color: var(--gcn-accent) !important;
}

/* The same stamp the entry carries, in miniature, so a card and its page agree. */
.geodir-page-cpt-gd_classifieds .geodir-post .gcn-service__direction {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 0.7em;
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: transparent;
	border: 1.5px solid currentColor;
	border-radius: var(--gcn-radius-xs);
}

.geodir-page-cpt-gd_classifieds .geodir-post .gcn-service__direction::before {
	display: none;
}

/*
 * The price is a chip on the entry now, so it is a chip on the card too —
 * smaller, because a card has less room to give it.
 */
.geodir-page-cpt-gd_classifieds .geodir-post .gcn-service__price {
	margin-top: var(--gcn-space-2);
	padding: 0.3em 0.8em;
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-wide);
}

.geodir-page-cpt-gd_classifieds .geodir-post .gcn-service__expiry {
	font-size: var(--gcn-text-2xs);
}

.geodir-page-cpt-gd_classifieds .geodir-post .gcn-address {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-2);
	margin-top: var(--gcn-space-2);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

.geodir-page-cpt-gd_classifieds .geodir-post .gcn-address .gcn-pin {
	flex: 0 0 auto;
	color: var(--gcn-brand);
}