/* =====================================================================
   Mining Hub landing page (`/`) — section layout + card styling.

   Visual language tuned to the approved homepage mockup:
     - White cards on a light grey page, subtle 1px borders.
     - Panel titles are dark navy, bold, uppercase, letter-spaced.
     - Column / sub-headers are mid-blue, NOT uppercase, no background fill.
     - Tag chips are ONE color across every category (mocked as a navy chip).
     - Hero / featured typography: larger title (~32px on hero, ~22px on
       featured), generous line-height, copy clamped to ~55% width so it
       doesn't run over the image.

   Breakpoint plan:
     >= 1240px  Full multi-column desktop
     >= 900px   2-col compromise (hero stays side-by-side, 3-card rows wrap)
     <  900px   Single column, mobile stacking
   ===================================================================== */

:root {
  /* Brand palette — sourced from /css/theme.css.
     The "primary blue" for headers + values is the dark navy that the
     site nav uses (#192342). Action links / CTAs use the lighter teal
     accent (#30A5BF). */
  --lp-navy: #192342;          /* panel + section headers, chips, value text */
  --lp-navy-strong: #0f1629;
  --lp-action: #30a5bf;        /* CTAs, footer links */
  --lp-action-hover: #2a8ea4;
  --lp-up: #16a34a;
  --lp-down: #dc2626;
  --lp-page-bg: #f5f6f8;
  --lp-border: #e5e7eb;
  --lp-text-strong: #111827;
  --lp-text: #1f2937;
  --lp-text-muted: #6b7280;
  --lp-text-faint: #9ca3af;
}

.mh-landing-body {
  background-color: var(--lp-page-bg);
  color: var(--lp-text);
}

.lp-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 20px 80px;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  gap: 24px;
}

/* Generic feature-row host used by the page-banner widget. Neutral naming
   on purpose so ad-blocker selectors don't strip it; the widget mounts its
   own content inside. The flex `gap` on .lp-page already provides spacing,
   so no margin here — only hide when empty so a failed widget doesn't
   leave a dead row. Match the rounded-corner card rhythm used everywhere
   else on the landing page (.lp-card uses 12px); the widget sets
   overflow:hidden internally so the image is clipped to the radius. */
.lp-feature-row:empty { display: none; }
.lp-feature-row.mh-rotator {
  border-radius: 12px;
}

/*  Screen-reader-only heading design. Used to maintain semantic heading structure and improve accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Generic card + shared elements ---------- */
.lp-card {
  background: #ffffff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-card-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid #f0f1f4;
}
/* SUB-PANEL header (sits inside every .lp-card). Slightly smaller and
   thinner than the section header above the row so the hierarchy reads
   from biggest → smallest. */
.lp-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-navy);
}
.lp-card-footer {
  padding: 12px 18px;
  border-top: 1px solid #f0f1f4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.lp-card-footer-spread {
  justify-content: space-between;
  gap: 12px;
}
.lp-cta-link {
  font-size: 13px;
  color: var(--lp-action);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.lp-cta-link:hover { color: var(--lp-action-hover); }
.lp-cta-link i { font-size: 11px; }
.lp-cta-link-muted {
  color: var(--lp-text-faint);
  pointer-events: none;
  cursor: default;
}

/* SECTION header (above every multi-card row except the hero). Larger than
   the card title above so the hierarchy is obvious; carries a short accent
   underline tied to the brand teal so it pops without being noisy. */
.lp-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-navy);
  position: relative;
  padding-bottom: 8px;
}
.lp-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--lp-action);
}
.lp-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.lp-empty {
  padding: 16px;
  color: var(--lp-text-faint);
  text-align: center;
  font-size: 13px;
  font-style: italic;
}

/* ---------- Category chip — ONE color across every tag (mockup match) ---------- */
.lp-chip {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffffff;
  background: var(--lp-navy);
}
/* (Per-tag color rules removed — consistent navy chip per mockup.) */

