/* ============================================
   Learn pages — long-form editorial typography + supporting
   bits (chapter eyebrows, table of contents, related-media
   list, blog cards row).

   Used on the /learn/*/ pages (Answer Hub / Q&A style). The
   page itself is composed from .gs-wgs-section bands; this file
   only styles the inside-the-band content patterns specific to
   long-form prose.
   ============================================ */

/* ─── Hero ──────────────────────────────────────────────────
   Learn-page hero. Sits on top of the dark navy + waves section
   variant — the section bg comes from `.gs-wgs-section--dark`;
   this modifier just bumps the vertical padding and styles the
   boxed icon above the headline. Centered everything; lede sits
   below the title at the standard width. */
.gs-learn-hero {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

/* Restore intro top margin here — the fixed main header overlays
   the dark hero, so the title needs extra breathing room or it
   reads as pinned to the header. Scoped to this hero only; the
   base .gs-wgs-section__intro rule deliberately leaves the top
   margin at 0 so it doesn't bleed into every other section. */
.gs-learn-hero .gs-wgs-section__intro {
  margin-top: 3.5rem;
}

/* Boxed icon — proper glass effect over the dark waves bg:
   translucent white tint, hairline border, backdrop blur for the
   frosted-pane look, soft dark shadow to lift it off the bg.
   Matches the glass-card recipe used elsewhere on dark sections. */
.gs-learn-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  margin: 0 auto 1.75rem;
}

.gs-learn-hero__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

/* Eyebrow label — sits between the icon and the H1. Reads as a
   small, faded uppercase tag ("Answer Hub") that frames the
   chapter without competing with the headline. Translucent white
   so it picks up a tint of the navy bg behind it. */
.gs-learn-hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.75rem;
}

@media (max-width: 767px) {
  .gs-learn-hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  .gs-learn-hero__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.25rem;
  }
  .gs-learn-hero__icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ─── Sticky chapter progress bar ────────────────────────────
   Sits in normal flow right after the hero — always visible.
   Once the reader scrolls past, `position: sticky` pins it just
   below the fixed main header (height ~72px). JS swaps the
   chapter eyebrow + title as the reader crosses each chapter,
   and grows the gradient fill in proportion to scroll progress
   through the full chapter range. */
/* Stage wrapper — bounds the sticky bar's scope. Once this
   container scrolls past, position: sticky releases and the bar
   scrolls away with it. Wraps the progress bar + TOC + all
   chapter sections; stops before "Related media" so the bar
   un-sticks at the end of chapter V. */
.gs-learn-stage {
  position: relative;
}

/* 2-col layout inside the stage — TOC sidebar on the left,
   chapter stack on the right. The sidebar uses position: sticky
   so it follows the reader down the page (pinned just below the
   progress bar) until the grid ends. */
.gs-learn-stage__layout {
  display: grid;
  /* Sidebar widened from 280px → 340px so longer chapter titles
     fit on a single line. The original 280px was tuned for EN
     where most titles run ≤32 chars, but DE compound nouns push
     several beyond that (e.g. "Kapitel IV — Wie Giant Swarm IIoT
     umsetzt" = 41 chars) and were wrapping ugly into the gutter
     gap. 340px is the sweet spot: long titles fit, the article
     column still has plenty of room. */
  grid-template-columns: 340px 1fr;
  gap: 4rem;
  max-width: var(--content-frame);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.gs-learn-sidebar {
  position: sticky;
  /* Sits just under the slim progress bar. Math:
     announcement (48 / 0 mobile) + sticky header (66, see top of
     this file) + bar height (6) + breathing room (20) = ~92px. */
  top: calc(var(--announcement-h, 0px) + 92px);
  align-self: start;
}

/* Each chapter section element inside .gs-learn-main is no longer a
   full-width band — strip the section padding/bg and let it sit
   as a content block in the right column. */
.gs-learn-main > .gs-wgs-section {
  padding: 0;
  background: none;
  margin: 0 0 4rem;
}

.gs-learn-main > .gs-wgs-section:last-child {
  margin-bottom: 0;
}

.gs-learn-main .gs-wgs-section__inner {
  max-width: none;
  margin: 0;
}

/* Chapter eyebrow + title are left-aligned inside the column
   instead of centered like they were as full-width section
   intros. */
.gs-learn-main .gs-wgs-section__intro {
  text-align: left;
  max-width: none;
  margin: 0 0 2rem;
}

/* Content block doesn't need to self-center either — let it
   inherit the column width. */
.gs-learn-main .gs-learn-content {
  max-width: none;
  margin: 0;
}

@media (max-width: 900px) {
  .gs-learn-stage__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem 4rem;
  }
  .gs-learn-sidebar {
    position: static;
    top: auto;
  }
}

