/* Reel Good — The Journal
 * Component styles for the education blog. Scoped to .rg-journal so nothing here
 * can reach the store, the PDP, or the homepage.
 *
 * Division of labour: Elementor owns page structure, section backgrounds, spacing
 * between sections and the major headings (all GUI-editable in Theme Builder).
 * This file owns the four recurring components the handoff calls out — step list,
 * condition indicators, pack shot, pill tags — plus the type scale and the
 * responsive rules, because none of those survive being hand-maintained per widget.
 */

.rg-journal {
  /* Colour — mirrors Elementor Global Colors; kept here so components are
     self-contained and don't depend on a widget binding that a GUI edit could drop. */
  --rg-warm-white: #F5F2ED;
  --rg-white: #FFFFFF;
  --rg-charcoal: #2A2A2A;
  --rg-graphite: #444444;
  --rg-stone: #6B6258;
  --rg-stone-300: #9C9489;
  --rg-sand-200: #E4DDD1;
  --rg-sand-100: #EFEAE0;
  --rg-border-strong: #D3CABB;
  --rg-teal: #1A8481;
  --rg-teal-hover: #166E6C;
  --rg-teal-soft: #E2EFEE;
  --rg-navy: #2B3A4E;
  --rg-forest: #1E3431;
  --rg-cream: #E8DCC8;
  --rg-cream-66: rgba(232, 220, 200, 0.66);
  --rg-cream-62: rgba(232, 220, 200, 0.62);
  --rg-cream-72: rgba(232, 220, 200, 0.72);
  --rg-cream-18: rgba(232, 220, 200, 0.18);
  /* Condition-scale hues. Clarity is teal; time of day is burnt orange — two
     different accents, per ConditionIndicator.jsx. */
  --rg-burnt-orange: #BD5133;
  --rg-deep-red: #AB3736;

  /* Full fallback stacks, matching the design system's tokens/typography.css. */
  --rg-font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --rg-font-display: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --rg-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rg-shadow-card: 0 4px 14px rgba(42, 36, 28, 0.07);
  --rg-shadow-bait: 0 2px 10px rgba(42, 36, 28, 0.06);
  --rg-shadow-hover: 0 6px 18px rgba(42, 36, 28, 0.10);

  --rg-radius-card: 14px;
  --rg-radius-inset: 12px;
  --rg-radius-md: 8px;      /* condition steps */
  --rg-radius-control: 5px; /* buttons + inputs, per Button.jsx --radius-sm */
  --rg-radius-thumb: 10px;

  --rg-border-medium: 1.5px; /* tags, buttons, inputs, condition steps */

  --rg-dur-fast: 120ms;
  --rg-dur-base: 200ms;
  --rg-ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
}

.rg-journal ::selection { background: var(--rg-teal); color: var(--rg-cream); }
.rg-journal :focus-visible { outline: 2px solid var(--rg-teal); outline-offset: 2px; }

/* Casing is a brand rule. Hello Elementor and several Jet widgets apply
   text-transform to headings; re-assert sentence case for serif/body and keep
   uppercase only where we opt in. */
.rg-journal h1,
.rg-journal h2,
.rg-journal h3,
.rg-journal h4,
.rg-journal h5,
.rg-journal h6 {
  text-transform: none;
}

/* ── Shared atoms ─────────────────────────────────────────────────────────── */

/* Spaced-caps label: eyebrows, nav, breadcrumbs, section rules. */
.rg-label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-stone);
  margin: 0;
}
.rg-label--teal { color: var(--rg-teal); }
.rg-label--faint { color: var(--rg-stone-300); }

/* Skill level. Display-only and deliberately quiet — the audience is beginners
   who don't want to feel graded, so this never becomes a filter chip. */
.rg-skill {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-stone-300);
}

/* Category badge — ported from core/Badge.jsx (tone=accent, variant=soft).
   Note this is NOT a spaced-caps label: it keeps its own casing and only 0.04em. */
.rg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--rg-teal-soft);
  color: var(--rg-teal-hover);
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
}
.rg-badge--neutral { background: var(--rg-sand-100); color: var(--rg-graphite); }

/* Section rule: spaced-caps label left, link right, hairline under. */
.rg-section-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rg-border-strong);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

