/* home.css — Home dashboard page-specific layout.
 * Hero + card visuals come entirely from the framework (.nv-page-hero / .nv-card
 * --bordered / --interactive) + portal overrides.css; only the icon-tile grid and
 * tile-specific layout/hover live here (no framework equivalent). */

/* Landing-page hero title: bolder than the framework's default light weight.
 * A weight utility class can't win here (the framework's .nv-page-hero__title rule
 * is defined later at equal specificity), so override the token directly. Scoped
 * to home only — home.css loads solely on this page, so other heroes stay light. */
.nv-page-hero__title { font-weight: var(--nv-weight-semibold); }

/* Dashboard tile grid — 1 / 2 / 3 columns responsive, square tiles */
#home-root .nv-home-tiles {
  grid-template-columns: 1fr;
  gap: 24px;
}
/* Reset the 12-col span inherited from .nv-grid */
#home-root .nv-home-tiles > * {
  grid-column: auto;
}
@media (min-width: 600px) {
  #home-root .nv-home-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  #home-root .nv-home-tiles {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1080px;
    margin-inline: auto;
  }
  #home-root .nv-home-tiles > * {
    aspect-ratio: 1;
  }
}

/* Tile — extends .nv-card--bordered.nv-card--interactive (cursor, border, radius
 * and brand-border-on-hover come from those); adds a column layout + lift-on-hover. */
.nv-home-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .22s cubic-bezier(0.4,0,0.2,1),
              box-shadow  .22s cubic-bezier(0.4,0,0.2,1),
              border-color .22s ease;
}
.nv-home-tile:hover,
.nv-home-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(25,121,228,0.14);
  text-decoration: none;
}
.nv-home-tile .nv-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nv-space-5);
  flex: 1;
  padding: 36px 28px 32px;
}
.nv-home-tile__icon {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nv-home-tile__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nv-home-tile h3 { margin: 0; color: var(--nv-color-text-primary); }
.nv-home-tile:hover h3 { color: var(--nv-color-brand, #1979E4); }
.nv-home-tile p { margin: 0; }