/* Slim chapter progress bar — full-viewport-width gradient strip
   pinned flush against the bottom of the sticky chrome stack
   (announcement bar + header). No eyebrow / title / TOC dropdown
   chrome — the sidebar's active-link highlight (`.is-active` rule
   on `.gs-learn-toc__list a`, below) carries the "which chapter
   are we in" signal instead.

   IMPORTANT — top offset matches the sticky header's actual
   rendered height (~66px, not the nominal 60). With the smaller
   value the bar's bottom slid behind the header's bottom border
   and read as invisible. Same value the listing filter bar uses,
   for consistency. */
.gs-learn-progress {
  position: sticky;
  top: calc(var(--announcement-h, 0px) + 66px);
  z-index: 40;
}

.gs-learn-progress__track {
  position: relative;
  width: 100%;
  /* 6px is the sweet spot — thin enough to feel like chrome (not
     a content band) but tall enough to actually read as a progress
     indicator. 4px was too anemic; 8px started competing with the
     header for visual weight. */
  height: 6px;
  background: var(--color-border);
  overflow: hidden;
}

.gs-learn-progress__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--gradient-cta);
  transition: width 0.15s linear;
}

/* Sidebar TOC active state — coral text on the link whose target
   chapter is currently in view. JS (learn-progress.js) matches the
   active section's anchor id against each TOC link's href and
   toggles `.is-active` on the match. As the reader scrolls into
   the next chapter, the highlight migrates down the list — single
   visual signal that replaces the old eyebrow/title swap. */
.gs-learn-toc__list a.is-active {
  color: var(--color-brand-accent);
  font-weight: var(--weight-semibold);
}

@media (max-width: 900px) {
  /* Sidebar TOC is hidden — there's no room for it. Mobile users
     scroll naturally through the article. */
  .gs-learn-sidebar {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Progress bar hidden on mobile — the screen real estate is too
     tight to justify the extra chrome strip under the header, and
     without the sidebar there's no companion signal it reinforces.
     Mobile readers get the article flush under the header. */
  .gs-learn-progress {
    display: none;
  }
}

/* Related-media block — strip the default bullet + padding so
   the link list reads as plain prose at the end of the column.
   Class-chained (.gs-learn-content.gs-learn-related-media) so
   the override beats .gs-learn-content's `padding-left: 1.25rem`
   on lists regardless of file order. */
.gs-learn-content.gs-learn-related-media ul {
  list-style: none;
  padding-left: 0;
}

/* ─── Anchor markers ─────────────────────────────────────────
   Invisible jump targets that sit right above each chapter's
   eyebrow. Two jobs:
     1. JS uses their position to decide which chapter is
        "active" in the progress bar — the title swap happens
        exactly when an anchor crosses the trigger line.
     2. TOC links target their `id` so clicks land at this point
        (not the section's outer edge). `scroll-margin-top`
        offsets the landing so the eyebrow appears just below
        the fixed header + sticky progress bar instead of
        underneath them.

   Math: announcement (0 default, 48px when body.has-announcement)
   + header (66) + progress bar (6) + breathing (20) = ~92px past
   --announcement-h. Matches the sidebar's pin offset so the
   landing eyebrow sits at the same y as the sidebar's top edge
   — visually consistent. */
.gs-learn-anchor {
  display: block;
  height: 0;
  scroll-margin-top: calc(var(--announcement-h, 0px) + 92px);
}

/* ─── Chapter eyebrow ─────────────────────────────────────────
   Small uppercase "Chapter I" label that sits above each chapter
   heading. Coral accent so the rhythm is visible as the reader
   scrolls — without competing with the H2 below. */
.gs-learn-chapter {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin: 0 0 0.75rem;
}

/* ─── Prose content ──────────────────────────────────────────
   Wraps the body of each chapter. Max-width keeps long-form
   text from stretching into uncomfortable line lengths; centered
   in the section so it reads like an article column. */
.gs-learn-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
}

.gs-learn-content p {
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}

.gs-learn-content p:last-child {
  margin-bottom: 0;
}

/* H3 / H4 inside prose — sub-headings within a chapter
   (e.g. "Key takeaways", "Closing thoughts"). Smaller than the
   section H2 but still visually distinct. */
