/* ==========================================================================
   Divine Wellness — Gut Health article ("Gut Health Beyond Digestion")
   Page-scoped styles for /articles/gut-health-beyond-digestion/.
   Builds on css/articles.css (.article, .prose, .article h2) and the shared
   components. Everything here is namespaced .gh-* so no other page is affected.
   All values come from tokens.css (rgba washes on decorative blobs excepted).
   ========================================================================== */

/* =========================== Split hero =========================== */

.gh-hero {
  padding-top: calc(clamp(44px, 6.5vw, 80px) + 84px);
  background: linear-gradient(160deg, var(--tint-mint) 0%, var(--cream-warm) 58%, var(--cream) 100%);
}
.gh-hero__blob-1 {
  top: -160px; right: -120px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(109, 143, 115, 0.20), rgba(109, 143, 115, 0) 70%);
  filter: blur(34px);
  animation-duration: 15s;
}
.gh-hero__blob-2 {
  bottom: -170px; left: -130px; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(227, 122, 109, 0.16), rgba(227, 122, 109, 0) 70%);
  filter: blur(32px);
  animation-duration: 13s;
}
.gh-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.gh-hero__copy { max-width: 600px; }
.gh-hero .breadcrumb { margin-bottom: 18px; }
.gh-hero h1 { margin: 6px 0 14px; }
.gh-hero .lead { max-width: 42ch; margin-bottom: 20px; }
.gh-byline {
  margin: 0 0 12px;
  font-size: var(--fs-ui);
  color: var(--ink-2);
}
.gh-byline strong { color: var(--ink); font-weight: 700; }
.gh-hero__date { margin: 0; }

.gh-hero__media { margin: 0; }
.gh-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-photo);
}

@media (max-width: 860px) {
  .gh-hero__inner { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); }
  .gh-hero__copy { max-width: none; }
}

/* =========================== Body: reading column + wide breakouts ===== */

.gh-article { padding-top: clamp(40px, 5vw, 64px); }
.gh-col  { max-width: 720px;  margin-inline: auto; }
.gh-wide { max-width: 1000px; margin-inline: auto; }

/* Anchor targets clear the sticky nav via html{scroll-padding-top:150px} in base.css.
   No scroll-margin-top here — it would stack with that padding and double the offset. */

/* subsection headings (h3) */
.gh-article h3 {
  margin: 34px 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
}

/* article lists (diamond bullets from components.css, sized to match .prose) */
.gh-article .diamond-list { margin: 0 0 20px; }
.gh-article .diamond-list li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}
.gh-article .diamond-list strong { color: var(--ink-2); }
/* components' .diamond-list li is display:flex, which would split a bold lead-in
   from the text after it into separate flex columns — wrap the content in one span */
.gh-article .diamond-list li > span { flex: 1 1 auto; min-width: 0; }

/* consistent vertical rhythm around the special blocks */
.gh-toc,
.gh-figure,
.gh-yogurt,
.gh-flora,
.gh-product,
.gh-disclosure { margin-block: clamp(30px, 4.5vw, 48px); }

/* first product callout in a run sits closer to its lead-in paragraph */
.gh-product + .gh-product { margin-top: clamp(18px, 2.5vw, 24px); }

/* =========================== "In this article" nav =============== */

.gh-toc {
  border: 1px solid var(--hairline-mid);
  border-radius: var(--r-card-md);
  background: var(--cream-bright);
  padding: clamp(20px, 3vw, 26px) clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-card-soft);
}
.gh-toc__title {
  margin: 0 0 14px;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.gh-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.gh-toc a {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--hairline-mid);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  transition: color var(--hover-fast), border-color var(--hover-fast), background var(--hover-fast);
}
.gh-toc a:hover {
  color: var(--coral);
  border-color: var(--coral);
}

/* =========================== Infographic figure ================== */