/* ── Component 1 · Pill tags ──────────────────────────────────────────────── */
.rg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
/* Ported from core/Tag.jsx. The resting state is an OUTLINE, not a fill — the
   filled look belongs to the selected state, and even then it is the soft tint
   rather than solid teal. */
.rg-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--rg-graphite);
  font-family: var(--rg-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  padding: 7px 13px;
  border: var(--rg-border-medium) solid var(--rg-border-strong);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--rg-dur-fast) var(--rg-ease-standard),
              border-color var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-pill:hover { background: var(--rg-sand-100); color: var(--rg-graphite); }
.rg-pill[aria-pressed="true"],
.rg-pill--on {
  background: var(--rg-teal-soft);
  border-color: var(--rg-teal);
  color: var(--rg-teal-hover);
}
.rg-pill[aria-pressed="true"]:hover,
.rg-pill--on:hover { background: var(--rg-teal-soft); color: var(--rg-teal-hover); }

/* The ✕ only appears when the pill is an applied filter, never on a plain tag.
   Drawn as an inline SVG in the markup; this just sizes it. */
.rg-pill__x {
  display: inline-flex;
  opacity: 0.6;
  margin-left: 1px;
  margin-right: -3px;
  color: inherit;
}
.rg-pill__x svg { display: block; }

/* ── Component 2 · Step list ──────────────────────────────────────────────── */
/* Ported from education/StepList.jsx. Flex row per step rather than a padded
   block, so the connector can hang off the 32px bubble at a fixed offset.
   Numerals are plain 1,2,3 — the zero-padded form belongs to the "Start here"
   and "read these three" numerals, which are a different device. */
.rg-steps,
.rg-steps .jet-listing-dynamic-repeater__items {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  counter-reset: rg-step;
}
.rg-steps .jet-listing-dynamic-repeater__items { margin-top: 0; }
.rg-steps > li,
.rg-steps .jet-listing-dynamic-repeater__item {
  position: relative;
  display: flex;
  gap: 16px;
  counter-increment: rg-step;
  padding-bottom: 32px;
}
.rg-steps > li:last-child,
.rg-steps .jet-listing-dynamic-repeater__item:last-child { padding-bottom: 0; }

.rg-steps > li::before,
.rg-steps .jet-listing-dynamic-repeater__item::before {
  content: counter(rg-step);
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--rg-navy);
  color: var(--rg-cream);
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: 15px;
  z-index: 1;
}
/* Connector, from under the bubble to just short of the next one. */
.rg-steps > li::after,
.rg-steps .jet-listing-dynamic-repeater__item::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 6px;
  width: 2px;
  background: var(--rg-border-strong);
}
.rg-steps > li:last-child::after,
.rg-steps .jet-listing-dynamic-repeater__item:last-child::after { display: none; }

.rg-steps .rg-step-body { padding-top: 3px; }
/* The native widget emits the same .rg-step-body wrapper via its format macro,
   so no extra layout handling is needed here. */
.rg-steps .rg-step-title {
  display: block;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--rg-charcoal);
}
.rg-steps .rg-step-text {
  display: block;
  font-family: var(--rg-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--rg-graphite);
  margin-top: 3px;
}

/* ── Component 3 · Condition indicators ───────────────────────────────────── */
/* Ported from education/ConditionIndicator.jsx — "the signature education device".
   Each scale carries its own accent: clarity is teal, time of day is burnt orange.
   Inactive steps stay visible at 0.6 so the reader can see what the guide is NOT
   suited to, which is half the information. */
.rg-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--rg-white);
  border: 1px solid var(--rg-sand-200);
  border-radius: var(--rg-radius-card);
  padding: 24px;
}
.rg-cond { --rg-cond-accent: var(--rg-teal); }
.rg-cond--time { --rg-cond-accent: var(--rg-burnt-orange); }

.rg-cond__label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-stone-300);
  margin-bottom: 10px;
}
.rg-cond__scale { display: flex; gap: 10px; }
.rg-cond__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: var(--rg-border-medium) solid var(--rg-sand-200);
  border-radius: var(--rg-radius-md);
  background: transparent;
  opacity: 0.6;
  font-family: var(--rg-font-body);
  font-size: 12px;
  color: var(--rg-stone);
  transition: all var(--rg-dur-base) var(--rg-ease-standard);
}
.rg-cond__step svg { display: block; }
/* active state — the conditions this guide actually covers */
.rg-cond__step.is-on {
  background: var(--rg-white);
  border-color: var(--rg-cond-accent);
  color: var(--rg-charcoal);
  font-weight: 600;
  opacity: 1;
}

