/* ─────────────────────────────────────────────────────────────────
   CRO Block 12 — Article
   Token-only. Mobile-first. Self-contained.
   ───────────────────────────────────────────────────────────────── */

.block-cro-block-12 {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
  font-family: var(--ds-font-body);
}
.block-cro-block-12 .container { max-width: var(--ds-container-md); }
.block-cro-block-12 .col-lg-12 { width: 100%; padding: 0; }

/* ── Article Header ── */
.block-cro-block-12 .article-header {
  text-align: center;
  margin-bottom: var(--ds-space-6);
  padding-bottom: var(--ds-space-5);
  border-bottom: 1px solid var(--scheme-rule);
}
.block-cro-block-12 .article-category {
  /* uses .ds-eyebrow recipe from design-system.css */
  margin-bottom: var(--ds-space-3);
}
.block-cro-block-12 .article-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-lg);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 var(--ds-space-3) 0;
  color: var(--scheme-fg);
  letter-spacing: .005em;
}
.block-cro-block-12 .article-subtitle {
  font-family: var(--ds-font-serif);
  font-size: var(--ds-fs-body-lg);
  font-style: italic;
  font-weight: 500;
  color: var(--scheme-fg-soft);
  max-width: 60ch;
  margin: 0 auto var(--ds-space-5);
  line-height: 1.5;
}

.block-cro-block-12 .article-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-5);
  margin-top: var(--ds-space-4);
}
.block-cro-block-12 .author-info {
  display: flex; align-items: center; gap: var(--ds-space-3);
}
.block-cro-block-12 .author-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--ds-fs-body-sm);
  flex-shrink: 0;
}
.block-cro-block-12 .author-details { text-align: left; }
.block-cro-block-12 .author-name {
  display: flex; align-items: center; gap: var(--ds-space-1);
  font-weight: 700;
  color: var(--scheme-fg);
  font-size: var(--ds-fs-body-sm);
}
.block-cro-block-12 .linkedin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  transition: transform var(--ds-duration-fast);
}
.block-cro-block-12 .linkedin-badge:hover { transform: scale(1.15); }
.block-cro-block-12 .linkedin-badge svg { width: 14px; height: 14px; }
/* Senior-UX T10: reading-time / publish-details bumped to 14 px floor
   (eyebrow token already = 14 px after coord upgrade — explicit pin
   guarantees no regression if scheme overrides). */
.block-cro-block-12 .publish-details {
  display: flex; align-items: center; gap: var(--ds-space-2);
  color: var(--scheme-fg-mute);
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--ds-font-mono);
}
.block-cro-block-12 .dot-separator { opacity: .5; }

.block-cro-block-12 .live-engagement {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 12%, transparent);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-fs-eyebrow);
  color: var(--ds-trust);
  font-weight: 600;
}
.block-cro-block-12 .live-icon {
  width: 8px; height: 8px;
  background: var(--ds-trust);
  border-radius: 50%;
  animation: cro12-pulse 2s ease-in-out infinite;
}
@keyframes cro12-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

/* ── Summary Section ── */
.block-cro-block-12 .summary-section {
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-left: 4px solid var(--ds-cta);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-5);
  margin-bottom: var(--ds-space-6);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.block-cro-block-12 .summary-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  margin: 0 0 var(--ds-space-3) 0;
  color: var(--scheme-fg);
  text-transform: uppercase;
  letter-spacing: .005em;
}
/* Senior-UX T10: explicit 18 px floor + 1.6 line-height for long-form
   summary copy. --ds-fs-body now resolves to 18 px after coord upgrade,
   but pinning here protects against scheme overrides. */
