/* Карточки «Проблема → Решение» с переворотом — общий компонент /sites/ и /landing/ (оформление «Холодный свет», нужен service-cold.css).
   Разметка: section.sp-pains > ul.sp-flips > li.sp-flip > .sp-flip-in > .sp-face.is-front + .sp-face.is-back, кнопка button.sp-turn[aria-pressed]. Скрипт — flip-cards.js. */
/* Подсветка за блоком карточек */
.sp-pains{position:relative;isolation:isolate;overflow-x:clip}
.sp-pains:before{content:"";position:absolute;z-index:-1;pointer-events:none;filter:blur(30px)}
.sp-pains:before{left:-6%;right:-6%;top:22%;bottom:-4%;background:radial-gradient(40% 46% at 12% 70%,var(--g2),transparent 72%),radial-gradient(36% 42% at 92% 30%,var(--g3),transparent 72%)}

.sp-pains h2{max-width:none;text-wrap:balance}
.sp-flips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sp-flip{position:relative;perspective:1600px}
.sp-flip-in{display:grid;height:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,.7,.15,1)}
.sp-flip.is-on .sp-flip-in{transform:rotateY(180deg)}
.sp-face{grid-area:1/1;position:relative;overflow:hidden;display:flex;flex-direction:column;padding:24px 26px 26px;border-radius:var(--card-r);background:var(--card);border:1px solid var(--card-rule);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border-color .3s}
.sp-face>*{position:relative}
.sp-face.is-back{transform:rotateY(180deg);border-color:rgba(130,108,255,.45)}
.is-back:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(460px 320px at 100% 0%,rgba(118,92,255,.55),transparent 66%),radial-gradient(320px 240px at 0% 100%,rgba(255,106,61,.3),transparent 70%)}
.sp-flip-in:hover .is-front{border-color:rgba(255,255,255,.26)}
.sp-tag{display:flex;align-items:center;gap:10px;min-height:46px;margin:-6px 0 6px!important;padding-right:56px;font-size:14px;color:var(--faint)}
.sp-tag:before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.38)}
.is-back .sp-tag{color:var(--ink)}
.is-back .sp-tag:before{background:#9b8bff;box-shadow:0 0 0 4px rgba(155,139,255,.2),0 0 14px rgba(155,139,255,.9)}
.sp-face h3{font-size:19px;line-height:1.3;padding-bottom:16px;margin-bottom:14px!important;border-bottom:1px solid var(--card-rule)}
.sp-face p{margin:0 0 12px!important;line-height:1.55}
.is-front p{font-size:15px;color:var(--soft)}
.is-back p{font-size:17px;line-height:1.5;color:#e4e2de}
.is-back a{color:var(--accent)}
.sp-extra-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
.sp-extra-list li{position:relative;padding-left:14px;font-size:15px;line-height:1.35;color:#e4e2de}
.sp-extra-list li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--accent)}
/* Круглая кнопка поворота — вне вращающегося слоя, в правом верхнем углу */
.sp-turn{position:absolute;right:20px;top:18px;z-index:2;display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#1f2122;color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.sp-turn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s cubic-bezier(.3,.7,.15,1)}
.sp-turn:hover{border-color:var(--accent)}
.sp-turn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 28px rgba(255,106,61,.55)}
.sp-turn[aria-pressed="true"] svg{transform:rotate(-180deg)}
.sp-turn-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-turn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (max-width:1100px){.sp-flips{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .sp-flips{grid-template-columns:1fr;gap:14px}
  .sp-face{padding:20px 20px 22px}
  .sp-face h3{font-size:18px}
  .sp-turn{right:14px;top:14px}
}
@media (max-width:360px){.sp-extra-list{grid-template-columns:1fr}}
/* Без 3D-поворота: мягкая смена сторон; скрытая сторона только прозрачная и остаётся доступной диктору */
@media (prefers-reduced-motion:reduce){
  .sp-flip-in,.sp-flip.is-on .sp-flip-in{transform:none;transition:none}
  .sp-face,.sp-face.is-back{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible;transition:opacity .3s}
  .sp-face.is-back,.sp-flip.is-on .is-front{opacity:0;pointer-events:none}
  .sp-flip.is-on .is-back{opacity:1;pointer-events:auto}
  .sp-turn svg{transition:none}
}