/* ── Component 4 · Bait card (pack shot) ──────────────────────────────────── */
/* Pack shots are 4:5 (150x188), not square — they are a pack, not a thumbnail. */
.rg-bait {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;
  align-items: center;
  background: var(--rg-white);
  border: 1px solid var(--rg-sand-200);
  border-radius: var(--rg-radius-card);
  box-shadow: var(--rg-shadow-bait);
  padding: 24px;
}
.rg-bait__shot {
  width: 150px;
  aspect-ratio: 150 / 188;
  object-fit: cover;
  border-radius: var(--rg-radius-inset);
  background: var(--rg-sand-100);
}
.rg-bait__name {
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rg-charcoal);
  margin: 8px 0 0;
}
.rg-bait__name a { color: inherit; text-decoration: none; }
.rg-bait__desc {
  font-family: var(--rg-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rg-graphite);
  margin: 8px 0 0;
  max-width: 340px;
}
.rg-bait__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.rg-bait__ship {
  font-family: var(--rg-font-body);
  font-size: 12.5px;
  color: var(--rg-stone);
}

/* Small variant — the "Baits for this technique" pair on search results. */
.rg-baitgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rg-bait--sm {
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 18px;
  box-shadow: none;
}
.rg-bait--sm .rg-bait__shot {
  width: 96px;
  aspect-ratio: 96 / 120;
  border-radius: var(--rg-radius-thumb);
}
.rg-bait--sm .rg-bait__name { font-size: 18px; letter-spacing: normal; margin: 0; }
.rg-bait--sm .rg-bait__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rg-stone);
  margin: 6px 0 10px;
}
.rg-bait__price {
  font-family: var(--rg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--rg-charcoal);
}
@media (max-width: 680px) { .rg-baitgrid { grid-template-columns: 1fr; } }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Ported from core/Button.jsx. Sentence case at 14px — the uppercase spaced-caps
   treatment belongs to labels and eyebrows, not to buttons. */
.rg-journal .rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  padding: 10px 20px;
  min-height: 42px;
  border: var(--rg-border-medium) solid transparent;
  border-radius: var(--rg-radius-control);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rg-dur-fast) var(--rg-ease-standard),
              border-color var(--rg-dur-fast) var(--rg-ease-standard),
              color var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-journal .rg-btn:active { transform: scale(0.985); }
.rg-journal .rg-btn--full { width: 100%; }

.rg-journal .rg-btn--teal { background: var(--rg-teal); color: var(--rg-cream); }
.rg-journal .rg-btn--teal:hover { background: var(--rg-teal-hover); color: var(--rg-cream); }
.rg-journal .rg-btn--outline { background: transparent; color: var(--rg-charcoal); border-color: var(--rg-border-strong); }
.rg-journal .rg-btn--outline:hover { background: var(--rg-sand-100); color: var(--rg-charcoal); }
.rg-journal .rg-btn--cream { background: var(--rg-cream); color: var(--rg-charcoal); }
.rg-journal .rg-btn--cream:hover { background: #F1E8D6; color: var(--rg-charcoal); }
.rg-journal .rg-btn--dark { background: var(--rg-charcoal); color: var(--rg-cream); }
.rg-journal .rg-btn--dark:hover { background: #1F1F1F; color: var(--rg-cream); }

/* ── Input (ported from core/Input.jsx) ───────────────────────────────────── */
.rg-journal .rg-input {
  width: 100%;
  font-family: var(--rg-font-body);
  font-size: 14px;
  color: var(--rg-charcoal);
  background: var(--rg-white);
  padding: 11px 13px;
  border: var(--rg-border-medium) solid var(--rg-border-strong);
  border-radius: var(--rg-radius-control);
  transition: border-color var(--rg-dur-fast) var(--rg-ease-standard),
              box-shadow var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-journal .rg-input--lg { font-size: 15px; padding: 13px 14px; }
.rg-journal .rg-input:focus {
  outline: none;
  border-color: var(--rg-teal);
  box-shadow: 0 0 0 3px rgba(26, 132, 129, 0.45);
}
.rg-journal .rg-input::placeholder { color: var(--rg-stone-300); }

/* ── Meta row (byline: read time · date, then skill level) ────────────────── */
.rg-metarow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--rg-font-body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--rg-stone);
}
.rg-metarow .rg-sep { color: #C9C0B3; }
.rg-metarow .rg-skill { margin-left: 6px; }

/* ── Article body ─────────────────────────────────────────────────────────── */
.rg-article__lead {
  font-family: var(--rg-font-body);
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--rg-charcoal);
}
.rg-article__body { font-family: var(--rg-font-body); font-size: 16.5px; line-height: 1.75; color: var(--rg-graphite); }
/* The lead is the first paragraph — styled positionally so writers don't have to
   remember a class. Matches .rg-article__lead, which stays for explicit use. */
.rg-article__body > p:first-child,
.rg-article__lead {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--rg-charcoal);
}
.rg-article__body h2 {
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;   /* Oswald display text is the one place caps are correct */
  color: var(--rg-charcoal);
  margin: 40px 0 18px;
}
.rg-article__body p { margin: 0 0 18px; }
.rg-article__body a { color: var(--rg-teal); text-decoration: underline; text-underline-offset: 2px; }
.rg-article__body a:hover { color: var(--rg-teal-hover); }