.block-cro-block-12 .summary-content {
  font-size: 18px;
  line-height: 1.65;
  color: var(--scheme-fg-soft);
  max-height: 5.0em;
  overflow: hidden;
  position: relative;
  transition: max-height var(--ds-duration-slow) var(--ds-ease-out);
}
.block-cro-block-12 .summary-content.expanded { max-height: 100em; }
.block-cro-block-12 .summary-content p { margin: 0 0 var(--ds-space-3) 0; }
/* W2-A20 — Audit team-07 fix #8: was 68×20 px text-link styling,
   feels off-system. Convert to outline button matching site language;
   raises height to 44 px touch target, adds visible border so users
   recognise it as interactive. */
/* Senior-UX T10 (W4-S10): toggle bumped 44 → 48 px (--ds-touch-target),
   filled CTA style for clarity (was outline). Filled CTAs read as buttons
   for older users; outline buttons are top usability complaint at 60+. */
.block-cro-block-12 .toggle-summary-btn {
  margin-top: var(--ds-space-3);
  min-height: var(--ds-touch-target, 48px);
  padding: 12px 24px;
  border: 1px solid var(--ds-cta);
  border-radius: var(--ds-radius-md, 6px);
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: #fff;
  cursor: pointer;
  font-family: var(--ds-font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
  transition: background var(--ds-duration-fast), color var(--ds-duration-fast), box-shadow var(--ds-duration-fast);
}
.block-cro-block-12 .toggle-summary-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}
.block-cro-block-12 .toggle-summary-btn:hover {
  background: var(--ds-cta-dk, #b9492a);
  color: #fff;
}
/* BUG-T10 (W4-S10): on mobile widths the global injected sticky CTA bar
   (.acme-cta-call / .acme-cta-quote) can hover the bottom of the viewport
   and visually clip the .toggle-summary-btn during early scroll. The CTA
   bar markup itself is out-of-slice (acme-enhance.js / acme-polish.css),
   so we defensively reserve clearance on our side: extra bottom padding on
   .summary-section on narrow viewports so the toggle button always stops
   short of the floating bar's footprint (~80 px). */
/* SWEEP-T19 coord fix: replaced hard-coded 56 / 80 px sticky-CTA clearance
   with the shared `--ds-sticky-cta-clearance` token used by team-2 / team-7
   / team-10 in their merged CSS. Token fall-backs match prior literals so
   behaviour is unchanged when the host page does not provide one. */
@media (max-width: 600px) {
  .block-cro-block-12 .summary-section {
    padding-bottom: calc(var(--ds-space-5) + var(--ds-sticky-cta-clearance, 56px));
  }
  .block-cro-block-12 .toggle-summary-btn {
    scroll-margin-block-end: var(--ds-sticky-cta-clearance, 80px);
  }
}

/* ── Article Content (long-form typography) ── */
.block-cro-block-12 .article-content {
  max-width: 70ch;
  margin: 0 auto;
  font-size: var(--ds-fs-body-lg);
  line-height: 1.7;
  color: var(--scheme-fg);
}
.block-cro-block-12 .article-content > p:first-child::first-letter {
  font-family: var(--ds-font-display);
  font-size: 4rem;
  float: left;
  line-height: .9;
  margin: 0.15rem var(--ds-space-2) 0 0;
  color: var(--ds-cta);
}
.block-cro-block-12 .article-content p {
  margin: 0 0 var(--ds-space-4) 0;
}
.block-cro-block-12 .article-content h2,
.block-cro-block-12 .article-content h3 {
  font-family: var(--ds-font-display);
  margin: var(--ds-space-7) 0 var(--ds-space-3) 0;
  color: var(--scheme-fg);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.15;
}
.block-cro-block-12 .article-content h2 { font-size: var(--ds-fs-display-md); }
.block-cro-block-12 .article-content h3 { font-size: var(--ds-fs-display-sm); }
.block-cro-block-12 .article-content h2::before,
.block-cro-block-12 .article-content h3::before {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  margin-bottom: var(--ds-space-3);
  border-radius: 2px;
}
.block-cro-block-12 .article-content blockquote {
  margin: var(--ds-space-6) 0;
  padding: var(--ds-space-4) var(--ds-space-5);
  border-left: 4px solid var(--ds-cta);
  background: color-mix(in srgb, var(--ds-cta) 6%, transparent);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-size: var(--ds-fs-body-lg);
  color: var(--scheme-fg);
}
.block-cro-block-12 .article-content blockquote p { margin: 0; }
.block-cro-block-12 .article-content ul,
.block-cro-block-12 .article-content ol {
  margin: var(--ds-space-4) 0;
  padding-left: var(--ds-space-6);
  /* SWEEP-T19 BUG-FIX: explicit list-style markers so the long-form prose
     reads with conventional disc/decimal bullets, NOT inherit any oddity
     from a parent reset. */
  list-style-position: outside;
}
.block-cro-block-12 .article-content ul { list-style-type: disc; }
.block-cro-block-12 .article-content ol { list-style-type: decimal; }
.block-cro-block-12 .article-content li {
  margin-bottom: var(--ds-space-2);
  line-height: 1.65;
}
/* SWEEP-T19 BUG-FIX: defensive checkmark-leak guard. Theme's
   `theme.min.css #features ul li::before` injects an orange ✓ glyph for
   marketing pages. The article module renders rich Markdown that often
   contains <ul><li> (e.g. "OHSA: WHMIS Training, PPE, Safety Protocols"),
   and senior readers see broken-looking bullets when the global rule
   leaks. We own a no-op pseudo here so the cascade winner is local. */
.block-cro-block-12 .article-content ul li::before,
.block-cro-block-12 .article-content ol li::before {
  content: none !important;
}
.block-cro-block-12 .article-content li strong {
  color: var(--scheme-fg);
  font-weight: 700;
}
.block-cro-block-12 .article-content a {
  color: var(--ds-cta);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--ds-duration-fast);
}
.block-cro-block-12 .article-content a:hover { color: var(--ds-cta-dk); }
.block-cro-block-12 .article-content strong { color: var(--scheme-fg); font-weight: 700; }
.block-cro-block-12 .article-content em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  color: var(--ds-cta);
}

