/* ============================================================
   HUB — editorial mosaic of the tool tiles
   ============================================================ */
.scene--hub {
  justify-content: flex-start;
  gap: clamp(1.1rem, 2.4vh, 2rem);
}

.hub__head { flex: 0 0 auto; max-width: 60ch; }
.hub__eyebrow { display: inline-flex; align-items: baseline; gap: 0.9rem; opacity: 0.9; }
.hub__index { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; opacity: 0.6; }
.hub__title { font-size: var(--fs-display); margin-top: 0.7rem; }
.hub__note { margin-top: 0.7rem; opacity: 0.55; }

/* mosaic fills the remaining height */
.mosaic {
  flex: 1 1 auto; min-height: 0;  /* fills below the fixed header */
  overflow-y: auto;               /* tiles scroll here as the catalog grows; the header stays put */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(clamp(11rem, 22vh, 15rem), 1fr);
  gap: var(--gap-tile);
}
.mosaic__cell { display: flex; min-height: 0; }

.tile {
  position: relative; isolation: isolate;
  width: 100%;
  display: flex; flex-direction: column;
  padding: clamp(1.1rem, 1.9vw, 1.9rem);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-cbre);
}
.tile__num {
  font-family: var(--font-financier); font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 3.1rem); line-height: 1;
  opacity: 0.92;
}
.tile__icon {
  position: absolute;
  top: clamp(1.1rem, 1.9vw, 1.9rem);
  right: clamp(1.1rem, 1.9vw, 1.9rem);
  width: clamp(24px, 2.3vw, 32px); height: auto;
  opacity: 0.85; pointer-events: none;
}
.tile__body { margin-top: auto; }
.tile__name {
  display: block; font-family: var(--font-financier); font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 2.35rem); line-height: 1.04; letter-spacing: -0.01em;
}
.tile__oneliner {
  display: block; margin-top: 0.5rem;
  font-size: var(--fs-body); line-height: 1.4; opacity: 0.82; max-width: 34ch;
}
.tile__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: clamp(0.7rem, 1.2vw, 1.1rem);
  font-family: var(--font-calibre); font-weight: 600; font-size: var(--fs-label);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-cbre), transform var(--dur-fast) var(--ease-cbre);
}
.tile__cta svg { width: 16px; height: 16px; }

/* the per-tile Line of Sight */
.tile__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--accent-green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease-cbre);
  z-index: 2;
}

@media (hover: hover) {
  .tile:hover { transform: translateY(-5px); }
  .tile:hover .tile__cta { opacity: 1; transform: translateX(0); }
  .tile:hover .tile__bar { transform: scaleX(1); }
}
.tile:focus-visible { transform: translateY(-5px); outline-offset: -3px; }
.tile:focus-visible .tile__cta { opacity: 1; transform: translateX(0); }
.tile:focus-visible .tile__bar { transform: scaleX(1); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .scene--hub { overflow-y: auto; }
  .mosaic { flex: 0 0 auto; overflow-y: visible; grid-template-columns: 1fr; grid-auto-rows: minmax(8.5rem, auto); }
  .tile__oneliner { max-width: none; }
}