/* ── Hex Board Grid ── */
.hex-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0 3rem;
}

.hex-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: -58px;
}

.hex-row-offset {
  margin-left: 200px;
}

.hex-wrap {
  width: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hex-link {
  display: block;
  text-decoration: none;
}

.hex-shape {
  width: 200px;
  height: 231px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  background: #e8f0f8;
  transition: transform 0.2s, filter 0.2s;
  position: relative;
}

.hex-link:hover .hex-shape {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.hex-shape {
  width: 192px;
  height: 222px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  background: #e8f0f8;
  transition: transform 0.2s, filter 0.2s;
  position: relative;
}

.hex-label {
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  background: rgba(0, 59, 92, 0.85);
  padding: 8px 4px;
  opacity: 0;
  transition: opacity 0.2s;
  text-align: center;
  z-index: 2;
}

.hex-shape:hover .hex-label {
  opacity: 1;
}

.hex-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hex-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.hex-role {
  font-size: 0.62rem;
  color: #c5d8ea;
  line-height: 1.3;
  margin-top: 1px;
}

.hex-border {
  width: 200px;
  height: 231px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-row:last-child {
  margin-left: 0 !important;
}

/* ── Tablet: shrink hexes ── */
@media (max-width: 1100px) and (min-width: 901px) {
  .hex-shape  { width: 155px; height: 179px; }
  .hex-wrap   { width: 155px; }
  .hex-row    { margin-bottom: -46px; }
  .hex-row-offset { margin-left: 155px; }
  .hex-border { width: 155px; height: 179px; }
}

/* ── Mobile: 2-1-2-1 honeycomb ── */
@media (max-width: 900px) {
  .hex-grid { padding-bottom: 2rem; }

  .hex-row {
    justify-content: center;
    margin-bottom: -38px !important;
    margin-left: 0 !important;   /* centering aligns single-item rows to honeycomb midpoint */
  }
  /* offset class is unused on mobile (JS skips it); reset just in case */
  .hex-row-offset { margin-left: 0 !important; }

  .hex-wrap   { width: 115px; }
  .hex-shape  { width: 115px; height: 133px; }
  .hex-border { width: 115px; height: 133px; }

  /* Always show name/role — touch screens can't hover */
  .hex-label { opacity: 1 !important; padding: 5px 3px; }
  .hex-name  { font-size: 0.58rem; }
  .hex-role  { font-size: 0.52rem; }
  .hex-initials { font-size: 0.75rem; }
}