/**
 * Resources — the catalogue.
 *
 * Six post types before this one describe something you go to, meet, join or
 * follow. A resource is a thing you take away, and the page has one job: hand
 * it over. So it is the only single on the site whose primary action sits in
 * the header rather than in a panel further down.
 *
 * The device is a split header: paper on the left carrying the identity, a
 * solid brand panel on the right carrying the action. Nothing else on the site
 * splits its header, which is what keeps this post type distinct from the
 * light-gradient pages (Organizations, Services) and the dark one (Initiatives).
 *
 * A quick link-only record has almost nothing in it by design. Every block here
 * hides when empty, so such a record renders as a compact card rather than a
 * scaffold of empty headings.
 */

/* ==========================================================================
   Split header
   ========================================================================== */

.gcn-resource__head {
	position: relative;
	overflow: hidden;
	background: var(--gcn-surface);
	border-bottom: 1px solid var(--gcn-rule);
}

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

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

@media (max-width: 1024px) {

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

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

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

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

.gcn-resource__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gcn-space-3);
}

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

.gcn-resource__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-resource__title {
	max-width: 20ch;
	font-size: clamp(2.3rem, 4.4vw, 3.4rem);
	font-weight: var(--gcn-weight-bold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-resource__standfirst {
	max-width: 58ch;
	font-size: var(--gcn-text-xl);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

/* --------------------------------------------------------------------------
   Formats, price and edition
   -------------------------------------------------------------------------- */

.gcn-resource__formats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-resource__format {
	padding: 0.4em 0.95em;
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-medium);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-soft);
	background: var(--gcn-surface-sunken);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-sm);
}