/* ---------- Skeleton loaders ---------- */
.lp-skeleton {
  background: linear-gradient(90deg, #f1f1f1 0%, #e5e7eb 50%, #f1f1f1 100%);
  background-size: 200% 100%;
  animation: lp-shimmer 1.4s linear infinite;
  border-radius: 8px;
  min-height: 120px;
}
.lp-loading-placeholder {
  height: 280px;
  background: linear-gradient(90deg, #f1f1f1 0%, #e5e7eb 50%, #f1f1f1 100%);
  background-size: 200% 100%;
  animation: lp-shimmer 1.4s linear infinite;
}
.lp-loading-table {
  height: 360px;
  margin: 4px;
  border-radius: 8px;
}
@keyframes lp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================================
   HERO ROW
   ===================================================================== */
.lp-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
}
.lp-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.lp-hero-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #1f2937;
  min-height: 400px;
  color: #fff;
  text-decoration: none;
  display: block;
}
.lp-hero-main .lp-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.lp-hero-main .lp-hero-img::after {
  content: '';
  position: absolute; inset: 0;
  /* Bottom-heavy gradient anchors the text block, but the top never drops to
     fully transparent — admin-supplied images often carry their own captions
     (project name, scale bars, etc.) that would otherwise compete with our
     headline. The 0.4 floor flattens those without obscuring the image. */
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.4) 100%);
}
.lp-hero-main .lp-hero-chip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
}
.lp-hero-main .lp-hero-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px;
  z-index: 2;
  max-width: 55%;
}
/* The body block is bottom-anchored inside a fixed-height card, so it grows
   UPWARD. Without a bound, a long headline (or long excerpt) pushes the block
   past the tag chip at top-left and the two overlap. Clamping both to a fixed
   line count caps the block's height well below the chip zone. Mobile drops
   the headline clamp — there the body sits in normal flow and can't collide. */
.lp-hero-main .lp-hero-headline {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-hero-main .lp-hero-excerpt {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #e5e7eb;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-hero-main .lp-hero-meta {
  font-size: 12px;
  color: #d1d5db;
  letter-spacing: 0.02em;
}

.lp-hero-supporting {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lp-hero-tile {
  background: #1f2937;
  border-radius: 10px;
  min-height: 140px;
  overflow: hidden;
  position: relative;
  color: #fff;
  text-decoration: none;
  display: block;
}
.lp-hero-tile .lp-hero-tile-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.lp-hero-tile .lp-hero-tile-img::after {
  content: '';
  position: absolute; inset: 0;
  /* Dark floor at BOTH ends — chip + headline sit at the top, meta sits at
     the bottom, so the middle band is where the image reads through. */
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.85) 100%);
}
.lp-hero-tile .lp-hero-chip { position: absolute; top: 10px; left: 10px; z-index: 2; }
.lp-hero-tile .lp-hero-tile-body {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  /* padding-top clears the chip (10px top + ~24px chip + ~8px gap). */
  padding: 42px 14px 14px;
  z-index: 2;
}
.lp-hero-tile .lp-hero-tile-meta { margin-top: auto; }
.lp-hero-tile .lp-hero-tile-headline {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-hero-tile .lp-hero-tile-meta {
  font-size: 11px;
  color: #d1d5db;
}

/* ---------- Commodity panel ---------- */
.lp-commodities {
  align-self: start;
}
/* Header row uses the same mid-blue / not-uppercase style as the drill
   intercepts column headers. */
.lp-commodities-head,
.lp-commodities-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  align-items: center;
  padding: 8px 14px;
}
.lp-commodities-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-navy);
  border-bottom: 1px solid #f0f1f4;
}
.lp-commodities-head .lp-com-h-price,
.lp-commodities-head .lp-com-h-chg { text-align: right; }
.lp-commodities-row {
  font-size: 13px;
  border-bottom: 1px solid #f3f4f6;
}
.lp-commodities-row:last-child { border-bottom: 0; }
.lp-commodities-row .lp-com-name {
  font-weight: 600;
  color: var(--lp-text-strong);
}
.lp-commodities-row .lp-com-units {
  font-size: 11px;
  color: var(--lp-text-faint);
  margin-left: 4px;
  font-weight: 400;
}
.lp-commodities-row .lp-com-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text-strong);
}
.lp-commodities-row .lp-com-chg {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.lp-com-chg.lp-up   { color: var(--lp-up); }
.lp-com-chg.lp-down { color: var(--lp-down); }
/* "Updated at" sits on the LEFT of the footer; CTA stays right. */
.lp-commodities .lp-card-footer { justify-content: space-between; }
.lp-commodities-updated {
  font-size: 11px;
  color: var(--lp-text-faint);
}

/* =====================================================================
   DRILLING ROW — 50% intercepts / 25% drill results / 25% drilling updates
   ===================================================================== */
.lp-drilling-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.lp-intercepts-table-wrap {
  overflow: hidden;       /* no horizontal scroll at desktop width */
}
.lp-intercepts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.lp-intercepts-table thead th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-navy);
  padding: 10px 8px;
  border-bottom: 1px solid var(--lp-border);
  background: transparent;
}
.lp-intercepts-table thead th .lp-sort-chevron {
  font-size: 9px;
  margin-left: 4px;
  color: var(--lp-navy);
}
/* Column width allocation at 50% page-width. Date is wider than feels
   necessary because each cell stacks date + timezone code on two lines.
   Company absorbs the old commodity column's 11% so most company names fit
   on a single line. */
