/* Dunkage Homepage Feature Icons V26 */
/* Direct-access feature icons above homepage hero slider */

.homepage-feature-icons-v26 {
  width: min(1240px, calc(100% - 32px));
  margin: 22px auto 18px !important;
  position: relative;
  z-index: 20;
  display: block !important;
  visibility: visible !important;
}

.homepage-feature-icons-inner-v26 {
  display: grid !important;
  grid-template-columns: minmax(190px, 260px) 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 16%, rgba(91, 46, 229, .13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(246,248,255,.90));
  border: 1px solid rgba(36,25,77,.08);
  box-shadow: 0 22px 70px rgba(36,25,77,.12);
  backdrop-filter: blur(16px);
}

.homepage-feature-icons-copy-v26 {
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, #5b2ee5, #7b4dff);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
}

.homepage-feature-icons-copy-v26 span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.86);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
  font-weight: 1000;
}

.homepage-feature-icons-copy-v26 strong {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 1000;
}

.homepage-feature-icons-grid-v26 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.homepage-feature-icon-card-v26 {
  position: relative;
  min-height: 112px;
  padding: 14px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(36,25,77,.075);
  color: #24194d !important;
  text-decoration: none !important;
  display: grid !important;
  align-content: center;
  justify-items: center;
  gap: 6px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(36,25,77,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.homepage-feature-icon-card-v26::before {
  content: "";
  position: absolute;
  inset: auto -20% -46% -20%;
  height: 76%;
  background: radial-gradient(circle at center, rgba(91,46,229,.16), transparent 62%);
  opacity: .8;
  pointer-events: none;
}

.homepage-feature-icon-card-v26:hover {
  transform: translateY(-4px);
  border-color: rgba(91,46,229,.22);
  box-shadow: 0 18px 48px rgba(36,25,77,.12);
}

.homepage-feature-icon-card-v26 i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  font-style: normal;
  font-size: 25px;
  box-shadow: 0 12px 28px rgba(91,46,229,.20);
  position: relative;
  z-index: 1;
}

.homepage-feature-icon-card-v26.quiz i {
  background: linear-gradient(135deg, #5b2ee5, #8d5cff);
}

.homepage-feature-icon-card-v26.poll i {
  background: linear-gradient(135deg, #2f80ff, #5bb8ff);
}

.homepage-feature-icon-card-v26.rating i {
  background: linear-gradient(135deg, #24c878, #68e3a4);
}

.homepage-feature-icon-card-v26.presentation i {
  background: linear-gradient(135deg, #ff8a00, #ffbd4a);
}

.homepage-feature-icon-card-v26.exams i {
  background: linear-gradient(135deg, #21144f, #5b2ee5);
}

.homepage-feature-icon-card-v26 span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 15px;
  line-height: 1.05;
  font-weight: 1000;
  letter-spacing: -.025em;
}

.homepage-feature-icon-card-v26 small {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  color: rgba(36,25,77,.58);
  font-size: 11px;
  line-height: 1.15;
  font-weight: 850;
}

@media (max-width: 1080px) {
  .homepage-feature-icons-inner-v26 {
    grid-template-columns: 1fr;
  }

  .homepage-feature-icons-copy-v26 {
    min-height: auto;
  }

  .homepage-feature-icons-grid-v26 {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .homepage-feature-icon-card-v26 {
    scroll-snap-align: start;
  }
}

@media (max-width: 720px) {
  .homepage-feature-icons-v26 {
    width: min(100% - 18px, 1240px);
    margin-top: 14px !important;
  }

  .homepage-feature-icons-inner-v26 {
    border-radius: 24px;
    padding: 10px;
  }

  .homepage-feature-icons-copy-v26 {
    border-radius: 18px;
    padding: 15px;
  }

  .homepage-feature-icons-grid-v26 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .homepage-feature-icon-card-v26 {
    min-height: 104px;
    border-radius: 18px;
  }

  .homepage-feature-icon-card-v26.exams {
    grid-column: 1 / -1;
  }
}