/* ========================================================
   LOVECOLOUR — the page shell of a single article (/knowledge/{post-slug}/)

   The page's own furniture: the band the article opens on and the meta bar
   under it, the section rhythm this route reads at, the author card in its
   sidebar, and the states that are not an article. The reading itself — the
   content block, the reading measure and the typography the post content is set
   in — is templates/article-reading.css, linked directly after this file on the
   same route.

   Above 1280px the body is TWO TRACKS on the shared 1200px wrap: the reading
   keeps its own measure (--lc-read, 880px) in the first track and the author
   card takes the second at 280px, sticky under the site's own sticky header —
   880 + 40 + 280 is the wrap's full 1200px, which is why that is the one width
   the two fit at and why the breakpoint is where it is (section 2b). Below it
   the route is ONE COLUMN, as it was: the article centred on the reading measure
   and the card under it at 420px, and on a phone the card comes first, under the
   band. The two measures are --lc-content and --lc-read, declared once on
   .lc-page in templates/inner.css and never redefined here.

   Note on the file names: this sheet and its sibling were templates/guide.css
   and templates/guide-reading.css, and neither reached the cascade on this host
   — same directory, same enqueue, same kind of URL and valid CSS served 200 as
   text/css as templates/inner.css, templates/banner.css and
   templates/knowledge.css, which all arrive. The paths were the last thing left
   that separated them, so the two sheets carry names without the word the
   others share: this one is templates/single-article.css, the reading beside it
   is templates/article-reading.css. Both also come in smaller than
   templates/inner.css, the largest sheet that does arrive.

   The type system, section shell, buttons, breadcrumb, hairline grid and
   closing CTA band come from templates/inner.css; the related grid under the
   article comes from templates/knowledge.css; 网站规划.md §11.3 leaves the body
   to Gutenberg.

   Every rule is scoped to .lc-guide inside .lc-page, so nothing here can reach
   the header, the footer, another template or an element outside this page.
   Structure still comes from 1px hairlines, never from boxes or shadows, and
   the one accent is the site's orange.

     1. Page head — the band, the meta bar under it, and the section rhythm
     2. The author card, under the article
     3. The states that are not an article
     4. Responsive
   ======================================================== */

/* ---------- 1. Page head: the banner, and the meta bar under it ----------
   A guide has no photograph of its own, so it opens on the Knowledge section's
   own plate (templates/knowledge-guide.php says why): the shared banner, its
   crumbs stopping at the topic, the topic as the eyebrow, and the article title
   as the banner's own H1 at the 'mid' step — the step the Knowledge hub's
   headline takes — so both pages' H1 measure the same.

   The band's lower edge carries the meta bar: when the guide was published (and
   when it was revised, only if that is another day), who wrote it, what it is
   filed under, and the share row — on the same warm paper as the canvas, flush
   against the band, with a hairline under it. No standfirst: the guide's own
   first paragraph opens the article, and the reading starts under the bar. */
/* The band is the same height on every route (templates/banner.css): a
   reference copy — lead, second paragraph, fact row — padded to one of four
   heights, one per width step. On every other route the copy is tall enough to
   fill that band. A guide's head is three short blocks: the crumbs, the topic
   and the title.

   So on this route, and only this route, the band is TWO THIRDS of the shared
   height: the hub, the topic archives and every other page keep the band they
   have. The copy is measured off the same expression banner.css sizes its band
   with rather than off a number copied out of it, so if the reference height
   moves, this band moves by the same two thirds with it.

   The copy is also pinned to the TOP of the band (banner.css ends it on the
   band's bottom edge). Over a shorter band the two together are what puts the
   words under the photographs rather than under a screen of empty plate.

   And the copy sits 32px higher again than the shared band's own top room puts
   it: the owner asked for the words on a guide's band to come up. The one
   measurement is taken away twice — from the room above the crumbs and from the
   band's own height — so the band's lower edge rises with the words and the
   composition inside the band is otherwise untouched: the same distance from the
   crumbs to the headline, and the same plate under the headline as before. The
   two values belong together: change the lift and change both numbers in every
   step below, the 64px/54px they come off being banner.css's own top padding. */