.lp-intercepts-table .lp-col-date      { width: 15%; }
.lp-intercepts-table .lp-col-company   { width: 33%; }
.lp-intercepts-table .lp-col-gxw       { width: 23%; }
.lp-intercepts-table .lp-col-grade     { width: 17%; }
.lp-intercepts-table .lp-col-width     { width: 12%; text-align: right; }

.lp-intercepts-table tbody td {
  padding: 12px 8px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
  font-size: 13px;
}
.lp-intercepts-table tbody tr:last-child td { border-bottom: 0; }
.lp-intercepts-table tbody td.lp-int-date {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text-muted);
  white-space: nowrap;
  line-height: 1.25;
}
.lp-intercepts-table .lp-int-date-value {
  color: var(--lp-text-strong);
  font-weight: 500;
}
.lp-intercepts-table .lp-int-date-tz {
  color: var(--lp-text-faint);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.lp-intercepts-table .lp-int-company {
  display: flex; flex-direction: column;
  line-height: 1.3;
}
.lp-intercepts-table .lp-int-company-name {
  font-weight: 700;
  color: var(--lp-navy);
  text-decoration: none;
}
.lp-intercepts-table .lp-int-company-project {
  color: var(--lp-text-muted);
  font-size: 11px;
  font-weight: 400;
}
/* Grade × width: thin bar with the value stacked above it. Value carries
   commodity (+ "eq" if equivalent) inline — NOT bold per the mockup. */
.lp-intercepts-table .lp-int-gxw-cell {
  display: flex; flex-direction: column;
  gap: 4px;
}
.lp-intercepts-table .lp-int-gxw-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Mobile-only combined summary — hidden on desktop; shown in the
   reflowed card layout (see mobile breakpoint). */
.lp-intercepts-table .lp-int-gxw-mobile-summary { display: none; }
.lp-intercepts-table .lp-int-gxw-value .lp-int-gxw-commodity {
  color: var(--lp-text-muted);
  font-weight: 400;
  margin-left: 4px;
  /* "Au g/t.m" is one unit — never break it mid-token in a narrow cell. */
  white-space: nowrap;
}
.lp-intercepts-table .lp-int-gxw-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background: #f1f3f5;
  border-radius: 999px;
  overflow: hidden;
}
.lp-intercepts-table .lp-int-gxw-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--lp-navy);   /* fallback; overridden inline per commodity */
}
.lp-intercepts-table .lp-int-grade-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--lp-navy);
}
.lp-intercepts-table .lp-int-grade-cell .lp-int-grade-units {
  font-weight: 400;
  color: var(--lp-text-muted);
  font-size: 11px;
  margin-left: 4px;
}
.lp-intercepts-table .lp-int-width-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--lp-navy);
  text-align: right;
}
.lp-intercepts-meta {
  font-size: 13px;
  color: var(--lp-text-muted);
}

/* =====================================================================
   THUMB-LIST CARD — used by Recent Drill Results + Drilling Updates
   Each row carries a small thumbnail + title + meta. Over-rendered (12
   items desktop, capped to 5 on mobile) and clipped so the card always
   matches the height of the intercepts card next to it.
   ===================================================================== */
/* The card is display:flex column via .lp-card. The list is deliberately
   overloaded (up to 12 items — see renderThumbList) and we clip + fade the
   bottom so the column stays visually full regardless of how tall each
   intercepts row grows. min-height:0 lets the flex item shrink below its
   content size so overflow:hidden clips.

   `overflow:hidden` + `min-height:0` alone do NOT make this clip: an `auto`
   grid row sizes to the TALLEST item's max-content contribution, so a
   12-item list grew the whole row and stretched every card to match it —
   the intercepts card then rendered with a block of dead space below its
   footer while the thumb columns ran on past it. The row height only
   collapses to the intercepts card once the lists stop contributing their
   content height to row sizing; that's what `contain: size` does below. */
.lp-thumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
/* Size containment: the list is sized as if it had no contents, so it
   contributes 0 to the grid row's height and the row is dictated purely by
   the intercepts card (the only sibling whose content sizes naturally).
   `flex: 1 1 auto` then grows it back into whatever vertical space is left
   between the card header and footer, and the overflowing items are clipped
   by overflow:hidden and faded by ::after.

   Scoped to the 3-across layout on purpose. At <=1239px the intercepts card
   moves to its own full-width grid row (see the breakpoint below), so it no
   longer shares a row with the thumb cards — applying containment there
   would collapse both lists to nothing. Browsers without `contain` support
   simply fall back to the previous (uneven) behaviour. */
