/* ==============================================
   BENTO CARD SYSTEM — BrickByClick.ai
   Shared bento-grid aesthetic for all cards.
   Load BEFORE page <style> blocks so ::before
   rules can be overridden by page-specific
   gradient bars (same specificity, later wins).
   ============================================== */

/* ---- Full Bento Base ---- */
html :is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card
) {
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  position: relative;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Glass: bento hover/effects only — preserves glass bg + backdrop-filter */
html :is(.glass, .bbc-glass) {
  position: relative;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---- Hover ---- */
html :is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card, .glass, .bbc-glass
):hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.15);
}

/* ---- Dot Pattern Overlay (::before) ----
   Normal specificity so page-specific gradient-bar
   ::before rules (loaded later) naturally win. */
:is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card, .glass, .bbc-glass
)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: -1;
}

:is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card, .glass, .bbc-glass
):hover::before {
  opacity: 1;
}

/* ---- Gradient Border Glow (::after) ---- */
html :is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card, .glass, .bbc-glass
)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.08), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 2;
}

html :is(
  .plan-card, .mobile-plan-card, .feature-card, .ai-card, .ai-card-static,
  .price-card, .cost-card, .bp-card, .bp-result-card, .bp-slider-card,
  .bp-save-card, .svc-card, .crm-feature-card, .crm-lead-card,
  .crm-mockup-card, .approach-card, .cite-card, .ft-card,
  .block-card, .process-card,
  .cta-card, .selector-card, .budget-card, .pu-card, .du-feature-card,
  .pd-rec-card, .card, .blog-card, .mega-card, .service-card, .step-card,
  .comparison-card, .pricing-card, .industry-card, .plant-card,
  .bbc-pricing-card, .glass, .bbc-glass
):hover::after {
  opacity: 1;
}