.lc-page.lc-guide .lc-banner-inner {
  justify-content: flex-start;
  padding-top: 32px; /* banner.css's 64px, less the 32px lift */
  min-height: calc((565px + 2 * clamp(30px, 4vw, 60px)) * 2 / 3 - 32px);
}
/* The four width steps banner.css names, each cut to the same two thirds and
   lifted by the same amount. Below 901px the shared band's own top room is
   banner.css's 54px, so that is what the lift comes off there — and the two
   narrower steps inherit that padding, as banner.css's own does. */
@media (max-width: 900px) {
  .lc-page.lc-guide .lc-banner-inner {
    padding-top: 22px; /* banner.css's 54px, less the same 32px lift */
    min-height: calc((523px + 2 * clamp(28px, 8vw, 40px)) * 2 / 3 - 32px);
  }
}
@media (max-width: 560px) {
  .lc-page.lc-guide .lc-banner-inner { min-height: calc((548px + 2 * clamp(28px, 8vw, 40px)) * 2 / 3 - 32px); }
}
@media (max-width: 420px) {
  .lc-page.lc-guide .lc-banner-inner { min-height: calc((598px + 2 * clamp(28px, 8vw, 40px)) * 2 / 3 - 32px); }
}

/* ---------- The section rhythm on this route ----------
   `.lc-sec` is 112px and `.lc-sec--tight` 72px site-wide (templates/inner.css),
   which is the editorial page's room. A guide is a manufacturing document read
   with the chart beside it, so this route reads denser: 80px between sections and
   56px where two of them belong together. Section 4 steps both down again under
   900px, below templates/inner.css's own 78px/56px at that width, so a small
   screen is never taller here than it is anywhere else on the site.

   The body section's own top is not set here: it is 72px, one clear step under
   the bar, in templates/article-reading.css beside the reading it opens. */
.lc-page.lc-guide .lc-sec { padding: 80px 0; }
.lc-page.lc-guide .lc-sec--tight { padding: 56px 0; }

/* No gap and no rule above the bar: it is the last line of the head, not the
   first line of the article. Warm paper rather than white separates it from the
   white body section under it; the hairline closes it.

   The bar is a .lc-sec in the markup (templates/knowledge-guide.php), so its
   own selector names that class as well as its own: 0-4-0 against the rhythm
   rule above and the step in section 4, both 0-3-0, so its zero padding holds at
   every width and whatever order these rules are read in. A section's room is
   not what the bar wants — it is a line of furniture with nothing above or below
   it. */
.lc-page.lc-guide .lc-sec.lc-guide-metabar {
  padding: 0;
  background-color: var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
}
/* One row across the page, which is the row the reference layout shows: the
   facts at the start of the line and the share row at its end, both in normal
   flow, so the two sit on one line and neither can overlap the other. The facts
   still wrap among themselves when the line is tight; only a phone has no room
   for both groups on it. */
.lc-page.lc-guide .lc-guide-metabar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 30px;
  min-height: 60px;
  padding-block: 12px;
}
.lc-page.lc-guide .lc-guide-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.lc-page.lc-guide .lc-guide-meta-icon {
  flex: none;
  color: var(--lc-muted);
}
.lc-page.lc-guide .lc-guide-meta a { color: inherit; text-decoration: none; }
.lc-page.lc-guide .lc-guide-meta a:hover { color: var(--lc-accent); }

/* The share row. Each mark is a plain link in a new tab, so the row carries no
   script, and the network's own colour is set on the link itself by
   templates/knowledge-guide.php — the colour belongs to the network, so it must
   not depend on this file arriving, and a reader must never be shown a network's
   mark in the site's grey. The grey below is only the fallback for a mark whose
   network this file has never seen. A network whose address the site does not
   hold (YouTube, until company_youtube is filled in) is not rendered at all. */
