/*
 * Stadskaart Poster 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 (warm editorial, light bg)
   ============================================================ */
.pg-stp-hero {
	position: relative;
	background: linear-gradient(160deg, var(--pg-bone) 0%, var(--pg-paper) 60%, #E8DCC8 100%);
	overflow: hidden;
	padding: clamp(120px, 15vw, 160px) 0 clamp(64px, 8vw, 96px);
	color: var(--pg-ink);
}

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

.pg-stp-breadcrumb {
	font-size: 13px;
	color: var(--pg-warm-grey-text);
	margin-bottom: 22px;
}

.pg-stp-breadcrumb a {
	color: var(--pg-warm-grey-text);
	transition: color .2s ease;
}

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

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

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

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

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

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

.pg-stp-hero__price {
	margin-block-start: var(--pg-space-3);
	font-size: .9rem;
	color: var(--pg-warm-grey-text);
}

/* ============================================================
   HOW (steps)
   ============================================================ */
.pg-stp-how__grid {
	display: grid;
	gap: var(--pg-space-6);
}

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

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

.pg-stp-how__body a {
	color: var(--pg-brass);
	text-decoration: underline;
	display: inline-block;
	margin-block-start: var(--pg-space-4);
}

.pg-stp-steps {
	counter-reset: steps;
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--pg-space-4);
	margin-block-start: var(--pg-space-6);
}

.pg-stp-steps li {
	counter-increment: steps;
	display: flex;
	gap: var(--pg-space-3);
	align-items: flex-start;
	line-height: 1.5;
}

.pg-stp-steps li::before {
	content: counter(steps);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	min-width: 2rem;
	color: var(--pg-brass);
	flex-shrink: 0;
}

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

.pg-stp-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-stp-occasion-card {
	background: var(--pg-bone, #f5f0e8);
	border-radius: var(--pg-radius-md, 8px);
	padding: var(--pg-space-6);
}

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


/* ============================================================
   CLOSING CTA (warm paper, ink text)
   ============================================================ */
.pg-stp-cta {
	background: var(--pg-paper);
	border-top: 1px solid var(--pg-hairline);
	padding: clamp(64px, 10vw, 112px) 0;
	text-align: center;
	color: var(--pg-ink);
}

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

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

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

/* ============================================================
   RELATED LINKS
   ============================================================ */
.pg-stp-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;
}