.gh-figure { margin-inline: auto; }
.gh-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-card-md);
  border: 1px solid var(--hairline-soft);
  box-shadow: var(--shadow-card-soft);
  background: var(--cream-bright);
  aspect-ratio: 1080 / 1350;               /* mobile (vertical) composition */
}
@media (min-width: 768px) {
  .gh-figure img { aspect-ratio: 1600 / 1200; }  /* desktop composition */
}
.gh-figure figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--body);
  text-align: center;
}
.gh-figure__details {
  margin-top: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card-sm);
  background: var(--cream-bright);
  padding: 4px 18px;
}
.gh-figure__details summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-2);
}
.gh-figure__details summary:hover { color: var(--coral); }
.gh-figure__details[open] summary { margin-bottom: 4px; }
.gh-figure__details ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.gh-figure__details li {
  margin-bottom: 8px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--body);
}
.gh-figure__details p {
  margin: 0 0 12px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--body);
}

/* =========================== Yogurt panel ======================== */

.gh-yogurt {
  background: linear-gradient(160deg, var(--tint-mint) 0%, var(--cream-warm) 100%);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card-md);
  padding: clamp(26px, 4vw, 42px) clamp(24px, 4vw, 44px);
  box-shadow: var(--shadow-card-soft);
}
.gh-yogurt h2 { margin-top: 0; }
.gh-yogurt > :last-child { margin-bottom: 0; }

/* =========================== Vital Flora two-column ============== */

.gh-flora {
  display: grid;
  grid-template-columns: 1fr 260px;    /* compact photo column ~260px */
  column-gap: clamp(32px, 3.5vw, 40px);
  row-gap: 0;                          /* paragraph margins carry vertical rhythm */
  align-items: start;                  /* text + photo aligned at the top */
}
.gh-flora__text  { grid-column: 1; grid-row: 1; }
.gh-flora__more  { grid-column: 1; grid-row: 2; }   /* Intense Care para fills the left column */
.gh-flora__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; }
.gh-flora__text > :first-child { margin-top: 0; }
.gh-flora__more > :last-child  { margin-bottom: 0; } /* no oversized bottom spacing */
.gh-flora__media img {
  display: block;
  width: 100%;
  height: auto;                       /* natural aspect ratio; both packages shown whole */
  border-radius: var(--r-card-md);
  box-shadow: var(--shadow-card);
}
.gh-flora__caption {
  margin: 10px 0 0;
  font-size: var(--fs-small);
  color: var(--body);
}
@media (max-width: 720px) {
  /* stack: descriptions -> photo + caption -> Intense Care paragraph */
  .gh-flora { grid-template-columns: 1fr; }
  .gh-flora__text, .gh-flora__more, .gh-flora__media { grid-column: 1; grid-row: auto; }
  .gh-flora__media { max-width: 360px; margin-bottom: 20px; }
}

/* =========================== Product callout ===================== */

.gh-product {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  background: var(--cream-bright);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card-md);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-card-soft);
}
.gh-product__media {
  width: clamp(140px, 22vw, 188px);
  aspect-ratio: 1 / 1;
  background: var(--cream-bright);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-card-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.gh-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gh-product__body { min-width: 0; }
.gh-product__tag {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.gh-product__name {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink);
}
.gh-product__note {
  margin: 0 0 10px;
  font-size: var(--fs-ui);
  line-height: 1.6;
  color: var(--body);
}
.gh-product .link-arrow { display: inline-block; }
@media (max-width: 540px) {
  .gh-product { grid-template-columns: 1fr; }
  .gh-product__media { width: clamp(150px, 48vw, 188px); }
}

/* =========================== Sign-off + disclosure ============== */

.gh-signoff {
  margin: 26px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink);
}
.gh-disclosure {
  border: 1px solid var(--hairline-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card-sm);
  background: var(--cream-bright);
  padding: clamp(20px, 3vw, 26px) clamp(22px, 3vw, 28px);
}
.gh-disclosure p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  color: var(--body);
}