.gcn-resource__price {
	display: inline-flex;
	align-items: center;
	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-resource__price--free {
	color: var(--gcn-positive);
	background: var(--gcn-positive-soft);
}

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

/* ==========================================================================
   The access panel — the reason the page exists
   ========================================================================== */

.gcn-resource__panel {
	position: sticky;
	top: var(--gcn-space-16);
	overflow: hidden;
	padding: var(--gcn-space-6);
	color: var(--gcn-text-inverse);
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(155deg, var(--gcn-brand-strong) 0%, #0d2d26 100%);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-lg);
}

@media (max-width: 1024px) {

	.gcn-resource__panel {
		position: relative;
		top: auto;
	}
}

.gcn-resource__panel-title {
	margin-bottom: var(--gcn-space-4);
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

.gcn-resource__access {
	display: flex;
	flex-direction: column;
	gap: var(--gcn-space-3);
}

.gcn-resource__cta {
	display: block;
	padding: 0.95em 1.4em;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	text-align: center;
	text-decoration: none;
	background: #fff;
	border-radius: var(--gcn-radius-md);
	transition: transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-resource__cta:hover {
	color: var(--gcn-brand-strong);
	transform: translateY(-1px);
}

.gcn-resource__cta--secondary {
	color: #fff;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.gcn-resource__cta--secondary:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.gcn-resource__access-note,
.gcn-resource__panel-note {
	font-size: var(--gcn-text-sm);
	line-height: var(--gcn-leading-normal);
	color: rgba(255, 255, 255, 0.7);
}

/* Detail rows inside the panel invert. */
.gcn-resource__panel .gcn-detail__label {
	color: rgba(255, 255, 255, 0.6);
}

.gcn-resource__panel .gcn-detail__value,
.gcn-resource__panel .gcn-detail__value a {
	color: #fff;
}

.gcn-resource__panel .gcn-detail__icon {
	background-color: rgba(255, 255, 255, 0.72);
}

.gcn-resource__panel-group:not(:has(.gcn-detail)) {
	display: none;
}

.gcn-resource__panel-group:has(.gcn-detail) {
	margin-top: var(--gcn-space-5);
	padding-top: var(--gcn-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   Requirements — what you need before this is usable
   -------------------------------------------------------------------------- */

.gcn-resource__requirements {
	display: grid;
	gap: var(--gcn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-resource__requirement {
	display: flex;
	align-items: flex-start;
	gap: var(--gcn-space-3);
	padding: var(--gcn-space-4) var(--gcn-space-5);
	font-size: var(--gcn-text-md);
	color: var(--gcn-text-soft);
	background: var(--gcn-notice-soft);
	border-radius: var(--gcn-radius-md);
}

.gcn-resource__requirement::before {
	content: "";
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.15em;
	background-color: var(--gcn-notice);
	-webkit-mask: var(--gcn-icon-info) center / contain no-repeat;
	mask: var(--gcn-icon-info) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Provider attribution
   -------------------------------------------------------------------------- */

.gcn-resource__provider {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: var(--gcn-space-5);
	background: var(--gcn-surface-sunken);
	border-left: 3px solid var(--gcn-brand);
	border-radius: var(--gcn-radius-sm);
}

.gcn-resource__provider-label {
	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-resource__provider-name {
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text);
}

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

/* ==========================================================================
   Body
   ========================================================================== */

.gcn-resource__prose {
	max-width: 68ch;
	font-size: var(--gcn-text-lg);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

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

.gcn-resource__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);
	color: var(--gcn-text);
}

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

/* A block whose only content is an empty field leaves no heading behind. The
   file list is a block too, and carries its rows directly rather than in a
   block-body, so it is named here — without it the whole section vanished. */
.gcn-resource__block:not(:has(.gcn-resource__block-body *)):not(:has(.gcn-resource__file-list)) {
	display: none;
}

/* The rule separates one block from the one above it. The first has nothing
   above it but the section's own edge, which is already drawn. */
.gcn-resource__block:first-child {
	padding-top: 0;
	border-top: 0;
}

.gcn-resource__block-body {
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

/* ==========================================================================
   Archive card
   ========================================================================== */

.geodir-page-cpt-gd_resource .geodir-post .gcn-resource__formats {
	gap: var(--gcn-space-1);
}

.geodir-page-cpt-gd_resource .geodir-post .gcn-resource__format {
	padding: 0.3em 0.7em;
	font-size: var(--gcn-text-2xs);
}

.geodir-page-cpt-gd_resource .geodir-post .gcn-resource__price {
	padding: 0.35em 0.8em;
	font-size: var(--gcn-text-2xs);
}

/* The card's action is the card itself, so the panel button is not repeated. */
.geodir-page-cpt-gd_resource .geodir-post .gcn-resource__access,
.geodir-page-cpt-gd_resource .geodir-post .gcn-resource__requirements {
	display: none;
}

/*
 * The record-mode note.
 *
 * Set apart from the description so a reader does not mistake it for editorial
 * copy: it is the page explaining its own limits.
 */
.gcn-resource__mode-note {
	padding: var(--gcn-space-4) var(--gcn-space-5);
	font-size: var(--gcn-text-md);
	line-height: var(--gcn-leading-normal);
	color: var(--gcn-text-muted);
	background: var(--gcn-surface-sunken);
	border-left: 3px solid var(--gcn-rule-strong);
	border-radius: var(--gcn-radius-sm);
}

/* --------------------------------------------------------------------------
   Files to download

   The files ARE the resource, so they read as a section of the page rather
   than a list tucked into the sidebar card. One row per file, the whole row a
   link, and the row answers what it is and how big before it is tapped — the
   two things somebody on a phone connection decides on.
   -------------------------------------------------------------------------- */

.gcn-resource__files-note {
	margin: calc(var(--gcn-space-4) * -1) 0 var(--gcn-space-4);
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
}

.gcn-resource__file-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--gcn-space-2);
}

.gcn-resource__file-link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--gcn-space-4);
	padding: var(--gcn-space-3) var(--gcn-space-4);
	color: var(--gcn-text);
	text-decoration: none;
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	transition: border-color var(--gcn-duration) var(--gcn-ease),
		background var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

.gcn-resource__file-link:hover,
.gcn-resource__file-link:focus-visible {
	color: var(--gcn-text);
	background: var(--gcn-surface-raised);
	border-color: var(--gcn-brand-border);
	box-shadow: var(--gcn-shadow-sm);
}

/* The type, as a badge: read before the filename, which is often a slug. */
.gcn-resource__file-ext {
	min-width: 3.5rem;
	padding: var(--gcn-space-2) var(--gcn-space-2);
	font-size: var(--gcn-text-2xs);
	font-weight: var(--gcn-weight-bold);
	letter-spacing: var(--gcn-tracking-wide);
	text-align: center;
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-radius: var(--gcn-radius-sm);
}

.gcn-resource__file-text {
	min-width: 0;
}

.gcn-resource__file-name {
	display: block;
	font-weight: var(--gcn-weight-medium);
	line-height: var(--gcn-leading-snug);
	overflow-wrap: anywhere;
}

.gcn-resource__file-meta {
	display: block;
	margin-top: 2px;
	font-size: var(--gcn-text-xs);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-faint);
}

.gcn-resource__file-get {
	display: inline-flex;
	align-items: center;
	gap: var(--gcn-space-2);
	font-size: var(--gcn-text-sm);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-strong);
	white-space: nowrap;
}

.gcn-resource__file-arrow {
	flex: none;
	transition: transform var(--gcn-duration) var(--gcn-ease);
}

.gcn-resource__file-link:hover .gcn-resource__file-arrow,
.gcn-resource__file-link:focus-visible .gcn-resource__file-arrow {
	transform: translateY(1px);
}

/* On a narrow screen the arrow alone carries the meaning, and the filename
   gets the width it needs. */
@media (max-width: 480px) {
	.gcn-resource__file-link {
		gap: var(--gcn-space-3);
		padding-inline: var(--gcn-space-3);
	}

	.gcn-resource__file-ext {
		min-width: 3rem;
	}

	.gcn-resource__file-get {
		font-size: 0;
		gap: 0;
	}
}

/* --------------------------------------------------------------------------
   The standfirst

   One short paragraph under the title, in the hero's left column. Larger than
   body text and lighter than the title: the line somebody reads to decide
   whether the rest is for them.
   -------------------------------------------------------------------------- */

.gcn-resource__standfirst {
	max-width: 52ch;
	margin: 0;
	font-size: var(--gcn-text-lg);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

/* The access button can jump to the file list; the sticky header must not
   land on top of its heading. */
.gcn-resource__files {
	scroll-margin-top: 120px;
}