.lc-page.lc-guide .lc-guide-share {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
}
.lc-page.lc-guide .lc-guide-share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-share-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lc-page.lc-guide .lc-guide-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--lc-muted);
  color: #FFFFFF;
  transition: opacity 0.2s ease;
}
.lc-page.lc-guide .lc-guide-share-link:hover { opacity: 0.85; }
.lc-page.lc-guide .lc-guide-share-link:focus-visible {
  outline: 2px solid var(--lc-ink);
  outline-offset: 2px;
}

/* A phone is the one width where the two groups cannot share the line — every
   window a page is read in keeps them on it, as the reference layout does. There
   the row unfolds: the facts first, the share row centred under them. */
@media (max-width: 720px) {
  .lc-page.lc-guide .lc-guide-metabar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .lc-page.lc-guide .lc-guide-share { align-self: center; }
}

/* ---------- 2. The author card ----------
   Site-level company data beside the article, never post data: the same card on
   every guide. Portrait, name and role, the bio and the three actions, drawn in
   ONE arrangement at every width — the label and the portrait centred, the bio
   and the actions under them — because the only two boxes the card stands in are
   both narrow: the 280px sidebar (section 2b) and, below the 1280px breakpoint,
   the stacked card under the article.

   That stacked box is 420px, centred on the reading's own axis, and it is the
   width the three actions were already arranged for. Below 700px the card goes
   above the article (order: -1 in the ≤699px block at the end of this section),
   so a reader on a phone meets who wrote the guide before the guide. */
.lc-page.lc-guide .lc-guide-author {
  max-width: 420px;
  margin: 56px auto 0;
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: 4px;
  background-color: var(--lc-dark);
  color: #FFF;
  text-align: center;
}
/* homepage.css is not loaded on this route, so the card carries its own label
   colour instead of the .lc-eyebrow--light modifier. The label keeps the page's
   left-aligned eyebrow; the portrait under it is what is centred. */
.lc-page.lc-guide .lc-guide-author-label {
  margin-bottom: 24px;
  text-align: left;
  color: var(--lc-accent);
}
.lc-page.lc-guide .lc-guide-author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 0 auto 18px;
  border: 1px solid var(--lc-line-dark);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  font-size: 38px;
  font-weight: 800;
  color: var(--lc-accent);
}
/* The portrait, when the site has one: the box above is the frame, so the image
   fills it and is cropped to the circle from the face end of the frame rather
   than from its exact centre. */
.lc-page.lc-guide .lc-guide-author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 42% 32%;
}
.lc-page.lc-guide .lc-guide-author-name {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #FFF;
}
.lc-page.lc-guide .lc-guide-author-role {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lc-label-dark);
}
.lc-page.lc-guide .lc-guide-author-bio {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.68;
  text-align: left;
  color: var(--lc-body-dark);
}
.lc-page.lc-guide .lc-guide-author-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
/* The named action takes the room it needs and the icon sits beside it at the
   button's own height, so the row reads as one control. */
