/*
 * PCCC layout utilities.
 *
 * Provides opt-in container and section classes. Nothing here changes
 * BuddyBoss's own page layout, Elementor Canvas content, or the WordPress
 * block editor's own layout primitives.
 *
 * Use these on coded PCCC templates and partials going forward.
 */

/* ---------------------------------------------------------------------
 * Containers
 * --------------------------------------------------------------------- */
.pccc-container,
.pccc-container--narrow,
.pccc-container--wide {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--pccc-container-gutter);
	box-sizing: border-box;
}
.pccc-container          { max-width: var(--pccc-container); }
.pccc-container--narrow  { max-width: var(--pccc-container-narrow); }
.pccc-container--wide    { max-width: var(--pccc-container-wide); }
.pccc-container--flush   { padding-inline: 0; }

/* ---------------------------------------------------------------------
 * Sections
 *
 * A section is a horizontal band of content. Padding on the block axis
 * gives the site a consistent vertical rhythm without every author
 * having to pick a value.
 * --------------------------------------------------------------------- */
.pccc-section {
	padding-block: var(--pccc-section-y);
	background: var(--pccc-color-surface);
	position: relative;
}
.pccc-section--compact { padding-block: var(--pccc-section-y-compact); }
.pccc-section--hero    { padding-block: var(--pccc-section-y-hero); }

.pccc-section--sunken  { background: var(--pccc-color-surface-sunken); }
.pccc-section--subtle  { background: var(--pccc-color-surface-subtle); }
.pccc-section--primary {
	background: var(--pccc-color-primary);
	color: var(--pccc-color-ink-inverse);
}
.pccc-section--primary :where(h1, h2, h3, h4, h5, h6, p, a),
.pccc-section--primary :where(.pccc-eyebrow) {
	color: currentColor;
}

/* ---------------------------------------------------------------------
 * Grid utilities
 *
 * `--pccc-grid-min` sets the minimum column width; grid auto-fits.
 * `--pccc-grid-gap` controls the gutter.
 * --------------------------------------------------------------------- */
.pccc-grid {
	--pccc-grid-min: 240px;
	--pccc-grid-gap: var(--pccc-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--pccc-grid-min), 1fr));
	gap: var(--pccc-grid-gap);
}

.pccc-grid--2 { --pccc-grid-min: min(340px, 100%); }
.pccc-grid--3 { --pccc-grid-min: min(280px, 100%); }
.pccc-grid--4 { --pccc-grid-min: min(220px, 100%); }
.pccc-grid--tight { --pccc-grid-gap: var(--pccc-space-4); }
.pccc-grid--loose { --pccc-grid-gap: var(--pccc-space-6); }

/* ---------------------------------------------------------------------
 * Two-column layout — reading column + side rail.
 *
 * Below the `md` breakpoint the columns stack.
 * --------------------------------------------------------------------- */
.pccc-split {
	display: grid;
	gap: var(--pccc-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.pccc-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	}
	.pccc-split--wide-rail {
		grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	}
	.pccc-split--equal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
 * Stack utility — vertical rhythm between siblings.
 * --------------------------------------------------------------------- */
.pccc-stack > * + * {
	margin-top: var(--pccc-space-4);
}
.pccc-stack--tight > * + * { margin-top: var(--pccc-space-3); }
.pccc-stack--loose > * + * { margin-top: var(--pccc-space-5); }

/* ---------------------------------------------------------------------
 * Cluster utility — horizontal group with wrapping.
 * --------------------------------------------------------------------- */
.pccc-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pccc-space-3);
	align-items: center;
}
.pccc-cluster--between { justify-content: space-between; }
.pccc-cluster--end     { justify-content: flex-end; }
.pccc-cluster--center  { justify-content: center; }

/* ---------------------------------------------------------------------
 * Hero primitive — used for the top of coded pages.
 *
 * Left column: eyebrow + heading + lead + primary CTA cluster.
 * Right column: optional imagery.
 * --------------------------------------------------------------------- */
.pccc-hero {
	padding-block: var(--pccc-section-y-hero);
	background: var(--pccc-color-surface-sunken);
	position: relative;
	overflow: hidden;
}
.pccc-hero__inner {
	max-width: var(--pccc-container);
	margin-inline: auto;
	padding-inline: var(--pccc-container-gutter);
	display: grid;
	gap: var(--pccc-space-6);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 900px) {
	.pccc-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.pccc-hero__inner--text-only {
		grid-template-columns: minmax(0, 720px);
	}
}