/* Content pages — page header, prose, about, contact, blog. Reuses home.css
 * teaser grid for the blog index. */

/* ===================== Page header ===================== */
.hb-page-head { padding-block: var(--sp-8) var(--sp-7); text-align: center; }
.hb-page-head .hb-heading-group { margin-block-end: 0; }
.hb-page-head--start, .hb-page-head .hb-heading-group--start { text-align: start; }

/* ===================== Prose (legal + post body + about story) ===================== */
.hb-prose { line-height: var(--lh-body); color: var(--surface-text); }
.hb-prose p { margin-block: var(--sp-4); }
.hb-prose h2 { font-family: var(--font-display); font-size: var(--fs-h2); margin-block: var(--sp-6) var(--sp-3); }
.hb-prose h3 { font-size: var(--fs-h3); margin-block: var(--sp-5) var(--sp-2); }
.hb-prose ul, .hb-prose ol { margin-block: var(--sp-4); padding-inline-start: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.hb-prose a { color: var(--surface-accent); text-decoration: underline; }
.hb-prose img { border-radius: var(--radius); max-width: 100%; height: auto; }

/* ===================== About ===================== */
.hb-about-hero__lead { max-width: 60ch; margin-inline: auto; margin-block-start: var(--sp-4); color: var(--hb-gold-light); font-size: var(--fs-h4); line-height: var(--lh-body); }
.hb-about-diff { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-block-start: var(--sp-6); }
@media (max-width: 680px) { .hb-about-diff { grid-template-columns: 1fr; } }
.hb-about-diff__item { padding: var(--sp-5); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); }
.hb-about-diff__item h3 { font-size: var(--fs-h3); color: var(--surface-accent); margin-block-end: var(--sp-2); }
.hb-about-diff__item p { color: var(--surface-text-muted); }
.hb-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: center; }
@media (max-width: 680px) { .hb-stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); } }
.hb-stats__num { display: block; font-family: var(--font-display); font-size: var(--fs-display); color: var(--surface-accent); line-height: 1; }
.hb-stats__label { color: var(--surface-text-muted); font-size: var(--fs-small); }

/* ===================== Contact ===================== */
.hb-contact-cards { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 880px) { .hb-contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hb-contact-cards { grid-template-columns: 1fr; } }
.hb-contact-card { padding: var(--sp-5); background: var(--surface-bg-alt); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--sp-2); }
.hb-contact-card h3 { font-size: var(--fs-h3); color: var(--surface-accent); }
.hb-contact-card__link { font-weight: var(--fw-medium); color: var(--surface-text); }
.hb-contact-card__link:hover { color: var(--surface-accent); }
.hb-contact-card__sub { font-size: var(--fs-small); color: var(--surface-text-muted); }
.hb-contact-card__socials { display: flex; gap: var(--sp-3); }
.hb-contact-card__socials a { color: var(--surface-accent); }
.hb-contact-main__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 880px) { .hb-contact-main__grid { grid-template-columns: 1fr; } }
.hb-contact-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.hb-contact-form input, .hb-contact-form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--surface-border); border-radius: var(--radius-sm); background: var(--surface-bg-alt); color: var(--surface-text); font-family: inherit; font-size: var(--fs-body); }
.hb-contact-form__submit { align-self: flex-start; }
.hb-contact-form__note { font-size: var(--fs-small); color: var(--surface-accent); }

/* ===================== Blog ===================== */
.hb-empty { text-align: center; color: var(--surface-text-muted); padding-block: var(--sp-7); }
.hb-post__meta { color: var(--hb-gold-light); font-size: var(--fs-small); margin-block-start: var(--sp-2); }
.hb-post__hero { margin-block: 0; }
.hb-post__hero .hb-container { padding-block: var(--sp-6); }
.hb-post__img { width: 100%; border-radius: var(--radius-lg); }