/* honeycomb.css — 3D category honeycomb (clip-path + drop-shadow) */

.honeycomb-section {
  background: var(--color-bg);
}

/*
  Масштаб:
  flower ≈ min(100% контейнера, max rem, vw) — без жорсткого vh-капу,
  щоб на широких екранах не стискалось «в горошину».
  hex-w = flower / 3.1 ; hex-h = hex-w * 1.1547005
  cqw — щоб % не циклилися в height.
*/
.honeycomb {
  --flower-max: 36rem;
  --flower-vw: 78vw;
  container-type: inline-size;
  container-name: honeycomb;
  position: relative;
  width: min(100%, var(--flower-max), var(--flower-vw));
  aspect-ratio: 1 / 1.1547005;
  height: auto;
  margin-inline: auto;
  isolation: isolate;
  --hex-w: calc(100cqw / 3.1);
  --hex-h: calc(var(--hex-w) * 1.1547005);
  --radius: calc(var(--hex-h) * 0.75 + clamp(2px, 0.4cqw, 6px));
  --n: 6;
  --honey-pad: clamp(0.65rem, 7.5cqw, 1.1rem);
  --honey-gap: clamp(0.3rem, 4cqw, 0.55rem);
  --honey-label: clamp(0.7rem, 7.5cqw, 0.95rem);
  --honey-media: clamp(1.9rem, 24cqw, 2.75rem);
}

@media (min-width: 640px) {
  .honeycomb {
    --flower-max: 40rem;
    --flower-vw: 68vw;
  }
}

@media (min-width: 1024px) {
  .honeycomb {
    --flower-max: 44rem;
    --flower-vw: 52vw;
  }
}

@media (min-width: 1440px) {
  .honeycomb {
    --flower-max: 46rem;
    --flower-vw: 42vw;
  }
}

