/**
 * preview-lineboard.css — the "Line-Board" design-system baseline.
 *
 * ⛔ SCOPE: every rule below is scoped under the `.lb` wrapper. Nothing here can reach a live
 * page: no live page carries the wrapper class and no live page imports this file. This is a
 * PARALLEL theme layer, not a replacement for global.css / redesign-theme.css. Do not add
 * unscoped element selectors (`body {}`, `h1 {}`) to this file — that is the one change that
 * would leak into live pages.
 *
 * CONCEPT: controlled light revealing the truth. The warm gold rake of an LED line board
 * across a dark panel is the authority motif — it appears on DARK sections only (hero, proof,
 * case study, Bryan/shop, final CTA). Wherever the visitor reads and decides, the page goes
 * light and calm. Register is RELIEF, not urgency.
 *
 * ⛔ COLOR LAW: --lb-action (#C62828) is for CTAs and interactive affordances ONLY, and appears
 * nowhere else. --lb-gold (#C8A24A) is an accent/rule/glow on dark and must NEVER touch a CTA.
 */

.lb {
  /* ---- Action (CTA / interactive ONLY) ---- */
  --lb-action: #c62828;
  --lb-action-hover: #a81f1f;
  --lb-action-ring: rgba(198, 40, 40, 0.32);

  /* ---- Authority (dark surfaces) ---- */
  --lb-charcoal: #16181b;
  --lb-charcoal-2: #1e2125;

  /* ---- Line-board gold (accent on dark — never a CTA) ---- */
  --lb-gold: #c8a24a;
  --lb-gold-soft: rgba(200, 162, 74, 0.42);
  --lb-gold-glow: rgba(200, 162, 74, 0.14);

  /* ---- Content (light surfaces) ---- */
  --lb-white: #ffffff;
  --lb-paper: #f7f6f3;

  /* ---- Text ---- */
  --lb-ink: #16181b;
  --lb-on-dark: #f4f4f2;
  --lb-on-dark-muted: #b9b7b1;

  /* ---- Neutral ramp ---- */
  --lb-n50: #f7f6f3;
  --lb-n100: #eceae6;
  --lb-n200: #d6d3cd;
  --lb-n400: #9a968e;
  --lb-n500: #6b6862;
  --lb-n700: #3a3b3e;
  --lb-n900: #16181b;

  --lb-success: #2e7d5b;

  /* ---- Spacing: 4px base ---- */
  --lb-s1: 4px;
  --lb-s2: 8px;
  --lb-s3: 12px;
  --lb-s4: 16px;
  --lb-s5: 20px;
  --lb-s6: 24px;
  --lb-s8: 32px;
  --lb-s10: 40px;
  --lb-s12: 48px;
  --lb-s16: 64px;

  /* Section rhythm: 56–72 mobile, 96–128 desktop. */
  --lb-section-y: 60px;

  --lb-container: 1200px;
  --lb-reading: 720px;

  --lb-radius: 6px;
  --lb-radius-sm: 4px;
  --lb-radius-lg: 8px;

  /* One soft elevation on light. Dark surfaces use gold hairlines instead of shadow. */
  --lb-elev: 0 8px 24px rgba(20, 24, 27, 0.08);
  --lb-hairline: rgba(200, 162, 74, 0.28);

  --lb-fast: 150ms;
  --lb-slow: 280ms;
  --lb-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --lb-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --lb-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--lb-body);
  color: var(--lb-ink);
  background: var(--lb-white);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  .lb {
    --lb-section-y: 112px;
  }
}

.lb *,
.lb *::before,
.lb *::after {
  box-sizing: border-box;
}

.lb img {
  display: block;
  max-width: 100%;
}

.lb a {
  color: inherit;
}

/* Visible focus everywhere — the action color doubles as the focus ring, which is legal
   under the color law because focus IS an interactive state. */
.lb a:focus-visible,
.lb button:focus-visible,
.lb summary:focus-visible {
  outline: 3px solid var(--lb-action);
  outline-offset: 3px;
  border-radius: var(--lb-radius-sm);
}

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

.lb-container {
  width: min(100% - 40px, var(--lb-container));
  margin-inline: auto;
}

.lb-reading {
  max-width: var(--lb-reading);
}

.lb-section {
  padding-block: var(--lb-section-y);
}

.lb-section--tight {
  padding-block: calc(var(--lb-section-y) * 0.62);
}

.lb-dark {
  background: var(--lb-charcoal);
  color: var(--lb-on-dark);
}

.lb-dark-2 {
  background: var(--lb-charcoal-2);
  color: var(--lb-on-dark);
}

.lb-paper {
  background: var(--lb-paper);
}

/* ---------------------------------------------------------------- type */

