/* ============================================================
   Humequine Learning Center. humequine-blog.css
   Listing hero, filter strip, cards, pagination, single article.
   Depends on humequine-base.css. Tokens only, no literal colours.
============================================================ */


/* Listing hero. Inverted section on teal_ink. */
.section-blog-hero {
  background: var(--teal-ink);
  padding: var(--space-2xl) 0;
  text-align: center;
}
.section-blog-hero .section-label { color: var(--gold); }

.blog-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h1);
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--on-teal-heading);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.12;
}

.blog-hero__desc {
  color: var(--on-teal);
  opacity: 0.85;
  font-size: var(--text-sub);
  margin: var(--space-sm) auto 0;
  max-width: 560px;
  line-height: 1.6;
}


/* Category filter strip */
.blog-filter-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-filter-strip .container { display: flex; gap: 0; }

.blog-filter__link {
  display: inline-block;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 14px;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.blog-filter__link:hover { color: var(--teal); }
.blog-filter__link--active { color: var(--teal); border-bottom-color: var(--gold); }


/* Listing */
.section-blog-listing { background: var(--bg); padding: var(--space-xl) 0 var(--space-2xl); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }


/* Card */
.blog-card {
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.blog-card:hover { border-color: var(--gold); box-shadow: 0 6px 24px rgba(11, 75, 77, 0.08); }

.blog-card__thumb-link { display: block; }
.blog-card__thumb {
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: var(--surface-2);
}
.blog-card__thumb--empty {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--gold-soft) 14px 15px),
    var(--surface-2);
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.blog-card:hover .blog-card__img { transform: scale(1.03); }

.blog-card__body {
  padding: var(--space-md) var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__cat {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-bottom: var(--space-xs);
}

.blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h1);
  font-size: 24px;
  color: var(--teal);
  line-height: 1.25;
  margin-bottom: var(--space-sm);
}
.blog-card__title a:hover { color: var(--gold-strong); }

.blog-card__excerpt {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-md);
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.blog-card__meta { font-size: 13px; color: var(--text-muted); }
.blog-card__sep  { margin: 0 4px; }
.blog-card__link {
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--teal);
  white-space: nowrap;
}
.blog-card__link:hover { color: var(--gold-strong); }


/* Pagination */
.blog-pagination { margin-top: var(--space-xl); text-align: center; }
.blog-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--teal);
  border: 1px solid var(--line);
  transition: background-color var(--transition), border-color var(--transition);
}
.blog-pagination .page-numbers.current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--text);
}
.blog-pagination .page-numbers:hover:not(.current) { border-color: var(--teal); }
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next { width: auto; padding: 0 var(--space-sm); }

.blog-empty { color: var(--text-muted); text-align: center; padding: var(--space-2xl) 0; }


/* Single: hero */
.section-post-hero {
  background: var(--teal-ink);
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}
.section-post-hero .section-label { display: inline-block; }
.section-label--link { color: var(--gold); transition: color var(--transition); }
.section-label--link:hover { color: var(--gold-strong); }

.post-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h1);
  font-size: clamp(34px, 5vw, 60px);
  color: var(--on-teal-heading);
  max-width: 820px;
  margin: 0 auto var(--space-md);
  line-height: 1.1;
}
.post-hero__meta { font-size: 14px; color: var(--on-teal); opacity: 0.8; letter-spacing: 0.02em; }
.post-hero__sep  { margin: 0 8px; }


/* Single: featured image */
.post-featured-image { background: var(--bg); padding-top: var(--space-xl); }
.post-featured-image__img {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-md);
}


/* Single: body */
.post-body { background: var(--bg); padding: var(--space-xl) 0 var(--space-2xl); }
.post-body__inner { max-width: 760px; }


/* Single: article disclaimer */
.post-disclaimer {
  margin: var(--space-xl) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}


/* Single: tags */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--gold-soft);
}
.post-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-muted);
  transition: border-color var(--transition), color var(--transition);
}
.post-tag:hover { border-color: var(--teal); color: var(--teal); }


/* Single: prev / next */
.post-nav {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-lg) 0;
}
.post-nav .container { display: flex; justify-content: space-between; gap: var(--space-md); }
.post-nav__link { display: flex; flex-direction: column; gap: 4px; max-width: 46%; }
.post-nav__link--next { text-align: right; margin-left: auto; }
.post-nav__dir {
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.post-nav__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h1);
  font-size: 20px;
  color: var(--teal);
  line-height: 1.3;
}
.post-nav__link:hover .post-nav__title { color: var(--gold-strong); }


