/**
 * Hero block — overlay grid of 100/3vw squares.
 * Squares are hidden by default (opacity 0). On hover the active cell fades
 * in over 500ms; on mouse leave it fades out over 700ms.
 */

.hero-block {
  --hero-cell: calc(100vw / 9);
}

.hero-squares {
  bottom: 0;
  display: grid;
  grid-auto-rows: var(--hero-cell);
  grid-template-columns: repeat(auto-fill, var(--hero-cell));
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.hero-square {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: var(--hero-cell);
  pointer-events: auto;
  transition: background-color 2000ms ease-out;
  width: var(--hero-cell);
}

.hero-square:hover {
  background-color: var(--hero-square-hover, transparent);
  transition: background-color 300ms ease-out;
}

/* Let the squares behind receive hover everywhere; only true interactive
   elements (links, buttons, form fields) block the mouse. Headings and text
   pass the pointer through. Note: text inside the hero is no longer
   selectable with the mouse, but remains accessible to keyboard and screen
   readers. */
.hero-content {
  pointer-events: none;
  position: relative;
  z-index: 2;
}

.hero-content a,
.hero-content button,
.hero-content input,
.hero-content select,
.hero-content textarea,
.hero-content [role="button"] {
  pointer-events: auto;
}

/* Logos overlay: occupies the right 3/12 (25%) of the box at full height.
   Sits above the squares but below .hero-content; pointer-events disabled so
   it never blocks square hover. Hidden below lg (Tailwind's 1024px) so the
   visual treatment only appears on desktop. */
.hero-logos {
  display: none;
}


.hero-logo {
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 30%;
  max-width: 80%;
  object-fit: contain;
  position: absolute;
  width: 70%;
}

.hero-block > div {
  overflow: hidden;
}

.hero-content .btn-blue .btn-label, 
.hero-content .btn-blue .btn-arrow {
  border: 1px solid #fff;
}

.hero-content .btn-blue .btn-arrow {
  z-index: 9999;
}

@media (min-width: 768px) {
  .hero-block {
    --hero-cell: calc(100vw / 20);
  }
}

@media (max-width: 1023px) {
  .hero-content .px-2xl {
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .hero-logos {
    bottom: 0;
    display: block;
    left: 75%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .hero-block {
    --hero-cell: calc(100vw / 33);
  }

  .hero-block > div {
    border-radius: 24px;
  }
}