@media (min-width: 1240px) {
  .lp-drilling-row .lp-thumb-list { contain: size; }
}
.lp-thumb-list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.lp-thumb-list li {
  border-bottom: 1px solid #f3f4f6;
}
.lp-thumb-list li:last-child { border-bottom: 0; }
.lp-thumb-list li a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.lp-thumb-list .lp-thumb-img {
  width: 72px;
  height: 54px;
  background-size: cover;
  background-position: center;
  background-color: #1f2937;
  border-radius: 6px;
  /* Positioning context for the "Stock image" disclosure pill (see
     /components/article-thumb.css). */
  position: relative;
}
.lp-thumb-list .lp-thumb-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lp-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-thumb-list .lp-thumb-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

/* =====================================================================
   2-COLUMN SECTIONS (Exploration, Company & Project)
   Big featured left + 4 stacked supporting right.
   ===================================================================== */
.lp-section-2col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-section-2col-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}
.lp-section-2col-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.lp-section-2col-featured {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-section-2col-featured > a {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  flex: 1;
}
.lp-section-2col-featured .lp-2col-feat-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: #1f2937;
  position: relative;
}
.lp-section-2col-featured .lp-2col-feat-img .lp-chip {
  position: absolute; top: 14px; left: 14px;
}
.lp-section-2col-featured .lp-2col-feat-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column;
  flex: 1;
}
.lp-section-2col-featured .lp-2col-feat-headline {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lp-text-strong);
}
.lp-section-2col-featured .lp-2col-feat-excerpt {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}
.lp-section-2col-featured .lp-2col-feat-meta {
  font-size: 12px;
  color: var(--lp-text-muted);
  margin-top: auto;
}

.lp-section-2col-supporting {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Right column tracks the featured card's height so the 4 tiles span
     equally. Each grows to fill its share of available vertical space. */
}
.lp-section-2col-supporting li {
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  flex: 1;
  display: flex;
}
.lp-section-2col-supporting li a {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.lp-section-2col-supporting .lp-2col-sup-img {
  /* Width follows the grid column on the parent `<a>` so the thumbnail
     never overlaps the title when the column shrinks at smaller widths. */
  width: 100%;
  height: 100%;
  min-height: 70px;
  background-size: cover; background-position: center;
  background-color: #1f2937;
  border-radius: 6px;
  /* Positioning context for the "Stock image" disclosure pill (see
     /components/article-thumb.css). */
  position: relative;
}
.lp-section-2col-supporting .lp-2col-sup-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-text-strong);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-section-2col-supporting .lp-2col-sup-excerpt {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-section-2col-supporting .lp-2col-sup-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

/* =====================================================================
   MARKET ROW — 3-col: Heatmap | Movers | Indices placeholder
   ===================================================================== */
.lp-market-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.lp-market-grid > .lp-card { height: 100%; }

/* Custom lightweight heatmap — slice-and-dice treemap. The container is a
   vertical stack of rows; each row is a horizontal flex strip. Row heights
   are proportional to the row's total market cap; tile widths within a row
   are proportional to each tile's market cap. The layout is computed in JS
   (renderHeatmap) using inline flex-grow values so no charting library is
   required. */
/* Squarified-treemap container — tiles are absolutely-positioned children
   sized by the layout algorithm in landing.js (drawHeatmap → squarify).
   The 8px padding is consumed by the algorithm so tiles never overlap the
   container edges. min-height keeps a usable floor before the first
   layout pass measures the box. */
.lp-heatmap-tiles {
  position: relative;
  padding: 0;
  flex: 1;
  min-height: 300px;
}
.lp-hm-tile {
  position: absolute;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  cursor: default;
  /* left / top / width / height / background are set inline per tile by
     drawHeatmap (background = day-change colour band; geometry from
     squarify). */
}

.lp-hm-tile .lp-hm-ticker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.15;
}
.lp-hm-tile .lp-hm-pct {
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
/* Type-scale buckets — render bigger text on bigger tiles so the layout
   feels like a treemap rather than a fixed-typography grid. Buckets are
   assigned in JS based on the tile's fractional area. */
.lp-hm-tile.lp-hm-text-xl .lp-hm-ticker { font-size: 22px; }
.lp-hm-tile.lp-hm-text-xl .lp-hm-pct    { font-size: 14px; }
.lp-hm-tile.lp-hm-text-lg .lp-hm-ticker { font-size: 17px; }
.lp-hm-tile.lp-hm-text-lg .lp-hm-pct    { font-size: 13px; }
.lp-hm-tile.lp-hm-text-md .lp-hm-ticker { font-size: 13px; }
.lp-hm-tile.lp-hm-text-md .lp-hm-pct    { font-size: 11px; }
.lp-hm-tile.lp-hm-text-sm .lp-hm-ticker { font-size: 11px; }
.lp-hm-tile.lp-hm-text-sm .lp-hm-pct    { font-size: 10px; }
/* Hide the pct value on the smallest tiles where there isn't room. */
.lp-hm-tile.lp-hm-no-pct .lp-hm-pct { display: none; }

/* Movers — more vertical breathing room + bold blue values per mockup. */
.lp-movers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px 16px 4px;
  flex: 1;
}
.lp-movers-col-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-movers-gain { color: var(--lp-up); }
.lp-movers-loss { color: var(--lp-down); }
.lp-movers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lp-movers-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-navy);
  padding: 8px 4px;
  border-bottom: 1px solid var(--lp-border);
}
.lp-movers-table tbody td {
  padding: 9px 4px;
  border-bottom: 1px solid #f3f4f6;
  font-variant-numeric: tabular-nums;
  color: var(--lp-text-strong);
  font-weight: 500;
}
.lp-movers-table tbody td:nth-child(3),
.lp-movers-table tbody td:nth-child(4) { text-align: right; }
.lp-movers-table tbody td.lp-mover-symbol {
  font-weight: 700;
  color: var(--lp-navy);
}
.lp-movers-table tbody td.lp-mover-symbol .lp-mover-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  outline: none;
}
.lp-movers-table tbody td.lp-mover-symbol .lp-mover-link:hover,
.lp-movers-table tbody td.lp-mover-symbol .lp-mover-link:focus-visible {
  text-decoration: underline;
}

