/* ==========================================================================
   NFP ENGINE — UTILITY CLASSES
   Gladding Digital Design System, layer 2.

   These replace the old database-imported GB Global Styles: same class
   names, same behaviour, but versioned in the theme and delivered by
   Composer — never imported per site again. Patterns reference these
   classes; tokens (style.css + GP Global Colors) supply the values, so
   every site renders them in its own branding.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTIONS — full-width bands with responsive vertical rhythm
   -------------------------------------------------------------------------- */

.section-xs,
.section-sm,
.section-md,
.section-lg,
.section-xl {
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.section-xs { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
.section-sm { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.section-md { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
.section-lg { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.section-xl { padding-top: 10rem;              padding-bottom: 10rem; }

@media (max-width: 1024px) {
	.section-xs { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg); }
	.section-sm { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
	.section-md { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
	.section-lg { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
	.section-xl { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
}

@media (max-width: 767px) {
	.section-xs,
	.section-sm,
	.section-md,
	.section-lg,
	.section-xl {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	.section-xs { padding-top: var(--spacing-md);  padding-bottom: var(--spacing-md); }
	.section-sm { padding-top: var(--spacing-lg);  padding-bottom: var(--spacing-lg); }
	.section-md { padding-top: var(--spacing-xl);  padding-bottom: var(--spacing-xl); }
	.section-lg { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
	.section-xl { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); }
}

/* --------------------------------------------------------------------------
   WRAPPERS — centred max-width content containers
   -------------------------------------------------------------------------- */

.wrapper-xs,
.wrapper-sm,
.wrapper-md,
.wrapper-lg,
.wrapper-xl,
.wrapper-full {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wrapper-xs  { max-width: 640px; }
.wrapper-sm  { max-width: 800px; }
.wrapper-md  { max-width: var(--gb-container-width); }
.wrapper-lg  { max-width: 1400px; }
.wrapper-xl  { max-width: 1600px; }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.card,
.card--bordered,
.card--accent {
	padding: var(--spacing-lg);
	border-radius: var(--radius-lg);
}

.card {
	background-color: var(--base);
}

.card--bordered {
	background-color: var(--base);
	border: 1px solid var(--border-default);
}

.card--accent {
	background-color: var(--accent-tint-90);
	border: 1px solid var(--accent-alpha-20);
}

.card-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--contrast);
	margin-bottom: var(--spacing-sm);
}

.card-text {
	color: var(--contrast-2);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-secondary {
	display: inline-flex;
	font-weight: 600;
	text-decoration: none;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-md);
	transition: var(--transition-normal);
}

.btn-primary {
	background-color: var(--accent);
	color: var(--base);
}

.btn-primary:is(:hover, :focus) {
	background-color: var(--accent-shade-20);
	color: var(--base);
}

.btn-secondary {
	background-color: transparent;
	color: var(--accent);
	border: 2px solid var(--accent);
}

.btn-secondary:is(:hover, :focus) {
	background-color: var(--accent);
	color: var(--base);
}

/* --------------------------------------------------------------------------
   SINGLE EVENTS — authored content flows between the hero and details
   Block Elements, so give it a comfortable reading column.
   -------------------------------------------------------------------------- */

.single-gd_event .site-main > article {
	max-width: 800px; /* match .wrapper-sm */
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing-xl) var(--spacing-md);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

.tagline {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--spacing-xs);
}

.headline {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--contrast);
	margin-bottom: var(--spacing-md);
}

@media (max-width: 1024px) {
	.headline { font-size: 2rem; }
}

@media (max-width: 767px) {
	.headline { font-size: 1.75rem; }
}