/* =========================================
File: /assets/css/dashboard.css
Purpose: Dashboard layout (full-width, tall hero cards)
- Stacks cards 1-up at all widths
- Larger, consistent height for “summary” tiles
- Still fully theme-token driven
========================================= */

/* Page frame */
.page { padding-block: 10px 24px; }

/* Title */
.page-title{
  margin:12px 0 16px 0;
  line-height:1.15;
  color:var(--text);
}

/* ===== HERO GRID (always 1-up) ===== */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;       /* one per row */
  gap: 20px;
}

/* Desired hero height; tweak if you want them bigger/smaller */
:root{
  --hero-h: clamp(200px, 28vh, 260px);   /* min 200px, grows with viewport, caps at 260px */
}

/* Size the cards (both custom element and fallback .hero-card divs) */
.hero-grid fv-hero-card,
.hero-grid .hero-card{
  display:block;
  width:100%;
  min-height: var(--hero-h);
}

/* If you render plain .hero-card divs (not <fv-hero-card>) */
.hero-card{
  text-decoration:none;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-topline{ height:4px; background:var(--brand-gold, #D0C542); }

/* =========================================
   THEME BRIDGE → pass global theme tokens into <fv-hero-card>
   (unchanged, still token-driven for light/dark)
========================================= */
fv-hero-card{
  --fv-gold:    var(--brand-gold);
  --fv-surface: var(--surface);
  --fv-text:    var(--text);
  --fv-border:  var(--border);
  --fv-shadow:  var(--shadow);
}

/* Hover affordance (both modes) */
@media (hover:hover){
  fv-hero-card:hover{
    outline:none;
    box-shadow:var(--shadow);
    border-color: color-mix(in srgb, var(--brand-gold, #D0C542) 38%, var(--border));
  }
}