/* =====================================================================
   Ekonbee Platform — honeycomb hex cluster
   4 cells in a tight 2x2 honeycomb. Row 2 is offset by half a cell so
   the hexes tessellate cleanly without overlap.

   Hex geometry: regular hex with flat top has aspect 1 : (√3/2) = 1:0.866.
   We use POINTY-TOP hexes (aspect 1:1.155), so vertical stack uses
   3/4 of the cell height for tessellation.
   ===================================================================== */

.capability__panels{
  /* Use a flex column of two rows so we can horizontally offset row 2. */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;                         /* rows nest via negative margin */
  position: relative;
  margin-inline: auto;
  width: max-content;
  max-width: 100%;
  --hex-w: 170px;
  --hex-h: calc(var(--hex-w) * 1.155);
  --hex-gap: 14px;
  --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Convert each .panel into a hex cell of the chosen size. */
.capability__panels .panel{
  position: relative;
  isolation: isolate;
  width: var(--hex-w);
  height: var(--hex-h);
  flex: 0 0 auto;
  clip-path: var(--hex-clip);
  -webkit-clip-path: var(--hex-clip);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 16px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(253,184,19,.18);
  transition:
    transform .45s cubic-bezier(.2, .9, .3, 1.3),
    filter   .45s ease,
    box-shadow .3s ease;
}

/* Wrap row 1 (panels 1,2) and row 2 (panels 3,4) using nth-child rules
   inside a flex parent. We achieve "rows" by giving each panel an
   explicit position via order + grid? Simpler — use display:grid with
   auto-placement and apply a half-cell shift on row 2. */
.capability__panels{
  display: grid !important;
  grid-template-columns: var(--hex-w) var(--hex-w);
  grid-auto-rows: var(--hex-h);
  gap: var(--hex-gap);
  justify-content: start;
  margin-left: -40px;
  margin-top: -120px;
}
  grid-template-rows: auto auto;
  /* Tessellation: row 2 is shifted up by 1/4 of the hex height */
  row-gap: 0;
  column-gap: var(--hex-gap);
  justify-content: center;
}

/* Row 2: tuck up by 1/4 hex height; shift BOTH cells right by half a
   cell + half the gap so the row appears offset under row 1. */
.capability__panels > .panel:nth-child(3),
.capability__panels > .panel:nth-child(4){
  margin-top: calc(var(--hex-h) * -0.25);
  margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2);
  transform: none;
}

/* Per-cell gradient fill (revealed on hover) */
.capability__panels > .panel:nth-child(1)::before{ background: linear-gradient(135deg, #fdb813, #f26722); }
.capability__panels > .panel:nth-child(2)::before{ background: linear-gradient(135deg, #f26722, #e53e3e); }
.capability__panels > .panel:nth-child(3)::before{ background: linear-gradient(135deg, #c1268c, #7e3fbf); }
.capability__panels > .panel:nth-child(4)::before{ background: linear-gradient(135deg, #7e3fbf, #0492ce); }

.capability__panels .panel::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.3);
}

/* Inner gloss highlight */
.capability__panels .panel::after{
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  clip-path: var(--hex-clip);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* Hover bloom — same lift for all four cells; row 2's offset stays on the parent grid, not on transform */
.capability__panels .panel:hover{
  filter: drop-shadow(0 18px 36px rgba(238,144,2,.45));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transform: translateY(-6px) scale(1.04);
  z-index: 2;
}
.capability__panels .panel:hover::before{
  opacity: 1;
  transform: scale(1);
}

/* Highlight cell: subtle hint, not a full fill */
.capability__panels .panel--highlight::before{
  opacity: .14;
  transform: scale(1);
}
.capability__panels .panel--highlight{
  box-shadow: inset 0 0 0 1px rgba(253,184,19,.4);
}

/* Typography */
.capability__panels .panel .kbd{
  font-family: var(--font-nav);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-block;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.capability__panels .panel:hover .kbd{
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.capability__panels .panel h4{
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 2px 0 !important;
  line-height: 1.15;
}
.capability__panels .panel p{
  color: rgba(255,255,255,.72) !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  max-width: 18ch;
  transition: color .3s ease;
}
.capability__panels .panel:hover p{
  color: rgba(255,255,255,.95) !important;
}

/* Larger desktop: bump cells up a little */
@media (min-width: 1280px){
  .capability__panels{ --hex-w: 190px; --hex-gap: 16px; }
  .capability__panels .panel{ padding: 20px 18px !important; }
  .capability__panels .panel h4{ font-size: 15px !important; }
  .capability__panels .panel p{ font-size: 11px !important; max-width: 20ch; }
}

/* Tablet 760-1100: same as default but slightly tighter */
@media (max-width: 1100px) and (min-width: 761px){
  .capability__panels{ --hex-w: 160px; }
}

/* Mobile — drop honeycomb stagger, regular 2-up grid */
@media (max-width: 760px){
  .capability__panels{
    --hex-w: 100%;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 12px;
    width: 100%;
  }
  .capability__panels .panel{
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1.155;
    padding: 16px 14px !important;
  }
  .capability__panels > .panel:nth-child(3),
  .capability__panels > .panel:nth-child(4){
    margin-top: 12px;
    transform: none;
  }
  .capability__panels > .panel:nth-child(3):hover,
  .capability__panels > .panel:nth-child(4):hover{
    transform: translateY(-4px) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce){
  .capability__panels .panel,
  .capability__panels .panel::before{
    transition: none !important;
  }
  .capability__panels > .panel:nth-child(1):hover,
  .capability__panels > .panel:nth-child(2):hover{ transform: none !important; }
  .capability__panels > .panel:nth-child(3):hover,
  .capability__panels > .panel:nth-child(4):hover{
    transform: translateX(calc((var(--hex-w) + var(--hex-gap)) / 2)) !important;
  }
}