/**
 * resource-page.css — shared styles for the fallback-cluster resource pages.
 *
 * Covers: lgbtq-presentations, relapse-prevention, creative-steps,
 *         introduction-to-12-step-recovery, what-is-gender-identity,
 *         12-step-lgbtq-meetings, employment-opportunities, media,
 *         privacy-policy-lgbt-rehab.
 *
 * This sheet handles only layout/presentation elements NOT already in
 * single.css or design-system.css. It does not touch global selectors.
 */

/* ── Resource page: eyebrow + page title ─────────────────────────── */

.ra-eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-aqua, #00aeef);
  margin: var(--space-lg, 3rem) 0 0.4rem;
}

.ra-page-title {
  margin-top: 0.4rem;
  margin-bottom: var(--space-md, 2rem);
  max-width: 42ch;
  text-wrap: balance;
}

/* ── 12-step meetings table ─────────────────────────────────────── */

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md, 2rem) 0;
  font-size: 0.9rem;
  overflow-x: auto;
  display: block;
}

.article-body table th,
.article-body table td {
  border: 1px solid var(--border, #d0d5dd);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  text-align: left;
}

.article-body table th,
.article-body table td b {
  font-weight: 700;
}

/* ── Employment page ─────────────────────────────────────────────── */

.employment-hero-image {
  width: 100%;
  max-height: 420px;
  overflow: hidden;
}

.employment-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Media page ──────────────────────────────────────────────────── */

.media-intro {
  padding: var(--space-xl, 5rem) 0 var(--space-lg, 3rem);
}

.media-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg, 3rem);
  align-items: center;
}

.media-intro-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md, 8px);
}

.media-intro-copy h1 {
  margin-top: 0;
  margin-bottom: var(--space-sm, 1rem);
}

.media-intro-copy p {
  margin-bottom: var(--space-md, 2rem);
}

/* ── Privacy policy ──────────────────────────────────────────────── */

.privacy-body strong {
  display: block;
  margin-top: var(--space-md, 2rem);
  font-size: 1rem;
}

.privacy-body ul {
  margin: 0.5rem 0 1rem 1.5rem;
}

/* ── Mobile overrides ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .media-intro-grid {
    grid-template-columns: 1fr;
  }

  .media-intro {
    padding: var(--space-lg, 3rem) 0 var(--space-md, 2rem);
  }
}