/* Hero image inside article */
.block-cro-block-12 .article-content p img,
.block-cro-block-12 .article-content > img {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-md);
  margin: var(--ds-space-6) auto;
  /* SWEEP-T19 BUG-FIX: hero image previously rendered flat #cccccc
     placeholder.svg ("666666.svg") on first paint until the editorial
     team uploads a real hero. While the placeholder is loading or if it
     fails, fall back to a branded gradient + subtle pattern so older
     readers don't see a flat dead-grey block. The real image, once
     present, always wins (object-fit: cover + same dimensions). */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ds-cta) 8%, transparent) 0%, color-mix(in srgb, var(--ds-trust) 10%, transparent) 100%),
    var(--scheme-card-bg, #efe6d4);
  background-size: cover;
}
/* When alt or filename signals a placeholder, soften the visual instead
   of showing dead pixels. Match the team-09 testimonials precedent of
   owning the visual in-slice. */
.block-cro-block-12 .article-content img[alt="666666"],
.block-cro-block-12 .article-content img[src*="666666"],
.block-cro-block-12 .article-content img[alt^="cccccc"],
.block-cro-block-12 .article-content img[src*="placehold"] {
  /* Hide the broken/placeholder asset; the gradient on the host figure
     above provides a clean editorial panel until a proper hero is
     uploaded. */
  visibility: hidden;
  opacity: 0;
}
.block-cro-block-12 .article-content p:has(> img[alt="666666"]),
.block-cro-block-12 .article-content p:has(> img[src*="666666"]) {
  /* Collapse the wrapping <p> so the placeholder doesn't reserve a
     320 px-tall flat-grey rectangle in long-form copy. */
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

@media (max-width: 600px) {
  .block-cro-block-12 .article-meta { gap: var(--ds-space-3); }
  .block-cro-block-12 .article-content { font-size: var(--ds-fs-body); }
  .block-cro-block-12 .article-content > p:first-child::first-letter { font-size: 3rem; }
}