/* Article (Figma 07_Article 363:6365, values ×0.70). */

/* ---------------------------------------------------------------------- hero */

/* Aqua band from the viewport top (behind the fixed header) down past the
   meta strip; content below is white. The band itself is a flat #b8dbdf fill
   (verified by pixel sampling); the media slot carries the projection art
   with two ckl-tool (tunnel.js `articleHero`) canvases clipped over its
   gradient panels — see the hero-art rules below. */
.ckl-article__hero {
  background-color: var(--ckl-aqua-blue);
  padding-bottom: clamp(3rem, 7.52vw, 6.95rem); /* 159 below the meta strip */
}

.ckl-article__title {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: clamp(2.25rem, 4.73vw, 4.375rem); /* 100 */
  line-height: 84%;
  letter-spacing: -0.01em;
  color: var(--ckl-blue);
  margin: 0;
}

.ckl-article__hero-media {
  position: relative;
  margin: clamp(1.5rem, 2.36vw, 2.1875rem) 0 0; /* 50 — air below the title */
  overflow: hidden;
  aspect-ratio: 1894 / 752;
}

.ckl-article__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero art (no featured image) — Figma export of node 363:6889, 1894×752:
   same aspect ratio as the media box, so it sits inset 0 and every %
   coordinate below maps 1:1 onto the artwork. */
.ckl-article__hero-media .ckl-article__hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ckl-tool animated panels: two tunnel.js canvases (preset `articleHero`)
   positioned and clip-pathed exactly over the two gradient parallelograms of
   the art. The polygon is inset ~2px so the black wireframe stroke stays
   visible; any clip slack shows the baked gradient underneath — never the
   aqua field. Both panels share the same local shape (right side rises
   33.25% of the local height). */
.ckl-article__hero-panel {
  position: absolute;
  -webkit-clip-path: polygon(0.7% 33.6%, 99.3% 0.4%, 99.3% 66.4%, 0.7% 99.6%);
  clip-path: polygon(0.7% 33.6%, 99.3% 0.4%, 99.3% 66.4%, 0.7% 99.6%);
}

/* Big right panel — bbox 1237.55→1535.63 × 117→634.04 of 1893.52×752. */
.ckl-article__hero-panel--main {
  left: 65.357%;
  top: 15.559%;
  width: 15.742%;
  height: 68.756%;
}

/* Small far-left panel — bbox 357.91→425.83 × 318.84→436.65. */
.ckl-article__hero-panel--far {
  left: 18.901%;
  top: 42.399%;
  width: 3.587%;
  height: 15.667%;
}

/* ---------------------------------------------------------------- meta strip */

.ckl-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
  margin-top: 2.1875rem; /* 50 below the media */
}