.gs-learn-content h3,
.gs-learn-content h4 {
  color: var(--color-fg);
  margin: 2rem 0 0.75rem;
  text-wrap: balance;
}

.gs-learn-content h3 {
  font-size: var(--text-h4);
}

.gs-learn-content h4 {
  font-size: var(--text-h5);
}

.gs-learn-content h3:first-child,
.gs-learn-content h4:first-child {
  margin-top: 0;
}

/* Lists — bulleted role lists, approach pillars, etc. */
.gs-learn-content ul,
.gs-learn-content ol {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.gs-learn-content li {
  margin: 0 0 0.5rem;
}

.gs-learn-content li:last-child {
  margin-bottom: 0;
}

.gs-learn-content strong {
  color: var(--color-fg);
  font-weight: var(--weight-bold);
}

/* Inline links — same recipe used across body prose: inherit
   text color + thin underline, coral on hover. */
.gs-learn-content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.gs-learn-content a:hover {
  color: var(--color-brand-accent);
}

/* Closing-thoughts variant — sits below the FAQ accordion in the
   FAQ chapter. A bit more breathing room above so it visually
   separates from the last accordion row. */
.gs-learn-content--closing {
  margin-top: 2.5rem;
}

/* ─── Table of Contents ──────────────────────────────────────
   Bordered card at the top of the page with anchor jumps to
   each chapter. Matches the .gs-faq card recipe (same border,
   radius, padding) so the page reads as a cohesive set of
   rounded long-form modules. */
.gs-learn-toc {
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem clamp(1.5rem, 3vw, 2.5rem);
}

.gs-learn-toc__title {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
  margin: 0 0 1rem;
}

.gs-learn-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: toc;
}

.gs-learn-toc__list li {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 0;
}

.gs-learn-toc__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gs-learn-toc__list a {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-fg);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color 0.2s ease;
}

.gs-learn-toc__list a:hover {
  color: var(--color-brand-accent);
}

/* ─── Related media list ─────────────────────────────────────
   Simple bullet-less list of media links (podcast episodes,
   etc.). Currently one item per page; the recipe accommodates
   more for future learn pages. */
.gs-learn-media {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gs-learn-media a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: var(--weight-medium);
  transition: color 0.2s ease;
}

.gs-learn-media a:hover {
  color: var(--color-brand-accent);
}

/* ─── From Our Blog — 3-up cards ─────────────────────────────
   Simple editorial blog card row. Each card is the whole click
   target (anchor wraps everything). Topic tag on top, title in
   the middle, date + read-time meta at the bottom. */
.gs-learn-blog-cards {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--content-frame);
}

/* White card on the section's muted bg. No border — the
   bg-contrast carries the edge. Larger radius for the editorial
   "content tile" feel (matches .gs-cs-card on the customer
   pages). Hover: soft lift + dark-navy shadow, no border-accent
   so the card stays in the editorial register rather than
   reading as an interactive system control. */
.gs-learn-blog-card {
  background: var(--color-bg);
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.gs-learn-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 38, 69, 0.1);
}

.gs-learn-blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Cover image — fixed 1200x627 aspect (the OG-image ratio used
   by HubSpot) so cards line up consistently regardless of source
   image dimensions. */
.gs-learn-blog-card__media {
  aspect-ratio: 1200 / 627;
  overflow: hidden;
  background: #f0f1f4; /* fallback while img loads */
}

.gs-learn-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body — padded content area below the image. Flex column so the
   meta row can be pushed to the bottom for aligned card heights. */
.gs-learn-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1.75rem 2rem;
  flex: 1;
}

.gs-learn-blog-card__topic {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
}

.gs-learn-blog-card__title {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  line-height: var(--leading-normal);
  margin: 0;
  text-wrap: pretty;
}

.gs-learn-blog-card__meta {
  margin: auto 0 0; /* push to bottom so card heights align */
  font-size: var(--text-sm);
  color: var(--color-fg-body);
}

@media (max-width: 900px) {
  /* 1-column on tablet/mobile. Cards cap at 400px and center
     inside the grid cell — matches the .gs-cs-card recipe on
     customer pages so they don't span edge-to-edge on phones
     and gain a bit of left/right breathing room. */
  .gs-learn-blog-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
    max-width: none;
  }
  .gs-learn-blog-card {
    max-width: 400px;
    width: 100%;
  }
}