/* =====================================================================
   Shared article page — Company News + Mining Hub Insights (MHD-1674)

   Chrome stack (top → bottom):
     breadcrumb → banner ad → company header → tab nav →
     2-col article+sidebar grid → full-width "More from {Company}" section

   The article is rendered directly on the page canvas — NOT inside a
   bordered/rounded card. Separation from the sidebar comes from the grid
   gap (whitespace), which is deliberately wider than the tile gap.

   The sidebar stickies under the site nav at desktop widths. Its travel is
   bounded by its grid area inside `.cpn-grid`, so it releases naturally at
   the bottom of the grid and the full-width section below flows past it —
   no JS and no structural change needed for that section to work.

   At <= 899px the sidebar drops under the article and the tiles stack.
   ===================================================================== */

:root {
  --cpn-max-width: 1200px;
  --cpn-gap: 24px;
  /* Article ↔ sidebar separation. Wider than --cpn-gap on purpose: with no
     card border around the article, whitespace is the only thing dividing
     the reading column from the sidebar. */
  --cpn-grid-gap: 56px;
  --cpn-side-pad: 24px;
  --cpn-border: #e5e7eb;
  --cpn-border-soft: #eef0f3;
  --cpn-muted: #6b7280;
  --cpn-text: #111827;
  /* Sidebar/section headings — dark semibold, sentence case. */
  --cpn-heading: #0f172a;
  --cpn-accent: #1d4ed8;
  --cpn-card-bg: #ffffff;
  --cpn-nav-offset: 65px; /* matches body padding-top from /css/style.css */
}

.cpn-article {
  max-width: var(--cpn-max-width);
  margin: 0 auto;
  padding: 24px var(--cpn-side-pad) 80px;
  color: var(--cpn-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* --- Breadcrumb ----------------------------------------------------- */
.cpn-breadcrumb {
  font-size: 13px;
  color: var(--cpn-muted);
  margin-bottom: 16px;
  line-height: 1.4;
  word-break: break-word;
}
.cpn-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cpn-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.cpn-breadcrumb a { color: var(--cpn-muted); text-decoration: none; }
.cpn-breadcrumb a:hover { color: var(--cpn-accent); text-decoration: underline; }
.cpn-breadcrumb [aria-current="page"] { color: var(--cpn-text); font-weight: 600; }
.cpn-breadcrumb .cpn-sep { color: #d1d5db; }

/* --- Sponsor strip -------------------------------------------------
   Sits between the breadcrumb and the company header. Spacing and the
   rounded-corner treatment mirror `.ins-feature-row` on /insights so the
   two surfaces read identically; the widget itself supplies the width and
   the 700/115 aspect ratio (see /components/Ads/ads-widget.css), so this
   stays responsive with no per-breakpoint rules. Generic naming is
   deliberate — see the host markup comment.

   Gap above comes from the breadcrumb's own margin-bottom rather than a
   margin-top here: at <= 899px `.cpn-article` is a flex column, where
   adjacent margins do NOT collapse, so a margin-top would add to it and
   the strip would sit lower on mobile than it does on desktop and on
   /insights. */
.cpn-feature-row {
  width: 100%;
  margin: 0 0 20px;
}
/* Collapse the slot entirely when nothing mounted (no eligible ad, plan
   gate, ad-blocker) so there's no empty band above the company header. */
.cpn-feature-row:empty { display: none; }
.cpn-feature-row.mh-rotator { border-radius: 8px; }

/* --- Company header -----------------------------------------------
   Deliberately understated: on an article page the headline is the
   subject and the company is context, so this sits below the article
   title in the visual hierarchy (see .cpn-body__title). */
.cpn-company-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 0;
}
/* Height-driven, not a fixed square: logos now come from S3 at their real
   aspect ratio, so a wordmark gets its natural width up to the cap instead
   of being letterboxed inside a 46px box. No background here — a grey plate
   behind a transparent logo reads as a bug; it belongs to the placeholder
   below, which IS a square. Height matches --placeholder and --skel--logo,
   so keep all three in step. */
.cpn-company-header__logo {
  height: 46px;
  width: auto;
  max-width: 240px;
  border-radius: 8px;
  object-fit: contain;
  flex: 0 0 auto;
}
.cpn-company-header__logo--placeholder {
  width: 46px;
  min-width: 46px;
  flex: 0 0 46px;
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cpn-muted);
  font-size: 18px;
}
.cpn-company-header__text { display: flex; flex-direction: column; min-width: 0; }
.cpn-company-header__ticker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--cpn-muted);
  text-transform: uppercase;
}
.cpn-company-header__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--cpn-text);
  margin: 2px 0 0;
  word-break: break-word;
}
.cpn-company-header__link { text-decoration: none; color: inherit; }
.cpn-company-header__link:hover .cpn-company-header__name { color: var(--cpn-accent); }
/* Listed/active dot beside the company name, matching the mockup. */
.cpn-company-header__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- Tab nav ------------------------------------------------------- */
.cpn-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cpn-border);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 32px;
}
.cpn-tabs::-webkit-scrollbar { display: none; }
.cpn-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cpn-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.cpn-tabs a:hover { color: var(--cpn-text); }
.cpn-tabs a.is-active {
  color: var(--cpn-accent);
  border-bottom-color: var(--cpn-accent);
}
.cpn-tabs .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* --- Chrome skeleton placeholders ---------------------------------- */
/* Reserve the chrome's final dimensions at first paint so the breadcrumb,
   company header, and tab strip don't jump as JS hydrates. JS replaces the
   skeleton markup via innerHTML in the existing render functions. */
