/* ============================================================================
   WTL Blog - Field Guide (build-57)

   The content_article hub, ported from the Claude Design "Blog - Editorial" mock
   (templates/blog-editorial/BlogEditorial.dc.html) into the LIVE theme design
   system: warm paper, --gold accents, 3px --radius, IBM Plex Mono detail type,
   Source Serif italic accent. Text-forward and image-free by design, an authority
   reading stream that stays cohesive with the homepage and the inventory pages it
   links into.

   Mobile-first: single column base; the two-column reading layout and the sticky
   rail engage only at the desktop breakpoint. Depends on inventory.css for the
   :root design tokens (enqueued first).
   ========================================================================== */

.fg { background: var(--paper); }

/* ---- Hero (two columns: inventory drive left, featured guide right) ------- */
.fg-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.fg-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 40px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 56px) 0;
}
@media (min-width: 900px) {
  .fg-hero__inner { grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 4.5vw, 64px); }
}
/* The lead reuses the masthead styles below; narrow it inside its hero column. */
.fg-hero .fg-masthead__lead { max-width: 600px; }

/* Mobile: center the hero lead stack (matches the homepage hero). The two-column desktop
   hero (>=900px) stays left-aligned; below it everything centers. */
@media (max-width: 899px) {
  .fg-hero .fg-masthead__lead { align-items: center; text-align: center; max-width: none; }
  .fg-hero .fg-masthead__lead .home-eyebrow { align-self: center; }
  .fg-hero .fg-masthead__ctas { justify-content: center; }
  .fg-hero .fg-trust { justify-content: center; }
}

.fg-masthead__lead {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Keep the shared inline-flex eyebrow content-sized in this left-aligned column
   (the column stretches its block children so the H1 still wraps). */
.fg-masthead__lead .home-eyebrow { align-self: flex-start; }
.fg-masthead__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw + .4rem, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}
.fg-masthead__lede {
  margin: 0;
  font-size: clamp(1.05rem, 1vw + .82rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Masthead CTAs: inventory-first (CRO). Primary = Browse Live Inventory; the guides are secondary. */
.fg-masthead__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: clamp(22px, 3vw, 30px);
}
.fg-masthead__ctas .btn { padding: 15px 26px; font-size: 16px; }
.fg-masthead__ctas .btn__arrow { transition: transform .15s ease; }
.fg-masthead__ctas .btn:hover .btn__arrow { transform: translateX(3px); }
.fg-masthead__secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 15px var(--body);
  color: var(--ink-soft);
  text-decoration: none;
}
.fg-masthead__secondary:hover { color: var(--gold-dark); }

/* Live-count hook: the inventory-motivated visitor's pull-through to the loads. */
.fg-masthead__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font: 600 14px var(--body);
  color: var(--ink);
  text-decoration: none;
}
.fg-masthead__live b { font-weight: 800; }
.fg-masthead__live:hover { color: var(--gold-dark); }
.fg-masthead__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(29, 124, 111, .18);
}

/* Trust proof: the real 4.6 / 45 Google rating + credibility chips (replaces the weak stat strip). */
.fg-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line);
  max-width: 760px;
}
.fg-trust__rating { display: inline-flex; align-items: center; gap: 9px; }
.fg-trust__stars { display: inline-flex; gap: 1px; }
.fg-trust__rating-text { font: 700 13.5px var(--body); color: var(--ink); }
.fg-trust__chips { display: inline-flex; flex-wrap: wrap; gap: 8px 10px; }
.fg-trust__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: 600 12.5px var(--mono);
  letter-spacing: .01em;
  color: var(--ink-soft);
}

/* ---- Hero featured card (right column of the hero) ----------------------- */
.fg-hero__featured {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(26px, 2.6vw, 38px);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(29, 44, 60, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.fg-hero__featured:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(29, 44, 60, .28); }
.fg-hero__featured:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fg-hero__featured::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(243, 243, 243, .045) 0 1px, transparent 1px 14px);
}
.fg-hero__badge {
  position: relative; align-self: flex-start;
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gold); color: var(--navy);
  font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.fg-hero__fkicker { position: relative; font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--gold-light); }