/* "What you need" inset. Two-column GRID (not multicolumn) so items read across
   in pairs, matching the reference's L,R,L,R fill order. No bullets. */
.rg-need {
  background: var(--rg-sand-100);
  border-radius: var(--rg-radius-inset);
  padding: 22px 24px;
  margin: 16px 0 0;
}
.rg-need ul,
.rg-need .jet-listing-dynamic-repeater__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rg-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rg-charcoal);
}
@media (max-width: 680px) {
  .rg-need ul,
  .rg-need .jet-listing-dynamic-repeater__items { grid-template-columns: 1fr; }
}

/* Inline figure caption — 2px teal left rule */
.rg-figcaption {
  border-left: 2px solid var(--rg-teal);
  padding-left: 12px;
  font-family: var(--rg-font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rg-stone);
  margin-top: 10px;
}

/* Pull quote */
.rg-pullquote {
  border-left: 3px solid var(--rg-teal);
  padding-left: 26px;
  margin: 30px 0;
  font-family: var(--rg-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.4;
  color: var(--rg-charcoal);
}

/* Contents rail — sticky, active item in teal.
   Elementor containers declare `position: var(--position)`; with --position unset that
   resolves to static and beats a bare `.rg-rail` rule. Set the variable Elementor
   actually reads AND the longhand, at a specificity that clears `.e-con`. */
.rg-journal .rg-rail {
  --position: sticky;
  position: sticky;
  top: 28px;
  align-self: start;
}
.rg-rail__label {
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-stone-300);
  border-bottom: 1px solid var(--rg-sand-200);
  padding-bottom: 12px;
  margin-bottom: 0;
}
.rg-rail__toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
}
.rg-rail a {
  display: block;
  font-family: var(--rg-font-body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--rg-stone);
  text-decoration: none;
  transition: color var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-rail a:hover { color: var(--rg-charcoal); }
.rg-rail a.is-active { color: var(--rg-teal); font-weight: 500; }

/* ── Cards & rows ─────────────────────────────────────────────────────────── */
.rg-card {
  background: var(--rg-white);
  border: 1px solid var(--rg-sand-200);
  border-radius: var(--rg-radius-card);
  transition: box-shadow var(--rg-dur-base) var(--rg-ease-standard);
}
/* Hover deepens the shadow. Nothing lifts and nothing scales — the reference
   declares a hover box-shadow only. */
.rg-card--lift:hover { box-shadow: var(--rg-shadow-hover); }
/* The featured story card carries a resting shadow. */
.rg-featured-card { box-shadow: var(--rg-shadow-card); }
.rg-row { border-bottom: 1px solid var(--rg-sand-200); padding: 26px 0; }
.rg-row:last-child { border-bottom: 0; }

/* Sidebar "Start here" — Oswald teal numeral + label */
.rg-journal .rg-starthere {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.rg-journal .rg-starthere li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.rg-journal .rg-starthere .rg-numeral { font-size: 15px; flex: none; }
.rg-journal .rg-starthere a {
  color: var(--rg-charcoal);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
}
.rg-journal .rg-starthere a:hover { color: var(--rg-teal); }

/* Section-rule "View all" link sits right and stays teal, not the site crimson. */
.rg-journal .rg-section-rule a { color: var(--rg-teal); text-decoration: none; }
.rg-journal .rg-section-rule a:hover { color: var(--rg-teal-hover); }
.rg-journal .rg-section-rule p { margin: 0; }

/* Numbered "start here" / "read these three" numerals */
.rg-numeral {
  font-family: var(--rg-font-display);
  font-weight: 700;
  color: var(--rg-teal);
  letter-spacing: 0.02em;
}

/* Divided list with a right-aligned count (Browse by topic) */
.rg-tlist { list-style: none; margin: 0; padding: 0; }
.rg-tlist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--rg-sand-100);
  padding: 9px 0;
  font-size: 14.5px;
}
.rg-tlist li:last-child { border-bottom: 0; }
.rg-tlist a {
  font-family: var(--rg-font-body);
  font-size: 14.5px;
  color: var(--rg-charcoal);
  text-decoration: none;
}
.rg-tlist a:hover { color: var(--rg-teal); }
.rg-tlist .rg-count { font-family: var(--rg-font-body); color: var(--rg-stone-300); }

