/* BENEFITS BLOCK */

/* Локальные переменные для цветов карточек */
.wp-block-prostovpn-benefits {
  /* Green - очень тёмный полупрозрачный фон */
  --benefit-green-card-light: rgba(5, 46, 22, 0.9);
  --benefit-green-card-mid: rgba(2, 30, 14, 0.95);
  --benefit-green-card-dark: rgba(0, 15, 5, 1);
  --benefit-green-border: #4ade80;
  /* Кубы используют яркие цвета */
  --benefit-green-cube: #15803d;
  --benefit-green-cube-light: #16a34a;
  
  /* Red - очень тёмный полупрозрачный фон */
  --benefit-red-card-light: rgba(69, 10, 10, 0.9);
  --benefit-red-card-mid: rgba(45, 5, 5, 0.95);
  --benefit-red-card-dark: rgba(25, 0, 0, 1);
  --benefit-red-border: #f87171;
  --benefit-red-cube: #b91c1c;
  --benefit-red-cube-light: #dc2626;
  
  /* Yellow - очень тёмный полупрозрачный фон */
  --benefit-yellow-card-light: rgba(66, 32, 6, 0.9);
  --benefit-yellow-card-mid: rgba(45, 20, 0, 0.95);
  --benefit-yellow-card-dark: rgba(25, 10, 0, 1);
  --benefit-yellow-border: #facc15;
  --benefit-yellow-cube: #ca8a04;
  --benefit-yellow-cube-light: #facc15;
  
  /* Blue - очень тёмный полупрозрачный фон */
  --benefit-blue-card-light: rgba(23, 37, 84, 0.9);
  --benefit-blue-card-mid: rgba(15, 25, 60, 0.95);
  --benefit-blue-card-dark: rgba(5, 10, 35, 1);
  --benefit-blue-border: #60a5fa;
  --benefit-blue-cube: #1e40af;
  --benefit-blue-cube-light: #2563eb;
  
  /* Purple - очень тёмный полупрозрачный фон */
  --benefit-purple-card-light: rgba(59, 7, 100, 0.9);
  --benefit-purple-card-mid: rgba(40, 5, 70, 0.95);
  --benefit-purple-card-dark: rgba(20, 0, 40, 1);
  --benefit-purple-border: #c084fc;
  --benefit-purple-cube: #7e22ce;
  --benefit-purple-cube-light: #9333ea;
  
  /* Pink - очень тёмный полупрозрачный фон */
  --benefit-pink-card-light: rgba(80, 7, 36, 0.9);
  --benefit-pink-card-mid: rgba(55, 5, 25, 0.95);
  --benefit-pink-card-dark: rgba(30, 0, 15, 1);
  --benefit-pink-border: #f9a8d4;
  --benefit-pink-cube: #db2777;
  --benefit-pink-cube-light: #ec4899;
  
  /* Общие значения теней */
  --card-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 6px 12px 0 0 rgba(0, 0, 0, 0.4);
  --card-inset-light: inset 0 2px 0 0 rgba(255, 255, 255, 0.1);
  --card-inset-light-hover: inset 0 2px 0 0 rgba(255, 255, 255, 0.15);
  --card-inset-dark: inset 0 -2px 0 0 rgba(0, 0, 0, 0.3);
}

.wp-block-prostovpn-benefits .benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border-color: var(--color-gray);
  width: 100%;
  min-width: 0;
}