.ckl-article__meta-authors {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.ckl-article__meta-author {
  display: flex;
  align-items: center;
  gap: 1.3125rem; /* 30 */
}

/* Square avatar over the blue-gradient art (Figma mask stack). The art only
   shows through transparent/cut-out headshots; opaque photos cover it. */
.ckl-article__meta-author img {
  width: 3.6875rem; /* 84 */
  height: 3.6875rem;
  object-fit: cover;
  background: url('../img/author-photo-bg.png') center / cover no-repeat;
}

.ckl-article__meta-author strong {
  display: block;
  font-weight: 700;
  font-size: 1.05rem; /* 24 */
  line-height: 1;
  color: var(--ckl-dark);
}

.ckl-article__meta-author em {
  display: block;
  font-style: normal;
  font-size: 0.7875rem; /* 18 */
  line-height: 1;
  color: var(--ckl-dark);
  margin-top: 0.35rem; /* 8 */
}

.ckl-article__meta-right {
  display: flex;
  align-items: center;
  gap: 1.5rem 3.8125rem; /* 87 */
  flex-wrap: wrap;
  margin-left: auto;
}

.ckl-article__meta-read {
  font-size: 1.25rem; /* 20 @100% — meta text opts out of the ×0.70 rule */
  line-height: 1;
  color: var(--ckl-dark);
  margin: 0;
}

.ckl-article__meta-read a {
  font-weight: 700;
  color: var(--ckl-dark);
  transition: color 0.2s ease-in-out;
}

.ckl-article__meta-read a:hover {
  color: var(--ckl-blue);
}

.ckl-article__meta-dates {
  display: flex;
  gap: 1.36rem; /* 31 */
}

.ckl-article__meta-date span {
  display: block;
  font-weight: 500;
  font-size: 0.875rem; /* 14 @100% — meta text opts out of the ×0.70 rule */
  line-height: 1.2;
  color: var(--ckl-secondary, #313131);
}

.ckl-article__meta-date time {
  display: block;
  font-size: 1.25rem; /* 20 @100% — meta text opts out of the ×0.70 rule */
  line-height: 1.2;
  color: var(--ckl-secondary, #313131);
}

/* SHARE THIS — light-gray filled block, 242.6×82 (Figma 368:7255). */
.ckl-article__share-toggle {
  --sweep-from: var(--ckl-gray);
  --sweep-to: var(--ckl-blue);
  --sweep-label: var(--ckl-dark);
  --sweep-label-hover: var(--ckl-white);
  height: 3.5875rem; /* 82 */
  padding: 0 2.2rem;
  font-size: 1.225rem; /* 28 */
  font-weight: 500;
}

/* -------------------------------------------------------------------- layout */

.ckl-article__layout {
  /* Single source of truth for both sticky columns (sidebar + share rail).
     --ckl-header-h is published by header.js as the height of the SCROLLED
     bar; the 5.25rem fallback (84px) reproduces the previous hardcoded
     7.5rem/120px exactly, so first paint and no-JS are unchanged. */
  --ckl-sticky-top: calc(var(--ckl-header-h, 5.25rem) + 2.25rem); /* 84 + 36 = 120 */
  --ckl-sticky-bottom: 1.5rem; /* air above the see-also band */

  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 22.27rem) minmax(0, 1fr) 3.5875rem; /* 509 / 1042 / 82 */
  gap: clamp(2rem, 6.29vw, 5.8125rem); /* 133 */
  padding-top: clamp(4rem, 8.89vw, 8.225rem); /* 188 */
  /* Symmetric bottom air (Figma: ~188 between the author box and the see-also
     band). The see-also row is self-padded, but now that it carries the gray
     background its edge is a visible boundary — without this the sticky TOC
     and the content end flush against it. */
  padding-bottom: clamp(4rem, 8.89vw, 8.225rem);
}

/* The sidebar is pinned, so it MUST be bounded: without a cap its natural
   height grows with the TOC (real worst case in this DB: 44 headings) and
   everything past the fold became unreachable — the box is pinned, so the page
   can't scroll to it, and it had no scroller of its own.
   The cap is done with flexbox, not JS measurement: the breadcrumb, heading,
   eyebrow and CTA stay at natural size and the scroller absorbs the remainder,
   so the arithmetic is redone by the layout engine at every viewport for free.

   `svh`, not `dvh`: for a PINNED box dvh is actively wrong — on iOS it grows
   when the URL bar collapses, which would resize the scroller mid-scroll. The
   plain `vh` declaration above it is the fallback for pre-2022 engines. */
.ckl-article__sidebar {
  position: sticky;
  top: var(--ckl-sticky-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 3.5rem; /* 80 */
  min-height: 0;
  max-height: calc(100vh - var(--ckl-sticky-top) - var(--ckl-sticky-bottom));
  max-height: calc(100svh - var(--ckl-sticky-top) - var(--ckl-sticky-bottom));
}

/* Everything except the TOC keeps its natural size; the TOC takes the rest. */
.ckl-article__sidebar > .ckl-breadcrumb,
.ckl-article__sidebar-cta {
  flex: 0 0 auto;
}

.ckl-article__toc {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.ckl-article__toc-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.ckl-article__toc-heading,
.ckl-article__toc-title {
  flex: 0 0 auto;
}

/* The scroll box. Carries the 56 Figma step that used to sit on the list, so
   the step bounds the scroller rather than the content inside it. */
.ckl-article__toc-scroll {
  flex: 1 1 auto;
  margin-top: 2.45rem; /* 56 */
  min-height: 5.25rem; /* ≈3 items — a 40px scroll window is not usable */
  overflow-y: auto;
  overflow-x: hidden;
  /* Unconditional: base.css only sets this under .lenis-smooth, and the
     scroller must also contain its overscroll under reduced motion. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ckl-blue) rgb(0 0 0 / 6%);
}

/* Matches the document scrollbar in base.css, at 6px instead of 10px, so the
   two scrollbars on screen read as the same system. */
.ckl-article__toc-scroll::-webkit-scrollbar {
  width: 0.375rem;
}

.ckl-article__toc-scroll::-webkit-scrollbar-track {
  background-color: rgb(0 0 0 / 4%);
}

.ckl-article__toc-scroll::-webkit-scrollbar-thumb {
  background-color: var(--ckl-blue);
  border: 0.0625rem solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

/* No `scrollbar-gutter: stable`: it would reserve the 6px on every post and
   shift the TOC text off its Figma position. The padding appears only once the
   list actually overflows. */
[data-toc].is-scrollable .ckl-article__toc-scroll {
  padding-right: 0.75rem;
  --fade-top: 1.5rem;
  --fade-bottom: 1.5rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    transparent 100%
  );
}

/* Honest ends: no fade where there is nothing more to scroll to. */
[data-toc].is-at-top .ckl-article__toc-scroll {
  --fade-top: 0px;
}

[data-toc].is-at-bottom .ckl-article__toc-scroll {
  --fade-bottom: 0px;
}

/* Pathological short viewport (long title in the breadcrumb on a 600px-tall
   laptop): inline flow is always readable, a 40px scroll window is not. */
@media (max-height: 560px) {
  .ckl-article__sidebar {
    position: static;
    max-height: none;
  }

  .ckl-article__toc-scroll {
    max-height: none;
  }
}

/* Breadcrumb on the article sidebar: Special Gothic 28, blue underlined
   links, the post title as a plain dark line (Figma 525:3424). Overrides the
   .ckl-tag mono face the shared partial carries. */
.ckl-article__sidebar .ckl-breadcrumb {
  font-family: var(--ckl-font-text);
  font-weight: var(--ckl-fw-text);
  font-size: 1.225rem; /* 28 */
  line-height: 140%;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ckl-dark);
  display: block;
}

.ckl-article__sidebar .ckl-breadcrumb a {
  color: var(--ckl-blue);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  transition: color 0.2s ease-in-out;
}

.ckl-article__sidebar .ckl-breadcrumb a:hover {
  color: var(--ckl-dark);
}

/* The post-title crumb sits on its own line with no leading "/" (Figma). */
.ckl-article__sidebar .ckl-breadcrumb [aria-current='page'] {
  display: block;
}

.ckl-article__sidebar .ckl-breadcrumb .ckl-breadcrumb__sep:has(+ [aria-current='page']) {
  display: none;
}

.ckl-article__toc-heading {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: 2.1875rem; /* 50 */
  line-height: 100%;
  color: var(--ckl-dark);
  margin: 0 0 2.45rem; /* 56 */
}

/* ≤1024px this replaces the heading and drives the disclosure; it carries the
   same condensed type so it still READS as the Figma heading. */
.ckl-article__toc-mobile-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: 2.1875rem; /* 50 */
  line-height: 100%;
  color: var(--ckl-dark);
  transition: color 0.2s ease-in-out;
}

.ckl-article__toc-mobile-toggle:hover {
  color: var(--ckl-blue);
}

.ckl-article__toc-mobile-toggle svg {
  flex: 0 0 auto;
  transition: transform 0.28s var(--ckl-ease-panel);
}

.ckl-article__toc-mobile-toggle[aria-expanded='false'] svg {
  transform: rotate(-90deg);
}

.ckl-article__toc-title {
  display: block;
  font-size: 1.05rem; /* 24 */
  color: var(--ckl-dark);
}

/* Scoped to the top-level list on purpose: as a descendant selector this would
   also hit the nested .ckl-article__toc-sub lists and put a 56px step above
   every one of them. The 2.45rem step now lives on .ckl-article__toc-scroll so
   it bounds the scroll box instead of the list inside it. */
.ckl-article__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Group rows hold the link plus its toggle. */
.ckl-article__toc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

.ckl-article__toc-toggle {
  display: none; /* revealed by article.js only when the list overflows */
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ckl-dark);
  cursor: pointer;
  line-height: 0;
  transition:
    color 0.2s ease-in-out,
    transform 0.28s var(--ckl-ease-panel);
}

[data-toc].is-collapsible .ckl-article__toc-toggle {
  display: block;
}

.ckl-article__toc-toggle:hover {
  color: var(--ckl-blue);
}

.ckl-article__toc-toggle svg {
  transition: transform 0.28s var(--ckl-ease-panel);
}

.ckl-article__toc-toggle[aria-expanded='false'] svg {
  transform: rotate(-90deg);
}

/* Nested sub-lists. Indentation comes from the nesting now, so the level
   classes only carry TYPE (weight / leading / marker), never position. */
.ckl-article__toc-sub {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* `display: flex` above outranks the UA's [hidden] { display: none }, so the
   collapsed state has to be restated here — same for the mobile panel. */
.ckl-article__toc-sub[hidden],
.ckl-article__toc-panel[hidden] {
  display: none;
}

/* Measurement probe. article.js decides whether the TOC needs collapsing from
   its NATURAL height — in the collapsed state the list obviously fits and would
   un-collapse itself. The class is added, both heights are read, and it is
   removed within the same synchronous block, so it never paints. */
[data-toc].is-measuring .ckl-article__toc-sub {
  display: flex !important;
  height: auto !important;
}

[data-toc].is-measuring .ckl-article__toc-panel {
  display: flex !important;
  height: auto !important;
}

/* Markers as pseudo-elements, which fixes two things at once: `overflow: auto`
   on the scroller clips an outside list-marker, and `::marker { content }` is
   Chromium/WebKit-only (Firefox would fall back to a default disc). */
.ckl-article__toc-sub li {
  position: relative;
  padding-left: 1.575rem; /* 36 */
}

.ckl-article__toc-sub li::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.62em;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background-color: var(--ckl-dark);
}

/* Deeper tiers step once more, then stop — the design defines no tier below. */
.ckl-article__toc-sub li.ckl-toc-level-4 {
  padding-left: 2.625rem; /* 36 + 24 */
}

.ckl-article__toc-sub li.ckl-toc-level-4::before {
  left: 1.55rem;
}

.ckl-article__toc-sub li.ckl-toc-level-5,
.ckl-article__toc-sub li.ckl-toc-level-6 {
  padding-left: 3.675rem; /* 36 + 48 */
}

.ckl-article__toc-sub li.ckl-toc-level-5::before,
.ckl-article__toc-sub li.ckl-toc-level-6::before {
  left: 2.6rem;
}

/* Sub-tier items: SG Regular 400 (inherited), leading 1.7 (Figma 368:7268). */
.ckl-article__toc a {
  font-size: 1.05rem; /* 24 */
  line-height: 1.7;
  color: var(--ckl-dark);
  transition: color 0.2s ease-in-out;
}

/* Group tier: SG Medium 500 (the variable face renders it natively), leading 1
   (Figma 368:7260). h1 shares this tier — 62 posts put an h1 in the body. */
.ckl-article__toc-list > li.ckl-toc-level-1 > .ckl-article__toc-row a,
.ckl-article__toc-list > li.ckl-toc-level-2 > .ckl-article__toc-row a {
  font-weight: 500;
  line-height: 1;
}

.ckl-article__toc a:hover,
.ckl-article__toc a.is-active {
  color: var(--ckl-blue);
}

.ckl-article__toc a.is-active {
  font-weight: 500;
}

.ckl-article__sidebar-cta p {
  font-weight: 700;
  font-size: 1rem;
  line-height: 130%;
  color: var(--ckl-dark);
  margin: 0 0 0.75rem;
}

/* ------------------------------------------------------------- audio player */

/* ---------------------------------------------- audio player (ElevenLabs) */

/* O player vem do plugin cheesecake-elevenlabs-audio e emite um <audio controls>
   nativo — os controles em si nao sao estilizaveis de forma consistente entre
   engines, entao aqui so garantimos que ele ocupe o slot corretamente.
   O rotulo do plugin e escondido porque e hardcoded em pt-BR; single.php imprime
   a versao bilingue do tema (doc §16). */
.ckl-article__player .audio-label {
  display: none;
}

.ckl-article__player .elevenlabs-audio-player {
  margin: 0;
}

.ckl-article__player .elevenlabs-audio,
.ckl-article__player audio {
  display: block;
  width: 100%;
  height: 3.4375rem; /* alinha com a altura da barra que existia antes */
}

.ckl-article__player {
  margin-bottom: 2.8rem; /* 64 gap to the body text (178 − player 114) */
}

.ckl-article__player-title {
  font-weight: 500;
  font-size: 1.225rem; /* 28 */
  line-height: 1.3;
  color: var(--ckl-dark);
  margin: 0 0 0.7875rem; /* 18 */
}

.ckl-audio-bar {
  display: flex;
  align-items: center;
  gap: 1.05rem; /* ~24 */
  height: 2.625rem; /* 60 */
  padding-inline: 1.05rem 0.82rem; /* 24 / 19 */
  background-color: var(--ckl-gray);
}

.ckl-audio-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0.25rem;
  background: transparent;
  color: var(--ckl-dark);
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.ckl-audio-bar button:hover,
.ckl-audio-bar button:focus-visible {
  color: var(--ckl-blue);
}

.ckl-audio-bar__play .ckl-audio-bar__icon-play,
.ckl-audio-bar__play .ckl-audio-bar__icon-pause {
  width: 0.66rem; /* 15 */
  height: 0.79rem; /* 18 */
}

.ckl-audio-bar__play[aria-pressed='false'] .ckl-audio-bar__icon-pause,
.ckl-audio-bar__play[aria-pressed='true'] .ckl-audio-bar__icon-play {
  display: none;
}

.ckl-audio-bar__time {
  font-size: 0.6125rem; /* 14 */
  color: var(--ckl-dark);
  white-space: nowrap;
  min-width: 4.5em;
}

/* Track/progress/thumb straight from the exported bar SVGs: 4px #c5c5c5
   track, #0227e9 fill and 10px round thumb. */
.ckl-audio-bar__seek {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 0.175rem; /* 4 */
  border-radius: 0.0875rem;
  background:
    linear-gradient(var(--ckl-blue), var(--ckl-blue)) no-repeat left center / var(--ckl-audio-progress, 0%) 100%,
    #c5c5c5;
  cursor: pointer;
}

.ckl-audio-bar__seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0.4375rem; /* 10 */
  height: 0.4375rem;
  border-radius: 50%;
  border: 0;
  background: var(--ckl-blue);
}

.ckl-audio-bar__seek::-moz-range-thumb {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  border: 0;
  background: var(--ckl-blue);
}

.ckl-audio-bar__mute[aria-pressed='true'] .ckl-audio-bar__waves {
  opacity: 0.25;
}

.ckl-audio-bar__mute svg {
  width: 0.82rem; /* 18.75 */
  height: 0.79rem;
}

.ckl-audio-bar__rate svg {
  width: 0.9rem; /* 20.4 */
  height: 0.2rem;
}

/* Post body content lives in content.css — it is a separate concern (and a much
   larger one) than the article chrome this file owns. */

/* -------------------------------------------------- Summary/FAQ accordions */

/* The markup comes from the parent (sd_get_post_summary_html /
   sd_get_post_faq_html in extras.php) and cannot change, so this is pure
   re-skin. The parent's own stylesheets are dequeued, which is what brought the
   native ▶ disclosure marker back, left .post-summary__toggle-icon as an empty
   invisible span, and dropped .post-faq__title to a raw UA <h2>.
   The BEHAVIOUR locked in doc §12 (height tween, is-closing, mid-flight
   reversal, reduced-motion) is untouched here — only paint. */

/* Kill the native marker in both engines. */
.post-summary__trigger,
.post-faq__question {
  list-style: none;
  cursor: pointer;
}

.post-summary__trigger::-webkit-details-marker,
.post-faq__question::-webkit-details-marker {
  display: none;
}

.post-summary {
  background-color: var(--ckl-gray);
  border: 0;
  border-radius: 0; /* the brand has no radius */
  margin-bottom: 2.8rem; /* 64 block step */
}

.post-summary__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem;
}

