/* ============================================================
   BEAVER HUB — resources (articles) and team pages.

   Adds only what long-form prose needs. Everything else — the bone canvas,
   the navy bands, the pill nav, the footer, .sp-wrap, .sp-band, .sp-eyebrow,
   .sp-title, .sp-faq, .sp-cta — already exists in landing.css and
   subpage.css and is reused as-is. Tokens come from landing.css :root.

   Two rules drive the whole file:
     1. A reading column is ~68 characters wide. Wider than that and the eye
        loses the line return on a 2,400-word article.
     2. Nothing here may introduce a second <h1> or an unsized image —
        scripts/check-seo.mjs fails the build on either.
   ============================================================ */

/* ---------- article shell ---------- */
.bl-article{ background:var(--bh-bone); color:var(--bh-ink); font-family:var(--bh-sans); }

/* .sp-section is itself a width-constrained, centred container, so nesting a
   .sp-wrap inside one double-constrains it and the prose stops lining up with
   the headline above. .bl-section supplies the vertical rhythm only, and the
   single .sp-wrap inside it owns the width. */
.bl-section{ padding-block:clamp(2.6rem,7vh,5rem); position:relative; }

.bl-head{ padding-block:clamp(3.2rem,9vh,6rem) clamp(1.2rem,3vh,2rem); }
.bl-title{ max-width:56rem; }

.bl-crumbs{
  font-family:var(--bh-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bh-dim);
  margin-bottom:1.1rem;
}
.bl-crumbs a{ color:var(--bh-gray); text-decoration:none; }
.bl-crumbs a:hover{ color:var(--bh-orange); }
.bl-crumbs span{ margin-inline:.45rem; color:var(--bh-faint); }

.bl-title{
  font-family:"Space Grotesk", var(--bh-sans);
  font-weight:600; letter-spacing:-.028em; line-height:1.08;
  font-size:clamp(2rem,4.4vw,3.4rem); color:var(--bh-ink); margin:0;
  text-wrap:balance;
}
.bl-standfirst{
  color:var(--bh-gray); font-size:clamp(1.05rem,1.5vw,1.24rem);
  line-height:1.6; margin:1.1rem 0 0; max-width:44rem;
}

/* ---------- byline ---------- */
/* The named author and the named reviewer are the point of this block, not
   decoration: they are the evidence that a person with the expertise wrote
   this and a second person checked it. */
.bl-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  margin-top:1.8rem; padding-top:1.3rem; border-top:1px solid var(--bh-line);
}
.bl-byline__who{ display:flex; align-items:center; gap:.7rem; }
.bl-byline__photo{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:1px solid var(--bh-line); background:var(--bh-bone-2); flex:none;
}
.bl-byline__name{ font-weight:600; font-size:.95rem; color:var(--bh-ink); text-decoration:none; }
.bl-byline__name:hover{ color:var(--bh-orange); }
.bl-byline__role{ display:block; font-size:.82rem; color:var(--bh-gray); }
.bl-byline__meta{
  font-family:var(--bh-mono); font-size:.72rem; letter-spacing:.06em;
  color:var(--bh-dim); line-height:1.7;
}
.bl-byline__meta a{ color:var(--bh-gray); }

/* Company byline: no avatar, so the name column needs its own left rule to
   stop it reading as a floating fragment above the date. */
.bl-byline--org .bl-byline__who{
  padding-left:.9rem; border-left:3px solid var(--bh-orange);
}

.bl-disclosure{
  margin-top:1rem; padding:.7rem .9rem;
  border-left:3px solid var(--bh-orange); background:rgba(255,93,0,.06);
  font-size:.84rem; color:var(--bh-gray); line-height:1.55;
}

/* ---------- prose ---------- */
.bl-prose{
  max-width:44rem;                       /* ~68 characters at this size */
  font-size:clamp(1rem,1.1vw,1.09rem);
  line-height:1.75; color:var(--bh-gray);
}
.bl-prose > * + *{ margin-top:1.15em; }
.bl-prose p{ text-align:justify; text-justify:inter-word; }

