/* =========================================================================
   4 · LAYOUT — containers, sections, grid harness
   Reference: V4-BUILD-SPEC §3 + RESPONSIVE-DESIGN-RESEARCH §1
   ========================================================================= */

/* Container — caps width, equal gutters */
.jj-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.jj-container--narrow { max-width: var(--container-narrow); }
.jj-container--wide   { max-width: var(--container-wide); }

/* Section — vertical rhythm */
.jj-section          { padding-block: var(--section-y); }
.jj-section--tight   { padding-block: var(--section-y-tight); }
.jj-section--warm    { background: var(--jj-bg-warm); }
.jj-section--primary { background: var(--jj-primary); color: #fff; }
.jj-section--primary-deep { background: var(--jj-primary-deep); color: #fff; }

/* When a section uses a dark background, headings + paragraphs flip to white */
.jj-section--primary,
.jj-section--primary-deep { color: rgba(255,255,255,0.92); }
.jj-section--primary h1,
.jj-section--primary h2,
.jj-section--primary h3,
.jj-section--primary h4,
.jj-section--primary-deep h1,
.jj-section--primary-deep h2,
.jj-section--primary-deep h3,
.jj-section--primary-deep h4 { color: #fff; }

/* Section heads */
.jj-section__head {
	max-width: 720px;
	margin-bottom: var(--sp-10);
}
.jj-section__head--centered {
	margin-inline: auto;
	text-align: center;
}
.jj-section__head--row {
	max-width: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.jj-section__title {
	font-size: var(--fs-2xl);
	margin: 0 0 var(--sp-3);
}
.jj-section__sub {
	color: var(--jj-muted);
	font-size: var(--fs-md);
	max-width: 60ch;
	margin: 0;
}
.jj-section__sub--center {
	margin-inline: auto;
}
.jj-section__cta-row {
	margin-top: var(--sp-8);
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.jj-section__cta-row--center {
	justify-content: center;
}

/* Main element — sections supply their own padding */
.jj-main { display: block; }

/* Sidebar layout */
.jj-layout-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-12);
	padding-block: var(--section-y);
}
@media (min-width: 64em) {
	.jj-layout-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

/* Page hero (smaller than homepage hero) — for About / Contact / Donate / Zakat / etc. */
.jj-page-hero {
	background: var(--jj-bg-warm);
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	position: relative;
	overflow: hidden;
}
.jj-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}
.jj-page-hero__title {
	font-size: var(--fs-3xl);
	margin: 0 0 var(--sp-4);
}
.jj-page-hero__sub {
	font-size: var(--fs-md);
	color: var(--jj-text-soft);
	max-width: 60ch;
	margin: 0;
}

/* Breadcrumbs strip */
.jj-breadcrumbs {
	padding-block: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--jj-muted);
}
.jj-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.jj-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.jj-breadcrumbs li + li::before {
	content: '/';
	color: var(--jj-muted);
}
.jj-breadcrumbs a {
	color: var(--jj-muted);
	text-decoration: none;
}
.jj-breadcrumbs a:hover { color: var(--jj-primary); }
.jj-breadcrumbs [aria-current="page"] { color: var(--jj-text); }