.post-summary__label {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 0.7875rem; /* 18 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ckl-blue);
}

/* The parent emits an EMPTY <span> here; give it the glyph rather than change
   the markup. Two bars → a plus that rotates into an ✕ when open. */
.post-summary__toggle {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--ckl-blue);
}

.post-summary__toggle-icon {
  position: absolute;
  inset: 0;
  transition: transform 0.28s var(--ckl-ease-panel);
}

.post-summary__toggle-icon::before,
.post-summary__toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--ckl-white);
  transform: translate(-50%, -50%);
}

.post-summary__toggle-icon::before {
  width: 0.75rem;
  height: 2px;
}

.post-summary__toggle-icon::after {
  width: 2px;
  height: 0.75rem;
}

.post-summary[open] .post-summary__toggle-icon {
  transform: rotate(45deg);
}

/* 🔴 Padding must NEVER sit on .post-summary__content — article.js tweens that
   box to 0px, and padding there would leave a visible strip when closed. That
   is exactly why the parent emits __content-inner. */
.post-summary__content-inner {
  padding: 0 1.4rem 1.4rem;
}

.post-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-summary__list li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: 0.75em;
  font-size: 1.05rem; /* 24 */
  line-height: 1.5;
}

.post-summary__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--ckl-blue); /* square, not the parent's circle */
}