.bl-prose h2, .bl-prose h3{
  font-family:"Space Grotesk", var(--bh-sans);
  color:var(--bh-ink); letter-spacing:-.02em; line-height:1.2;
  text-align:left; text-wrap:balance;
}
.bl-prose h2{ font-size:clamp(1.42rem,2.5vw,1.95rem); font-weight:600; margin-top:2.6em; }
.bl-prose h3{ font-size:clamp(1.14rem,1.7vw,1.32rem); font-weight:600; margin-top:2em; }
.bl-prose h2 + p, .bl-prose h3 + p{ margin-top:.8em; }

.bl-prose strong{ color:var(--bh-ink); font-weight:600; }
.bl-prose a{ color:var(--bh-ink); text-decoration:underline; text-decoration-color:var(--bh-orange); text-underline-offset:3px; }
.bl-prose a:hover{ color:var(--bh-orange); }

.bl-prose ul, .bl-prose ol{ padding-left:1.3rem; }
.bl-prose li + li{ margin-top:.5em; }
.bl-prose li::marker{ color:var(--bh-orange); }

.bl-prose blockquote{
  margin-left:0; padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--bh-orange);
  font-size:1.05em; color:var(--bh-ink);
}
.bl-prose blockquote p{ text-align:left; }

.bl-prose code{
  font-family:var(--bh-mono); font-size:.88em;
  background:var(--bh-bone-2); padding:.12em .38em; border-radius:4px;
}
.bl-prose pre{ overflow-x:auto; padding:1rem 1.1rem; border-radius:10px; background:var(--bh-ink); }
.bl-prose pre code{ background:none; color:#E8EDF2; padding:0; }

.bl-prose img{ border-radius:12px; border:1px solid var(--bh-line); }

/* Wide tables scroll inside their own container. The wrapper is added by the
   rehypeWrapTables plugin in astro.config.mjs, because Markdown gives no
   element to hang the overflow on and putting it on the table itself breaks
   the column layout. */
.bl-prose .bl-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bl-prose table{
  width:100%; min-width:30rem; border-collapse:collapse; font-size:.92rem;
  background:#fff; border:1px solid var(--bh-line); border-radius:10px;
}
.bl-prose th, .bl-prose td{
  text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--bh-line);
  vertical-align:top;
}
.bl-prose th{
  font-family:var(--bh-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bh-ink);
  background:var(--bh-bone-2);
}
.bl-prose tr:last-child td{ border-bottom:0; }

.bl-prose hr{ border:0; border-top:1px solid var(--bh-line); margin-block:2.4em; }

/* ---------- CTA panel ---------- */
/* .sp-actions was written for the left-aligned hero, so dropped into the
   centred .sp-cta panel it hugs the left edge under a centred heading. The
   product pages fix this with an inline style on each use; doing it here means
   the blog templates cannot forget. Scoped to .sp-cta so the hero keeps its
   left alignment. */
.sp-cta .sp-actions{ justify-content:center; align-items:center; margin-top:1.8rem; }

/* Defensive: .bl-hub__link is navy by design, which is invisible on the navy
   CTA and on a dark band. Buttons are the right control on those surfaces, but
   if a text link ever lands there it should at least be readable. */
.sp-cta .bl-hub__link,
.sp-band--dark .bl-hub__link{ color:#fff; }
.sp-cta .bl-hub__link:hover,
.sp-band--dark .bl-hub__link:hover{ color:var(--bh-orange); }

/* ---------- FAQ ---------- */
/* Reuses .sp-faq from subpage.css, which the product pages already use, so an
   answer looks the same wherever a reader meets it. Only the measure and the
   heading are set here. */
.bl-faq{ max-width:44rem; margin-top:clamp(2.6rem,6vh,4rem); }
.bl-faq__title{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:clamp(1.42rem,2.5vw,1.95rem); letter-spacing:-.02em;
  color:var(--bh-ink); margin:0 0 1.2rem;
}

@media (max-width:760px){ .bl-faq{ max-width:none; } }

/* ---------- hub link block ---------- */
/* Every article ends pointing at the page it exists to support, with anchor
   text that says what the destination is. "Learn more" passes nothing. */
.bl-hub{
  max-width:44rem; margin-top:3rem; padding:1.5rem 1.6rem;
  border:1px solid var(--bh-line); border-radius:14px; background:#fff;
}
.bl-hub__label{
  font-family:var(--bh-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bh-orange);
}
.bl-hub__text{ margin:.6rem 0 1rem; color:var(--bh-gray); line-height:1.6; }
.bl-hub__link{
  display:inline-block; font-weight:600; color:var(--bh-ink);
  text-decoration:underline; text-decoration-color:var(--bh-orange);
  text-underline-offset:4px;
}
.bl-hub__link:hover{ color:var(--bh-orange); }

/* ---------- index + further-reading cards ---------- */
.bl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.1rem; }

