/* PCT-A honeycomb (plaster 6 × 31), przemalowany na paletę home v2-b-3.
 * Local tokens only. Does not recolor the offer page.
 *
 * All breakpoints: pointy-top hex flower, 6 petals + core label.
 * Ring (clockwise from top-left): relacje, wspolpraca, praca,
 * dzialanie, samoocena, emocje.
 * Desktop (>=980px): flower centered, explanation on the left or right.
 * Narrower screens: flower centered, panel below the flower.
 *
 * Faces and the PCT-A label are laid out inside .honey-stage with a
 * sized box (no translate(-50%, -50%)). Overflow stays visible so the
 * two bottom points never clip. Hover scale has room in --bloom.
 */

.honeycomb {
  /* paleta strony głównej v2-b-3; plaster stoi na płycie beżowej */
  --hc-paper: #f6efe4;   /* krem */
  --hc-coffee: #201818;
  --hc-noc: #1c2610;
  --hc-olive: #476216;
  --hc-cegla: #8c2f0a;
  --hc-sun: #ffc20a;
  --hc-sky: #9fb7c4;     /* chłodny błękit spod oliwki, jedyny kolor spoza płyt */

  /* Sześć obszarów w rodzinach barw z materiałów PCT-A (niebieski, żółty,
     granat, czerwień, limonka, malina), ale przygaszone: niższa chroma,
     ziemisty, ciepły pigment, żeby siedziały na beżu obok cegły i oliwki.
     Tusz dobrany per plaster (kawa na jasnych, krem na ciemnych), AA. */
  --hc-relacje: oklch(0.70 0.065 240);    /* przydymiony błękit   #79a4c3 */
  --hc-wspolpraca: oklch(0.79 0.12 78);   /* miodowa ochra        #e5b15b */
  --hc-praca: oklch(0.37 0.075 268);      /* atramentowy granat   #2f3d67 */
  --hc-emocje: oklch(0.49 0.13 27);       /* czerwień glinki      #9d3d36 */
  --hc-samoocena: oklch(0.74 0.12 118);   /* mech z limonką       #a4b558 */
  --hc-dzialanie: oklch(0.50 0.13 358);   /* przygaszona malina   #9b3e63 */
  --hc-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));

  --hex-r: clamp(77px, 9.8vw, 106px);
  --hex-gap: -1px;
  --hex-w: calc(var(--hex-r) * 1.7320508);
  --hex-h: calc(var(--hex-r) * 2);
  --ring: calc(var(--hex-w) + var(--hex-gap));
  --flower-w: calc(var(--ring) * 2 + var(--hex-w));
  --flower-h: calc(var(--ring) * 1.7320508 + var(--hex-h));
  --bloom: 16px;
  --peek-space: 13.5rem;
  --cell-inset: 3px;

  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  position: relative;
  width: 100%;
  margin: 8px auto 0;
  overflow: visible;
}

.honey-stage {
  position: relative;
  width: var(--flower-w);
  height: calc(var(--flower-h) + var(--bloom) * 2);
  margin: 0 auto;
  overflow: visible;
}

.honeycomb-core,
.honey-face {
  z-index: 2;
}

/* PCT-A w środku kwiatu: cegła na beżu, Roundo jak nagłówki */
.honeycomb-core {
  position: absolute;
  left: calc(50% - var(--hex-w) / 2);
  top: calc(var(--bloom) + var(--flower-h) / 2 - var(--hex-h) / 2);
  z-index: 3;
  width: var(--hex-w);
  height: var(--hex-h);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hc-cegla);
  font-family: var(--font, inherit);
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  text-align: center;
  text-transform: none;
  pointer-events: none;
}

.honeycomb-core span {
  display: block;
  transform: none;
}

/* Każdy plaster: płaski, kryjący odcień pigmentu na kremie (color-mix, nie
   opacity), bez obwódki. Po najechaniu albo dotknięciu zalewa się pełnym
   kolorem z palety (bez przejść tonalnych, jak płyty), tusz przełącza się
   na parę, która trzyma kontrast AA. Barwy: tokeny --hc-<obszar> wyżej,
   przygaszone kolory z materiałów PCT-A dociągnięte do klimatu strony. */