.cpn-skel {
  display: inline-block;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: cpn-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
.cpn-skel--text   { height: 12px; width: 80px; }
.cpn-skel--logo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  flex: 0 0 46px;
}
.cpn-skel--ticker { display: block; height: 10px; width: 64px; margin-bottom: 7px; }
.cpn-skel--title  { display: block; height: 18px; width: 220px; max-width: 80%; }
.cpn-skel--tab    { height: 18px; width: 84px; }
.cpn-tabs__skel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  pointer-events: none;
}
@keyframes cpn-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cpn-skel { animation: none; }
}

/* --- 2-col grid (article + sticky sidebar) ------------------------- */
.cpn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--cpn-grid-gap);
  align-items: start;
}
/* The article sits directly on the page canvas — no border, no rounded
   card, no shadow, no inner padding. Whitespace does the separating. */
.cpn-body {
  min-width: 0;
  /* Comfortable measure. The grid column is already ~776px at the 1200px
     container, so this only bites on wider custom containers. */
  max-width: 780px;
}
.cpn-body-loading {
  color: var(--cpn-muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.cpn-sidebar {
  position: sticky;
  top: calc(var(--cpn-nav-offset) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Article header ------------------------------------------------ */
/* No divider between the metadata and the article body — separation is
   spacing only (explicit design requirement). */
.cpn-body__header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.cpn-body__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--cpn-text);
  margin: 0 0 18px;
  word-break: break-word;
}
/* Interview-type pill rendered above the title on /interview/{slug}-{id}.
   Matches the corner tag styling used on the /insights/interviews cards. */
.cpn-body__interview-tag {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 0 12px;
  background: #30a5bf;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 3px;
}

/* Two-line metadata block, shared by Company News and Insights:
     line 1 — authorship / source     ("Company news release · Source: Newsfile")
     line 2 — timestamp + supporting  ("31 July 2026, 8:47 a.m. EDT")
   Share sits to the right of the block as a quiet icon+text action. */
.cpn-body__meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 32px;
}
.cpn-body__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.cpn-body__meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.4;
}
.cpn-body__meta-source {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cpn-accent);
}
.cpn-body__meta-time {
  font-size: 13px;
  color: var(--cpn-muted);
}
.cpn-body__meta-sep { color: #cbd5e1; }

/* --- Share control -------------------------------------------------
   Quiet icon + text, not a filled pill. */
.cpn-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--cpn-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.15s;
}
.cpn-share-btn:hover { color: var(--cpn-accent); }
.cpn-share-btn:focus-visible {
  outline: 2px solid var(--cpn-accent);
  outline-offset: 2px;
}
.cpn-share-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --- Interview video block ----------------------------------------- */
.cpn-body__video {
  margin: 0 0 24px;
}
.cpn-body__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.cpn-body__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cpn-body__video--external {
  padding: 12px 0;
}
.cpn-body__video-link {
  display: inline-block;
  padding: 10px 18px;
  background: var(--cpn-accent, #30a5bf);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

/* --- Article body content ------------------------------------------ */
.cpn-body__content {
  font-size: 16px;
  line-height: 1.75;
  color: #1f2937;
}

/* PDF-backed providers (ASX, SEDAR) — replace body_html text dump with an
   inline iframe of the source PDF. The iframe needs a fixed numeric height
   (browsers won't size an iframe via flex/aspect-ratio alone). Set tall
   enough for comfortable reading on a desktop monitor without relying on
   the viewport-relative units that produced a too-short box previously. */
.cpn-body__content--pdf {
  padding: 0;
}
.cpn-body__pdf-frame {
  display: block;
  width: 100%;
  height: 1200px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
}
.cpn-body__pdf-frame iframe {
  width: 100%;
  height: 100% !important;
  border: 0;
  display: block;
}
@media (max-width: 899px) {
  .cpn-body__pdf-frame { height: 700px; }
}
.cpn-body__content > * + * { margin-top: 1.15em; }
.cpn-body__content p { margin: 0 0 1.15em; }
.cpn-body__content h1,
.cpn-body__content h2,
.cpn-body__content h3,
.cpn-body__content h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cpn-text);
  margin: 1.8em 0 0.6em;
}
.cpn-body__content h2 { font-size: 23px; }
.cpn-body__content h3 { font-size: 19px; }
.cpn-body__content h4 { font-size: 17px; }
.cpn-body__content a { color: var(--cpn-accent); }
.cpn-body__content img,
.cpn-body__content video,
.cpn-body__content iframe {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1.4em 0;
}
/* Click-to-enlarge affordance. The anchor is either the wire release's own
   link to the full-resolution asset or one added by enhanceBodyImages() in
   article.js — both carry this class. */
