/* ===== Лендинг «Генератор календаря занятости»: постраничные стили ===== */

/* Стопка демо-картинок в hero (перенос эффекта со старой витрины /calendar-generator) */
.calstack{position:relative;width:100%;height:480px}
@media(max-width:960px){.calstack{height:430px;margin-top:10px}}
@media(max-width:420px){.calstack{height:390px}}
.calcard{position:absolute;left:50%;top:50%;margin:-187px 0 0 -105px;width:210px;aspect-ratio:1080/1920;border-radius:18px;overflow:hidden;background:var(--c-surface-2);box-shadow:0 20px 44px rgba(17,17,17,.22);transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;will-change:transform}
@media(max-width:420px){.calcard{width:170px;margin:-151px 0 0 -85px}}
.calcard img{width:100%;height:100%;object-fit:cover;display:block}
.calcard--1{transform:translateX(-106px) rotate(-9deg);z-index:1;animation:calf1 7s ease-in-out infinite}
.calcard--2{transform:translateY(-10px) rotate(1deg);z-index:3;animation:calf2 6s ease-in-out infinite}
.calcard--3{transform:translateX(106px) rotate(9deg);z-index:2;animation:calf3 8s ease-in-out infinite}
@media(max-width:420px){.calcard--1{transform:translateX(-86px) rotate(-9deg);animation:none}.calcard--3{transform:translateX(86px) rotate(9deg);animation:none}}
@keyframes calf1{0%,100%{transform:translate(-106px,0) rotate(-9deg)}50%{transform:translate(-106px,-12px) rotate(-11deg)}}
@keyframes calf2{0%,100%{transform:translate(0,-10px) rotate(1deg)}50%{transform:translate(0,4px) rotate(-1deg)}}
@keyframes calf3{0%,100%{transform:translate(106px,0) rotate(9deg)}50%{transform:translate(106px,-14px) rotate(11deg)}}
.calstack:hover .calcard{animation:none;box-shadow:0 24px 54px rgba(17,17,17,.26)}
.calstack:hover .calcard--1{transform:translateX(-150px) rotate(-12deg) scale(1.02)}
.calstack:hover .calcard--2{transform:translateY(-22px) rotate(0deg) scale(1.06)}
.calstack:hover .calcard--3{transform:translateX(150px) rotate(12deg) scale(1.02)}
@media(prefers-reduced-motion:reduce){.calcard{animation:none !important;transition:none}}

/* Тёмная панель «всегда актуально» */
.keep-visual--cal{background:radial-gradient(560px circle at 18% 12%, rgba(10,102,255,.26), transparent 55%),radial-gradient(500px circle at 88% 90%, rgba(255,106,0,.2), transparent 55%),linear-gradient(150deg,#1c2333,#0d1120);display:grid;place-items:center}
.cal-live{background:rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-3);padding:26px 30px;color:#fff;text-align:center;max-width:80%}
.cal-live b{font-family:var(--f-head);font-weight:600;font-size:18px;display:block;margin-bottom:6px}
.cal-live small{display:block;color:rgba(255,255,255,.7);font-size:13px;line-height:1.5}
.cal-live .sync{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px;font-weight:700;font-size:12px}
.cal-live .sync i{width:8px;height:8px;border-radius:50%;background:#2fd575;font-style:normal;display:block}

/* На промежуточных ширинах (двухколоночный hero, но узкий) стопку ужимаем,
   чтобы карточки не наезжали на текст левой колонки */
@media(min-width:961px) and (max-width:1180px){
  .calcard{width:170px;margin:-151px 0 0 -85px}
  .calcard--1{transform:translateX(-80px) rotate(-9deg)}
  .calcard--3{transform:translateX(80px) rotate(9deg)}
  @keyframes calf1{0%,100%{transform:translate(-80px,0) rotate(-9deg)}50%{transform:translate(-80px,-12px) rotate(-11deg)}}
  @keyframes calf3{0%,100%{transform:translate(80px,0) rotate(9deg)}50%{transform:translate(80px,-14px) rotate(11deg)}}
  .calstack:hover .calcard--1{transform:translateX(-108px) rotate(-12deg) scale(1.02)}
  .calstack:hover .calcard--3{transform:translateX(108px) rotate(12deg) scale(1.02)}
  .calstack{height:420px}
}