.honeycomb__center,
.honeycomb__cell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hex-w);
  height: var(--hex-h);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.honeycomb__center {
  z-index: 2;
  pointer-events: none;
  filter:
    drop-shadow(0 10px 18px color-mix(in srgb, #000 55%, transparent))
    drop-shadow(0 1px 0 color-mix(in srgb, #fff 8%, transparent));
}

.honeycomb__cell {
  --i: 0;
  --angle: calc(-90deg + (360deg / var(--n)) * var(--i));
  left: calc(50% + cos(var(--angle)) * var(--radius));
  top: calc(50% + sin(var(--angle)) * var(--radius));
  z-index: 1;
  text-decoration: none;
  color: inherit;
  filter:
    drop-shadow(0 10px 18px color-mix(in srgb, #000 55%, transparent))
    drop-shadow(0 1px 0 color-mix(in srgb, #fff 8%, transparent));
  transition:
    transform var(--duration-base) var(--ease-out),
    filter var(--duration-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.honeycomb__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--honey-gap);
  width: 100%;
  height: 100%;
  padding: var(--honey-pad) calc(var(--honey-pad) * 0.75);
  text-align: center;
  color: var(--color-text);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #3a3a3a 88%, #fff) 0%,
      #1c1c1c 42%,
      #121212 100%
    );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -14px 22px color-mix(in srgb, #000 55%, transparent),
    inset 0 18px 28px color-mix(in srgb, #fff 6%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
  transition:
    background var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

/* body — обгортка; на ПК звичайний flex як раніше */
.honeycomb__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--honey-gap);
  width: 100%;
  min-height: 0;
  text-align: center;
}

/* Light theme: platinum/silver like logo plate (#d5d5d5), not pure white */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .honeycomb__face {
    background:
      linear-gradient(
        145deg,
        #e8e8e8 0%,
        #d5d5d5 42%,
        #c4c4c4 100%
      );
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
      inset 0 -14px 22px color-mix(in srgb, #000 14%, transparent),
      inset 0 16px 26px color-mix(in srgb, #fff 28%, transparent),
      inset 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
    color: #141414;
  }

  :root:not([data-theme="dark"]) .honeycomb__cell:hover .honeycomb__face,
  :root:not([data-theme="dark"]) .honeycomb__cell:focus-visible .honeycomb__face {
    background:
      linear-gradient(
        145deg,
        #efefef 0%,
        #dcdcdc 48%,
        #cacaca 100%
      );
    color: #111;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
      inset 0 -12px 18px color-mix(in srgb, #000 12%, transparent),
      inset 0 18px 28px color-mix(in srgb, #fff 32%, transparent),
      inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
  }
}

:root[data-theme="light"] .honeycomb__face {
  background:
    linear-gradient(
      145deg,
      #e8e8e8 0%,
      #d5d5d5 42%,
      #c4c4c4 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
    inset 0 -14px 22px color-mix(in srgb, #000 14%, transparent),
    inset 0 16px 26px color-mix(in srgb, #fff 28%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
  color: #141414;
}

:root[data-theme="dark"] .honeycomb__face {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #3a3a3a 88%, #fff) 0%,
      #1c1c1c 42%,
      #121212 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    inset 0 -14px 22px color-mix(in srgb, #000 55%, transparent),
    inset 0 18px 28px color-mix(in srgb, #fff 6%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
  color: #f5f5f5;
}

.honeycomb__cell:hover,
.honeycomb__cell:focus-visible {
  z-index: 4;
  transform: translate(-50%, -50%) scale(1.05);
  filter:
    drop-shadow(0 14px 26px color-mix(in srgb, #000 65%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent, #fff) 28%, transparent));
  outline: none;
}

.honeycomb__cell:hover .honeycomb__face,
.honeycomb__cell:focus-visible .honeycomb__face {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #555 70%, #fff) 0%,
      #2a2a2a 48%,
      #171717 100%
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    inset 0 -10px 18px color-mix(in srgb, #000 40%, transparent),
    inset 0 22px 32px color-mix(in srgb, #fff 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
}

:root[data-theme="light"] .honeycomb__cell:hover .honeycomb__face,
:root[data-theme="light"] .honeycomb__cell:focus-visible .honeycomb__face {
  background:
    linear-gradient(
      145deg,
      #efefef 0%,
      #dcdcdc 48%,
      #cacaca 100%
    );
  color: #111;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    inset 0 -12px 18px color-mix(in srgb, #000 12%, transparent),
    inset 0 18px 28px color-mix(in srgb, #fff 32%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
}

.honeycomb__logo {
  width: 70%;
  height: auto;
  max-height: 68%;
  object-fit: contain;
}

.honeycomb__logo--dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .honeycomb__logo--light { display: none; }
  :root:not([data-theme="light"]) .honeycomb__logo--dark { display: block; }
}

:root[data-theme="dark"] .honeycomb__logo--light { display: none; }
:root[data-theme="dark"] .honeycomb__logo--dark { display: block; }

.honeycomb__media {
  width: var(--honey-media);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, currentColor 88%, transparent);
  box-shadow:
    inset 0 1px 2px color-mix(in srgb, #fff 25%, transparent),
    0 2px 6px color-mix(in srgb, #000 35%, transparent);
  transition:
    background var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.honeycomb__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 88%;
  font-size: var(--honey-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Мобільний: текст у середній смузі, без обрізання рядків навпіл */
@media (max-width: 1023px) {
  .honeycomb {
    --flower-vw: 86vw;
    --hex-w: calc(100cqw / 2.85);
    --radius: calc(var(--hex-h) * 0.76 + clamp(2px, 0.4cqw, 6px));
    --honey-pad: clamp(0.45rem, 5.5cqw, 0.85rem);
    --honey-gap: clamp(0.15rem, 2.5cqw, 0.4rem);
    --honey-label: clamp(0.62rem, 5.8cqw, 0.85rem);
    --honey-media: clamp(1.35rem, 16cqw, 2.1rem);
  }

  .honeycomb__face {
    display: block;
    padding: 0;
  }

  .honeycomb__body {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-height: 48%;
    overflow: hidden;
  }

  .honeycomb__label {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.15;
  }

  .honeycomb__center .honeycomb__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.honeycomb__cell:hover .honeycomb__media,
.honeycomb__cell:focus-visible .honeycomb__media {
  transform: scale(1.06);
  background: #d5d5d5;
}

:root[data-theme="dark"] .honeycomb__cell:hover .honeycomb__media,
:root[data-theme="dark"] .honeycomb__cell:focus-visible .honeycomb__media {
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .honeycomb__cell:hover .honeycomb__media,
  :root:not([data-theme="light"]) .honeycomb__cell:focus-visible .honeycomb__media {
    background: #fff;
  }
}

.honeycomb__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.honeycomb__media-icon {
  width: 55%;
  height: 55%;
  color: #111;
  transition: color var(--duration-base) var(--ease-out);
}

/* На вузькому контейнері — лише текст, більше місця під довгі назви */
@container honeycomb (max-width: 28rem) {
  .honeycomb__media {
    display: none;
  }

  .honeycomb__body {
    width: 78%;
    max-height: 54%;
  }

  .honeycomb__label {
    font-size: clamp(0.62rem, 5.8cqw, 0.85rem);
  }
}

/* Compact ring for incomplete flowers */
.honeycomb[data-count="1"] { --radius: 0; }
.honeycomb[data-count="2"],
.honeycomb[data-count="3"] { --radius: calc(var(--hex-h) * 0.82); }
.honeycomb[data-count="4"],
.honeycomb[data-count="5"] { --radius: calc(var(--hex-h) * 0.78); }

@media (prefers-reduced-motion: reduce) {
  .honeycomb__cell,
  .honeycomb__face,
  .honeycomb__media {
    transition: none;
  }

  .honeycomb__cell:hover,
  .honeycomb__cell:focus-visible {
    transform: translate(-50%, -50%);
  }
}