/* ── Search ───────────────────────────────────────────────────────────────── */
/* Query highlight is teal-soft, never yellow. */
.rg-journal mark,
.rg-journal .rg-snippet mark {
  background: var(--rg-teal-soft);
  color: var(--rg-charcoal);
  padding: 0 2px;
}
.rg-result { border-top: 1px solid var(--rg-sand-200); padding: 22px 0; }
.rg-journal .rg-searchcount {
  font-family: var(--rg-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rg-stone);
}

/* ── Masthead topic strip ─────────────────────────────────────────────────── */
/* The six topic labels under the masthead rule. The site's global link colour is a
   crimson that has no place on the navy band, so this re-asserts cream. */
.rg-journal .rg-topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.rg-journal .rg-topic-strip p { margin: 0; }
.rg-journal .rg-topic-strip a {
  display: inline-block;
  color: var(--rg-cream-72);
  text-decoration: none;
  transition: color var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-journal .rg-topic-strip a:hover { color: var(--rg-cream); }

/* ── Dark bands (navy / forest) ───────────────────────────────────────────── */
/* Cream is the ONLY text colour permitted on a primary-colour background. */
.rg-onDark { color: var(--rg-cream); }
.rg-onDark--muted { color: var(--rg-cream-66); }
.rg-rule-dark { height: 1px; background: var(--rg-cream-18); border: 0; margin: 0; }

/* ── Thumbnails ───────────────────────────────────────────────────────────── */
/* Elementor sizes the image widget; these fix the crop box so rows stay even
   regardless of the source aspect ratio. */
.rg-journal .rg-row img,
.rg-journal .rg-result img { border-radius: var(--rg-radius-thumb); object-fit: cover; }
.rg-journal .rg-row img { height: 120px; width: 100%; }
.rg-journal .rg-result img { height: 104px; width: 100%; }

/* ── Search: count line + ask panel ───────────────────────────────────────── */
.rg-journal .rg-searchcount { font-size: 14px; }
.rg-journal .rg-searchcount strong {
  color: var(--rg-charcoal);
  font-weight: 500;
}
/* Horizontal panel: copy left, dark button right. */
.rg-journal .rg-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.rg-journal .rg-ask__copy { max-width: 440px; }
.rg-journal .rg-ask__copy p { font-size: 14px; line-height: 1.6; margin: 7px 0 0; }

/* ── Topic landing ────────────────────────────────────────────────────────── */
/* "All guides in this topic" — title / sub-topic / read time. */
.rg-journal .rg-guidelist { list-style: none; margin: 0; padding: 0; }
.rg-journal .rg-guidelist li {
  display: grid;
  grid-template-columns: 1fr 130px 90px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rg-sand-200);
}
.rg-journal .rg-guidelist li:last-child { border-bottom: 0; }
.rg-journal .rg-guidelist a {
  font-family: var(--rg-font-body);
  font-size: 16px;
  color: var(--rg-charcoal);
  text-decoration: none;
}
.rg-journal .rg-guidelist a:hover { color: var(--rg-teal); }
.rg-journal .rg-guidelist .rg-gl-sub { font-size: 12px; color: var(--rg-stone); }
.rg-journal .rg-guidelist .rg-gl-time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-stone-300);
}
@media (max-width: 680px) {
  .rg-journal .rg-guidelist li { grid-template-columns: 1fr; gap: 4px; }
}