/* Ticker tooltip — singleton element hoisted to <body> (see
   `_ensureMoverTooltip` in landing.js). Body-level + `position: fixed` so it
   escapes the movers card's overflow. Shoelace is used elsewhere on the site
   but root CLAUDE.md's Shoelace note warns against `<sl-*>` in row-heavy
   contexts; the movers table paints 20 rows on load. */
.lp-mover-tt {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: var(--lp-navy, #0b2447);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(11, 36, 71, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 100000;
}
.lp-mover-tt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.lp-mover-tt-name {
  color: #fff;
  font-weight: 600;
}
.lp-mover-tt-exch {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Arrow — positioned per-tooltip in JS (see `position()` in
   `_ensureMoverTooltip`) so it tracks the anchor even when the tip is
   viewport-clamped away from centre. Points down by default, points up when
   the tip is flipped below. */
.lp-mover-tt-arrow {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--lp-navy, #0b2447);
}
.lp-mover-tt--below .lp-mover-tt-arrow {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--lp-navy, #0b2447);
}
.lp-movers-table .lp-mover-chg { font-weight: 700; }
.lp-movers-table .lp-up   { color: var(--lp-up); }
.lp-movers-table .lp-down { color: var(--lp-down); }
/* Movers card footer hosts both per-column CTAs side-by-side so they align
   visually with the gainers/losers columns above and with the heatmap card's
   single CTA next to it. */
.lp-movers-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Indices placeholder card */
.lp-indices-card {
  display: flex;
  flex-direction: column;
}
/* `hidden` attribute needs to beat the class selector above. */
.lp-indices-card[hidden] { display: none; }

/* Featured Company widget occupies the third market-row slot while Market
   Indices is hidden (see index.html). Matches the same grid-cell stretch
   behavior as the sibling .lp-card articles, and aligns the CTA row with
   the sibling .lp-card-footer band so all three cards' bottom links sit at
   the same visual baseline across the row. */
.lp-market-grid > .lp-featured-slot {
  display: block;
  height: 100%;
  min-width: 0;
}
.lp-market-grid > .lp-featured-slot .mh-fc-card {
  height: 100%;
  /* Drop the card's own bottom padding so the CTA row can sit flush against
     the card edge as a real footer band. */
  padding-bottom: 0;
}
/* Push the CTA row to the bottom of the card and give it the same edge-to-edge
   footer band the sibling .lp-card-footer uses (border-top + 12/18 padding).
   Negative side margins counter the .mh-fc-card left/right padding so the
   border-top spans the full card width. `space-between` matches the Movers
   card's two-link footer treatment. */
.lp-market-grid > .lp-featured-slot .mh-fc-ctas {
  margin: auto -16px 0;
  padding: 12px 18px;
  border-top: 1px solid #f0f1f4;
  justify-content: space-between;
  flex-wrap: nowrap;
}
/* Restyle the "View profile" / "Website" CTAs as text action links to match
   sibling .lp-cta-link — teal, 13px/600, no background, no border, no padding. */
.lp-market-grid > .lp-featured-slot .mh-fc-cta {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--lp-action);
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
  gap: 6px;
}
.lp-market-grid > .lp-featured-slot .mh-fc-cta:hover {
  background: none;
  text-decoration: underline;
}
.lp-indices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  flex: 1;
}
.lp-indices-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-navy);
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--lp-border);
}
.lp-indices-table thead th:nth-child(2),
.lp-indices-table thead th:nth-child(3) { text-align: right; }
.lp-indices-table tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid #f3f4f6;
  color: var(--lp-text);
}