/* ----------------------------------------------------------------------- FAQ */

.post-faq {
  border-top: 1px solid var(--ckl-light-gray);
  margin-top: 2.8rem;
}

/* Raw UA <h2> today, and it sits OUTSIDE .ckl-article__content so no content
   rule reaches it. Same treatment as the content h2. */
.post-faq__title {
  font-family: var(--ckl-font-title);
  font-weight: var(--ckl-fw-title);
  font-size: clamp(1.75rem, 3.4vw, 3.15rem); /* 72 */
  line-height: 95%;
  color: var(--ckl-dark);
  margin: 1.8em 0 1em;
}

.post-faq__item {
  border-bottom: 1px solid var(--ckl-light-gray);
}

.post-faq__question {
  position: relative;
  display: block;
  padding: 1.05rem 2.5rem 1.05rem 0;
  font-family: var(--ckl-font-text);
  font-weight: 500;
  font-size: 1.225rem; /* 28 */
  line-height: 1.4;
  color: var(--ckl-dark);
  transition: color 0.2s ease-in-out;
}

.post-faq__question:hover {
  color: var(--ckl-blue);
}

/* Chevron via border rotation — no extra asset, no markup change. */
.post-faq__question::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 1.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ckl-blue);
  border-bottom: 2px solid var(--ckl-blue);
  transform: rotate(45deg);
  transition: transform 0.28s var(--ckl-ease-panel);
}

