/**
 * PackPlus V2 — Interior Page Visual System (Sprint 4)
 *
 * Shared visual language for every skeleton route (packaging/industries
 * index + detail, how-it-works, work, about, contact, get-a-quote): a
 * page hero (eyebrow + H1 + intro, optional image), a route card grid for
 * index pages, and an editorial "future content" placeholder panel. Loads
 * on every V2 route (see class-assets.php) — the homepage does not use
 * any of these classes, so nothing here affects Sections 01–09.
 */

/* ---- Page hero ---- */

.pp-page-hero {
	padding: calc(var(--pp-nav-height) + var(--pp-space-xl)) var(--pp-gutter) var(--pp-space-xl);
	background: var(--pp-paper);
	color: var(--pp-text);
}

.pp-page-hero__inner {
	max-width: var(--pp-max-content);
	margin: 0 auto;
	display: grid;
	gap: var(--pp-space-lg);
}

.pp-page-hero--with-media .pp-page-hero__inner {
	grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
	align-items: center;
}

.pp-page-hero__text {
	max-width: 36rem;
}

.pp-page-hero__heading {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--pp-text);
}

.pp-page-hero__intro {
	margin: 1.25rem 0 0;
	max-width: var(--pp-copy-max);
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	line-height: 1.6;
	color: var(--pp-text-muted);
}

.pp-page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.5rem;
}

.pp-page-hero__meta .pp-meta {
	opacity: 1;
	color: var(--pp-text-muted);
}

.pp-page-hero__visual {
	height: clamp(18rem, 34vw, 28rem);
}

/* ---- Route card grid (index pages) ---- */

.pp-route-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pp-space-lg);
	margin-top: var(--pp-space-xl);
}

.pp-route-card {
	display: block;
	color: inherit;
	text-decoration: none;
	border: 1px solid var(--pp-line);
	transition: border-color var(--pp-duration-fast) var(--pp-ease-standard);
}

.pp-route-card:hover,
.pp-route-card:focus-visible {
	border-color: var(--pp-text);
}

.pp-route-card__media {
	height: clamp(12rem, 22vw, 18rem);
}

.pp-route-card__body {
	padding: 1.5rem;
}

.pp-route-card__index {
	display: block;
	font-size: 1rem;
	color: color-mix(in srgb, var(--pp-text) 35%, transparent);
}

.pp-route-card__title {
	margin: 0.5rem 0 0;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--pp-text);
}

.pp-route-card__copy {
	margin: 0.6rem 0 0;
	color: var(--pp-text-muted);
}

.pp-route-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pp-text);
}

.pp-route-card__cta-arrow {
	color: var(--pp-green-dark);
}

/* ---- Editorial "future content" placeholder panel ---- */

.pp-content-panel {
	max-width: var(--pp-max-content);
	margin: var(--pp-space-xl) auto 0;
	padding: var(--pp-gutter);
}

.pp-content-panel__label {
	margin-bottom: 0.75rem;
}

.pp-content-panel__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--pp-text);
}

.pp-content-panel__copy {
	max-width: var(--pp-copy-max);
	color: var(--pp-text-muted);
}

.pp-content-panel__mount {
	margin-top: 2rem;
	min-height: 12rem;
	padding: 1.5rem;
	border: 1px solid var(--pp-line);
	background-color: var(--pp-white);
	background-image: repeating-linear-gradient(
		to bottom,
		var(--pp-grey) 0,
		var(--pp-grey) 2.25rem,
		transparent 2.25rem,
		transparent 3.25rem
	);
	background-repeat: no-repeat;
}

.pp-content-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* ---- Section wrapper for index/detail body content on skeleton pages ---- */

.pp-page-section {
	padding: 0 var(--pp-gutter) var(--pp-section-pad);
	background: var(--pp-paper);
	color: var(--pp-text);
}

.pp-page-section__inner {
	max-width: var(--pp-max-content);
	margin: 0 auto;
}

/* ---- Back link ---- */

.pp-back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--pp-space-lg);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pp-text);
	text-decoration: none;
}

.pp-back-link:hover {
	color: var(--pp-green-dark);
}

/* ---- Get a Quote: planned-field documentation list ---- */

.pp-quote-fields__label {
	margin-top: var(--pp-space-lg);
}

.pp-quote-field-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-quote-field-list li {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--pp-line);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pp-text-muted);
}

.pp-quote-fields__note {
	margin-top: var(--pp-space-lg);
}

/* ---- Not-found page ---- */

.pp-not-found {
	padding: calc(var(--pp-nav-height) + var(--pp-space-2xl)) var(--pp-gutter) var(--pp-space-2xl);
	text-align: center;
}

.pp-not-found__code {
	margin: 0;
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 700;
	color: color-mix(in srgb, var(--pp-text) 25%, transparent);
}

.pp-not-found .pp-page-hero__heading {
	margin-top: 1rem;
}

.pp-not-found__intro {
	margin-left: auto;
	margin-right: auto;
}

.pp-not-found__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

@media (max-width: 900px) {
	.pp-page-hero--with-media .pp-page-hero__inner {
		grid-template-columns: 1fr;
	}

	.pp-page-hero__visual {
		height: min(56vh, 26rem);
	}

	.pp-route-grid {
		grid-template-columns: 1fr;
	}
}