/* Outreach Africa travel journal — scoped to public blog views. */
.blog-page {
  --blog-serif: "Playfair Display", Georgia, serif;
  --blog-ivory: #fbf7f1;
  --blog-ivory-deep: #f5eee5;
  --blog-red: #a8241f;
  --blog-red-dark: #7d1a16;
  --blog-gold: #9a691d;
  --blog-ink: #201e1b;
  --blog-muted: #6c665f;
  --blog-line: #e8e0d7;
}

.blog-page main h1,
.blog-page main h2,
.blog-page main h3 { font-family: var(--blog-serif); }
.blog-page main { overflow: clip; }

/* Index */
.journal-header {
  padding: clamp(64px, 7vw, 98px) 0 clamp(54px, 6vw, 82px);
  background: var(--blog-ivory);
  border-bottom: 1px solid var(--blog-line);
}
.journal-header-inner { max-width: 820px; }
.journal-eyebrow,
.article-eyebrow,
.article-cta-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--blog-gold);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.blog-page .journal-header h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.journal-intro {
  max-width: 690px;
  margin: 22px 0 0;
  color: var(--blog-muted);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
}
.journal-list { padding: clamp(52px, 6.5vw, 90px) 0; }
.article-card-grid,
.continue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.5vw, 34px);
}
.article-card { min-width: 0; }
.article-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9e2d9;
  border-radius: 10px;
}
.article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.article-card:hover .article-card-media img { transform: scale(1.035); }
.article-card-body { padding: 22px 4px 0; }
.article-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 11px;
  color: var(--blog-muted);
  font-size: .73rem;
  letter-spacing: .02em;
}
.article-card-category {
  color: var(--blog-gold);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.article-card-meta .dot::before { content: "·"; margin-right: 10px; }
.blog-page main .article-card h2,
.blog-page main .article-card h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -.02em;
}
.article-card h2 a,
.article-card h3 a { color: var(--blog-ink); text-decoration: none; }
.article-card h2 a:hover,
.article-card h3 a:hover { color: var(--blog-red); }
.article-card-excerpt {
  margin: 13px 0 15px;
  color: var(--blog-muted);
  font-size: .91rem;
  line-height: 1.7;
}
.article-read-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--blog-red);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}
.article-read-link:hover { gap: 12px; color: var(--blog-red-dark); }