.honey-cell {
  --dx: 0px;
  --dy: 0px;
  --hc-mix: 38%;
  --hc-pigment: var(--hc-olive);
  --cell-text: var(--hc-coffee);
  --cell-ink-hot: var(--hc-paper);
}

.honey-cell[data-tone="relacje"] {
  --dx: calc(var(--ring) * -0.5);
  --dy: calc(var(--ring) * -0.8660254);
  --hc-pigment: var(--hc-relacje);
  --hc-mix: 50%;
  --cell-ink-hot: var(--hc-coffee);
}

.honey-cell[data-tone="wspolpraca"] {
  --dx: calc(var(--ring) * 0.5);
  --dy: calc(var(--ring) * -0.8660254);
  --hc-pigment: var(--hc-wspolpraca);
  --hc-mix: 42%;
  --cell-ink-hot: var(--hc-coffee);
}

.honey-cell[data-tone="praca"] {
  --dx: var(--ring);
  --dy: 0px;
  --hc-pigment: var(--hc-praca);
  --hc-mix: 34%;
  --cell-ink-hot: var(--hc-paper);
}

.honey-cell[data-tone="dzialanie"] {
  --dx: calc(var(--ring) * 0.5);
  --dy: calc(var(--ring) * 0.8660254);
  --hc-pigment: var(--hc-dzialanie);
  --hc-mix: 40%;
  --cell-ink-hot: var(--hc-paper);
}

.honey-cell[data-tone="samoocena"] {
  --dx: calc(var(--ring) * -0.5);
  --dy: calc(var(--ring) * 0.8660254);
  --hc-pigment: var(--hc-samoocena);
  --hc-mix: 36%;
  --cell-ink-hot: var(--hc-coffee);
}

.honey-cell[data-tone="emocje"] {
  --dx: calc(var(--ring) * -1);
  --dy: 0px;
  --hc-pigment: var(--hc-emocje);
  --hc-mix: 34%;
  --cell-ink-hot: var(--hc-paper);
}

.honey-cell.is-open {
  --hc-mix: 100%;
  --cell-text: var(--cell-ink-hot);
}

.honey-face {
  position: absolute;
  left: calc(50% + var(--dx) - var(--hex-w) / 2);
  top: calc(var(--bloom) + var(--flower-h) / 2 + var(--dy) - var(--hex-h) / 2);
  width: var(--hex-w);
  height: var(--hex-h);
  margin: 0;
  padding: 0 12px;
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cell-text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transform: none;
  transform-origin: center center;
  transition: transform 220ms var(--hc-ease), color 220ms var(--hc-ease);
}

/* jedna warstwa wypełnienia, bez obwódki: mała przerwa (inset) między
   plastrami robi za linię, którą wcześniej rysował ::before */
.honey-face::before {
  position: absolute;
  inset: var(--cell-inset);
  clip-path: var(--hex-clip);
  content: "";
  pointer-events: none;
  background: color-mix(in srgb, var(--hc-pigment) var(--hc-mix), var(--hc-paper));
  transition: background-color 220ms var(--hc-ease), background 220ms var(--hc-ease);
}

.honey-label {
  position: relative;
  z-index: 1;
  max-width: 8.8em;
  text-align: center;
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
}

.honey-face:focus-visible {
  outline: 3px solid var(--hc-cegla);
  outline-offset: 4px;
  z-index: 5;
}

.honey-cell.is-open .honey-face,
.honey-cell:hover .honey-face {
  z-index: 4;
}

.honey-cell.is-open .honey-face {
  transform: scale(1.03);
}