/* Цвета фона и бордеров карточек - тёмные градиенты */
.wp-block-prostovpn-benefits .benefit-card--green {
  background: linear-gradient(145deg, var(--benefit-green-card-light) 0%, var(--benefit-green-card-mid) 50%, var(--benefit-green-card-dark) 100%) !important;
  border-color: var(--benefit-green-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.wp-block-prostovpn-benefits .benefit-card--red {
  background: linear-gradient(145deg, var(--benefit-red-card-light) 0%, var(--benefit-red-card-mid) 50%, var(--benefit-red-card-dark) 100%) !important;
  border-color: var(--benefit-red-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.wp-block-prostovpn-benefits .benefit-card--yellow {
  background: linear-gradient(145deg, var(--benefit-yellow-card-light) 0%, var(--benefit-yellow-card-mid) 50%, var(--benefit-yellow-card-dark) 100%) !important;
  border-color: var(--benefit-yellow-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.wp-block-prostovpn-benefits .benefit-card--blue {
  background: linear-gradient(145deg, var(--benefit-blue-card-light) 0%, var(--benefit-blue-card-mid) 50%, var(--benefit-blue-card-dark) 100%) !important;
  border-color: var(--benefit-blue-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.wp-block-prostovpn-benefits .benefit-card--purple {
  background: linear-gradient(145deg, var(--benefit-purple-card-light) 0%, var(--benefit-purple-card-mid) 50%, var(--benefit-purple-card-dark) 100%) !important;
  border-color: var(--benefit-purple-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

.wp-block-prostovpn-benefits .benefit-card--pink {
  background: linear-gradient(145deg, var(--benefit-pink-card-light) 0%, var(--benefit-pink-card-mid) 50%, var(--benefit-pink-card-dark) 100%) !important;
  border-color: var(--benefit-pink-border) !important;
  box-shadow: var(--card-shadow), var(--card-inset-light), var(--card-inset-dark);
}

/* Подъём при наведении (без свечения) */
.wp-block-prostovpn-benefits .benefit-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--card-shadow-hover), var(--card-inset-light-hover), var(--card-inset-dark);
}

.benefit-icon-wrapper {
  flex-shrink: 0;
  width: var(--size-56);
  height: var(--size-56);
  perspective: 1200px;
  perspective-origin: center center;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.1));
  transition: filter 0.3s ease;
}

.benefit-card:hover .benefit-icon-wrapper {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}

/* 3D CUBE CONTAINER */
.benefit-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(-15deg);
  transition: transform 0.8s ease-out;
}

/* При наведении - полный оборот */
.benefit-card:hover .benefit-cube {
  transform: rotateX(-15deg) rotateY(345deg);
}

/* CUBE FACES */
.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: var(--border-width-sm) solid;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  overflow: hidden;
}

/* Pixel icon base - изображения уже применяются напрямую к граням */

/* Front face */
.cube-face--front {
  transform: rotateY(0deg) translateZ(28px);
  background-size: 8px 8px;
}

/* Back face */
.cube-face--back {
  transform: rotateY(180deg) translateZ(28px);
  background-size: 8px 8px;
}

/* Right face */
.cube-face--right {
  transform: rotateY(90deg) translateZ(28px);
  background-size: 8px 8px;
}

/* Left face */
.cube-face--left {
  transform: rotateY(-90deg) translateZ(28px);
  background-size: 8px 8px;
}

/* Top face */
.cube-face--top {
  transform: rotateX(90deg) translateZ(28px);
  background-size: 8px 8px;
}

/* Bottom face */
.cube-face--bottom {
  transform: rotateX(-90deg) translateZ(28px);
  background-size: 8px 8px;
}

/* PIXEL TEXTURES FOR EACH ICON TYPE */

/* Shield Icon - Green (пиксельный щит) */
.benefit-cube--green .cube-face--front {
  background: var(--benefit-green-cube) url('../../assets/images/1.webp') center/contain no-repeat;
  border-color: var(--benefit-green-cube);
}

.benefit-cube--green .cube-face--back {
  background: var(--benefit-green-cube) url('../../assets/images/1.webp') center/contain no-repeat;
  border-color: var(--benefit-green-cube);
  opacity: 0.8;
}

.benefit-cube--green .cube-face--right,
.benefit-cube--green .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-green-cube) 0%, var(--benefit-green-cube-light) 50%, var(--benefit-green-cube) 100%);
  border-color: var(--benefit-green-cube);
}

.benefit-cube--green .cube-face--top {
  background: linear-gradient(to right, var(--benefit-green-cube) 0%, var(--benefit-green-cube-light) 50%, var(--benefit-green-cube) 100%);
  border-color: var(--benefit-green-cube);
}

.benefit-cube--green .cube-face--bottom {
  background: var(--benefit-green-cube);
  border-color: var(--benefit-green-cube);
}

/* Block Icon - Red (пиксельный блок/запрет) */
.benefit-cube--red .cube-face--front {
  background: var(--benefit-red-cube) url('../../assets/images/2.webp') center/contain no-repeat;
  border-color: var(--benefit-red-cube);
}

.benefit-cube--red .cube-face--back {
  background: var(--benefit-red-cube) url('../../assets/images/2.webp') center/contain no-repeat;
  border-color: var(--benefit-red-cube);
  opacity: 0.8;
}

.benefit-cube--red .cube-face--right,
.benefit-cube--red .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-red-cube) 0%, var(--benefit-red-cube-light) 50%, var(--benefit-red-cube) 100%);
  border-color: var(--benefit-red-cube);
}

