/**
 * Content pages — About + Contact.
 *
 * Shared visual language for simple content pages that are not part of
 * the WooCommerce shop/cart/product flow. Uses the same tokens, card
 * radius, and section rhythm as the rest of the theme. Does not touch
 * shop/product/cart selectors.
 *
 * @package PackagingCommerce
 */

.pkgc-content-page__breadcrumb-wrap {
	padding-block-start: var(--brand-space-6);
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.pkgc-content-hero {
	padding-block: var(--brand-space-10) var(--brand-space-12);
	background-color: var(--brand-color-primary-soft);
	text-align: center;
}

.pkgc-content-hero__title {
	font-size: var(--brand-text-3xl);
	margin-block-end: var(--brand-space-3);
}

.pkgc-content-hero__subtitle {
	font-size: var(--brand-text-md);
	color: var(--brand-color-muted);
	max-width: 640px;
	margin-inline: auto;
}

/* ── Generic content section rhythm ──────────────────────────────── */

.pkgc-content-section {
	padding-block: var(--brand-space-12);
}

.pkgc-content-section--alt {
	background-color: var(--brand-color-surface-alt);
}

.pkgc-content-prose {
	max-width: 760px;
	margin-inline: auto;
}

.pkgc-content-prose h2 {
	font-size: var(--brand-text-2xl);
}

.pkgc-content-prose p {
	color: var(--brand-color-muted);
	line-height: var(--brand-leading-relaxed);
}

/* ── Value cards (About) ──────────────────────────────────────────── */

.pkgc-value-card {
	height: 100%;
	padding: var(--brand-space-6);
	text-align: center;
	background-color: var(--brand-color-surface);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-lg);
	box-shadow: var(--brand-shadow-sm);
}

.pkgc-value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-block-end: var(--brand-space-4);
	border-radius: var(--brand-radius-full);
	background-color: var(--brand-color-primary-soft);
	color: var(--brand-color-primary-dark);
}

.pkgc-value-card__icon svg {
	width: 26px;
	height: 26px;
}

.pkgc-value-card__title {
	font-size: var(--brand-text-base);
	margin: 0;
}

/* ── Category overview (About) ────────────────────────────────────── */

.pkgc-category-overview__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: var(--brand-space-3) var(--brand-space-4);
	text-align: center;
	font-weight: var(--brand-weight-semibold);
	color: var(--brand-color-ink);
	text-decoration: none;
	background-color: var(--brand-color-surface);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-md);
	transition: border-color var(--brand-transition-fast), color var(--brand-transition-fast);
}

.pkgc-category-overview__item:hover,
.pkgc-category-overview__item:focus-visible {
	border-color: var(--brand-color-primary);
	color: var(--brand-color-primary-dark);
	text-decoration: none;
}

/* ── Process steps (About) ────────────────────────────────────────── */

.pkgc-process-step {
	height: 100%;
	padding: var(--brand-space-5);
	text-align: center;
	background-color: var(--brand-color-surface);
	border-radius: var(--brand-radius-lg);
	box-shadow: var(--brand-shadow-sm);
}

.pkgc-process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-block-end: var(--brand-space-3);
	border-radius: var(--brand-radius-full);
	background-color: var(--brand-color-primary);
	color: #fff;
	font-weight: var(--brand-weight-bold);
}

.pkgc-process-step__label {
	margin: 0;
	font-size: var(--brand-text-sm);
	font-weight: var(--brand-weight-medium);
}

/* ── CTA band (About) ─────────────────────────────────────────────── */

.pkgc-content-cta {
	padding-block: var(--brand-space-10);
	background-color: var(--brand-color-ink);
}

.pkgc-content-cta__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--brand-space-4);
}

/* ── Contact cards ─────────────────────────────────────────────────── */

.pkgc-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--brand-space-2);
	height: 100%;
	padding: var(--brand-space-6);
	text-align: center;
	text-decoration: none;
	color: var(--brand-color-ink);
	background-color: var(--brand-color-surface);
	border: 1px solid var(--brand-color-border);
	border-radius: var(--brand-radius-lg);
	box-shadow: var(--brand-shadow-sm);
	transition: box-shadow var(--brand-transition-fast), border-color var(--brand-transition-fast);
}

a.pkgc-contact-card:hover,
a.pkgc-contact-card:focus-visible {
	border-color: var(--brand-color-primary);
	box-shadow: var(--brand-shadow-md);
	color: var(--brand-color-ink);
	text-decoration: none;
}

.pkgc-contact-card--whatsapp .pkgc-contact-card__icon {
	background-color: rgb(37 211 102 / 0.12);
	color: var(--brand-color-whatsapp-dark);
}

.pkgc-contact-card--static {
	cursor: default;
}

.pkgc-contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--brand-radius-full);
	background-color: var(--brand-color-primary-soft);
	color: var(--brand-color-primary-dark);
}

.pkgc-contact-card__icon svg {
	width: 22px;
	height: 22px;
}

.pkgc-contact-card__title {
	font-size: var(--brand-text-base);
	margin: 0;
}

.pkgc-contact-card__text {
	margin: 0;
	font-size: var(--brand-text-sm);
	color: var(--brand-color-muted);
}

/* ── Contact form ──────────────────────────────────────────────────── */

.pkgc-contact-form-wrap {
	max-width: 640px;
	margin-inline: auto;
}

.pkgc-contact-form__notice {
	margin-block-end: var(--brand-space-4);
}

@media (max-width: 47.98rem) {
	.pkgc-content-hero {
		padding-block: var(--brand-space-8) var(--brand-space-10);
	}

	.pkgc-content-hero__title {
		font-size: var(--brand-text-2xl);
	}

	.pkgc-content-section {
		padding-block: var(--brand-space-8);
	}

	.pkgc-content-cta__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.pkgc-content-cta__inner .btn {
		width: 100%;
	}
}