/*
 * Geboorteposter met Naam Sub-landing Styles
 * Depends on: main-v2.css (tokens, base, nav, footer, pg-section utilities)
 * Shared component classes (pg-btn, pg-script, pg-container, pg-section--*)
 * are already defined in main-v2.css.
 * Mobile-first. 390px base.
 */

/* ============================================================
   HERO (light/paper bg)
   ============================================================ */
.pg-gbmn-hero {
	padding: clamp(120px, 15vw, 160px) 0 clamp(64px, 8vw, 96px);
}

.pg-gbmn-hero__wrap {
	position: relative;
	z-index: 2;
}

.pg-gbmn-breadcrumb {
	font-size: 13px;
	color: #6b6b6b;
	margin-bottom: 22px;
}

.pg-gbmn-breadcrumb a {
	color: #444;
	transition: color .2s ease;
}

.pg-gbmn-breadcrumb a:hover {
	color: var(--pg-brass);
}

.pg-gbmn-breadcrumb span[aria-hidden] {
	margin: 0 6px;
	opacity: .4;
}

.pg-gbmn-breadcrumb [aria-current] {
	color: var(--pg-brass);
}

.pg-gbmn-hero__h1 {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	margin-block-end: var(--pg-space-4);
	color: var(--pg-ink, #1a1a1a);
}

.pg-gbmn-hero__sub {
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.6;
	color: #444;
	max-width: 62ch;
	margin-block-end: var(--pg-space-6);
}

.pg-gbmn-hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-3);
	align-items: center;
}

.pg-gbmn-hero__secondary {
	color: var(--pg-brass);
	text-decoration: underline;
	font-size: .95rem;
}

.pg-gbmn-hero__price {
	margin-block-start: var(--pg-space-3);
	font-size: .9rem;
	color: #888;
}

/* ============================================================
   WHAT
   ============================================================ */
.pg-gbmn-what__grid {
	display: grid;
	gap: var(--pg-space-6);
}

@media (min-width: 768px) {
	.pg-gbmn-what__grid {
		grid-template-columns: 1fr 1.5fr;
		align-items: start;
	}
}

.pg-gbmn-what__h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.pg-gbmn-what__body p + p {
	margin-block-start: var(--pg-space-4);
}

.pg-gbmn-what__list {
	margin-block: var(--pg-space-4);
	padding-inline-start: var(--pg-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-2);
}

.pg-gbmn-what__body a {
	color: var(--pg-brass);
	text-decoration: underline;
}

/* ============================================================
   OCCASIONS
   ============================================================ */
.pg-gbmn-occasions__h2 {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	margin-block-end: var(--pg-space-2);
}

.pg-gbmn-occasion-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--pg-space-6);
	margin-block-start: var(--pg-space-6);
}

.pg-gbmn-occasion-card {
	background: var(--pg-bone, #f5f0e8);
	border-radius: var(--pg-radius-md, 8px);
	padding: var(--pg-space-6);
}

.pg-gbmn-occasion-list h3 {
	font-size: var(--pg-text-lg);
	margin-block-end: var(--pg-space-2);
}


/* ============================================================
   CLOSING CTA
   ============================================================ */
.pg-gbmn-cta {
	padding: clamp(64px, 10vw, 112px) 0;
	text-align: center;
}

.pg-gbmn-cta__wrap {
	display: flex;
	justify-content: center;
}

.pg-gbmn-cta__script {
	margin-block-end: var(--pg-space-2);
}

.pg-gbmn-cta__h2 {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: var(--pg-bone);
	margin-block-end: var(--pg-space-6);
	max-width: 24ch;
	margin-inline: auto;
}

/* ============================================================
   RELATED LINKS
   ============================================================ */
.pg-gbmn-related__h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-block-end: var(--pg-space-2);
}

.pg-related-links {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-4);
	margin-block-start: var(--pg-space-4);
}

.pg-related-links a {
	color: var(--pg-brass);
	text-decoration: underline;
}