/* public/assets/css/pages/home.css — Home hub.
 * Scoped under .page-home except where it styles portal/rail content.
 * Tokens only; the app-shell owns outer padding + column layout. */

.page-home {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ===== Card grid =====
 * Two columns on wide screens; reflows to one under ~900px. Because cards are
 * gated, the grid simply has fewer cells per role — no empty holes. */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .home-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Guest / no-permission empty state ===== */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}
.home-empty__icon {
  width: 40px;
  height: 40px;
  color: var(--color-text-subtle);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-empty__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}
.home-empty__body {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ===== Right-rail: panels (Talk to us / promo) ===== */
.home-rail-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.home-rail-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.home-rail-panel__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  flex: none;
}
.home-rail-panel__chip-icon {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-rail-panel__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
}
.home-rail-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-talk__body {
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.home-talk-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.home-talk-btn:hover {
  background: var(--color-accent-softer);
  border-color: var(--color-accent);
}
.home-talk-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.home-talk-btn__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.home-talk-btn__icon {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home-talk-btn__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-talk-btn__label {
  font-size: var(--text-sm);
  font-weight: 600;
}
.home-talk-btn__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.home-talk-btn__chev {
  width: 16px; height: 16px; flex: none;
  color: var(--color-text-subtle);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ===== Modal body (How it works / Request a dataset) ===== */
.home-modal__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.home-modal__steps {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.home-modal__step {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.home-modal__step strong { color: var(--color-text); }

/* ===== DEMO: News & updates (mock) ===== */
.home-news { display: flex; flex-direction: column; gap: var(--space-3); }
.home-news__row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); }
.home-news__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; transform: translateY(-2px); }
.home-news__text { flex: 1 1 auto; color: var(--color-text); line-height: 1.4; }
.home-news__ago { color: var(--color-text-subtle); font-size: var(--text-xs); white-space: nowrap; }

/* ===== DEMO: Upcoming meetings (mock) ===== */
.home-rail-panel__body { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.home-meetings { display: flex; flex-direction: column; gap: var(--space-3); }
.home-meeting { display: flex; align-items: center; gap: var(--space-3); }
.home-meeting__avatar {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-ink); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
}
.home-meeting__info { flex: 1 1 auto; min-width: 0; }
.home-meeting__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.home-meeting__when { font-size: var(--text-xs); color: var(--color-text-muted); }
.home-meeting__status {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--color-success-text); background: var(--color-success-soft);
  border-radius: var(--radius-full); padding: 2px var(--space-2);
  white-space: nowrap;
}
.home-meeting__status--req { color: var(--color-accent-text); background: var(--color-accent-soft); }

/* ===== Welcome hero card (general background, right glow) ===== */
.home-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  background-color: var(--color-surface);
  background-image: url('/assets/img/background-general-right.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}
/* Match the Catalog page header treatment exactly (title / name / subtitle),
   neutralise PageHeader's standalone divider inside the card, and push the
   actions to the card's right edge. */
.home-hero .page-header {
  display: block;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.home-hero .page-header .page-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}
.home-hero .page-header .page-header__title-wrap {
  flex: 1 1 0%;
  min-width: 0;
}
.home-hero .page-header .page-header__actions {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
  margin-left: auto;
}
.home-hero .page-header__title {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.home-hero .page-header__name {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-accent-text);
}
.home-hero .page-header__subtitle {
  margin: var(--space-3) 0 0;
  max-width: 760px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.home-hero .page-header__subtitle strong {
  color: var(--color-text);
  font-weight: 600;
}

/* ===== Section divider title between the rail and the feature cards ===== */
.home-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-2) 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-1);
}



/* ===== Catalog card: cubes art top-right, white-faded left for text ===== */
.hub-card--catalog {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(100deg,
      var(--color-surface) 34%,
      rgba(255, 255, 255, 0.55) 52%,
      rgba(255, 255, 255, 0) 72%),
    url('/assets/img/home-catalog-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, right top;
  background-size: cover, cover;
}
.hub-card--catalog > * { position: relative; z-index: 1; }

/* ===== Data Map card: green world-map art right (wireframe asset) ===== */
.hub-card--datamap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(100deg,
      var(--color-surface) 34%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0) 70%),
    url('/assets/img/home-datamap-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: cover, cover;
}
.hub-card--datamap > * { position: relative; z-index: 1; }