.benefit-cube--red .cube-face--top {
  background: linear-gradient(to right, var(--benefit-red-cube) 0%, var(--benefit-red-cube-light) 50%, var(--benefit-red-cube) 100%);
  border-color: var(--benefit-red-cube);
}

.benefit-cube--red .cube-face--bottom {
  background: var(--benefit-red-cube);
  border-color: var(--benefit-red-cube);
}

/* Bolt Icon - Yellow (пиксельная молния) */
.benefit-cube--yellow .cube-face--front {
  background: var(--benefit-yellow-cube) url('../../assets/images/3.webp') center/contain no-repeat;
  border-color: var(--benefit-yellow-cube);
}

.benefit-cube--yellow .cube-face--back {
  background: var(--benefit-yellow-cube) url('../../assets/images/3.webp') center/contain no-repeat;
  border-color: var(--benefit-yellow-cube);
  opacity: 0.8;
}

.benefit-cube--yellow .cube-face--right,
.benefit-cube--yellow .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-yellow-cube) 0%, var(--benefit-yellow-cube-light) 50%, var(--benefit-yellow-cube) 100%);
  border-color: var(--benefit-yellow-cube);
}

.benefit-cube--yellow .cube-face--top {
  background: linear-gradient(to right, var(--benefit-yellow-cube) 0%, var(--benefit-yellow-cube-light) 50%, var(--benefit-yellow-cube) 100%);
  border-color: var(--benefit-yellow-cube);
}

.benefit-cube--yellow .cube-face--bottom {
  background: var(--benefit-yellow-cube);
  border-color: var(--benefit-yellow-cube);
}

/* Device Icon - Blue (пиксельный экран) */
.benefit-cube--blue .cube-face--front {
  background: var(--benefit-blue-cube) url('../../assets/images/4.webp') center/contain no-repeat;
  border-color: var(--benefit-blue-cube);
}

.benefit-cube--blue .cube-face--back {
  background: var(--benefit-blue-cube) url('../../assets/images/4.webp') center/contain no-repeat;
  border-color: var(--benefit-blue-cube);
  opacity: 0.8;
}

.benefit-cube--blue .cube-face--right,
.benefit-cube--blue .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-blue-cube) 0%, var(--benefit-blue-cube-light) 50%, var(--benefit-blue-cube) 100%);
  border-color: var(--benefit-blue-cube);
}

.benefit-cube--blue .cube-face--top {
  background: linear-gradient(to right, var(--benefit-blue-cube) 0%, var(--benefit-blue-cube-light) 50%, var(--benefit-blue-cube) 100%);
  border-color: var(--benefit-blue-cube);
}

.benefit-cube--blue .cube-face--bottom {
  background: var(--benefit-blue-cube);
  border-color: var(--benefit-blue-cube);
}

/* Brain Icon - Purple (пиксельный мозг/шестеренка) */
.benefit-cube--purple .cube-face--front {
  background: var(--benefit-purple-cube) url('../../assets/images/5.webp') center/contain no-repeat;
  border-color: var(--benefit-purple-cube);
}

.benefit-cube--purple .cube-face--back {
  background: var(--benefit-purple-cube) url('../../assets/images/5.webp') center/contain no-repeat;
  border-color: var(--benefit-purple-cube);
  opacity: 0.8;
}

.benefit-cube--purple .cube-face--right,
.benefit-cube--purple .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-purple-cube) 0%, var(--benefit-purple-cube-light) 50%, var(--benefit-purple-cube) 100%);
  border-color: var(--benefit-purple-cube);
}

.benefit-cube--purple .cube-face--top {
  background: linear-gradient(to right, var(--benefit-purple-cube) 0%, var(--benefit-purple-cube-light) 50%, var(--benefit-purple-cube) 100%);
  border-color: var(--benefit-purple-cube);
}

.benefit-cube--purple .cube-face--bottom {
  background: var(--benefit-purple-cube);
  border-color: var(--benefit-purple-cube);
}

/* Magic Icon - Pink (пиксельная звезда/магия) */
.benefit-cube--pink .cube-face--front {
  background: var(--benefit-pink-cube) url('../../assets/images/6.webp') center/contain no-repeat;
  border-color: var(--benefit-pink-cube);
}

.benefit-cube--pink .cube-face--back {
  background: var(--benefit-pink-cube) url('../../assets/images/6.webp') center/contain no-repeat;
  border-color: var(--benefit-pink-cube);
  opacity: 0.8;
}

