/* HERO — full width, centered both axes, below fixed header */
.home-highlight-hero{
  --hero-header-h: 0px;          /* set by JS below */
  --meta-h: 0px;                  /* set by JS below (meta line height incl margin) */

  /* If parent is a grid with columns, span the whole thing */
  grid-column: 1 / -1;

  width: 100%;
  min-height: calc(100svh - var(--hero-header-h));
  margin-top: var(--hero-header-h);         /* only non-zero when header is fixed */
  display: flex;
  align-items: center;                       /* vertical centering */
  justify-content: center;                   /* horizontal centering */
  padding: 0;
  box-sizing: border-box;
}
@supports (height: 90dvh) {
  .home-highlight-hero{
    min-height: calc(90dvh - var(--hero-header-h));
  }
}

/* Inner block + image */
.home-highlight-one{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

.home-highlight-link{ display: block; line-height: 0; }

.home-highlight-img{
  display: block;
  max-width: min(800px, 92vw);
  /* leave room for meta so no extra scroll/gap appears */
  max-height: calc(100% - var(--meta-h));
  width: auto;
  height: auto;
  object-fit: contain;
}

.home-highlight-meta{
  margin-top: 8px; /* set to 0 if you want zero gap */
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  flex-wrap: wrap;
  justify-content: center;
}
.home-highlight-meta .hl-title{ color:#dcdfd6; }
.home-highlight-meta .hl-dot{ opacity:.55; }

/* Just in case a global adds default margins */
html, body { margin: 0; }