/* ===== Right rail: promo square (world-map art + headline + CTA) ===== */
.home-rail-promo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-top: var(--space-4);
}
.home-rail-promo__art {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-softer);
  background-image: url('/assets/img/world-map.svg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-rail-promo__headline {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 600;
  color: #8CC5F2;
  letter-spacing: 0.02em;
  user-select: none;
}
.home-rail-promo__cta { display: flex; }
.home-rail-promo__cta .btn { flex: 1 1 auto; justify-content: center; }

/* ===== Feature cards — wireframe polish =====
 * Scoped to the two art cards. Goals per the wireframe: big serif titles,
 * text confined to the left so the artwork breathes, white stat pills with
 * per-card accent icons, and COMPACT primary CTAs (blue / green) instead of
 * the shell's full-width button. */
.hub-card--catalog,
.hub-card--datamap {
  min-height: 340px; /* let the background art show */
}

/* Text column: keep copy off the artwork. */
.hub-card--catalog .hub-card__title,
.hub-card--datamap .hub-card__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
  max-width: 60%;
}
.hub-card--catalog .hub-card__body,
.hub-card--datamap .hub-card__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: min(46%, 340px);
}

/* Data Map speaks green: icon chip + stat icons. */
.hub-card--datamap .hub-card__icon-chip {
  background: var(--color-success-soft, #E7F5E8);
  color: var(--color-success-text, #1A8B53);
}
.hub-card--datamap .hub-stat__icon-lead { color: var(--color-success-text, #1A8B53); }
.hub-card--catalog .hub-stat__icon-lead { color: var(--color-accent, #425FE9); }

/* Stats: white pills sitting on the art, no divider rule above them; pushed
 * toward the bottom so the artwork owns the middle of the card. */
.hub-card--catalog .hub-card__media,
.hub-card--datamap .hub-card__media {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 0;
}
.hub-card--catalog .hub-stats--row,
.hub-card--datamap .hub-stats--row {
  gap: var(--space-3);
}
.hub-card--catalog .hub-stats--row .hub-stat,
.hub-card--datamap .hub-stats--row .hub-stat {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px 10px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 41, 0.05);
}
.hub-card--catalog .hub-stats--row .hub-stat:first-child,
.hub-card--datamap .hub-stats--row .hub-stat:first-child {
  padding-left: 14px; /* the row variant strips first-child padding — restore for pills */
}
.hub-card--catalog .hub-stat__value,
.hub-card--datamap .hub-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.hub-card--catalog .hub-stat__label,
.hub-card--datamap .hub-stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Compact CTAs (the shell stretches its footer button full-width). */
.hub-card--catalog .hub-card__footer .btn,
.hub-card--datamap .hub-card__footer .btn {
  width: auto;
  min-width: 180px;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: var(--radius-md);
}
.hub-cta--green {
  background: var(--color-success, #16A34A);
  border-color: var(--color-success, #16A34A);
}
.hub-cta--green:hover {
  background: #128A3E;
  border-color: #128A3E;
}

/* ===== Provider hero badge + onboarding block (wireframes 2026-08) =====
   Uses design tokens throughout; the section title matches the events rail
   so the provider block reads as a peer of "BattleFin Events". */


.home-onboard {
  display: grid;
  /* Col 1 thinner, col 2 widest: it now carries a ten-item two-column list. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.5fr) minmax(220px, 0.75fr);
  gap: var(--space-6);
  align-items: stretch;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 1100px) {
  .home-onboard { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* --- col 1: pitch --- */
.home-onboard__pitch { min-width: 0; }
.home-onboard__pitch-body { min-width: 0; }
/* One heading style for all three columns (the pitch title sets it). */
.home-onboard__title,
.home-onboard__col-title,
.home-onboard__preview-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}
.home-onboard__body {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: 22px;
  color: var(--color-text-muted);
}
.home-onboard__ctas {
  /* Stacked: keeps the first column narrow and both labels on one line each. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.home-onboard__ctas .btn { white-space: nowrap; justify-content: center; }
.home-onboard__beta {
  margin-left: var(--space-2);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* --- col 2: completeness --- */
.home-onboard__progress {
  min-width: 0;
  padding: 0 var(--space-5);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
@media (max-width: 1100px) {
  .home-onboard__progress {
    padding: var(--space-5) 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
  }
}
.home-onboard__pct { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.home-onboard__bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  overflow: hidden;
}
.home-onboard__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width 240ms ease;
}
.home-onboard__steps {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  /* Ten items read as two balanced columns; collapses to one when narrow. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
}
@media (max-width: 1240px) {
  .home-onboard__steps { grid-template-columns: 1fr; }
}
.home-onboard__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--text-sm);
}
.home-onboard__step-mark {
  flex: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
}
/* Ring style (reference 2026-08): green outline + green tick, no fill. */
.home-onboard__step--done .home-onboard__step-mark {
  border-color: var(--color-success);
  background: transparent;
}
.home-onboard__step-icon {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-onboard__step-subject {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-onboard__step--done .home-onboard__step-subject { stroke: var(--color-accent); }
.home-onboard__step-label { color: var(--color-text-muted); }
.home-onboard__step--done .home-onboard__step-label { color: var(--color-text); font-weight: 500; }
.home-onboard__count {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- col 3: preview --- */
.home-onboard__preview { display: flex; flex-direction: column; min-width: 0; }
.home-onboard__preview-body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: 18px;
  color: var(--color-text-muted);
}
/* Secondary edit route beside the preview button (#12). */
.home-onboard__preview-edit {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-text);
  text-decoration: none;
}
.home-onboard__preview-edit:hover,
.home-onboard__preview-edit:focus-visible { text-decoration: underline; }

.home-onboard__preview-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-accent-softer), var(--color-surface));
}
/* Screenshot variant: pad it off the border so the gradient reads as a frame
   around the page shot rather than the shot bleeding to the edge. */
.home-onboard__preview-art--img { padding: var(--space-3); }
.home-onboard__preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px rgba(16, 23, 58, 0.12);
}
.home-onboard__preview-art-icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
.home-onboard__preview .btn { width: 100%; justify-content: center; }


/* ===== Column headings with a small leading icon ===== */
.home-onboard__heading { display: flex; align-items: center; gap: var(--space-2); }
.home-onboard__heading-icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===== Events section: current-event feature + Upcoming/Past lists =====
   .home-section-title carries margin 8/-8 to cancel the .page-home flex gap.
   Inside a plain block that -8 pulled the grid UP over the heading, so the
   section supplies its own gap (space-5) and the maths land back on 32/16 —
   the same rhythm as every other section title. */
.home-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.home-events__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  /* stretch, not start: the three cards share one height whatever their row
     counts are (the wireframe's even row). */
  align-items: stretch;
}
.home-events__grid--no-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The Buyer directory cell on the classic layout is a .hub-card, not a
   .home-events__panel. Both are surface + border + radius, so they read as one
   set; it just needs to fill its cell and drop its CTA to the foot like the
   panels beside it. */
.home-events__grid > .home-events__hub { height: 100%; }
.home-events__grid > .home-events__hub .hub-card__footer {
  margin-top: auto;
  padding-top: var(--space-5);
}
@media (max-width: 1200px) {
  .home-events__grid { grid-template-columns: 1fr; }
}

/* --- current event feature --- */
/* Feature shares the panel shell; its own row holds image + details. */
/* The three grid cells share one height (align-items: stretch). Let this row
   take all of it so the artwork fills the card instead of leaving a white
   block under a 150px thumbnail. */
.home-events__feature-row {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex: 1;
  min-height: 0;
}
.home-events__feature-thumb {
  flex: none;
  width: 190px;
  min-height: 150px;
  align-self: stretch;
  border-radius: var(--radius-md);
  background-color: #10173a;
  background-size: cover;
  background-position: center;
}
.home-events__feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.home-events__feature-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.25;
}
.home-events__feature-blurb {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}
/* auto, not a fixed gap: the body is a stretched flex column, so this drops
   the CTA to the foot of the card where it lines up with the reports panel's
   button. The body's own `gap` still guarantees clearance from the blurb.
   ONE rule for this button's top margin — a second one further up the file
   silently lost to this one and the button stayed put.
   align-self overrides the body's `align-items: flex-start`, which is what
   left the button hugging the left edge with dead space beside it; full width
   matches the reports panel's View reports. */
.home-events__feature .btn {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  justify-content: center;
}

.home-events__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.home-events__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.home-events__meta-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.home-events__meta-dot { color: var(--color-border-strong); }

/* --- upcoming / past list panels --- */
.home-events__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.home-events__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.home-events__panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
}
.home-events__panel-icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-events__panel-all {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.home-events__panel-all:hover { text-decoration: underline; }

.home-events__rows { display: flex; flex-direction: column; }
.home-events__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.home-events__row:first-child { border-top: 0; }
.home-events__row:hover { background: var(--color-surface-muted); }
.home-events__row-thumb {
  flex: none;
  width: 52px;
  height: 40px;
  border-radius: var(--radius-sm);
  background-color: #10173a;
  background-size: cover;
  background-position: center;
}
.home-events__row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-events__row-title {
  font-size: var(--text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-events__row-sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.home-events__row-chev {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.8;
}

/* ===== "New Products" panel (second cell of the "New on BattleFin" grid) =====
   Wears .home-events__panel and .home-events__row wholesale — the only new
   thing is the row thumbnail, which carries an icon instead of event artwork
   because config rows have no hero image. */
.home-events__row-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-events__row-thumb-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  opacity: 0.85;
}
/* Company mark: CONTAIN, never cover — a logo must not be cropped, and a
   square mark and a wide wordmark both have to sit in the same box. */
.home-events__row-thumb--logo {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* inset rather than a border: no box-sizing surprises on a fixed box. */
  box-shadow: inset 0 0 0 1px var(--color-border);
}
/* Square image box here, not the 52x40 event-photo shape: company marks are
   square, and a logo row and a fallback-icon row must start their text at the
   same x or the panel looks ragged. */
.home-new-products .home-events__row-thumb { width: 40px; height: 40px; }
.home-new-products__sub {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Rows were taller than their content: the thumbnail is 40px, so space-3 top
   and bottom was padding a panel that already had room to spare. */
.home-new-products .home-events__row { padding: var(--space-2) var(--space-1); }

/* Blurbs run onto as many lines as they need. They were clipped to one line
   with an ellipsis, which cut every one of them mid-word and told the reader
   nothing; the panel has the height to spare. */
.home-new-products .home-events__row-sub {
  display: block;
  white-space: normal;
  line-height: 1.4;
}

/* --- Signal Found Reports panel (replaces the Past Events list) ---
   Shares .home-events__panel, so it sits in the third grid cell looking like
   its neighbours. No rows: a blurb and one link-out, pinned to the bottom so
   the CTA lines up with the New Products panel's last row. */
/* Logo and blurb on ONE row: stacked, the 48px mark left a band of dead space
   above the text and made this the tallest cell in the grid. */
.home-reports__intro {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.home-reports__logo {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.home-reports__body {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Bullets fill the panel out so it stands level with the two list panels
   beside it instead of ending in a block of whitespace. */
.home-reports__bullets {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: disc;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.home-reports__cta {
  margin-top: auto;
  padding-top: var(--space-4);
}
.home-reports__cta .btn { width: 100%; justify-content: center; }

/* --- Upcoming Events in the right rail (above the Data Map promo) ---
   Reuses the rail panel shell and the event row markup. The rail is narrow,
   so the thumbnail shrinks and the head lets 'View all' sit on the right. */
.home-rail-events .home-rail-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.home-rail-events .home-events__panel-all {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.home-rail-events .home-events__row-thumb { width: 40px; height: 40px; }
/* The rail is a narrow column: a single line of 'NEW YORK DISCOVERY DAY 2026'
   truncates to nothing useful, and date + location on one flex line wrap into
   a ragged two-column mess. Let the title take two lines and stack the meta,
   one fact per line, top-aligned against the thumbnail. */
.home-rail-events .home-events__row {
  align-items: flex-start;
  padding: var(--space-3) 0;
}
.home-rail-events .home-events__row-title {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.home-rail-events .home-events__row-sub {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.4;
}
/* The dot only separates values that share a line. */
.home-rail-events .home-events__meta-dot { display: none; }
.home-rail-events .home-events__row-chev { margin-top: var(--space-1); }