@charset "UTF-8";
/*!
 * Author archive — /author/<slug>/ and /pl/author/<slug>/, rendered by author.php.
 *
 * Figma: "Persona - Jack - desktop - en" 17729:19858 (pl 17729:19938,
 * mobile 17729:20185 / 17729:20263). Every px below is a 1:1 transcription off that
 * frame: the container is 1146px, which is Figma's 1440 - 2x147, so the frame's own
 * coordinates and these numbers are the same numbers.
 *
 * The frame's boxes reconcile exactly, which is why they are trusted verbatim:
 *   card   1544 = 40 pad + 172 title + 40 gap + 1252 text + 40 pad
 *   title   172 =  52 wave + 20 gap + 100 ident
 *   ident   100 =  58 name + 10 gap +  32 roles
 *   band   1644 =  40 pad + 1544 card + 60 pad
 *
 * WHAT IS DELIBERATELY NOT IN THIS FILE
 * - The expertise grid. `.expertise-section` is styled by style.css:729-761 already
 *   (3-up `justify-content: space-between`, 30px row gap, `.items` column at 15px
 *   gap centred, 24px coral icon, centred label) and that is exactly what Figma
 *   17729:19907 specifies. author.php reuses those classes on purpose. Only the
 *   1024px breakpoint in style.css differs from this file's ladder; left alone
 *   rather than duplicated here, because two owners for one grid is the drift this
 *   migration exists to remove.
 * - The article cards. `.post_item` / `.post_img` / `.post_content` come with
 *   [blog_author] and are styled by style.css:1309-1408. Only the deltas against
 *   Figma are restated below, scoped under `.rs-auth-articles` so nothing on /blog/
 *   or the other consumers of that card moves.
 * - Bootstrap. It arrives via main.min.css on this route (functions.php gates it on
 *   is_author() now) and this sheet is enqueued as its dependent, so it wins ties.
 */
/*!
 * The design system's button atom — atom/btns, Figma component set 30592:2267.
 *
 * WHY THIS FILE EXISTS
 * The same button box was written out longhand in eight places: four faces on the
 * Reliability Protocol LP, both survey submits, and the two hero faces. Every copy
 * was a place to drift, and it did drift — `.protocol-survey__next` ended up with
 * `min-height: 56px` and a second, higher-specificity `button.protocol-survey__next`
 * rule 400 lines away correcting it back to 48. Reviews kept surfacing button
 * findings page by page for exactly this reason.
 *
 * WHAT BELONGS HERE
 * Only the atom's BOX — the numbers that are identical across every colour.
 * Fill, border colour and label colour deliberately stay with the caller, because
 * that is the only axis the atom actually varies (yellow / teal / black / white),
 * and Bootstrap's own .btn-* variants already carry those for the global buttons.
 *
 * WHAT IS NOT HERE
 * The shadow ladder's hover and click steps, the disabled face and the radius
 * custom property live on the global `.btn` block in main.scss, which every button
 * in the theme already gets. Repeating them here would give two owners to one rule.
 *
 * Imported by main.scss and by the standalone page stylesheets that need it — the
 * pages/ entry points do not include main.scss, so a shared partial is the only way
 * they can share a definition.
 */
/* State shadows. The ladder tightens and strengthens as the button is pressed:
     default   0 20px 40px -10px rgba(38,50,56,.2)
     hover     0 10px 20px  -5px rgba(38,50,56,.3)
     click     0  5px 10px  -5px rgba(38,50,56,.4)
   Figma's ON_HOVER motion is 200ms ease-out, not Bootstrap's 150ms ease-in-out. */
