/* OTHEE Ecosystem — honeycomb app grid */

.ecosystem-honeycomb {
  padding: 3.5rem 0;
}

.ecosystem-honeycomb--compact {
  padding: 0;
  margin-bottom: 1.75rem;
}

.ecosystem-honeycomb__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.25rem;
}

.ecosystem-honeycomb__eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #60a5fa);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.ecosystem-honeycomb__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.ecosystem-honeycomb__intro {
  margin: 0;
  color: var(--muted, #9ca3af);
  line-height: 1.6;
  font-size: 0.98rem;
}

.ecosystem-honeycomb__footer-title {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #9ca3af);
}

.ecosystem-honeycomb__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Honeycomb grid */
.hex-grid {
  --hex-w: 152px;
  --hex-gap: 10px;
  --hex-row-overlap: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hex-grid--compact {
  --hex-w: 118px;
  --hex-gap: 8px;
  --hex-row-overlap: 22px;
}

.hex-grid__row {
  display: flex;
  justify-content: center;
  gap: var(--hex-gap);
  margin-top: calc(var(--hex-row-overlap) * -1);
}

.hex-grid__row:first-child {
  margin-top: 0;
}

.hex-grid__row--offset {
  margin-left: calc(var(--hex-w) * 0.52 + var(--hex-gap) * 0.5);
}

.hex-cell {
  --hex-accent: var(--accent, #3b82f6);
  position: relative;
  width: var(--hex-w);
  height: calc(var(--hex-w) * 0.866);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--surface, rgba(255, 255, 255, 0.05));
  border: none;
  padding: 0.75rem 1rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.hex-cell::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--bg, #0f1419);
  z-index: 0;
}

.hex-cell > * {
  position: relative;
  z-index: 1;
}

.hex-cell--blue { --hex-accent: #3b82f6; }
.hex-cell--purple { --hex-accent: #a855f7; }
.hex-cell--orange { --hex-accent: #f97316; }
.hex-cell--green { --hex-accent: #22c55e; }

.hex-cell:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.hex-cell--active {
  background: var(--hex-accent);
}

.hex-cell--active::before {
  background: color-mix(in srgb, var(--hex-accent) 18%, var(--bg, #0f1419));
}

.hex-cell--active .hex-cell__glyph {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: color-mix(in srgb, var(--hex-accent) 55%, transparent);
}

.hex-cell--soon {
  opacity: 0.55;
  cursor: default;
}

.hex-cell__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hex-accent);
  border: 1px solid color-mix(in srgb, var(--hex-accent) 45%, transparent);
  background: color-mix(in srgb, var(--hex-accent) 12%, transparent);
  margin-bottom: 0.35rem;
}

.hex-grid--compact .hex-cell__glyph {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.6rem;
  margin-bottom: 0.2rem;
}

.hex-cell__name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text, #f3f4f6);
}

.hex-grid--compact .hex-cell__name {
  font-size: 0.78rem;
}

.hex-cell__label {
  font-size: 0.68rem;
  color: var(--muted, #9ca3af);
  margin-top: 0.15rem;
  line-height: 1.25;
  max-width: 9em;
}

.hex-grid--compact .hex-cell__label,
.hex-grid--compact .hex-cell__host {
  display: none;
}

.hex-cell__host {
  font-size: 0.6rem;
  color: var(--hex-accent);
  margin-top: 0.35rem;
  opacity: 0.9;
  font-family: ui-monospace, monospace;
}

.footer__ecosystem {
  grid-column: 1 / -1;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

@media (max-width: 520px) {
  .hex-grid {
    --hex-w: 128px;
    --hex-row-overlap: 24px;
  }

  .hex-grid--compact {
    --hex-w: 100px;
  }

  .hex-grid__row--offset {
    margin-left: calc(var(--hex-w) * 0.5 + var(--hex-gap) * 0.5);
  }
}