.post-faq__item[open] .post-faq__question::after {
  transform: rotate(225deg);
}

/* Same rule as the summary: the tweened box stays padding-free. */
.post-faq__answer > p {
  margin: 0;
  padding-bottom: 1.05rem;
  font-size: 1.225rem; /* 28 */
  line-height: 157%;
}

/* Height is tweened by article.js (same 0.28s panel ease as the mega menu);
   overflow keeps the clipped content invisible while the panel is mid-tween.
   The TOC sub-lists and the mobile TOC panel share the same tween function, so
   they share this rule rather than getting a second implementation. */
.post-summary__content,
.post-faq__answer,
.ckl-article__toc-sub,
.ckl-article__toc-panel {
  overflow: hidden;
  transition: height 0.28s var(--ckl-ease-panel);
}

@media (prefers-reduced-motion: reduce) {
  .post-summary__content,
  .post-faq__answer,
  .ckl-article__toc-sub,
  .ckl-article__toc-panel {
    transition: none !important;
  }

  .ckl-article__toc-toggle,
  .ckl-article__toc-toggle svg,
  .ckl-article__toc-mobile-toggle svg,
  .post-summary__toggle-icon,
  .post-faq__question::after {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------- share rail */

.ckl-article__share-rail {
  position: sticky;
  top: var(--ckl-sticky-top);
  align-self: start;
}

.ckl-share {
  display: flex;
  flex-direction: column;
  gap: 0.95rem; /* 21.7 */
}

/* Square light-gray buttons, 82×82 (Figma 368:7235/7239/7248). */
.ckl-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5875rem; /* 82 */
  height: 3.5875rem;
  border: 0;
  border-radius: 0;
  background: var(--ckl-gray);
  color: var(--ckl-dark);
  cursor: pointer;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.ckl-share__btn svg {
  width: 1.75rem; /* 40 */
  height: 1.75rem;
}

.ckl-share__btn--x svg {
  width: 1.3rem; /* 30 */
  height: 1.3rem;
}

.ckl-share__btn:hover,
.ckl-share__btn:focus-visible {
  color: var(--ckl-white);
  background-color: var(--ckl-blue);
}

.ckl-article__share-mobile {
  display: none;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ckl-light-gray);
}

.ckl-article__share-mobile .ckl-share {
  flex-direction: row;
  margin-top: 1rem;
}

/* ----------------------------------------------------------------- author box */

/* Avatar + name/role + LinkedIn square, no heading/bio (Figma 380:7330). */
.ckl-article__author-box {
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.ckl-article__author-item {
  display: flex;
  gap: 1.85rem; /* 42.3 */
  align-items: center;
  margin-bottom: 1.75rem;
}

.ckl-article__author-item:last-child {
  margin-bottom: 0;
}

.ckl-article__author-img img {
  display: block;
  width: 5.18rem; /* 118.5 */
  height: 5.18rem;
  object-fit: cover;
  background: url('../img/author-photo-bg.png') center / cover no-repeat;
}

.ckl-article__author-name {
  display: block;
  font-weight: 700;
  font-size: 1.225rem; /* 28 */
  line-height: 1;
  color: var(--ckl-dark);
}

.ckl-article__author-name:hover {
  color: var(--ckl-blue);
}

.ckl-article__author-role {
  display: block;
  font-size: 0.875rem; /* 20 */
  line-height: 1;
  color: var(--ckl-dark);
  margin-top: 0.5rem; /* 11.3 */
}

.ckl-article__author-linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5875rem; /* 82 */
  height: 3.5875rem;
  margin-left: auto;
  background: var(--ckl-gray);
  color: var(--ckl-dark);
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.ckl-article__author-linkedin:hover {
  color: var(--ckl-white);
  background-color: var(--ckl-blue);
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .ckl-article__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Inline flow: the pinned cap has no meaning here and would truncate the
     block in the page. The disclosure below is what keeps a 44-item TOC from
     pushing the article off the screen. */
  .ckl-article__sidebar {
    position: static;
    order: -1;
    gap: 2rem;
    max-height: none;
    min-height: 0;
  }

  .ckl-article__toc-heading {
    display: none;
  }

  .ckl-article__toc-mobile-toggle {
    display: flex;
  }

  .ckl-article__toc-panel {
    margin-top: 1.25rem;
  }

  /* Still capped when open — inline flow is not a licence to dump 44 items. */
  .ckl-article__toc-scroll {
    margin-top: 1.25rem;
    max-height: 26rem;
    max-height: min(60svh, 26rem);
  }

  .ckl-article__share-rail {
    display: none;
  }

  .ckl-article__share-mobile {
    display: block;
  }

  .ckl-article__meta-right {
    margin-left: 0;
  }
}

/* The article had no breakpoint below 1024px at all — phones inherited the
   tablet TOC wholesale. */
@media (max-width: 768px) {
  .ckl-article__toc-mobile-toggle {
    font-size: 1.75rem; /* 40 */
  }

  .ckl-article__toc-list,
  .ckl-article__toc-sub {
    gap: 0.75rem;
  }

  .ckl-article__toc-sub li {
    padding-left: 1.2rem;
  }

  .ckl-article__toc-sub li::before {
    left: 0.3rem;
  }

  .ckl-article__toc-sub li.ckl-toc-level-4 {
    padding-left: 2rem;
  }

  .ckl-article__toc-sub li.ckl-toc-level-4::before {
    left: 1.1rem;
  }

  .ckl-article__toc-sub li.ckl-toc-level-5,
  .ckl-article__toc-sub li.ckl-toc-level-6 {
    padding-left: 2.8rem;
  }

  .ckl-article__toc-sub li.ckl-toc-level-5::before,
  .ckl-article__toc-sub li.ckl-toc-level-6::before {
    left: 1.9rem;
  }

  .ckl-article__toc-scroll {
    max-height: 22rem;
    max-height: min(55svh, 22rem);
  }
}

@media (max-width: 430px) {
  .ckl-article__toc-mobile-toggle {
    font-size: 1.5rem; /* 34 */
    gap: 0.5rem;
  }

  .ckl-article__toc-row {
    gap: 0.35rem;
  }
}