.cpn-body__content .cpn-lightbox-link {
  display: inline-block;
  max-width: 100%;
}
.cpn-body__content .cpn-lightbox-link img {
  cursor: zoom-in;
}
.cpn-body__content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0;
  font-size: 14px;
}
.cpn-body__content th,
.cpn-body__content td {
  padding: 8px 10px;
  border: 1px solid var(--cpn-border);
  text-align: left;
}
.cpn-body__content th { background: #f9fafb; font-weight: 600; }
/* Company News quotations keep a neutral, non-editorial treatment. Wire
   releases quote their CEO constantly, and the Insight styling below must
   NOT bleed onto them — the two article types are meant to be tellable
   apart at a glance. */
.cpn-body__content blockquote {
  border-left: 3px solid var(--cpn-border);
  background: #f9fafb;
  margin: 1.4em 0;
  padding: 12px 16px;
  color: var(--cpn-muted);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}
.cpn-body__content blockquote p:last-child { margin-bottom: 0; }

/* --- Insight quote treatment ---------------------------------------
   Open layout: no grey box, blue accent rule, oversized quote glyph, and
   the speaker beneath. Scoped to .cpn-body--insights (set in renderBody)
   so it can never apply to a company announcement. The glyph is supplied
   here rather than in the content — the pipeline's blockquote markup
   carries no glyph of its own. */
.cpn-body--insights .cpn-body__content blockquote {
  position: relative;
  border-left: 3px solid var(--cpn-accent);
  background: none;
  border-radius: 0;
  margin: 2em 0;
  padding: 2px 0 2px 26px;
  color: #1f2937;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.7;
}
.cpn-body--insights .cpn-body__content blockquote::before {
  content: '\201C';
  position: absolute;
  left: 20px;
  top: -6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  line-height: 1;
  color: var(--cpn-accent);
  pointer-events: none;
}
/* The glyph occupies the start of the first line, so indent only that one
   — subsequent paragraphs sit flush against the rule. */
.cpn-body--insights .cpn-body__content blockquote > p:first-child {
  text-indent: 26px;
}
.cpn-body--insights .cpn-body__content blockquote p {
  margin: 0 0 0.9em;
}
.cpn-body--insights .cpn-body__content blockquote p:last-of-type {
  margin-bottom: 0;
}

/* Speaker block, built by enhanceBlockquotes() from the pipeline's
   "— Name, Role" trailing paragraph. Upright, not italic — it is
   attribution, not speech. */
.cpn-quote__attrib {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 14px;
  font-style: normal;
}
.cpn-quote__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cpn-text);
}
.cpn-quote__role {
  font-size: 13px;
  color: var(--cpn-muted);
}
.cpn-body__content ul,
.cpn-body__content ol { padding-left: 24px; }
.cpn-body__content li + li { margin-top: 0.35em; }
.cpn-body__empty { color: var(--cpn-muted); font-style: italic; }

/* About-company boilerplate at the foot of the body. */
.cpn-about {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--cpn-border);
}
.cpn-about__heading {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--cpn-text);
}
.cpn-about__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpn-muted);
  margin: 0 0 8px;
}
.cpn-about__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
}
.cpn-about__link:hover { text-decoration: underline; }