/* ── Shell ─────────────────────────────────────────────────────────────────── */
.rs-auth {
  background: var(--rs-white-ivory, #f9faf4);
}

.rs-auth__inner {
  max-width: 1146px;
  margin-inline: auto;
  padding-inline: 0;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.rs-auth-hero {
  padding: 40px 0 60px;
  background: var(--rs-white-ivory, #f9faf4);
}

.rs-auth-hero__grid {
  display: flex;
  gap: 30px;
  align-items: flex-start; /* not stretch — a stretched flex child has nowhere to stick */
}

/* The rail was `sticky_on: [desktop, tablet]`, `sticky_parent: yes`,
   `sticky_offset: 20` in Elementor. Native sticky reproduces the parent-bounded
   part for free. The offset is NOT the bare 20: the site header is
   `.header.fixed-top`, so 20px from the viewport top would sit under it. 20px of
   clear air below the navbar is `--rs-header-height` + 20. */
.rs-auth-hero__rail {
  position: sticky;
  top: calc(var(--rs-header-height, 76px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex: 0 0 460px;
  width: 460px;
}

.rs-auth-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rs-radius-xs, 4px);
}

/* Figma 17729:19897 — the teal face of the button atom.
   COMPOSES with `.btn.btn-atom` from main.min.css rather than replacing it: that
   rule supplies `--bs-btn-border-width: 0`, the inline-flex centring and the icon's
   hover nudge, and Bootstrap's `.btn` brings the shadow state ladder. Only the box
   numbers this face deviates on are restated.
   THE SELECTOR CARRIES THREE CLASSES ON PURPOSE. `.btn.btn-atom` is (0,2,0) and
   `.btn.btn-atom:has(i)` is (0,2,1); a single-class rule here is (0,1,0) and LOSES
   on specificity no matter that this sheet loads later — measured, before this
   comment existed, as a 48px button at 16px/16px where Figma says 52px at 18px.
   Deviations from the atom, all off the frame: 52px box not 48 (as
   pages/confirmation.scss:928 also does), a 20px gap not the atom's 12, and
   symmetric 30px padding rather than the atom's 20px icon-side inset. */
.btn.btn-atom.rs-auth-hero__linkedin {
  min-height: 52px;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  font-size: 1rem;
  line-height: 1;
  gap: 20px;
  padding-right: 30px;
  width: 100%;
  font-size: 18px;
  background: var(--rs-teal-00, #408897);
  border-color: var(--rs-teal-00, #408897);
  color: var(--rs-white-pure, #fffffe);
}
.btn.btn-atom.rs-auth-hero__linkedin:hover, .btn.btn-atom.rs-auth-hero__linkedin:focus-visible {
  background: var(--rs-teal-00, #408897);
  color: var(--rs-white-pure, #fffffe);
}

.rs-auth-hero__card {
  flex: 0 0 656px;
  width: 656px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
  background: var(--rs-white-pure, #fffffe);
  border-radius: var(--rs-radius-xs, 4px);
}

/* `align-self: flex-start` here and on the four nodes below is geometry, not
   decoration. Figma sizes `title` / `name` / the wave / the roles row / both
   kickers as `w: hug` — 448, 448, 40, 264, 240 and 304 against the card's 576
   inner width. A flex child stretches by default, so without these the boxes
   measured 576 wide each. Left-aligned content renders the same either way, which
   is exactly why it would have been shipped wrong: it is invisible on screen and
   only a box-level diff catches it. Applied per node rather than as `align-items`
   on the parents, because the bio is a text block with no explicit width and would
   shrink-wrap to max-content if the parent hugged. */
.rs-auth-hero__head {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 20px;
}

/* The waving hand is display type, not an emoji run inline in a sentence: 40px/1.3
   Montserrat 700 in the palest grey on the ramp. It carries no meaning the name
   does not, hence aria-hidden in the markup. */
.rs-auth-hero__wave {
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.3;
  color: var(--rs-grey-light-30, #d8e2e3);
  align-self: flex-start;
}

.rs-auth-hero__ident {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 10px;
}

/* The ONE h1 on the page. Elementor had two — one per breakpoint, both always in
   the DOM because `elementor-hidden-*` is display:none, not removal. */
.rs-auth-hero__name {
  margin: 0;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  color: var(--rs-teal-00, #408897);
  hyphens: auto;
  overflow-wrap: break-word;
  align-self: flex-start;
}

/* Figma 17729:19932 — "Co-founder • Lead Strategist". The 6px teal dot is a
   ::before on every role AFTER the first, so a one-role author cannot render a
   dangling divider. This replaces style.css:2583-2595, which achieved the same
   thing by hiding Elementor <li>s whose text span was empty; that selector matches
   nothing now and can go when the Elementor documents do. */
.rs-auth-hero__roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 15px;
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--rs-black-second, #5d636a);
}
.rs-auth-hero__roles span + span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 15px;
  border-radius: 50%;
  background: var(--rs-teal-00, #408897);
  vertical-align: middle;
}

.rs-auth-hero__body,
.rs-auth-hero__about,
.rs-auth-hero__expertise {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* "A few words from X" / "Asana & leadership expertise" — 20px/1.4 in the primary
   ink, one step darker than the prose it introduces. h2, not h3: the name is h1 and
   these are the page's only section headings. */
.rs-auth-hero__kicker {
  margin: 0;
  font-family: var(--rs-font-display, Montserrat, sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--rs-black-prime, #34383c);
  align-self: flex-start;
}

/* The ONE override the shared `.expertise-section` needs, scoped so /about/ and the
   other consumers of that grid do not move.
   style.css:731 sizes the three columns `auto auto auto`; Figma 17729:19907 fixes
   them at 170px. That is not cosmetic — with `auto`, "5-stages project mgmt" and
   "Asana Onboarding Certification" get a wide enough column to fit on ONE line, so
   both rows measured 75px instead of Figma's 103 and the grid came out 56px short.
   At 170px they wrap to two lines, which is what the frame draws. */
.rs-auth-hero__expertise .expertise-section {
  grid-template-columns: repeat(3, 170px);
  /* The glyph itself, not just its wrappers. `.icon > span > i` is three boxes
     deep and the innermost is an inline <i> whose own line box measured 26px
     against Figma's 24 — which pushed both rows 2px and the grid 4px. */
  /* Figma fixes every label box at the full 170px column (`textGrow: h` — width
     fixed, height hugs). `.items` centres its children, so without this the four
     single-line labels hugged their text (129-164px) instead. The text is centred
     either way, so this is provable geometry rather than a visible change. */
}
.rs-auth-hero__expertise .expertise-section .items .icon,
.rs-auth-hero__expertise .expertise-section .items .icon span {
  line-height: 1;
}
.rs-auth-hero__expertise .expertise-section .items .icon span,
.rs-auth-hero__expertise .expertise-section .items .icon i {
  display: block;
  font-size: 24px;
  line-height: 1;
}
.rs-auth-hero__expertise .expertise-section .items .title {
  align-self: stretch;
}
.rs-auth-hero__expertise .expertise-section .items .title p {
  font-size: 20px;
  line-height: 32px;
}

/* ACF `author_description` is authored HTML, so Figma cannot answer the paragraph
   rhythm directly — the frame holds the whole bio as ONE text node whose \r\n are
   plain line breaks. It answers it indirectly, and the numbers close exactly:
   Jack's bio is 25 lines at 20px/32 = 800px of text, and the frame's box is 870,
   so the six paragraphs carry 5 x 14px between them. 14px is also what
   `.rs-tldr p` in style.css already uses for article prose, and live computes
   14.4px here — so this is the house value, not a number fitted to a diff.
   (At 20px it measured 900 and read as a 30px overshoot in the bio alone.) */
.rs-auth-hero__bio {
  font-size: 20px;
  line-height: 32px;
  color: var(--rs-black-second, #5d636a);
}
.rs-auth-hero__bio p {
  margin: 0 0 14px;
}
.rs-auth-hero__bio > :last-child {
  margin-bottom: 0;
}

/* ── Articles ──────────────────────────────────────────────────────────────── */
/* Figma 17729:19868. The band is the only part of the article list this file owns:
   60px of padding on a #f9f9f9 ground. `.post_section`'s own `margin: 50px 0` would
   add to that, so it is zeroed here — inside this band the band sets the rhythm. */
.rs-auth-articles {
  padding: 60px 0;
  background: var(--rs-grey-light-50, #f9f9f9);
  /* Figma has the heading at 700; style.css:768 ships 600 for every other consumer
     of this card, so the weight is corrected here rather than there. */
  /* ⚠️ NO CARD STYLING BELOW THIS LINE, DELIBERATELY.
     The card is template-parts/blog-card.php — the blog archive's own card — and
     style.css:1309-1408 is its only stylesheet. This band previously restated the
     card's type off the Figma frame (14px byline in #b2c9cb, 700 h3, 700 read-more,
     pinned 15/10 internal gaps, a 362px image cap) and the result was an author
     list that visibly did not match /blog/. Figma's card and the shipped card
     genuinely disagree — the frame wants a 14px pale byline and a 700 h3 where the
     archive renders 18px body-ink and 600 — and on that conflict the shipped page
     wins, which is this migration's own rule. Changing it is a change to the blog
     card everywhere, not a tweak to this page.

     What stays here is band-level only: the 60px padding, the #f9f9f9 ground, the
     heading, and zeroing `.post_section`'s own 50px margin so the band sets the
     rhythm. */
  /* NO `.post_item:last-child` override either. There was one here, zeroing the
     final card's padding/margin/rule on the argument that nothing follows this
     list — but the card already owns that case at style.css:1337
     (`margin-bottom: 20px`, rule kept), and the archive renders it that way. A
     second owner for one rule is the drift this refactor exists to remove, and on
     a styling conflict the shipped archive wins. */
}
.rs-auth-articles .post_section {
  margin: 0;
}
.rs-auth-articles .title_blog_section {
  font-weight: 700;
  text-align: left;
}

/* ── CTA ────────────────────────────────────────────────────────────────────
   NOT HERE. The closing band is template-parts/cta-band.php — blog-single's own
   component — and pages/blog-single.scss owns every rule for it, including the
   negative-margin overlap between `.rs-bsp-cta-box` and `.rs-bsp-spacer` and its
   per-breakpoint offsets. author.php enqueues that sheet and passes the photo URL
   as a custom property. There was a hand-built `.rs-auth-cta*` band here, built off
   the Figma frame; it is gone. Where the frame and the shipped band disagree — 700
   vs 600 heading, a yellow-highlighted tail vs a white one, radius 4 vs 3 — the
   shipped band wins, which is this migration's rule and what was asked for.
   ──────────────────────────────────────────────────────────────────────────── */
/* ── Below 1200: the 1146 container starts shrinking, so the two fixed columns
      become proportional. The rail keeps its 2:3 share of the row. ───────────── */
@media (max-width: 1199.98px) {
  .rs-auth__inner {
    padding-inline: 20px;
  }
  .rs-auth-hero__rail {
    flex: 1 1 40%;
    width: auto;
  }
  .rs-auth-hero__card {
    flex: 1 1 60%;
    width: auto;
  }
}
@media (max-width: 991.98px) {
  .rs-auth-hero__name {
    font-size: 40px;
  }
}
/* ── Below 768: one column, and the rail stops sticking. Elementor's sticky was
      desktop+tablet only and this is the same cut. Polish is the width that
      actually breaks here — its compound nouns are 10-15% longer than English and
      do not wrap where English does — so the display sizes step down and both
      headings carry hyphens + break-word above. ────────────────────────────── */
@media (max-width: 767.98px) {
  .rs-auth-hero {
    padding: 20px 0 40px;
  }
  /* Figma 17729:20220 stacks the mobile hero as info-card -> photo -> buttons,
     which is NOT the desktop order (photo rail first). The photo and the button
     are already adjacent inside the rail, so ordering the two flex children is
     the whole change — no second markup path. */
  .rs-auth-hero__grid {
    flex-direction: column;
    gap: 30px;
  }
  .rs-auth-hero__card {
    order: 1;
  }
  .rs-auth-hero__rail {
    order: 2;
    position: static;
    top: auto;
    flex: 1 1 auto;
    width: 100%;
    gap: 10px; /* Figma's mobile btns column gap; desktop is 30 */
  }
  .rs-auth-hero__card {
    flex: 1 1 auto;
    width: 100%;
    gap: 30px;
    padding: 20px;
  }
  /* ⚠️ THE GRID COLUMNS MUST BE RESET HERE, and this is not a cosmetic choice.
     `.rs-auth-hero__expertise .expertise-section` is two classes and beats
     style.css's own 1024px rule (`.expertise-section`, one class) at EVERY width,
     because media queries add no specificity. So the desktop `repeat(3, 170px)`
     leaked all the way down: 510px of columns plus 60px of gaps inside a 335px
     card produced a measured 230px HORIZONTAL OVERFLOW at 375. Figma's mobile
     frame is 2-up (17729:20231 is 412 tall — three rows, not two). */
  .rs-auth-hero__expertise .expertise-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
  /* Figma's mobile card runs its inner stacks at 20px, not the desktop 30. */
  .rs-auth-hero__about,
  .rs-auth-hero__expertise {
    gap: 20px;
  }
  .rs-auth-hero__wave {
    font-size: 32px;
  }
  .rs-auth-hero__name {
    font-size: 32px;
  }
  .rs-auth-hero__roles,
  .rs-auth-hero__bio {
    font-size: 18px;
  }
  /* Same three-class specificity as the base rules — main.scss's own mobile cut
     for `.btn.btn-atom` is (0,2,0) and media queries add no specificity, so a
     weaker selector here would lose to it and leave the 52px desktop box on
     mobile. Figma's mobile button (17729:20191) is 44px, which is the atom's
     own mobile height. */
  .btn.btn-atom.rs-auth-hero__linkedin {
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
    width: 100%;
  }
  .rs-auth-articles {
    padding: 40px 0;
  }
  /* Figma 17729:20208 — the section heading drops to 24px/1.4 on mobile. */
  .rs-auth-articles .title_blog_section {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 30px;
  }
}