/*
 * Path:        public_html/assets/css/page_article_post.css
 * Filename:    page_article_post.css
 * Project:     revisualized.com
 * Description: Article detail page layout: header meta row (badge, date,
 *              reading time), lede, hero image slot, tag footer, adjacent
 *              article navigation, and a minimal print pass for the manual
 *              print preview check. Body typography
 *              comes from the shared .content_body block in main.css.
 * Status:      production
 * Revision:    4
 * Updated:     2026-08-02 (Rev 4: .detail_hero_image removed; the hero is now the
 *              full-bleed band above the title, styled in hero.css.)
 * Included by: articles/detail.php via $page_stylesheet (Contract 1)
 */

.detail_header { margin-bottom: 24px; }

.detail_header__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.detail_header__date,
.detail_header__read_time { font-size: 0.688rem; color: var(--color-text-label); }

.detail_header__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-page-text);
  margin-bottom: 12px;
}

.detail_header__lede {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.detail_tag_footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border-separator);
}

.adjacent_navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-border-separator);
}

.adjacent_navigation__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 160ms ease;
  max-width: 45%;
}

.adjacent_navigation__link:hover { color: var(--color-accent-hover); }

.adjacent_navigation__direction {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-label);
  margin-bottom: 4px;
}

@media print {
  .selector,
  .navigation,
  .mobile_navigation_panel,
  .adjacent_navigation,
  .footer { display: none !important; }

  body { background: #ffffff; color: #000000; }
}