/* =========================================================================
   PRADUMNA_FX — Premium Category Grid Redesign
   Inspired by: Linear, Raycast, Vercel, Framer, Resend
   Scope: ONLY the #categories bento-grid section
   ========================================================================= */

/* ── Reset & Override — bento grid only ── */
#categories .bento-grid {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD BASE — Dark premium surface, layered depth
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card {
  position: relative !important;
  background: linear-gradient(155deg, #151515 0%, #111111 100%) !important;
  border: 1px solid #262626 !important;
  border-radius: 22px !important;
  padding: 36px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 350ms ease,
    box-shadow 350ms ease,
    background 350ms ease !important;

  /* Layered shadow — no flat rectangles */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,          /* Top highlight */
    0 0 0 1px rgba(0,0,0,0.6),                          /* Dark border edge */
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 32px 80px rgba(0, 0, 0, 0.3) !important;
}

/* Soft inner highlight strip */
#categories .bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.035) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
}

/* Gold glow orb (hidden until hover) */
#categories .bento-card::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 165, 91, 0.12) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 350ms ease;
}

/* All children above pseudo layers */
#categories .bento-card > * {
  position: relative;
  z-index: 1;
}

/* ── HOVER STATE ── */
#categories .bento-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: #C9A55B !important;
  background: linear-gradient(155deg, #181818 0%, #131313 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0,0,0,0.5),
    0 8px 16px rgba(0, 0, 0, 0.4),
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(201, 165, 91, 0.12),
    0 0 80px rgba(201, 165, 91, 0.06) !important;
}

#categories .bento-card:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   GRID SPANS
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card.span-8 { grid-column: span 8 !important; }
#categories .bento-card.span-4 { grid-column: span 4 !important; }
#categories .bento-card.span-6 { grid-column: span 6 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM ICON CONTAINER — 56×56, dark gold gradient, soft glow
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(
    145deg,
    rgba(201, 165, 91, 0.18) 0%,
    rgba(201, 165, 91, 0.06) 100%
  ) !important;
  border: 1px solid rgba(201, 165, 91, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #C9A55B !important;
  margin-bottom: 22px !important;
  box-shadow:
    0 0 16px rgba(201, 165, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition:
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
    background 350ms ease,
    box-shadow 350ms ease !important;
}

#categories .bento-card-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #C9A55B !important;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#categories .bento-card:hover .bento-card-icon {
  transform: rotate(6deg) scale(1.08) !important;
  background: linear-gradient(
    145deg,
    rgba(201, 165, 91, 0.28) 0%,
    rgba(201, 165, 91, 0.10) 100%
  ) !important;
  box-shadow:
    0 0 28px rgba(201, 165, 91, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM FEATURED BADGE — Gold border, glass, pill
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  background: rgba(201, 165, 91, 0.07) !important;
  border: 1px solid rgba(201, 165, 91, 0.45) !important;
  border-radius: 999px !important;
  font-size: 0.665rem !important;
  font-weight: 700 !important;
  color: #C9A55B !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 22px !important;
  width: fit-content !important;
    -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow:
    0 0 16px rgba(201, 165, 91, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#categories .bento-card-badge svg {
  stroke: #C9A55B !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card-title {
  font-size: clamp(1.2rem, 2vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

#categories .bento-card.span-8 .bento-card-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}

#categories .bento-card-desc {
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.62) !important;
  line-height: 1.72 !important;
  margin: 0 0 28px 0 !important;
}

/* ── Footer divider ── */
#categories .bento-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* ── Action link — gold, sliding arrow ── */
#categories .bento-card-action {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #C9A55B !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  letter-spacing: 0.01em !important;
}

#categories .bento-card-action svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #C9A55B !important;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#categories .bento-card:hover .bento-card-action svg {
  transform: translateX(6px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURED CARD (span-8) — Extra depth and larger presence
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card.span-8 {
  background: linear-gradient(155deg, #171714 0%, #111110 100%) !important;
  min-height: 280px !important;
}

/* Subtle warm shimmer for featured card background */
#categories .bento-card.span-8::before {
  background: linear-gradient(
    155deg,
    rgba(201, 165, 91, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    transparent 70%
  ) !important;
}

#categories .bento-card.span-8:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 0 0 1px rgba(0,0,0,0.4),
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 32px 72px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(201, 165, 91, 0.18),
    0 0 120px rgba(201, 165, 91, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EQUAL CARD HEIGHTS — Regular cards (span-4, span-6)
   ═══════════════════════════════════════════════════════════════════ */
#categories .bento-card.span-4,
#categories .bento-card.span-6 {
  min-height: 240px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet (up to 1024px): 2 columns */
@media (max-width: 1024px) {
  #categories .bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  #categories .bento-card.span-8 {
    grid-column: span 2 !important;
  }

  #categories .bento-card.span-4 {
    grid-column: span 1 !important;
  }

  #categories .bento-card.span-6 {
    grid-column: span 1 !important;
  }
}

/* Mobile (up to 640px): 1 column */
@media (max-width: 640px) {
  #categories .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #categories .bento-card.span-8,
  #categories .bento-card.span-4,
  #categories .bento-card.span-6 {
    grid-column: span 1 !important;
  }

  #categories .bento-card {
    padding: 28px !important;
    min-height: unset !important;
  }

  #categories .bento-card-title {
    font-size: 1.2rem !important;
  }

  #categories .bento-card-desc {
    font-size: 0.93rem !important;
  }
}