/* Single: closing CTA. Inverted section on teal_ink. */
.section-post-cta {
  background: var(--teal-ink);
  padding: var(--space-2xl) 0;
  text-align: center;
}
.section-post-cta .section-label { color: var(--gold); }
.post-cta__heading {
  font-family: var(--font-display);
  font-weight: var(--weight-display-h1);
  font-size: clamp(30px, 4vw, 46px);
  color: var(--on-teal-heading);
  margin: 0 auto var(--space-sm);
  max-width: 640px;
}
.post-cta__body {
  color: var(--on-teal);
  opacity: 0.85;
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
}
.post-cta__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* Mobile */
@media (max-width: 600px) {
  .section-blog-hero, .section-post-hero { padding: var(--space-xl) 0; }
  .blog-card__footer { flex-direction: column; align-items: flex-start; }
  .post-nav .container { flex-direction: column; }
  .post-nav__link { max-width: 100%; }
  .post-nav__link--next { text-align: left; margin-left: 0; }
  .post-cta__buttons { flex-direction: column; align-items: center; }
}

/* ============================================================
   GUIDE CAPTURE wrappers (2026-10-02). The Klaviyo embedded form
   supplies the cover, copy, fields and button; these rules only give
   it a place. Band: full width inside the index grid after the first
   row (Aaron's prototype, 02-brands/humequine/projects/
   2026-10-02-learn-guide-capture-prototype). Card: the reading
   column, after the article body. Theme tokens only.
============================================================ */
.blog-grid { grid-auto-flow: row dense; }
.hq-guide--band {
  grid-column: 1 / -1;
  margin: 32px 0;
  background: var(--teal-ink);
  border: 1px solid var(--on-teal-line);
  border-radius: var(--radius-lg);
  color: var(--on-teal);
  padding: 40px 48px;
}
.hq-guide--card {
  margin: 44px 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  padding: 24px 28px;
}
.hq-guide:empty,
.hq-guide > div:empty { display: none; }
@media (max-width: 860px) { .hq-guide--band { padding: 32px 24px; } }
@media (max-width: 560px) {
  .hq-guide--band { padding: 24px 18px; margin: 20px 0; }
  .hq-guide--card { padding: 20px 18px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hq-guide--band { background: color-mix(in srgb, var(--teal) 20%, var(--bg)); }
}
:root[data-theme="dark"] .hq-guide--band { background: color-mix(in srgb, var(--teal) 20%, var(--bg)); }

/* The card form (Klaviyo TUBMp6) sets dark text for a light card, so the card keeps its
   light-mode surface in dark mode, like a printed insert. Light-mode token values, not new ones. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hq-guide--card:not(.hq-guide--native) { background: #EFE7D8; border-color: rgba(11, 75, 77, 0.14); }
}
:root[data-theme="dark"] .hq-guide--card:not(.hq-guide--native) { background: #EFE7D8; border-color: rgba(11, 75, 77, 0.14); }

/* ============================================================
   GUIDE CAPTURE, THEME FORM (Aaron, 2026-10-02). Used where no
   Klaviyo form id is set. From the reviewed prototype. The wrappers
   above give the panel; these rules lay out what sits inside it.
   Theme tokens only, so dark mode follows the token swap.
============================================================ */
.hq-guide--native { font-family: var(--font-body); }
.hq-guide--native p { margin: 0; }
.hq-guide--native .hq-guide__grid {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 56px;
  align-items: center;
}
.hq-guide--native .hq-guide__cover { display: block; width: 100%; height: auto; aspect-ratio: 612 / 792; border-radius: 2px; }
.hq-guide--native .hq-guide__label {
  font-size: 12px; font-weight: var(--weight-semibold); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px;
}
.hq-guide--native .hq-guide__title {
  font-family: var(--font-display); font-weight: var(--weight-display-h1);
  line-height: 1.12; margin: 0 0 14px; text-wrap: balance;
}
@media (min-width: 561px) {
  .hq-guide--native .hq-guide__title { text-wrap: wrap; }
  .hq-guide--native .hq-guide__title span { white-space: nowrap; }
}
.hq-guide--native .hq-guide__text { line-height: 1.6; margin-bottom: 6px; }
.hq-guide--native .hq-guide__meta { font-size: 14px; }

.hq-guide--native .hq-guide__form { container-type: inline-size; margin-top: 22px; }
.hq-guide--native .hq-guide__form[hidden],
.hq-guide--native .hq-guide__done[hidden],
.hq-guide--native .hq-guide__error[hidden] { display: none; }
.hq-guide--native .hq-guide__fields { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; }
@container (min-width: 380px) {
  .hq-guide--native .hq-guide__fields { grid-template-columns: 1fr 1.35fr; }
  .hq-guide--native .hq-guide__btn { grid-column: 1 / -1; justify-self: start; }
}
@container (min-width: 600px) {
  .hq-guide--native .hq-guide__fields { grid-template-columns: 1fr 1.35fr auto; }
  .hq-guide--native .hq-guide__btn { grid-column: auto; }
}
.hq-guide--native .hq-guide__field { display: grid; gap: 6px; margin: 0; }
.hq-guide--native .hq-guide__field span { font-size: 13px; font-weight: var(--weight-medium); }
.hq-guide--native .hq-guide__field input {
  font: 400 16px/1.2 var(--font-body); height: 48px; padding: 0 14px;
  border-radius: var(--radius-sm); width: 100%; min-width: 0; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.hq-guide--native .hq-guide__field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hq-guide--native .hq-guide__btn { min-height: 48px; white-space: nowrap; color: #1C1C1C; cursor: pointer; } /* charcoal on gold in both modes */
.hq-guide--native .hq-guide__btn:disabled { opacity: .7; cursor: progress; }
.hq-guide--native .hq-guide__fine { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.hq-guide--native .hq-guide__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hq-guide--native .hq-guide__error { margin-top: 10px; font-size: 14px; font-weight: var(--weight-medium); }
.hq-guide--native .hq-guide__done { margin-top: 22px; font-family: var(--font-display); font-weight: var(--weight-display-h1); line-height: 1.25; }
.hq-guide--native .hq-guide__done:focus { outline: none; }
.hq-guide__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Band: teal-ink panel from the wrapper */
.hq-guide--band.hq-guide--native { color: var(--on-teal); }
.hq-guide--band .hq-guide__cover { box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 22px 48px rgba(0,0,0,.38); }
.hq-guide--band .hq-guide__label { color: var(--gold); }
.hq-guide--band .hq-guide__title { color: var(--on-teal-heading); font-size: clamp(30px, 3.3vw, 42px); max-width: 15em; }
.hq-guide--band .hq-guide__text { font-size: 17px; max-width: 34em; }
.hq-guide--band .hq-guide__meta,
.hq-guide--band .hq-guide__fine,
.hq-guide--band .hq-guide__error,
.hq-guide--band .hq-guide__field span { color: var(--on-teal-muted); }
.hq-guide--band .hq-guide__field input { background: rgba(245, 240, 232, .06); border: 1px solid rgba(245, 240, 232, .45); color: var(--on-teal-heading); }
.hq-guide--band .hq-guide__done { color: var(--on-teal-heading); font-size: 26px; }

/* Card: quiet, in the reading column */
.hq-guide--card.hq-guide--native { color: var(--text); }
.hq-guide--card .hq-guide__grid { grid-template-columns: 144px 1fr; gap: 28px; align-items: start; }
.hq-guide--card .hq-guide__cover { box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(11, 75, 77, .16); }
.hq-guide--card .hq-guide__label { color: var(--teal); }
.hq-guide--card .hq-guide__title { color: var(--text); font-size: 26px; }
.hq-guide--card .hq-guide__text { font-size: 16px; }
.hq-guide--card .hq-guide__fine,
.hq-guide--card .hq-guide__error,
.hq-guide--card .hq-guide__field span { color: var(--text-muted); }
.hq-guide--card .hq-guide__field input { background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 32%, transparent); color: var(--text); }
.hq-guide--card .hq-guide__field input:focus-visible { outline-color: var(--teal); }
.hq-guide--card .hq-guide__done { color: var(--text); font-size: 22px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hq-guide--card .hq-guide__cover { box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .hq-guide--card .hq-guide__cover { box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(0, 0, 0, .45); }

@media (max-width: 860px) {
  .hq-guide--band .hq-guide__grid { grid-template-columns: 1fr; gap: 32px; }
  .hq-guide--band .hq-guide__cover-wrap { width: min(200px, 46%); }
}
/* Phone: cover beside label and headline, so the fields arrive in the first screen */
@media (max-width: 560px) {
  .hq-guide--native .hq-guide__grid { grid-template-columns: 96px 1fr; column-gap: 16px; row-gap: 0; align-items: start; }
  .hq-guide--native .hq-guide__cover-wrap { width: auto; grid-column: 1; grid-row: 1 / span 2; }
  .hq-guide--native .hq-guide__body,
  .hq-guide--native .hq-guide__head { display: contents; }
  .hq-guide--native .hq-guide__label { grid-column: 2; grid-row: 1; margin-bottom: 8px; }
  .hq-guide--native .hq-guide__title { grid-column: 2; grid-row: 2; margin: 0; }
  .hq-guide--band .hq-guide__title { font-size: 26px; }
  .hq-guide--card .hq-guide__title { font-size: 22px; }
  .hq-guide--native .hq-guide__text,
  .hq-guide--native .hq-guide__meta,
  .hq-guide--native .hq-guide__form,
  .hq-guide--native .hq-guide__done { grid-column: 1 / -1; }
  .hq-guide--native .hq-guide__text { margin-top: 18px; }
  .hq-guide--card .hq-guide__grid { grid-template-columns: 72px 1fr; }
}

/* Brand faces inside the Klaviyo embeds (Aaron, 2026-10-02). Klaviyo cannot load the
   self-hosted fonts (no cross-origin font access), so the forms are built in Georgia and
   Arial and the theme swaps in the faces this page has already loaded. Colours and sizes
   stay as set in Klaviyo, per form. */
.hq-guide .klaviyo-form,
.hq-guide .klaviyo-form * { font-family: var(--font-body) !important; }
.hq-guide .klaviyo-form h1,
.hq-guide .klaviyo-form h1 *,
.hq-guide .klaviyo-form h2,
.hq-guide .klaviyo-form h2 * {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-display-h1) !important;
  line-height: 1.12 !important;
}
.hq-guide .klaviyo-form h4,
.hq-guide .klaviyo-form h4 * {
  font-weight: var(--weight-semibold) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
.hq-guide .klaviyo-form button { font-weight: var(--weight-semibold) !important; }


/* Articles in dark mode. Article bodies carry inline CSS that uses --teal-ink as a panel fill and
   --gold-soft as label text. In the dark tokens those are near the page background and a 16% fill,
   so panels and labels vanish. Remap both inside articles to existing dark tokens. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hq-article { --teal-ink: var(--surface-2); --gold-soft: var(--gold-strong); }
}
:root[data-theme="dark"] .hq-article { --teal-ink: var(--surface-2); --gold-soft: var(--gold-strong); }

/* ============================================================
   LABEL RULE (brand-visual-spec section 2; Leah, 2026-10-06)
   A label above a body of text is never smaller than that body. Small uppercase letterspaced
   type is for an eyebrow, a folio or a chart label only.
   The published article bodies carry their own inline CSS, where box labels, figure titles and
   row labels are 11 to 12px uppercase over 13.5 to 16px text. Published posts are frozen, so the
   rule is applied here, from the theme. body.hq-article is the theme's own hook on single posts.
   Left alone on purpose: the product card eyebrow, the anchor label and the framework ring title
   (all sit over display type), .hq-kicker and .section-label (true eyebrows over a heading).
============================================================ */
body.hq-article .entry-content :not(.hq-product):not(.hq-anchor):not(.hq-framework) > .hq-label {
  font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.35;
}
/* kept apart: a selector list containing :has() is dropped whole where :has() is unknown */
body.hq-article .entry-content .hq-framework > .hq-label:has(+ .hq-three-grid) {
  font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.35;
}
/* row labels inside figures take the size of the row text they sit on; teal, per the approved treatment */
body.hq-article .entry-content .rt-out > b,
body.hq-article .entry-content .st-fed > b,
body.hq-article .entry-content .st-moved > b,
body.hq-article .entry-content .ev-k {
  font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--teal);
}
body.hq-article .entry-content .rt-band { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--teal); }
/* the four observation cards: the label was written at 21px and shrunk to 15px by a broader rule */
body.hq-article .entry-content .hq-grid4 .hq-col-h { font-size: 21px; }

/* ============================================================
   BODY SIZE INSIDE ARTICLES (Leah, 2026-10-07: body copy 14 to 16 fluid)
   The article bodies set a few sizes of their own in px. Two of them would sit wrong against the
   smaller copy: the In brief list (16px, now larger than the article text on a phone) follows the
   article text, and the note marks in running paragraphs keep the size they had (0.68em of 17px), so
   they stay tappable. Note marks in captions, tables and the definition line are untouched.
============================================================ */
body.hq-article .entry-content .hq-brief li { font-size: inherit; }
body.hq-article .entry-content .hq-article > p:not([class]) sup { font-size: 11.5px; }