/* Home honeycomb, back link, view show/hide */

.honeycomb {
  --hex-w: clamp(150px, 38vw, 200px);
  --hex-h: calc(var(--hex-w) * 1.12);
  --hex-gap: 0.6rem;
  /* Columns: beer | gap | crawl; lunch spans full width below */
  display: grid;
  grid-template-columns: var(--hex-w) var(--hex-gap) var(--hex-w);
  justify-content: center;
  align-items: start;
  margin-top: 8rem;
}

.honeycomb > .hex-row:nth-child(1),
.honeycomb > .hex-row:nth-child(2) {
  display: contents;
}

.honeycomb > .hex-row:nth-child(1) .hex-beer {
  grid-column: 1;
  grid-row: 1;
}

.honeycomb > .hex-row:nth-child(1) .hex-crawl {
  grid-column: 3;
  grid-row: 1;
}

.honeycomb > .hex-row:nth-child(2) .hex-lunch {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  /* Pull lunch hex up into the gap between beer and crawl */
  margin-top: calc(-0.21 * var(--hex-h));
  z-index: 1;
}

@media (max-width: 480px) {
  .honeycomb {
    --hex-gap: 0.45rem;
  }
}

.hex {
  width: var(--hex-w);
  aspect-ratio: 1 / 1.12;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: transform 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* :hover sticks on touch after tap — limit to fine pointers */
@media (hover: hover) and (pointer: fine) {
  .hex:hover {
    transform: scale(1.08);
    filter: brightness(1.12);
  }
}

.hex:active {
  transform: scale(0.96);
}

/* clip-path eats outline/box-shadow; double drop-shadow approximates a focus ring */
.hex:focus-visible {
  filter: brightness(1.12) drop-shadow(0 0 6px rgba(var(--a), 0.9)) drop-shadow(0 0 6px rgba(var(--a), 0.9));
}

.hex-beer {
  background: linear-gradient(180deg, #ffb800 0%, #e69500 100%); /* gold */
}

.hex-crawl {
  background: linear-gradient(180deg, #ff8c00 0%, #cc6600 100%); /* orange */
}

.hex-lunch {
  background: linear-gradient(180deg, #8BC34A 0%, #689F38 100%); /* green */
}

.hex-icon {
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  line-height: 1;
}

.hex-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.9rem, 3vw, 1.15rem);
  font-weight: 700;
  color: #0d0d0d;
  text-align: center;
  line-height: 1.2;
  padding: 0 0.3rem;
}

.back-home {
  display: inline-block;
  color: rgba(var(--c), 0.45);
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 1.2rem;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.back-home:hover {
  color: rgba(var(--c), 0.8);
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Opacity-only enter: transform on #view-home would reparent fixed .theme-toggle */
#view-home.active {
  animation: fadeInStatic 0.25s ease;
}

@keyframes fadeInStatic {
  from { opacity: 0; }
  to   { opacity: 1; }
}