/* === Flipcard кино-стиль (адаптив) === */
.wp-flipcard-wrapper{width:100%;max-width:var(--card-width,600px);margin:0 auto;position:relative}
.card-container{width:100%;padding-top:calc(var(--card-height,350px)/var(--card-width,600px)*100%);position:relative;perspective:1500px}
.flip-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.flip-card:hover{transform:rotateY(180deg)}
.flip-card.is-flipped{transform:rotateY(180deg)} /* для тача */

.card-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:space-between;padding:40px;color:#f5f5f5}
.card-front{background:linear-gradient(135deg,#4a5d7c 0%,#e89b5a 100%)}
.card-back{background:linear-gradient(135deg,#2a3540 0%,#1a1f28 50%,#2a1810 100%);transform:rotateY(180deg)}
.card-face .bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1;pointer-events:none}
.card-front .bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(74,93,124,.10) 0%,rgba(232,155,90,.10) 100%);pointer-events:none}

.card-front-content,.card-back-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.card-front-title{font-size:32px;font-weight:700;text-shadow:2px 2px 8px rgba(0,0,0,.6);padding-bottom:20px}
.card-front-subtitle{font-size:16px;opacity:.95;text-shadow:1px 1px 4px rgba(0,0,0,.5)}
.card-back-title{font-size:28px;font-weight:700;color:#32b8c6;text-shadow:0 0 10px rgba(50,184,198,.5)}
.card-back-description{font-size:16px;line-height:1.6;color:rgba(255,255,255,.85)}

.flip-hint{position:absolute;right:24px;bottom:18px;font-size:14px;letter-spacing:.3px;opacity:.9;text-shadow:2px 2px 4px rgba(0,0,0,.8);animation:pulse 2s ease-in-out infinite;z-index:1}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* «Живая» рамка */
.liquid-border{position:absolute;inset:-4px;border-radius:24px;background:linear-gradient(90deg,#c0c0c0,#ffd700,#ffa500,#ffd700,#c0c0c0);background-size:300% 100%;filter:blur(2px);opacity:.8;z-index:0;pointer-events:none;animation:liquid 4s linear infinite}
@keyframes liquid{0%{background-position:0% 0%}100%{background-position:200% 0%}}
.color-border{position:absolute;inset:0;border-radius:20px;padding:3px;background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.8),rgba(255,255,255,.6),rgba(255,255,255,.4),rgba(255,255,255,.6));background-size:200% 100%;filter:blur(1px);box-shadow:0 0 15px rgba(255,255,255,.4),inset 0 0 10px rgba(255,255,255,.2);mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;animation:cb 6s linear infinite;pointer-events:none;z-index:1}
@keyframes cb{0%{background-position:0% 0%}100%{background-position:200% 0%}}

/* Адаптив */
@media (max-width:768px){
  .card-face{padding:28px}
  .card-front-title{font-size:26px}
  .card-back-title{font-size:24px}
}
@media (max-width:580px){
  .card-face{flex-direction:column;justify-content:center;text-align:center}
  .card-front-title{font-size:22px}
  .card-back-title{font-size:20px}
}