.benefit-cube--pink .cube-face--right,
.benefit-cube--pink .cube-face--left {
  background: linear-gradient(to bottom, var(--benefit-pink-cube) 0%, var(--benefit-pink-cube-light) 50%, var(--benefit-pink-cube) 100%);
  border-color: var(--benefit-pink-cube);
}

.benefit-cube--pink .cube-face--top {
  background: linear-gradient(to right, var(--benefit-pink-cube) 0%, var(--benefit-pink-cube-light) 50%, var(--benefit-pink-cube) 100%);
  border-color: var(--benefit-pink-cube);
}

.benefit-cube--pink .cube-face--bottom {
  background: var(--benefit-pink-cube);
  border-color: var(--benefit-pink-cube);
}

.benefit-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.benefit-title {
  color: var(--color-white);
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.benefit-description {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.05 !important;
  margin: 0;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.benefits-cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3xl);
}

.benefit-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  align-self: center;
}

.benefit-cta-btn .btn__icon {
  width: var(--size-16);
  height: var(--size-16);
  flex-shrink: 0;
}

/* MOBILE - 2 колонки */
@media (max-width: 767px) {
  .wp-block-prostovpn-benefits .grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  .wp-block-prostovpn-benefits .benefit-card {
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
  }
  
  .wp-block-prostovpn-benefits .benefit-icon-wrapper {
    width: var(--size-44);
    height: var(--size-44);
  }
  
  .wp-block-prostovpn-benefits .cube-face--front { transform: rotateY(0deg) translateZ(20px); }
  .wp-block-prostovpn-benefits .cube-face--back { transform: rotateY(180deg) translateZ(20px); }
  .wp-block-prostovpn-benefits .cube-face--right { transform: rotateY(90deg) translateZ(20px); }
  .wp-block-prostovpn-benefits .cube-face--left { transform: rotateY(-90deg) translateZ(20px); }
  .wp-block-prostovpn-benefits .cube-face--top { transform: rotateX(90deg) translateZ(20px); }
  .wp-block-prostovpn-benefits .cube-face--bottom { transform: rotateX(-90deg) translateZ(20px); }
  
  .wp-block-prostovpn-benefits .benefit-title {
    font-size: var(--text-xs);
    line-height: 1.4;
  }
  
  .wp-block-prostovpn-benefits .benefit-description {
    font-size: var(--text-sm);
    line-height: 1.3;
  }
  
  .wp-block-prostovpn-benefits .benefit-content {
    gap: var(--space-sm);
  }
  
  .wp-block-prostovpn-benefits .benefits-cta-wrapper {
    margin-top: var(--space-2xl);
  }
}

/* TABLET */
@media (min-width: 768px) {
  .wp-block-prostovpn-benefits .benefit-card { 
    gap: var(--space-2xl); 
  }
  .benefit-icon-wrapper {
    width: var(--size-64);
    height: var(--size-64);
  }
  .benefit-content {
    gap: var(--space-sm);
  }
  
  .cube-face--front { transform: rotateY(0deg) translateZ(32px); }
  .cube-face--back { transform: rotateY(180deg) translateZ(32px); }
  .cube-face--right { transform: rotateY(90deg) translateZ(32px); }
  .cube-face--left { transform: rotateY(-90deg) translateZ(32px); }
  .cube-face--top { transform: rotateX(90deg) translateZ(32px); }
  .cube-face--bottom { transform: rotateX(-90deg) translateZ(32px); }
}

/* DESKTOP */
@media (min-width: 1024px) {
  .wp-block-prostovpn-benefits .benefit-card { 
    gap: var(--space-3xl); 
  }
  .benefit-icon-wrapper {
    width: var(--size-72);
    height: var(--size-72);
  }
  .benefit-content {
    gap: var(--space-md);
  }
  .benefits-cta-wrapper {
    margin-top: var(--space-4xl);
  }
  
  .cube-face--front { transform: rotateY(0deg) translateZ(36px); }
  .cube-face--back { transform: rotateY(180deg) translateZ(36px); }
  .cube-face--right { transform: rotateY(90deg) translateZ(36px); }
  .cube-face--left { transform: rotateY(-90deg) translateZ(36px); }
  .cube-face--top { transform: rotateX(90deg) translateZ(36px); }
  .cube-face--bottom { transform: rotateX(-90deg) translateZ(36px); }
}