.lb h1,
.lb h2,
.lb h3,
.lb .lb-display {
  font-family: var(--lb-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.lb h1 {
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.lb h2 {
  font-size: clamp(31px, 3.9vw, 50px);
}

.lb h3 {
  font-size: clamp(20px, 1.5vw, 23px);
  font-weight: 700;
  line-height: 1.15;
}

.lb p {
  margin: 0 0 var(--lb-s4);
  line-height: 1.62;
}

.lb p:last-child {
  margin-bottom: 0;
}

/**
 * KEYWORD-EMPHASIS STANDARD (preview-wide).
 *
 * 550 is the whole point: heavy enough to mark a term, light enough that a paragraph with three
 * emphasised phrases still reads as prose rather than a keyword list. It requires the VARIABLE
 * Inter axis — PreviewLayout requests wght@400..700 for exactly this reason. On a static-weight
 * fallback the browser rounds to 500 and the page degrades gracefully.
 *
 * ⛔ NEVER a hue. Colour is reserved for actions (--lb-action) and for accents on dark
 * (--lb-gold); an emphasised keyword is neither. Components may lift <strong> from the muted
 * body colour to the base ink/on-dark colour — that is a neutral contrast step, not colour
 * emphasis, and at 550 it is what keeps emphasis legible against muted grey.
 *
 * Display <strong> (proof-bar figures, the phone number, "200+") set their own font-weight and
 * out-specify this rule via Astro's scoped attribute selectors, so they are unaffected.
 */
.lb strong,
.lb .lb-term {
  font-weight: 550;
  color: inherit;
}

.lb-eyebrow {
  font-family: var(--lb-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb-n500);
  margin: 0 0 var(--lb-s3);
  display: flex;
  align-items: center;
  gap: var(--lb-s3);
}

/* On dark, the eyebrow carries the line-board rake: a short gold rule. */
.lb-dark .lb-eyebrow,
.lb-dark-2 .lb-eyebrow {
  color: var(--lb-gold);
}

/* align-self keeps the rule on the first line if the label ever wraps, instead of letting it
   centre itself against a two-line block. */
.lb-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: none;
  align-self: flex-start;
  margin-top: 9px;
}

.lb-lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--lb-n500);
  max-width: 62ch;
}

.lb-dark .lb-lede,
.lb-dark-2 .lb-lede {
  color: var(--lb-on-dark-muted);
}

.lb-section-head {
  max-width: 780px;
  margin-bottom: var(--lb-s10);
}

/* Headings set their own line-height at 0.98 and carry no bottom margin, so a lede following
   an h2 collides with its descenders. */
.lb-section-head h2 {
  margin-bottom: var(--lb-s4);
}

/* ---------------------------------------------------------------- buttons */

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-s2);
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--lb-radius);
  border: 2px solid transparent;
  font-family: var(--lb-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--lb-fast) var(--lb-ease),
    transform var(--lb-fast) var(--lb-ease), box-shadow var(--lb-fast) var(--lb-ease);
}

/* The one red. */
.lb-btn--action {
  background: var(--lb-action);
  color: #fff;
  box-shadow: 0 4px 14px var(--lb-action-ring);
}

.lb-btn--action:hover {
  background: var(--lb-action-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--lb-action-ring);
}

/* Secondary on dark — outline, no red, no gold. */
.lb-btn--ghost-dark {
  border-color: rgba(244, 244, 242, 0.42);
  color: var(--lb-on-dark);
  background: transparent;
}

.lb-btn--ghost-dark:hover {
  border-color: var(--lb-on-dark);
  background: rgba(244, 244, 242, 0.07);
  transform: translateY(-1px);
}

/* Secondary on light. */
.lb-btn--ghost {
  border-color: var(--lb-n200);
  color: var(--lb-ink);
  background: var(--lb-white);
}

.lb-btn--ghost:hover {
  border-color: var(--lb-n400);
  transform: translateY(-1px);
}

.lb-btn--full {
  width: 100%;
}

.lb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-s3);
}

/* Tap-safe inline link. Phone/email/nav links sit in prose but ARE actions, and at body size
   they land ~20px tall — half the 44px floor. Vertical padding cancelled by equal negative
   margin expands the hit area to 44px without moving a single line of text.
   Mid-sentence prose links are deliberately NOT given this: stretching a link inside a running
   line box overlaps its neighbours. Those stay standard text links. */
.lb-taplink {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

/* ---------------------------------------------------------------- cards */

.lb-card {
  background: var(--lb-white);
  border: 1px solid var(--lb-n100);
  border-radius: var(--lb-radius-lg);
  box-shadow: var(--lb-elev);
  padding: var(--lb-s8);
}

.lb-card-dark {
  background: var(--lb-charcoal-2);
  border: 1px solid rgba(244, 244, 242, 0.1);
  border-radius: var(--lb-radius-lg);
  padding: var(--lb-s8);
}

/* ---------------------------------------------------------------- lists */

.lb-checks {
  list-style: none;
  margin: var(--lb-s5) 0;
  padding: 0;
  display: grid;
  gap: var(--lb-s3);
}

/* ⛔ NOT display:flex. A flex li turns every child — including a <strong> emphasis term and
   the text nodes either side of it — into separate flex items, so "an inspection under
   *controlled light* before anything is decided" shreds into three gapped columns. Absolute
   positioning the marker keeps the li's content a normal inline flow, so inline markup wraps
   like prose. */
.lb-checks li {
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
}

.lb-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--lb-success);
}

.lb-dark .lb-checks li::before,
.lb-dark-2 .lb-checks li::before {
  background: var(--lb-gold);
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .lb *,
  .lb *::before,
  .lb *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}