/* --- Sidebar cards ------------------------------------------------- */
.cpn-card {
  background: var(--cpn-card-bg);
  border: 1px solid var(--cpn-border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.cpn-card__head {
  margin-bottom: 14px;
}
/* Sentence case, dark semibold — NOT an uppercase eyebrow. Shared by the
   "Company snapshot", "Related project" and "3D model" cards. */
.cpn-card__heading {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cpn-heading);
}

/* Company snapshot card */
.cpn-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cpn-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: #f3f4f6;
  flex: 0 0 40px;
}
.cpn-card__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cpn-muted);
  font-size: 15px;
}
.cpn-card__identity-text { min-width: 0; }
.cpn-card__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cpn-card__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  margin: 0;
  color: var(--cpn-text);
  word-break: break-word;
}
.cpn-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  flex: 0 0 8px;
}
.cpn-card__sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--cpn-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cpn-card__ticker { font-weight: 600; color: var(--cpn-muted); }
.cpn-card__sub-sep { color: #d1d5db; }

/* Metrics: clean two-column label/value rows. No grey tiles, no dividers. */
.cpn-card__stats {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.cpn-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
}
.cpn-stat__label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cpn-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cpn-stat__value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cpn-text);
  line-height: 1.3;
  text-align: right;
  min-width: 0;
  word-break: break-word;
}
.cpn-stat__change {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
.cpn-stat__change--up { color: #10b981; }
.cpn-stat__change--down { color: #ef4444; }

/* Related project card */
.cpn-card__project-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 3px;
  color: var(--cpn-text);
}
.cpn-card__project-jurisdiction {
  font-size: 12px;
  color: var(--cpn-muted);
  margin-bottom: 12px;
}
.cpn-card__project-thumb-link {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 12px;
}
.cpn-card__project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cpn-card__project-thumb--missing { object-fit: contain; padding: 16px; opacity: 0.5; }
.cpn-card__project-cta {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
}
.cpn-card__project-cta:hover { text-decoration: underline; }

/* --- Full-width end-of-article section ------------------------------
   "More from {Company}" — sits below BOTH the article and the sidebar.
   Column count is driven by --cpn-tile-count, set inline by article.js
   from the number of cards that actually had content, so hidden empty
   cards reflow the remainder across the available width. */
.cpn-tiles {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--cpn-border);
}
.cpn-tiles:empty { display: none; }
.cpn-tiles__heading {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--cpn-heading);
  margin: 0 0 20px;
}
.cpn-tiles__grid {
  display: grid;
  grid-template-columns: repeat(var(--cpn-tile-count, 3), minmax(0, 1fr));
  gap: var(--cpn-gap);
  align-items: start;
}

/* --- Related Insights cards (Insight articles) ----------------------
   Richer treatment than the Company News context row: thumbnail left,
   category + headline + excerpt right, meta line spanning underneath.
   Borderless — the thumbnails carry the visual weight. */
/* Column count follows the number of cards that actually cleared the
   relevance floor (--cpn-rel-count, set in renderTiles), so one or two
   matches spread across the full width instead of leaving a dead third. */
.cpn-rel-grid {
  display: grid;
  grid-template-columns: repeat(var(--cpn-rel-count, 3), minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.cpn-rel {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-areas:
    "thumb text"
    "meta  meta";
  gap: 12px 14px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.cpn-rel:hover .cpn-rel__title { color: var(--cpn-accent); }
.cpn-rel__thumb {
  grid-area: thumb;
  /* Positioning context for the "Stock image" pill — required by
     /components/article-thumb.css. */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}
.cpn-rel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* A card whose image failed to load drops the thumb entirely (see the
   onerror in article.js); the text then spans the full card width rather
   than sitting beside an empty grey box. */
.cpn-rel__text {
  grid-area: text;
  min-width: 0;
}
/* Thumb absent (image 404'd, or no URL resolved) — the text takes the whole
   card rather than leaving a 132px gutter. */
.cpn-rel > .cpn-rel__text:first-child { grid-column: 1 / -1; }
.cpn-rel__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cpn-accent);
  margin-bottom: 4px;
}
.cpn-rel__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cpn-text);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.cpn-rel__excerpt {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cpn-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cpn-rel__meta {
  grid-area: meta;
  font-size: 11.5px;
  color: #9ca3af;
  padding-top: 2px;
}
.cpn-rel__meta-sep { color: #d1d5db; margin: 0 2px; }

.cpn-tile {
  background: var(--cpn-card-bg);
  border: 1px solid var(--cpn-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cpn-tile__head {
  margin-bottom: 10px;
}
.cpn-tile__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cpn-muted);
  margin: 0;
}
.cpn-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
}
.cpn-tile__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cpn-border-soft);
}
.cpn-tile__viewall {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
  white-space: nowrap;
}
.cpn-tile__viewall:hover { text-decoration: underline; }