.bl-card{
  display:flex; flex-direction:column; gap:.55rem;
  background:#fff; border:1px solid var(--bh-line); border-radius:14px;
  padding:1.3rem 1.4rem; text-decoration:none;
  transition:border-color .3s var(--bh-ease), transform .3s var(--bh-ease);
}
.bl-card:hover{ border-color:var(--bh-orange); transform:translateY(-3px); }
.bl-card__tag{
  font-family:var(--bh-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bh-orange);
}
.bl-card__title{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:1.05rem; line-height:1.3; letter-spacing:-.012em; color:var(--bh-ink);
}
.bl-card__desc{ color:var(--bh-gray); font-size:.9rem; line-height:1.6; }
.bl-card__meta{
  margin-top:auto; padding-top:.7rem;
  font-family:var(--bh-mono); font-size:.68rem; letter-spacing:.06em; color:var(--bh-dim);
}

.bl-related{ margin-top:clamp(2.6rem,6vh,4rem); }

.bl-clusterhead{ margin-bottom:1.2rem; }
.bl-clusterhead p{ color:var(--bh-gray); margin:.35rem 0 0; font-size:.95rem; }

.bl-empty{
  border:1px dashed var(--bh-line); border-radius:14px;
  padding:1.6rem; color:var(--bh-gray); font-size:.95rem; background:#fff;
}

/* ---------- team ---------- */
.bl-person{ display:flex; gap:1.6rem; align-items:flex-start; flex-wrap:wrap; }
.bl-person__photo{
  width:132px; height:132px; border-radius:16px; object-fit:cover; flex:none;
  border:1px solid var(--bh-line); background:var(--bh-bone-2);
}
.bl-person__facts{ list-style:none; padding:0; margin:1.2rem 0 0; max-width:44rem; }
.bl-person__facts li{
  padding-left:1.2rem; position:relative; color:var(--bh-gray);
  line-height:1.65; margin-top:.45rem;
}
.bl-person__facts li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--bh-orange);
}

/* ---------- phones ---------- */
@media (max-width:760px){
  .bl-prose{ max-width:none; }
  .bl-prose p{ text-align:left; }           /* justification tears on narrow columns */
  .bl-standfirst, .bl-hub{ max-width:none; }
  .bl-byline{ gap:.8rem; }
  .bl-byline__meta{ width:100%; }
  .bl-grid{ grid-template-columns:1fr; }
  .bl-person{ gap:1.1rem; }
  .bl-person__photo{ width:96px; height:96px; }
  .bl-prose h2{ margin-top:2.1em; }
}

/* ------------------------------------------------------------------
   Draft marking. Only ever rendered where drafts are rendered at all --
   local dev and staging -- so these rules are dead weight in production
   rather than something that can leak a draft badge onto a live post.
   Deliberately loud: the whole point is that a reviewer can tell at a
   glance which posts are not published yet.
   ------------------------------------------------------------------ */
.bl-card__draft,
.bl-draft-flag{
  display:inline-block;
  font-family:var(--bh-mono); font-size:.62rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:#8a4b00; background:#fff4e6; border:1px solid #ffc98a;
  border-radius:999px; padding:.2rem .55rem;
}
/* Sits above the dateline in the byline block, which is centred there. */
.bl-draft-flag{ margin-bottom:.5rem; }