/* ============================================================================
   manav.id - Hub Styles (css/hub.css)
   Typography, measure containment, and common card grid layout.
   ============================================================================ */

.hub-hero {
  padding: 56px 0 28px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.hub-card {
  background: var(--s1, #FFFFFF);
  border: 1px solid var(--bdr, #DCE0E7);
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sh-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hub-card:hover {
  border-color: var(--ac-line, #D6D1FB);
  box-shadow: var(--sh);
  transform: translateY(-2px);
}

/* ── Solutions: By platform | By industry switch ── */
.segtoggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.segtoggle a[aria-current="page"] {
  border-color: var(--ac-lo, #4B3BE0);
  color: var(--ac-lo, #4B3BE0);
}

/* ── Industry cards (solutions/industries/): div card, whole card clickable via .go ── */
div.gwcard { position: relative; }
div.gwcard a.go { text-decoration: none; }
div.gwcard a.go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
div.gwcard a.go:focus-visible { outline: none; }
div.gwcard:focus-within { outline: 2px solid var(--ac-lo, #4B3BE0); outline-offset: 2px; }
.gwcard .segs { font-size: 13px; color: var(--tx3, #5C6270); margin-top: 4px; }
.gwcard .segs a { position: relative; z-index: 1; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gwcard .segs a:hover { color: var(--ac-lo, #4B3BE0); }