/* ============================================================================
   Home page — components ported from the Sun Auto Horizon site.
   ============================================================================ */

/* Section panel (layer 1) with a header */
.md-typeset .sa-panel {
  background: var(--sa-layer-1);
  border: 1px solid var(--sa-panel-border);
  border-radius: var(--radius-panel);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.md-typeset .sa-sec-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.md-typeset .sa-sec-head .sa-eyebrow {
  font-family: var(--sun-font-text); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 11px; color: var(--sa-primary);
}
.md-typeset .sa-sec-head h2 {
  margin: 0; border: 0; padding: 0; font-size: var(--fs-section); line-height: 1.2; color: var(--sa-text);
}
.md-typeset .sa-sec-head p { margin: 0; color: var(--sa-text-2); font-size: var(--fs-base); }

/* Card grid + card (layer 2) */
.md-typeset .sa-card-grid {
  display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--sp-3); align-items: stretch; margin: 0;
}
@media (max-width: 1100px) { .md-typeset .sa-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px)  { .md-typeset .sa-card-grid { grid-template-columns: 1fr; } }

.md-typeset a.sa-card,
.md-typeset a.sa-card:hover,
.md-typeset a.sa-card:focus,
.md-typeset a.sa-card:visited { text-decoration: none; color: var(--sa-text); }

.md-typeset .sa-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-left: var(--status-w) solid var(--sa-accent, var(--sa-primary));
  border-radius: var(--radius-card);
  box-shadow: var(--sa-card-shadow);
  padding: var(--sp-3);
  min-width: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}
a.sa-card:hover, a.sa-card:focus { box-shadow: var(--sa-elev); transform: translateY(-2px); }

.md-typeset .sa-card .sa-card-top { display: flex; align-items: center; gap: var(--sp-3); }
.md-typeset .sa-card .sa-card-top > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.md-typeset .sa-card .sa-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-card);
  background: var(--sa-layer-3); border: 1px solid var(--sa-border);
}
.md-typeset .sa-card .sa-icon img { width: 38px; height: 38px; object-fit: contain; display: block; }
.md-typeset .sa-card .sa-title {
  display: block; font-family: var(--sun-font-display); font-weight: 600;
  font-size: var(--fs-card-title); line-height: 1.2; color: var(--sa-accent, var(--sa-text));
}
.md-typeset .sa-card .sa-kicker { display: block; font-size: var(--fs-label); color: var(--sa-text-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.md-typeset .sa-card .sa-card-body { display: block; flex: 1 1 auto; font-size: 13px; line-height: 1.5; color: var(--sa-text-2); }
.md-typeset .sa-card .sa-card-foot {
  margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--sa-border);
  font-size: var(--fs-label); font-weight: 600; color: var(--sa-accent, var(--sa-primary));
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}

/* Per-door accent (drives left bar, title, foot) */
.md-typeset .sa-card.acc-red    { --sa-accent: var(--sun-red); }
.md-typeset .sa-card.acc-orange { --sa-accent: var(--sun-orange); }
.md-typeset .sa-card.acc-gold   { --sa-accent: #C79200; }
.md-typeset .sa-card.acc-blue   { --sa-accent: var(--sun-blue); }
[data-md-color-scheme="slate"] .md-typeset .sa-card.acc-blue { --sa-accent: var(--sun-teal); }
[data-md-color-scheme="slate"] .md-typeset .sa-card.acc-gold { --sa-accent: var(--sun-yellow); }

/* KPI tile (hero metric) */
.md-typeset .sa-kpi {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-left: var(--status-w) solid var(--sa-accent, var(--sa-primary));
  border-radius: var(--radius-card); box-shadow: var(--sa-card-shadow);
  padding: 12px var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1);
}
.md-typeset .sa-kpi .sa-kpi-label { font-size: var(--fs-label); color: var(--sa-text-2); }
.md-typeset .sa-kpi .sa-kpi-value { font-size: var(--fs-hero); font-weight: 700; line-height: 1.15; letter-spacing: -.4px; color: var(--sa-text); }
.md-typeset .sa-kpi .sa-kpi-sub { font-size: var(--fs-label); color: var(--sa-text-3); }

/* Standalone callout (raw-HTML version of an admonition) */
.md-typeset .sa-callout {
  background: var(--sa-layer-3);
  border: 1px solid var(--sa-border);
  border-left: var(--status-w) solid var(--sa-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--sp-2) 12px; font-size: 13px; color: var(--sa-text-2);
}
.md-typeset .sa-callout b { color: var(--sa-text); }

/* ---- Home page: sit on the canvas directly (no white sheet) ----------------- */
/* Canvas behind the home page only; other pages keep their current background */
.md-main:has(.sa-home) { background: var(--sa-layer-0); }
.md-content__inner.md-typeset:has(.sa-home) {
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: var(--sp-4) var(--sp-3) var(--sp-5);
}
.md-typeset .sa-home { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Cap + centre the home page now that its nav rail is hidden */
.md-content__inner.md-typeset:has(.sa-home) { max-width: 1240px; margin: var(--sp-4) auto var(--sp-5); }

/* Home hero as a clean scorecard-style panel — light surface in light mode,
   dark surface in dark mode (tokens flip by scheme). */
.md-typeset .sa-hero {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--sa-surface);
  border: 1px solid var(--sa-panel-border);
  border-top: var(--status-w) solid var(--sun-red);
  border-radius: var(--radius-panel);
  padding: var(--sp-4) calc(var(--sp-5) + var(--sp-1));
  box-shadow: var(--sa-card-shadow);
}
.md-typeset .sa-hero-logo {
  flex: none; width: 92px; height: 92px; object-fit: contain; display: block;
  padding: var(--sp-2); border-radius: var(--radius-card); background: var(--sa-layer-3);
}
.md-typeset .sa-hero-text { display: flex; flex-direction: column; min-width: 0; }
.md-typeset .sa-hero .sa-eyebrow { color: var(--sun-red); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-label); }
.md-typeset .sa-hero h1 { color: var(--sa-text); margin: var(--sp-2) 0 var(--sp-2); font-size: 34px; }
.md-typeset .sa-hero h1 .sa-accent { color: var(--sun-red); }
.md-typeset .sa-hero p { color: var(--sa-text-2); font-size: 15px; max-width: 62ch; margin: 0; }
[data-md-color-scheme="slate"] .md-typeset .sa-hero .sa-eyebrow,
[data-md-color-scheme="slate"] .md-typeset .sa-hero h1 .sa-accent { color: var(--sun-red-light); }
@media (max-width: 620px) {
  .md-typeset .sa-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .md-typeset .sa-hero-logo { width: 72px; height: 72px; }
}

/* Overdrive mark is a 64px source: render at native size inside the tile at every width, never upscaled */
.md-typeset .sa-hero-logo { box-sizing: content-box; width: 64px; height: 64px; }

/* Below the 1240px cap, auto margins collapse to 0; keep a 16px gutter so phones don't run edge to edge */
@media (max-width: 1272px) {
  .md-content__inner.md-typeset:has(.sa-home) { margin-left: var(--sp-3); margin-right: var(--sp-3); }
}

/* Sun red is too dark to read on the dark surface; lighten it like the other slate accents */
[data-md-color-scheme="slate"] .md-typeset .sa-card.acc-red { --sa-accent: var(--sun-red-light); }