/* CSS Custom Properties - Defined in component styles */
.logoGridWrapper {
  --c-light-light-gray: #e5e5e589;
  --c-lime: #d67a94b4;
  --c-dark-green: #b54a6a84;
  --c-lime-opacity: #d67a9444;
}

/* Color Transition Animation */
@keyframes color-transition {
  0% {
    color: var(--c-light-light-gray);
  }

  30% {
    color: var(--c-lime);
  }

  to {
    color: var(--c-dark-green);
  }
}

/* Logo Grid Wrapper - Main Container */
.logoGridWrapper {
  --grid-size: 2;
  --grid-gutter: 2.564vw;
  --grid-margin: 5.128vw;
  -moz-column-gap: var(--grid-gutter);
  column-gap: var(--grid-gutter);
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

/* Logo Grid - Inner Container */
.logoGrid {
  -moz-column-gap: 0;
  column-gap: 0;
  grid-column: 2 / span 10;
  justify-content: center;
  padding: 11vh 0 14.3rem;
  padding: calc(1vh * 11) 0 14.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: radial-gradient(
    circle at var(--mouse-x, -50%) var(--mouse-y, -50%),
    var(--c-lime) 8%,
    var(--c-lime) 13%,
    transparent 15%
  );
}

/* Individual Logo Items */
.logo {
  aspect-ratio: 1;
  flex: 0 0 50%;
  position: relative;
  min-width: 200px;
  min-height: 200px;
  transition: all 0.3s ease;
}

/* Hovered Logo State */
.logo.hovered .borderBgH::after,
.logo.hovered .borderBgH::before,
.logo.hovered .borderBgV::after,
.logo.hovered .borderBgV::before {
  background: #e5e5e50a;
  transition: background 0.3s ease;
}

.logo.hovered .backgroundGradient {
  /* opacity: 0.2; */
}

/* Add individual logo glow effect when hovered */
.logo.hovered::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background: radial-gradient(
    circle at var(--logo-mouse-x, -50%) var(--logo-mouse-y, -50%),
    var( --c-lime-opacity) 20%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: all 0.9s ease-in-out;
  filter: blur(20px);
}


/* Visual Dividers */
.blockVisualDivider {
  background: #fff;
  padding: 1px;
  pointer-events: none;
  position: absolute;
}

.blockVisualDivider::after {
  background-color: #fff;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* Horizontal Divider */
.blockVisualDivider.horizontal {
  background: linear-gradient(90deg, #fff0, #e5e5e5);
  display: none;
  height: calc(100% + 1px);
  top: 0;
  transform: translate(-100%);
  width: min(14.583vw, 373.3333333333px);
}

/* Vertical Dividers */
.blockVisualDivider.verticalBottom,
.blockVisualDivider.verticalTop {
  background: linear-gradient(180deg, #fff0, #e5e5e5);
  display: none;
  height: min(11.979vw, 306.6666666667px);
  left: 0;
  transform: translateY(-100%);
  width: calc(100% + 1px);
}

.blockVisualDivider.verticalTop {
  top: 1px;
}

.blockVisualDivider.verticalBottom {
  bottom: 0;
}

/* Corner Dividers */
.blockVisualDivider.topLeft,
.blockVisualDivider.topRight,
.blockVisualDivider.bottomLeft,
.blockVisualDivider.bottomRight {
  display: none;
  width: 1px;
  height: 1px;
  background: #e5e5e5;
}

.blockVisualDivider.topLeft {
  top: 0;
  left: 0;
}

.blockVisualDivider.topRight {
  top: 0;
  right: 0;
}

.blockVisualDivider.bottomLeft {
  bottom: 0;
  left: 0;
}

.blockVisualDivider.bottomRight {
  bottom: 0;
  right: 0;
}

/* Border Wrapper */
.borderWrapper {
  height: 100%;
  position: relative;
  width: 100%;
}

.overflowWrapper {
  height: calc(100% + 1px);
  overflow: hidden;
  overflow: clip;
  position: relative;
  width: calc(100% + 1px);
}

/* Border Background Elements */
.borderBgH,
.borderBgV {
  height: 100%;
  position: absolute;
  width: 100%;
}

.borderBgH::after,
.borderBgH::before,
.borderBgV::after,
.borderBgV::before {
  background: var(--c-light-light-gray);
  content: "";
  position: absolute;
  transition: background 0.3s ease;
}

/* Horizontal Border Lines */
.borderBgH::after,
.borderBgH::before {
  height: 1px;
  width: 100%;
}

.borderBgH::after {
  top: 0;
}

.borderBgH::before {
  bottom: 0;
}

/* Vertical Border Lines */
.borderBgV::after,
.borderBgV::before {
  height: 100%;
  width: 1px;
}

.borderBgV::after {
  right: 0;
}

.borderBgV::before {
  left: 0;
}

/* Border Holder */
.borderHolder {
  height: 30rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 30rem;
  transition: all 0.3s ease;
  /* background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--c-lime),
    transparent 15rem
  ); */
}

/* Background Holder */
.backgroundHolder {
  background-color: #fff;
  display: block;
  height: calc(100% - 4px);
  left: 2px;
  position: absolute;
  top: 2px;
  width: calc(100% - 4px);
}

/* Slot Wrapper */
.slotWrapper {
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo Image */
.image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoImage {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Background Gradient */
/* .backgroundGradient {
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(171, 255, 2, 0.8),
    transparent 15rem
  );
  background-repeat: no-repeat;
  height: 30rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.5s ease;
  width: 30rem;
  z-index: 1;
} */

/* Hover Effects */
@media (hover: hover) and (pointer: fine) {
  .logo:hover .borderBgH::after,
  .logo:hover .borderBgH::before,
  .logo:hover .borderBgV::after,
  .logo:hover .borderBgV::before {
    background: #e5e5e50a;
    transition: background 0.3s ease;
  }

  .logo:hover .backgroundGradient {
    opacity: 0.2;
  }
}

/* Responsive Design */
@media (min-width: 1024px) {
  .logoGridWrapper {
    --grid-size: 12;
    --grid-gutter: min(1.042vw, 26.6666666667px);
    --grid-margin: min(3.646vw, 93.3333333333px);
    -moz-column-gap: var(--grid-gutter);
    column-gap: var(--grid-gutter);
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .logoGrid {
    -moz-column-gap: 0;
    column-gap: 0;
    grid-column: 2 / span 10;
    justify-content: center;
    padding: 11dvh 0 14.3rem;
    padding: calc(1vh * 11) 0 14.3rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }

  .logo {
    flex-basis: 20%;
    aspect-ratio: 1;
    position: relative;
  }

  /* Ensure glow effect works properly on desktop grid */
  .logo.hovered::before {
    width: 120%;
    height: 120%;
  }

  /* Visual Divider Logic - Desktop Grid Layout */

  /* Horizontal Dividers - Left Edge */
  .logo:nth-child(5n + 1) .blockVisualDivider.horizontal {
    display: block;
    left: 1px;
  }

  /* Horizontal Dividers - Right Edge */
  .logo:last-child .blockVisualDivider.horizontal,
  .logo:nth-child(5n + 5) .blockVisualDivider.horizontal {
    background: linear-gradient(-90deg, #fff0, #e5e5e5);
    display: block;
    right: 0;
    transform: translate(100%);
  }

  /* Vertical Dividers - Top Row (first 5 items) */
  .logo:nth-child(-n + 5) .blockVisualDivider.verticalTop {
    display: block;
  }

  /* Vertical Dividers - Bottom Row (last 5 items) */
  .logo:nth-last-child(-n + 5) .blockVisualDivider.verticalBottom {
    background: linear-gradient(0deg, #fff0, #e5e5e5);
    display: block;
    transform: translateY(100%);
  }

  /* Hide Internal Dividers for Clean Grid */
  /* Middle columns (2nd, 3rd, 4th in each row) - hide left dividers */
  .logo:nth-child(5n + 2) .blockVisualDivider.bottomLeft,
  .logo:nth-child(5n + 2) .blockVisualDivider.topLeft,
  .logo:nth-child(5n + 3) .blockVisualDivider.bottomLeft,
  .logo:nth-child(5n + 3) .blockVisualDivider.topLeft,
  .logo:nth-child(5n + 4) .blockVisualDivider.bottomLeft,
  .logo:nth-child(5n + 4) .blockVisualDivider.topLeft,
  .logo:nth-child(5n + 5) .blockVisualDivider.bottomLeft,
  .logo:nth-child(5n + 5) .blockVisualDivider.topLeft {
    display: none;
  }

  /* All items after 5th - hide top dividers */
  .logo:nth-child(n + 6) .blockVisualDivider.topLeft,
  .logo:nth-child(n + 6) .blockVisualDivider.topRight {
    display: none;
  }
}

/* Mobile Responsiveness */
@media (max-width: 1023px) {
  .logoGrid {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
  }

  /* Hide ALL visual dividers on mobile */
  .blockVisualDivider,
  .blockVisualDivider.horizontal,
  .blockVisualDivider.verticalTop,
  .blockVisualDivider.verticalBottom,
  .blockVisualDivider.topLeft,
  .blockVisualDivider.topRight,
  .blockVisualDivider.bottomLeft,
  .blockVisualDivider.bottomRight {
    display: none !important;
  }
}