/* =====================================================================
   TRIO ROW (Financing + SEDAR + M&A)
   Financing + M&A use the section-block pattern still (featured + supporting).
   ===================================================================== */
.lp-trio-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Section-block (featured + supporting list) — used by Financing + M&A only.
   Drill Results / Drilling Updates dropped this pattern in favor of the
   thumb-list above. */
.lp-section-block .lp-section-featured {
  padding: 14px 16px 8px;
  border-bottom: 1px solid #f0f1f4;
  min-height: 200px;
}
/* An unfilled featured slot must collapse, not reserve its min-height /
   flex box. Needs !important-free specificity over `display: flex` on
   .lp-section-2col-featured, which otherwise beats the UA [hidden] rule. */
.lp-section-block .lp-section-featured[hidden],
.lp-section-2col .lp-section-2col-featured[hidden] {
  display: none;
}
.lp-section-block .lp-section-featured a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.lp-section-block .lp-feat-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1f2937;
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative;
}
.lp-section-block .lp-feat-img .lp-chip {
  position: absolute; top: 10px; left: 10px;
}
.lp-section-block .lp-feat-headline {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lp-text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-section-block .lp-feat-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

.lp-section-supporting {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.lp-section-supporting li {
  padding: 10px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.lp-section-supporting li:last-child { border-bottom: 0; }
.lp-section-supporting li a {
  text-decoration: none;
  color: var(--lp-text);
}
.lp-section-supporting .lp-sup-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--lp-text);
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-section-supporting .lp-sup-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

/* SEDAR card */
.lp-sedar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.lp-sedar-list li {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.lp-sedar-list li:last-child { border-bottom: 0; }
.lp-sedar-list li a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.lp-sedar-icon {
  width: 28px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2;
  color: var(--lp-down);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.lp-sedar-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-text);
  margin: 0 0 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-sedar-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

/* =====================================================================
   SPOTLIGHT INTERVIEWS ROW
   Mirrors the 3D-models card visually so the two video-heavy curated
   sections feel like a pair. Key differences vs lp-3d-card:
     - Centered play button overlay (signals video on hover).
     - Lower-right duration chip when known.
     - Two text rows (title + company) instead of three.
   ===================================================================== */
.lp-interviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-interview-card {
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  text-decoration: none;
  color: #fff;
  display: block;
}
.lp-interview-card .lp-interview-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #0b1220;
}
.lp-interview-card .lp-interview-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0) 100%);
}
.lp-interview-card .lp-interview-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lp-interview-card:hover .lp-interview-play {
  background: rgba(48, 165, 191, 0.85);
  transform: translate(-50%, -50%) scale(1.06);
}
.lp-interview-card .lp-interview-duration {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}
.lp-interview-card .lp-interview-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px;
  z-index: 2;
}
.lp-interview-card .lp-interview-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  /* Cap at 2 lines so the company line + duration chip stay readable on
     long headlines. Falls back to standard overflow in older browsers. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-interview-card .lp-interview-company {
  margin: 0;
  font-size: 12px;
  color: #cbd5e1;
}

/* =====================================================================
   3D MODELS ROW
   ===================================================================== */