.lc-page.lc-guide .lc-guide-author-actions .lc-btn {
  flex: 1 1 auto;
  text-align: center;
}
.lc-page.lc-guide .lc-guide-author-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--btn-min-h, 54px);
  height: var(--btn-min-h, 54px);
  border-radius: var(--btn-radius, 8px);
  background-color: var(--color-whatsapp, #25D366);
  color: var(--color-whatsapp-ink, #0B2B12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.lc-page.lc-guide .lc-guide-author-wa:hover {
  background-color: var(--color-whatsapp-hover, #1DA851);
  color: var(--color-whatsapp-ink, #0B2B12);
  transform: translateY(-2px);
}
/* The third action keeps the WhatsApp button's footprint, drawn as an outline
   rather than a third filled block — the green WhatsApp square beside it is the
   only control here that wears a colour of its own, and the named CTA is the
   card's accent action. It becomes a link the moment company_linkedin holds the
   profile URL. */
.lc-page.lc-guide .lc-guide-author-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--btn-min-h, 54px);
  height: var(--btn-min-h, 54px);
  border-radius: var(--btn-radius, 8px);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #FFF;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lc-page.lc-guide a.lc-guide-author-li:hover,
.lc-page.lc-guide a.lc-guide-author-li:focus-visible {
  background-color: #FFF;
  border-color: #FFF;
  color: var(--lc-ink);
  transform: translateY(-2px);
}
.lc-page.lc-guide .lc-guide-author-li--pending {
  opacity: 0.42;
  cursor: default;
}

/* ---------- 2b. The sidebar — the card beside the article, from 1280px ----------
   The owner asked for the author card at the right of the article, as the
   reference layout shows it, and for the article's own width not to move to
   make room for it. Both are kept here: the first track is 1fr and the reading
   inside it is capped on --lc-read (880px) by templates/article-reading.css —
   the width the article is at when the card stands under it, so the reading
   does not change — and the card takes what is left of the wrap.
   1200 - 880 - 40 = 280px, which is the reference sidebar's own proportion
   (its aside is about a fifth of the container this route is a third of).

   Why 1280px and not less: the row needs 880 + 40 + 280 = 1200px, which is the
   wrap's own full width, and the wrap only reaches 1200px at a 1256px window
   (inner.css: width: min(1200px, calc(100% - 56px))). A lower breakpoint could
   only fit by shortening the reading or the card, and the reading is the one
   thing the owner asked not to change — so under 1280px the page keeps the
   arrangement it has had all along: ONE COLUMN, the article centred in the wrap
   and the card under it at 420px.

   What else the sidebar takes is the room a wide block used to step into. On the
   one-column page the reading is centred in the wrap, so it has 160px of wrap on
   either side and a table or a wide block steps out into it as far as the
   content block, 1000px (templates/article-reading.css, "What may step out of
   the reading"). Here the reading starts at the wrap's own left edge and the
   card takes the room to its right, so there is nothing left to step into and
   the bleed is 0: at this width a table is read on the 880px reading instead of
   across 1000px. The reading — the paragraphs the owner asked to keep — is the
   same width in both arrangements.

   The card is sticky, as it was in the gutter this page used to have: it follows
   the article to 104px down the window (the header's own 76px and the 28px under
   it) and stops there. max-height keeps a short window honest — a card taller
   than the room it has scrolls inside itself rather than pinning its own actions
   out of reach. */
@media (min-width: 1280px) {
  .lc-page.lc-guide .lc-guide-cols {
    display: grid;
    /* The reading's track and the sidebar's. 1fr is what keeps the reading at its
       own measure: the wrap is 1200px at this width, so the first track is 880px
       the moment the card's 280px and the 40px between them are taken out of it,
       and the prose's own max-width has nothing left to do. */
    --lc-guide-aside: 280px;
    grid-template-columns: minmax(0, 1fr) var(--lc-guide-aside);
    gap: 40px;
    /* start, not the default stretch: the card is as tall as its own content, so
       it has room to travel inside its grid area while the article scrolls. */
    align-items: start;
  }
  /* Written through .lc-guide-cols so it outweighs the declaration the reading
     sheet makes on .lc-guide-prose — that sheet is linked after this one, and a
     bleed of 0 is this layout's, not that one's. */
  .lc-page.lc-guide .lc-guide-cols > .lc-guide-prose {
    --lc-guide-bleed: 0px;
    margin-inline: 0;
  }
  .lc-page.lc-guide .lc-guide-cols > .lc-guide-author {
    position: sticky;
    top: 104px;
    max-width: none;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    margin: 0;
  }
  /* Three actions in a 220px content box are more than one row: the named action
     takes a row of its own and the two icon controls follow it, centred under
     the button and under the portrait above them. */
  .lc-page.lc-guide .lc-guide-author-actions { justify-content: center; }
  .lc-page.lc-guide .lc-guide-author-actions .lc-btn { flex: 1 1 100%; }
}

/* A phone is the one width where the card is not under the article: it goes
   first, directly under the head, so the author sits with the guide the reader is
   starting rather than several screens later. This is the only place the order is
   set — in the sidebar above 1280px the card is the second track and stands
   there, and between 1280px and this width the two stand in normal flow, which
   has no order to give — and the single-column grid is here for that order
   alone: a block container cannot be reordered. */
@media (max-width: 699px) {
  .lc-page.lc-guide .lc-guide-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-page.lc-guide .lc-guide-cols > .lc-guide-author { order: -1; }
}

/* ---------- 3. The states that are not an article ------------------------
   A protected guide and a guide that is no longer published. The filing row
   that used to close the article is gone: the terms are in the meta bar against
   the band now (templates/knowledge-guide.php says why). */

/* The password form of a protected guide, and the way back for a guide that is
   no longer published. Both now stand in a white section of their own under the
   band, so neither needs a rule drawn above it. WordPress's own form keeps its
   markup; only the controls are brought into the site's language. The block is
   one paragraph of running text and a form, so it stands on the route's reading
   measure: the 900px it used to be was a third width on a page that has two. */
.lc-page.lc-guide .lc-guide-locked { max-width: var(--lc-read, 880px); }
.lc-page.lc-guide .lc-guide-locked .post-password-form p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--lc-muted);
}
.lc-page.lc-guide .lc-guide-locked .post-password-form label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-page.lc-guide .lc-guide-locked input[type="password"] {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--lc-line);
  border-radius: 0;
  background-color: var(--lc-surface);
  font: inherit;
  font-size: 15px;
  color: var(--lc-ink);
}
.lc-page.lc-guide .lc-guide-locked input[type="submit"] {
  min-height: var(--btn-min-h, 54px);
  padding: 0 var(--btn-pad-x, 26px);
  border: 0;
  border-radius: var(--btn-radius, 8px);
  background-color: var(--color-cta, #C8500F);
  color: #FFF;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lc-page.lc-guide .lc-guide-locked input[type="submit"]:hover { background-color: var(--color-cta-hover, #A83F09); }

/* ---------- 4. Responsive ---------- */
/* The H1 needs no override of its own: it is the banner's title on the banner's
   own clamp, the same one the Knowledge page's H1 is set with, so the two agree
   at every width. What narrows on this file's side is the section rhythm, the meta
   bar's step and the author card; the reading has its own step in
   templates/article-reading.css, and the band's own heights are with the band rule
   in section 1, one per width step.

   The card's own two boxes are not stepped here: which one it stands in is
   section 2b's breakpoint (1280px), and the stacked card's 420px holds at every
   width below it. What the 900px step below changes is the room around the
   stacked card — 46px above it instead of 56px, and a smaller portrait — which
   is what a shorter window has room for.

   The body section's own top step (52px) is deliberately NOT here: that section's
   top is set unconditionally by templates/article-reading.css, which loads after
   this file, so an equal-weight step written here would never be the value that
   applies. It lives in that file, beside the 72px it steps down from. */
@media (max-width: 900px) {
  .lc-page.lc-guide .lc-sec { padding: 72px 0; }
  .lc-page.lc-guide .lc-sec--tight { padding: 52px 0; }
  .lc-page.lc-guide .lc-guide-metabar-inner { min-height: 0; padding-block: 16px; }
  .lc-page.lc-guide .lc-guide-author { margin-top: 46px; padding: 26px; }
  .lc-page.lc-guide .lc-guide-author-avatar { width: 88px; height: 88px; font-size: 32px; }
}