/* Rows: leading icon, then title over date. Shared shape across the news,
   filing and insider tiles so the three cards read as one system. */
.cpn-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
a.cpn-row:hover { background: #f8fafc; }
.cpn-row__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: #9ca3af;
  fill: currentColor;
}
.cpn-row__text { min-width: 0; flex: 1; }
.cpn-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cpn-text);
  line-height: 1.4;
  /* Two-line clamp: filing descriptions and headlines are long, and a
     single-line ellipsis loses too much of them at tile width. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cpn-row__date {
  font-size: 11.5px;
  color: var(--cpn-muted);
  margin-top: 3px;
}
.cpn-row__pdf {
  flex: 0 0 auto;
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--cpn-muted);
  background: transparent;
  border: 1px solid var(--cpn-border);
  padding: 3px 7px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cpn-row__pdf:hover {
  border-color: var(--cpn-muted);
  color: var(--cpn-text);
  background: #f3f4f6;
}
/* Filing rows carry a second anchor (the PDF badge) beside the main link, so
   the outer element is a <div> — nesting anchors is invalid HTML and the
   browser would auto-close the outer one. */
.cpn-row--filing { align-items: center; }
.cpn-row--filing:hover { background: #f8fafc; }
.cpn-row__main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* --- Lead capture ---------------------------------------------------
   "Stay Updated" card appended to the end of the article body by
   renderLeadCapture(). Card chrome comes from
   /components/LeadCapture/lead-capture.css; this only places it. */
.cpn-lead-capture {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--cpn-border);
}

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1099px) {
  :root { --cpn-grid-gap: 36px; }
  .cpn-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .cpn-body__title { font-size: 32px; }
}

@media (max-width: 899px) {
  /* Mobile section order: chrome (breadcrumb, banner, header, tabs) →
     article → related project card → company snapshot → full-width
     section. The desktop DOM order is article+sidebar in a grid followed
     by the section; `display: contents` on the grid promotes article and
     sidebar to direct children of the flex article so `order` can
     interleave them. */
  .cpn-article {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 60px;
  }
  .cpn-grid { display: contents; }
  .cpn-body { order: 1; max-width: none; }
  .cpn-sidebar {
    order: 2;
    position: static;
    top: auto;
    margin-top: 32px;
    gap: 12px;
  }
  .cpn-tiles {
    order: 3;
    margin-top: 32px;
    padding-top: 24px;
  }
  /* Empty cards are removed from the DOM, so the remaining ones still
     fill the row on tablet widths. */
  .cpn-tiles__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cpn-rel-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
  .cpn-card--project { order: 1; }
  .cpn-card--3d { order: 2; }
  .cpn-card--company { order: 3; }
  .cpn-company-header__logo {
    height: 42px;
    max-width: 200px;
  }
  .cpn-company-header__logo--placeholder,
  .cpn-skel--logo {
    width: 42px; height: 42px; flex-basis: 42px; min-width: 42px;
  }
  .cpn-company-header__name { font-size: 18px; }
  .cpn-body__title { font-size: 28px; }
  /* Make the top tab nav sticky so users can switch tabs without scrolling
     back to the top of long articles. Sits under the fixed site nav. */
  .cpn-tabs {
    position: sticky;
    top: var(--cpn-nav-offset);
    z-index: 5;
    background: #fff;
    margin: 0 -16px 24px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 599px) {
  .cpn-breadcrumb { font-size: 12px; }
  .cpn-tabs a { padding: 10px 12px; font-size: 13px; }
  .cpn-company-header__name { font-size: 17px; }
  .cpn-body__title { font-size: 24px; }
  .cpn-body__content { font-size: 15.5px; }
  .cpn-tiles__heading { font-size: 18px; }
  .cpn-tiles__grid { grid-template-columns: 1fr; }
  .cpn-rel-grid { grid-template-columns: 1fr; gap: 20px; }
  .cpn-rel { grid-template-columns: 104px minmax(0, 1fr); }
  /* Share drops under the metadata rather than squeezing beside it. */
  .cpn-body__meta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cpn-share-btn { margin: 0 0 0 -6px; }
}