.lp-3d-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.lp-3d-card {
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  text-decoration: none;
  color: #fff;
  display: block;
}
.lp-3d-card .lp-3d-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #0b1220;
}
.lp-3d-card .lp-3d-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
}
.lp-3d-card .lp-3d-badge {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}
.lp-3d-card .lp-3d-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px;
  z-index: 2;
}
.lp-3d-card .lp-3d-company {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.lp-3d-card .lp-3d-project {
  margin: 0 0 4px;
  font-size: 13px;
  color: #e5e7eb;
}
.lp-3d-card .lp-3d-date {
  font-size: 11px;
  color: #cbd5e1;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1239px) {
  .lp-hero-row {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .lp-drilling-row {
    /* On narrower desktops collapse the three drilling cards into two rows
       — intercepts full width, the two thumb cards side-by-side below. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lp-drilling-row .lp-intercepts {
    grid-column: 1 / -1;
  }
  .lp-trio-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-3d-grid,
  .lp-interviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-market-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lp-indices-card,
  .lp-market-grid > .lp-featured-slot {
    grid-column: 1 / -1;
  }
  .lp-hero-main { min-height: 340px; }
  .lp-hero-main .lp-hero-headline { font-size: 26px; }
  .lp-hero-main .lp-hero-body { max-width: 70%; }
}

/* Mobile: full single column.
   Section reordering per scope V1 mobile recommendations:
   Hero → Commodity → Drilling → Exploration → Company & Project →
   Market Overview → Deals & Filings → 3D Models.
   DOM ordering already matches except Market Overview comes BEFORE
   Company & Project on desktop. We swap them with `order:` on mobile. */
@media (max-width: 899px) {
  .lp-page {
    padding: 12px 14px 60px;
    gap: 20px;
  }
  .lp-feature-row[data-lp-feature="hero-top"] { order: 0; }
  .lp-hero-row             { order: 1; }
  .lp-section-drilling     { order: 2; }
  .lp-section-2col[data-section="exploration"]      { order: 3; }
  .lp-section-2col[data-section="companyProject"]   { order: 4; }
  .lp-feature-row[data-lp-feature="mid"] { order: 5; }
  .lp-market-row           { order: 6; }
  .lp-section-deals        { order: 7; }
  .lp-interviews-row       { order: 8; }
  .lp-3d-row               { order: 9; }

  /* Hero stacks vertically; commodity rail flows below. */
  .lp-hero-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Mobile hero flows naturally: image on top with a fixed aspect ratio,
     body block beneath in normal flow. The desktop overlay layout (body
     absolute at bottom of a fixed-height card) cut long headlines off at
     the top of the visible band because the body grew upward past the
     min-height. Natural flow removes any headline clipping and lets the
     card grow to fit whatever content is inside. */
  .lp-hero-main {
    min-height: 0;
    background: #0f172a;
  }
  .lp-hero-main .lp-hero-img {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .lp-hero-main .lp-hero-chip {
    top: 12px;
    left: 12px;
  }
  .lp-hero-main .lp-hero-body {
    position: static;
    padding: 16px 18px 20px;
    max-width: 100%;
  }
  .lp-hero-main .lp-hero-headline {
    font-size: 21px;
    /* Ensure the full headline is visible on mobile — no clamp. */
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
  }
  /* Truncate the excerpt to keep card height in check when a headline
     runs long — the headline is the priority on mobile. */
  .lp-hero-main .lp-hero-excerpt {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Supporting articles stack vertically on mobile (no horizontal scroll —
     partial off-screen cards were unreadable). Each tile is a full-width
     card with a fixed aspect ratio so the headline block sits below. */
  .lp-hero-supporting {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }
  .lp-hero-supporting .lp-hero-tile {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* Commodity panel: keep visible (don't collapse). Tighten height by
     hiding rows beyond the first 6 — the "View all prices" CTA in the
     footer is already wired and points at /commodities. The header div
     occupies child position 1, so rows 7+ map to :nth-child(n+8). */
  .lp-commodities-row:nth-child(n+8) { display: none; }
  .lp-commodities .lp-card-footer { padding-top: 6px; }

  /* Drilling cards: stack. */
  .lp-drilling-row {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Cap Recent Drill Results + Drilling Updates to 5 items each on mobile.
     MHD-1292 raises the desktop count so those columns fill the Drilling
     Activity section; the mobile stack would become excessive without a
     cap. CSS-only so it holds regardless of the JS `count` value. */
  .lp-thumb-list-card .lp-thumb-list li:nth-child(n+6) { display: none; }
  /* Kill the desktop bottom-fade on mobile — the columns aren't
     intercepts-height-constrained here (they stack) and the 5-item cap
     above means everything renders fully; the fade would just visually
     eat the last item for no reason. */
  .lp-thumb-list { overflow: visible; }
  .lp-thumb-list::after { content: none; }
  /* Intercepts table → card list on mobile. The 6-column table is too
     wide to scroll comfortably; instead we flatten each row into a card
     using `display: block` on table parts + a grid on each `<tr>` with
     template-areas to position the existing cells. JS unchanged. */
  .lp-intercepts-table-wrap { overflow: visible; }
  .lp-intercepts-table {
    display: block;
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }
  .lp-intercepts-table thead { display: none; }
  .lp-intercepts-table tbody { display: block; }
  .lp-intercepts-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "company  date"
      "gxw      gxw";
    column-gap: 14px;
    row-gap: 10px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--lp-border);
    align-items: start;
  }
  .lp-intercepts-table tbody tr:last-child { border-bottom: 0; }
  .lp-intercepts-table tbody td {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  /* Hide the standalone grade + width cells on mobile — their values are
     merged into the single GxW summary line inside the GxW cell. Column
     order is: 1=date, 2=company, 3=gxw (bar + mobile summary), 4=grade,
     5=width. The GxW cell must render on mobile so the bar shows. */
  .lp-intercepts-table tbody tr td:nth-child(4),
  .lp-intercepts-table tbody tr td:nth-child(5) { display: none; }

  .lp-intercepts-table tbody td.lp-int-date {
    grid-area: date;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }
  .lp-intercepts-table tbody tr td:nth-child(2) { grid-area: company; }
  .lp-intercepts-table tbody tr td:nth-child(3) { grid-area: gxw; }

  /* GxW cell fills the full row width below the company/date row.
     The desktop "X.XX <Commodity>" value chip is replaced by a single
     combined summary: "<GxW> <Commodity> (<width>m of <grade> <units>)" */
  .lp-intercepts-table .lp-int-gxw-cell { width: 100%; }
  .lp-intercepts-table .lp-int-gxw-value { display: none; }
  .lp-intercepts-table .lp-int-gxw-mobile-summary {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    color: var(--lp-text-strong);
    margin-bottom: 6px;
  }
  .lp-intercepts-table .lp-int-gxw-mobile-value { font-weight: 700; }
  .lp-intercepts-table .lp-int-gxw-mobile-commodity { font-weight: 600; }
  .lp-intercepts-table .lp-int-gxw-mobile-detail {
    color: var(--lp-text-muted);
    font-weight: 400;
    margin-left: 2px;
  }
  .lp-intercepts-table .lp-int-gxw-bar { height: 4px; }

  /* 2-col sections (exploration, company & project) → single column;
     supporting list keeps thumbnail row layout. */
  .lp-section-2col-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-section-2col-supporting li a {
    grid-template-columns: 80px 1fr;
  }
  .lp-section-2col-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .lp-section-2col-header .lp-cta-link {
    font-size: 12px;
  }

  /* Market overview: full column stack. Heatmap height capped so it
     doesn't dominate the viewport on long phones. */
  .lp-market-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-heatmap-tiles {
    min-height: 240px;
    max-height: 320px;
  }
  /* Movers tables: full-bleed columns side by side still readable
     down to ~360px because the ticker column is the only long one. */
  .lp-movers-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .lp-movers-footer {
    flex-wrap: wrap;
    gap: 6px 14px;
  }

  /* Deals & filings trio + 3D row + interviews row → single column. */
  .lp-trio-row,
  .lp-3d-grid,
  .lp-interviews-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Small phone tweaks — typography breathing room + tap targets. */
@media (max-width: 599px) {
  .lp-page {
    padding: 10px 12px 50px;
    gap: 18px;
  }
  .lp-section-title { font-size: 16px; }
  .lp-card-title { font-size: 13px; }

  /* Hero: slightly smaller headline at narrow widths — height flows
     naturally now (see 899px block) so no min-height override. */
  .lp-hero-main .lp-hero-headline { font-size: 19px; line-height: 1.25; }
  .lp-hero-main .lp-hero-excerpt { font-size: 12.5px; }

  /* Commodity rows: slightly larger touch targets, single-line price/chg. */
  .lp-commodities-row { padding: 10px 12px; }
  .lp-com-name { font-size: 13px; }
  .lp-com-units { font-size: 10px; }

  /* Sedar list + section supporting: 64px thumb instead of 80 so the
     title gets more line. Excerpt is hidden at this width to keep the
     title from wrapping past 2 lines. */
  .lp-section-2col-supporting li a {
    grid-template-columns: 64px 1fr;
  }
  .lp-section-2col-supporting .lp-2col-sup-excerpt { display: none; }
  .lp-sedar-list li { font-size: 12.5px; }

  /* Movers can stack on very narrow phones to give the tables more
     horizontal room — 360px is the rough breakpoint where the columns
     start truncating. */
  .lp-movers-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

}