.fg-hero__ftitle {
  position: relative; margin: 0;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.15rem); line-height: 1.08; letter-spacing: -.018em; color: #fff;
  text-wrap: balance;
}
.fg-hero__fdek { position: relative; margin: 0; font-size: 1rem; line-height: 1.55; color: rgba(243, 243, 243, .78); max-width: 46ch; }
.fg-hero__fmeta { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(243, 243, 243, .16); }
.fg-hero__favatar { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-700); border: 1px solid rgba(243, 243, 243, .16); color: var(--gold-light); display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--display); flex: none; }
.fg-hero__fby { font-size: 12.5px; line-height: 1.4; }
.fg-hero__fby b { color: #fff; font-weight: 700; } .fg-hero__fby span { color: rgba(243, 243, 243, .55); display: block; }
.fg-hero__fread { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 700 13.5px var(--body); color: var(--gold-light); white-space: nowrap; }
.fg-hero__fread svg { transition: transform .15s ease; }
.fg-hero__featured:hover .fg-hero__fread svg { transform: translateX(3px); }

/* ---- Body: list + rail --------------------------------------------------- */
.fg-body { background: var(--paper); }
.fg-body__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(34px, 5vw, 64px);
  align-items: flex-start;
}

.fg-main { flex: 1 1 520px; min-width: 0; }

.fg-main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}
.fg-main__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.014em;
  color: var(--ink);
}
.fg-main__note { font: 600 13px var(--body); color: var(--ink-faint); }

/* Numbered post row */
.fg-post {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  align-items: start;
  transition: background .14s ease;
}
.fg-post:hover { background: rgba(29, 44, 60, .025); }
.fg-post:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.fg-post__idx {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold-dark);
  font-weight: 600;
  padding-top: 5px;
}
.fg-post__main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.fg-post__topic {
  font: 700 11.5px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.fg-post__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.4vw + .85rem, 1.65rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
.fg-post:hover .fg-post__title { color: var(--navy); }
.fg-post__excerpt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.fg-post__feet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font: 500 13px var(--body);
  color: var(--ink-faint);
  margin-top: 2px;
}
.fg-post__feet .dot { opacity: .5; }
.fg-post__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 13px var(--body);
  color: var(--gold-dark);
}
.fg-post__cta svg { transition: transform .15s ease; }
.fg-post:hover .fg-post__cta svg { transform: translateX(3px); }

/* Empty state (no published guides yet) */
.fg-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.fg-empty h3 {
  margin: 0 0 8px;
  font: 700 1.2rem var(--display);
  color: var(--ink);
}
.fg-empty p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ---- Rail ---------------------------------------------------------------- */
.fg-rail {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
@media (min-width: 960px) {
  .fg-rail {
    flex: 0 1 300px;
    position: sticky;
    top: 96px;
  }
}
.fg-railcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 1px 2px rgba(29, 44, 60, .05);
}
.fg-railcard__head {
  font: 700 12px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}

/* Topics list */
.fg-topics { list-style: none; margin: 0; padding: 0; }
.fg-topics li { border-top: 1px solid var(--line); }
.fg-topics li:first-child { border-top: 0; }
.fg-topics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  color: var(--ink);
  font: 600 15px var(--body);
}
.fg-topics a:hover { color: var(--gold-dark); }

/* Start-here list */
.fg-starthere { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fg-starthere li { display: grid; grid-template-columns: auto 1fr; gap: 13px; }
.fg-starthere__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--line);
  line-height: 1;
}
.fg-starthere a {
  text-decoration: none;
  font: 600 14.5px var(--body);
  line-height: 1.35;
  color: var(--ink);
}
.fg-starthere a:hover { color: var(--gold-dark); }

/* Rail CTA */
.fg-railcta {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.fg-railcta__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.15;
  color: #fff;
}
.fg-railcta__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(243, 243, 243, .74); }
.fg-railcta .btn { justify-content: center; }

/* ---- Mobile sticky inventory CTA ----------------------------------------- */
/* position:sticky (not fixed) + last child of <main>: pins to the viewport bottom while
   the reader is in the body, then releases above the global footer, so it never covers it.
   Hidden at desktop, where the masthead CTA stays in reach. */
.fg-stickybar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--navy);
  border-top: 1px solid rgba(243, 243, 243, .14);
  box-shadow: 0 -8px 24px rgba(29, 44, 60, .20);
  text-decoration: none;
}
.fg-stickybar__lc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--body);
  color: rgba(243, 243, 243, .85);
}
.fg-stickybar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(29, 124, 111, .28);
}
.fg-stickybar__btn {
  display: inline-flex;
  align-items: center;
  font: 700 12px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 16px;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius);
}
@media (min-width: 820px) { .fg-stickybar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fg-hero__featured,
  .fg-hero__fread svg,
  .fg-masthead__ctas .btn__arrow,
  .fg-post__cta svg,
  .fg-post { transition: none; }
}