/* Detail hero */
.article-hero { padding: clamp(42px, 6vw, 82px) 0 0; background: var(--blog-ivory); }
.article-breadcrumbs { margin: 0 0 30px; font-size: .78rem; color: var(--blog-muted); }
.article-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.article-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: #a39a91; }
.article-breadcrumbs a { color: var(--blog-muted); text-decoration: none; }
.article-breadcrumbs a:hover { color: var(--blog-red); }
.article-hero-copy { max-width: 920px; }
.blog-page main .article-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(2.65rem, 5.3vw, 4.85rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.045;
}
.article-deck {
  max-width: 780px;
  margin: 23px 0 0;
  color: #57524d;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.72;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 24px; color: var(--blog-muted); font-size: .8rem; }
.article-meta span + span::before { content: "·"; margin-right: 20px; color: #b0a69c; }
.article-hero-media {
  aspect-ratio: 16 / 9;
  max-width: 1240px;
  margin: clamp(38px, 5vw, 64px) auto 0;
  overflow: hidden;
  background: #e4ddd5;
  border-radius: 14px 14px 0 0;
}
.article-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Article layout and typography */
.article-shell { padding: clamp(54px, 7vw, 96px) 0; }
.article-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 800px);
  gap: clamp(48px, 6vw, 82px);
  justify-content: center;
  align-items: start;
}
.article-toc { position: sticky; top: 112px; padding: 18px 0; border-top: 1px solid var(--blog-line); border-bottom: 1px solid var(--blog-line); }
.article-toc-title { margin: 0 0 13px; color: var(--blog-ink); font-size: .73rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc li + li { margin-top: 8px; }
.article-toc a { display: block; color: var(--blog-muted); font-size: .76rem; line-height: 1.45; text-decoration: none; }
.article-toc a:hover { color: var(--blog-red); }
.article-content { min-width: 0; color: #373431; font-size: 18px; line-height: 1.78; }
.article-content p { margin: 0 0 1.45em; color: inherit; font-size: inherit; line-height: inherit; }
.article-content .article-opening { color: var(--blog-ink); font-size: 1.18em; line-height: 1.72; }
.blog-page main .article-content h2 {
  margin: 2.4em 0 .72em;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  scroll-margin-top: 110px;
}
.blog-page main .article-content h3 { margin: 1.7em 0 .65em; font-size: 1.3rem; line-height: 1.28; }
.article-content a { color: var(--blog-red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-content ul,
.article-content ol { margin: 0 0 1.6em; padding-left: 1.35em; }
.article-content li { padding-left: .25em; }
.article-content li + li { margin-top: .5em; }
.article-figure { margin: 2.6em 0; }
.article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.article-figure figcaption { margin-top: 11px; color: var(--blog-muted); font-size: .72em; line-height: 1.55; }
.article-note { margin: 2.25em 0; padding: 26px 30px; background: var(--blog-ivory); border-left: 3px solid var(--blog-gold); }
.article-note strong { display: block; margin-bottom: 7px; color: var(--blog-ink); font-family: var(--blog-serif); font-size: 1.05em; }
.article-note p { margin: 0; font-size: .9em; }
.article-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 1.7em 0 2em; }
.article-split > div { padding: 24px 26px; background: var(--blog-ivory); border: 1px solid var(--blog-line); border-radius: 8px; }
.article-split h3 { margin-top: 0 !important; }
.article-split ul { margin-bottom: 0; font-size: .9em; }
.article-checklist { padding-left: 0 !important; list-style: none; }
.article-checklist li { position: relative; padding-left: 31px; }
.article-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blog-gold); font-weight: 800; }

/* CTAs and tables */
.article-tour-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 3em 0;
  padding: clamp(28px, 4vw, 42px);
  background: var(--blog-ivory-deep);
  border: 1px solid #eadfce;
  border-radius: 12px;
}
.article-tour-cta .article-cta-eyebrow { margin-bottom: 7px; font-size: .68rem; }
.blog-page main .article-tour-cta h2 { margin: 0 0 9px; font-size: clamp(1.55rem, 2.4vw, 2rem); }
.article-tour-cta p { max-width: 490px; margin: 0; font-size: .85em; }
.article-tour-cta .btn { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; border-radius: 6px; text-decoration: none; }
.article-table-wrap { max-width: 100%; margin: 1.8em 0 2em; overflow-x: auto; border: 1px solid var(--blog-line); border-radius: 9px; }
.article-table-wrap:focus-visible { outline: 2px solid var(--blog-gold); outline-offset: 3px; }
.article-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .83em; line-height: 1.5; }
.article-table th,
.article-table td { padding: 17px 18px; border-bottom: 1px solid var(--blog-line); text-align: left; vertical-align: top; }
.article-table thead th { background: var(--blog-ink); color: #fff; font-size: .82em; letter-spacing: .07em; text-transform: uppercase; }
.article-table tbody th { color: var(--blog-ink); font-weight: 700; }
.article-table tbody tr:last-child th,
.article-table tbody tr:last-child td { border-bottom: 0; }
.article-table tbody tr:nth-child(even) { background: var(--blog-ivory); }

/* Related content */
.article-related { padding: clamp(58px, 7vw, 92px) 0; background: var(--blog-ivory); border-top: 1px solid var(--blog-line); }
.article-related + .article-related { background: #fff; }
.related-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.blog-page main .related-heading h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.7rem); letter-spacing: -.025em; }
.related-heading p { max-width: 560px; margin: 7px 0 0; color: var(--blog-muted); font-size: .9rem; }
.related-tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.blog-related-tour { height: 100%; border-radius: 10px; box-shadow: 0 3px 14px rgba(48, 37, 25, .06); }
.blog-related-tour .tour-card-media { aspect-ratio: 4 / 3; }
.blog-related-tour .tour-card-body { min-height: 145px; padding: 20px 20px 12px; }
.blog-related-tour .tour-card-title { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.4; }
.blog-related-tour .tour-card-footer { padding: 10px 20px 20px; }
.continue-grid .article-card-media { aspect-ratio: 16 / 9; }
.continue-grid .article-card-body { padding-top: 18px; }
.blog-page main .continue-grid .article-card h3 { font-size: 1.45rem; }
.generic-article .article-content { margin: 0 auto; }

@media (prefers-reduced-motion: no-preference) {
  .blog-page { scroll-behavior: smooth; }
  .article-card-media img,
  .article-read-link { transition: transform .45s ease, gap .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .article-card-media img,
  .article-read-link { transition: none; }
}

@media (max-width: 991.98px) {
  .article-card-grid,
  .continue-grid,
  .related-tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-layout { grid-template-columns: minmax(0, 800px); }
  .article-toc { position: static; top: auto; margin-bottom: 14px; padding: 22px 24px; background: var(--blog-ivory); border: 1px solid var(--blog-line); border-radius: 8px; }
  .article-toc ol { columns: 2; column-gap: 30px; }
  .article-toc li { break-inside: avoid; }
  .article-toc a { font-size: .8rem; }
  .article-hero-media { border-radius: 0; }
}

@media (max-width: 767.98px) {
  .journal-header { padding-top: 48px; }
  .blog-page .journal-header h1 { font-size: clamp(2.25rem, 10vw, 3.1rem); }
  .article-hero { padding-top: 30px; }
  .article-breadcrumbs { margin-bottom: 22px; }
  .blog-page main .article-title { font-size: clamp(2.25rem, 10.6vw, 3.15rem); line-height: 1.08; }
  .article-hero-media { margin-top: 32px; }
  .article-content { font-size: 17px; line-height: 1.74; }
  .article-split { grid-template-columns: 1fr; }
  .article-tour-cta { grid-template-columns: 1fr; }
  .article-tour-cta .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .related-heading { align-items: start; flex-direction: column; }
}

@media (max-width: 575.98px) {
  .article-card-grid,
  .continue-grid,
  .related-tour-grid { grid-template-columns: 1fr; }
  .article-toc ol { columns: 1; }
  .article-meta span + span::before { display: none; }
  .article-meta { gap: 7px 16px; }
  .article-hero-media { aspect-ratio: 4 / 3; }
  .article-hero-media img { object-position: center; }
  .article-note { padding: 22px; }
  .article-figure { margin: 2em 0; }
  .article-table-wrap::after { content: "Swipe to compare →"; display: block; padding: 10px 14px; color: var(--blog-muted); font-size: .68rem; text-align: right; }
}