/* Cross-nav tiles: Next topic / Related / New here. */
.rg-journal .rg-crossnav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.rg-journal .rg-crossnav__tile {
  background: var(--rg-sand-100);
  border-radius: var(--rg-radius-inset);
  padding: 20px;
}
.rg-journal .rg-crossnav__title {
  display: block;
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--rg-charcoal);
  text-decoration: none;
  margin-top: 6px;
}
.rg-journal .rg-crossnav__title:hover { color: var(--rg-teal); }
@media (max-width: 680px) {
  .rg-journal .rg-crossnav { grid-template-columns: 1fr; }
}

/* "If you read three, read these" — ordered cards with Oswald teal numerals. */
.rg-journal .rg-three-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--rg-white);
  border: 1px solid var(--rg-sand-200);
  border-radius: var(--rg-radius-card);
  padding: 24px;
  height: 100%;
}
.rg-journal .rg-three-card .rg-numeral { font-size: 28px; line-height: 1; }
.rg-journal .rg-three-card h3,
.rg-journal .rg-three-card .rg-three-title {
  font-family: var(--rg-font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--rg-charcoal);
  margin: 0;
}
.rg-journal .rg-three-card .rg-three-title a { color: inherit; text-decoration: none; }
.rg-journal .rg-three-card p { font-size: 14px; line-height: 1.6; color: var(--rg-graphite); margin: 0; }
/* meta pinned to the bottom so the three cards align regardless of dek length */
.rg-journal .rg-three-card .rg-metarow {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11.5px;
  color: var(--rg-stone-300);
}

/* Rail copy-link action — reads as a link, behaves as a button. */
.rg-journal .rg-copylink {
  font-family: var(--rg-font-body);
  font-size: 13px;
  color: var(--rg-stone);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--rg-dur-fast) var(--rg-ease-standard);
}
.rg-journal .rg-copylink:hover { color: var(--rg-teal); }

/* Row deks are measured to 520px in the reference. */
.rg-journal .rg-row .rg-dek { max-width: 520px; margin: 0; }
.rg-journal .rg-dek { margin: 0; }

/* Section rules emitted by shortcodes carry their own label styling. */
.rg-journal .rg-section-rule .rg-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--rg-charcoal);
}

/* ── PDP cross-link block ─────────────────────────────────────────────────── */
/* Appended to the product page, so it has to bring its own frame. */
.rg-pdp-guides {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 0 10px;
}
.rg-pdp-guides .rg-label { padding-bottom: 12px; border-bottom: 1px solid var(--rg-border-strong); }
.rg-pdp-guides .rg-guidelist { margin-top: 4px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Not in the original designs; these are the documented recommendations. */
@media (max-width: 1024px) {
  /* index sidebar drops below the river; article rail collapses above the lead */
  .rg-journal .rg-rail { --position: static; position: static; }
  .rg-conditions { gap: 20px; }
}
@media (max-width: 680px) {
  .rg-bait { grid-template-columns: 1fr; }
  .rg-bait__shot { width: 100%; max-width: 220px; }
  .rg-conditions { grid-template-columns: 1fr; }
  .rg-need ul { columns: 1; }
  .rg-pullquote { font-size: 21px; padding-left: 18px; }
  .rg-article__lead { font-size: 17px; }
  /* Body text never drops below 16px. */
  .rg-article__body { font-size: 16px; }
  .rg-steps > li { padding-left: 40px; }
}

/* Tap targets never below 44px on touch. */
@media (hover: none) and (pointer: coarse) {
  .rg-pill, .rg-tlist a, .rg-rail a { min-height: 44px; display: flex; align-items: center; }
}