/**
 * Generic content pages (page.php), plus Contact & About.
 */
.page-content { max-width: 46rem; }
.page-content__title { margin-bottom: var(--space-5); }
.page-content__body { color: var(--color-text-muted); }
.page-content__body :is(h2, h3) { color: var(--color-text); margin-top: var(--space-7); }
.page-content__body img { border-radius: var(--radius-md); margin-block: var(--space-5); }

/* Contact ------------------------------------------------------------------ */
.contact-page__head { max-width: 42rem; margin-bottom: var(--space-8); }
.contact-page__intro { color: var(--color-text-muted); margin-top: var(--space-3); }
.contact-page__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: start; }
.contact-card, .contact-info { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-7); }
.contact-card h2, .contact-info h2 { margin-bottom: var(--space-5); }
.contact-info__list li { margin-bottom: var(--space-4); }
.contact-info__list a, .contact-info__list span { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.contact-info__list .icon { color: var(--color-accent); width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.contact-info__social { margin-top: var(--space-6); }
.contact-info__social .footer-social__link { background: var(--color-surface-alt); color: var(--color-primary); }
.contact-info__social .footer-social__link:hover { background: var(--color-accent); color: #fff; }

/* About ---------------------------------------------------------------------- */
.about-page__hero { max-width: 46rem; margin-bottom: var(--space-9); }
.about-page__intro { color: var(--color-text-muted); margin-top: var(--space-3); font-size: var(--fs-md); }
.about-page__categories, .about-page__values { margin-bottom: var(--space-9); }
.about-page__categories h2, .about-page__values h2 { margin-bottom: var(--space-6); }
.about-page__cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.about-cat-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.about-cat-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-alt); }
.about-cat-card h3 { font-size: var(--fs-base); margin-bottom: var(--space-1); }
.about-cat-card span { font-size: var(--fs-xs); color: var(--color-text-muted); }

@media (max-width: 900px) {
	.contact-page__grid { grid-template-columns: 1fr; }
	.about-page__cat-grid { grid-template-columns: repeat(2, 1fr); }
}