.honey-panel {
  position: absolute;
  left: 50%;
  top: calc(var(--bloom) + var(--flower-h) + var(--bloom) + 0.75rem);
  z-index: 6;
  width: min(26rem, calc(100vw - 48px));
  margin: 0;
  padding: 0.95rem 1.15rem 1rem;
  border: 0;
  border-left: 4px solid var(--hc-pigment);
  border-radius: 4px 16px 16px 4px;
  background: var(--hc-paper);
  color: var(--hc-coffee);
  text-align: left;
  transform: translateX(-50%);
  animation: honey-peek 0.32s var(--hc-ease);
}

.honey-panel[hidden] {
  display: none !important;
}

.honey-panel :is(h2, h3, h4, .honey-panel-title) {
  margin: 0 0 0.45rem;
  color: var(--hc-cegla);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.honey-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.honey-panel li {
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(32, 24, 24, 0.14);
  font-size: 0.86rem;
  line-height: 1.3;
}

.honey-panel li:first-child {
  padding-top: 0.08rem;
}

.honey-panel li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@keyframes honey-peek {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .honey-cell:hover {
    --hc-mix: 100%;
    --cell-text: var(--cell-ink-hot);
  }

  .honey-cell:hover .honey-face {
    z-index: 4;
    transform: scale(1.03);
  }
}

@media (min-width: 680px) and (max-width: 979.98px) {
  .honeycomb {
    --hex-r: clamp(68px, 11vw, 88px);
    --peek-space: 14rem;
  }

  .honeycomb:has(.honey-cell.is-open) {
    padding-bottom: var(--peek-space);
  }
}

@media (min-width: 980px) {
  .honeycomb {
    --peek-space: 0px;
  }

  .honey-panel {
    top: calc(var(--bloom) + var(--flower-h) / 2);
    width: min(18.5rem, 22vw);
    text-align: left;
    transform: translateY(-50%);
  }

  .honey-cell[data-side="left"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="relacje"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="emocje"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="samoocena"] .honey-panel {
    left: auto;
    right: calc(100% + 1.25rem);
    transform: translateY(-50%);
  }

  .honey-cell[data-side="right"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="wspolpraca"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="praca"] .honey-panel,
  .honey-cell:not([data-side])[data-tone="dzialanie"] .honey-panel {
    left: calc(100% + 1.25rem);
    right: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 679.98px) {
  .honeycomb {
    --hex-r: clamp(44px, 12.2vw, 56px);
    --hex-gap: -1px;
    --bloom: 10px;
    --peek-space: 0px;
    --cell-inset: 2px;
  }

  .honeycomb:has(.honey-cell.is-open) {
    padding-bottom: 14rem;
  }

  .honeycomb-core {
    font-size: clamp(1.22rem, 5.8vw, 1.65rem);
  }

  .honey-face {
    padding: 0 8px;
  }

  .honey-label {
    max-width: 7.6em;
    font-size: clamp(0.58rem, 2.6vw, 0.7rem);
  }

  .honey-panel {
    left: 50%;
    right: auto;
    top: calc(var(--bloom) + var(--flower-h) + var(--bloom) + 0.75rem);
    width: min(26rem, calc(100vw - 48px));
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .honey-face,
  .honey-face::before,
  .honey-panel {
    transition: none;
    animation: none;
  }

  .honey-cell:hover .honey-face,
  .honey-cell.is-open .honey-face {
    transform: none;
  }
}

/* Pełne kolory palety od razu, bez rozbielania: plaster czyta się jak koło
   DISC i płyty strony głównej. Najechanie/otwarcie = lekkie powiększenie
   plus panel z podwymiarami. Tusz: kawa na błękicie, ochrze i mchu,
   krem na granacie, czerwieni i malinie (AA, min. 5,6:1). */
.honey-cell[data-tone] {
  --hc-mix: 100%;
  --cell-text: var(--cell-ink-hot);
}

.honey-cell.is-open .honey-face {
  transform: scale(1.06);
}

@media (hover: hover) and (pointer: fine) {
  .honey-cell:hover .honey-face {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .honey-cell:hover .honey-face,
  .honey-cell.is-open .honey-face {
    transform: none;
  }
}