/* /seo/ 12 — кейсы (Figma 388:5988, раскрытая карточка 423:6634, mobile 423:2870).
   Лента на всю ширину окна: текущая карточка выровнена по левому краю контейнера,
   соседние приглушены (opacity .2). Детали кейса (белая панель) — по hover/фокусу
   на устройствах с мышью, по тапу на тач-экранах (12-cases.js), на мобиле видны сразу. */
.fmf2 .seo-cases{overflow:hidden}
.fmf2 .seo-cases__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.fmf2 .seo-cases__head .sect-head{margin-bottom:0}
.fmf2 .seo-cases__all{flex:0 0 auto}

/* размеры считаются от ширины ленты (container query units), а не от трека с паддингами */
.fmf2 .seo-cases__slider{container-type:inline-size}
.fmf2 .seo-cases__track{
  --edge:max(var(--pad), (100cqw - var(--container)) / 2);
  --card-w:min(1096px, 100cqw - 2 * var(--edge));
  gap:24px;padding-inline:var(--edge) calc(100cqw - var(--edge) - var(--card-w));scroll-padding-inline:var(--edge)}
.fmf2 .seo-cases__track > .seo-case{width:var(--card-w)}

/* ---------- карточка ---------- */
.fmf2 .seo-case{--notch:8px;position:relative;height:500px;overflow:hidden;background:var(--case-bg,#27242E);color:#fff;
  opacity:.2;transition:opacity .3s ease;
  /* квадратные «вырезы» 8px по углам — как тёмные квадраты в макете */
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,calc(100% - var(--notch)) var(--notch),100% var(--notch),
    100% calc(100% - var(--notch)),calc(100% - var(--notch)) calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,
    var(--notch) 100%,var(--notch) calc(100% - var(--notch)),0 calc(100% - var(--notch)),0 var(--notch),var(--notch) var(--notch))}
.fmf2 .seo-case.is-current,.fmf2 .seo-case:focus-within{opacity:1}

.fmf2 .seo-case__front{position:absolute;inset:0}
.fmf2 .seo-case__device{position:absolute;left:50.1%;top:65px;width:714px;max-width:none;height:auto}
.fmf2 .seo-case__shot{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px);mask-image:linear-gradient(90deg,transparent 0,#000 72px)}
.fmf2 .seo-case__title{position:absolute;left:24px;top:24px;max-width:min(640px,58%);font-size:40px;font-weight:500;line-height:1.2}
.fmf2 .seo-case__stats{position:absolute;left:24px;bottom:84px;display:flex;gap:2px}
.fmf2 .seo-case__stat{display:flex;flex-direction:column;gap:16px;width:255px;padding:24px;background:rgba(235,235,235,.3)}
.fmf2 .seo-case__num{font-size:32px;font-weight:400;line-height:1.2;white-space:nowrap}
.fmf2 .seo-case__unit{font-size:.75em}
.fmf2 .seo-case__label{font-size:16px;font-weight:500;line-height:1.4}
.fmf2 .seo-case__more{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;line-height:1.4;
  text-decoration:underline;text-underline-offset:3px}
.fmf2 .seo-case__more .ic-svg{width:16px;height:16px;flex:0 0 auto}
.fmf2 .seo-case__more .ic-svg *{stroke:currentColor}
.fmf2 .seo-case__more--front{position:absolute;left:24px;bottom:28px}

/* ---------- детали: белая панель поверх карточки (desktop/tablet) ---------- */
.fmf2 .seo-case::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease}
.fmf2 .seo-case__details{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 119px);overflow:auto;z-index:1;
  display:flex;flex-direction:column;gap:16px;padding:24px;background:#fff;color:var(--c-ink);
  transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fmf2 .seo-case.is-open::after{opacity:1}
.fmf2 .seo-case.is-open .seo-case__details{transform:none}
@media (hover:hover){
  .fmf2 .seo-case.is-current:hover::after{opacity:1}
  .fmf2 .seo-case.is-current:hover .seo-case__details{transform:none}
}
.fmf2 .seo-case:focus-within::after{opacity:1}
.fmf2 .seo-case:focus-within .seo-case__details{transform:none}

.fmf2 .seo-case__cell.seo-cut::before{display:none}
.fmf2 .seo-case__client{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--c-line)}
.fmf2 .seo-case__about{display:flex;flex-direction:column;gap:16px}
.fmf2 .seo-case__result{display:flex;flex-direction:column;gap:16px}
.fmf2 .seo-case__field{display:flex;flex-direction:column;gap:8px}
.fmf2 .seo-case__client .seo-case__field{gap:4px}
.fmf2 .seo-case__cap{font-size:14px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:rgba(26,26,26,.6)}
.fmf2 .seo-case__client-name{font-size:24px;font-weight:500;line-height:1.4}
.fmf2 .seo-case__about p{font-size:16px;line-height:1.4}
.fmf2 .seo-case__logo{max-width:163px;max-height:40px;width:auto;height:auto;flex:0 0 auto}
.fmf2 .seo-case__metrics{display:flex;flex-wrap:wrap;gap:16px 24px}
.fmf2 .seo-case__metric{display:flex;align-items:center;gap:16px;flex:1 1 400px}
.fmf2 .seo-case__metric .seo-case__num{font-size:40px;color:var(--c-accent)}
.fmf2 .seo-case__metric .seo-case__label{max-width:244px;line-height:1.2}
.fmf2 .seo-case__details .seo-case__more{align-self:flex-start;color:var(--c-accent)}

@media (max-width:1024px){
  .fmf2 .seo-case__title{font-size:32px;max-width:60%}
  .fmf2 .seo-case__shot{height:64%;top:auto;bottom:0}
  .fmf2 .seo-case__device{left:auto;right:-150px;top:auto;bottom:24px;width:520px}
  .fmf2 .seo-case__stat{width:200px;padding:20px;gap:12px}
  .fmf2 .seo-case__num{font-size:26px}
  .fmf2 .seo-case__label{font-size:14px}
  .fmf2 .seo-case__metric .seo-case__num{font-size:32px}
  .fmf2 .seo-case__details{max-height:calc(100% - 96px)}
}

/* ---------- mobile: карточка из трёх ячеек, детали видны сразу (Figma 423:2870) ---------- */
@media (max-width:640px){
  .fmf2 .seo-cases__head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:40px}
  .fmf2 .seo-cases__head .sect-title{font-size:32px;line-height:1.2}
  .fmf2 .seo-cases__track{--edge:var(--pad);gap:16px}
  /* карточки в ленте одной высоты (по самой длинной): добирает последняя ячейка */
  .fmf2 .seo-case{height:auto;overflow:visible;background:none;clip-path:none;opacity:1;display:flex;flex-direction:column}
  .fmf2 .seo-case__details{flex:1 1 auto;display:flex;flex-direction:column}
  .fmf2 .seo-case__result{flex:1 1 auto}
  .fmf2 .seo-case::after,.fmf2 .seo-case__front{display:none}
  .fmf2 .seo-case__details{position:static;max-height:none;overflow:visible;transform:none;transition:none;
    padding:0;gap:0;background:none;color:#fff}
  .fmf2 .seo-case__cell{padding:16px;border:1px solid #48474B}
  .fmf2 .seo-case__cell + .seo-case__cell{margin-top:-1px}
  .fmf2 .seo-case__cell.seo-cut{--cut:8px;--cut-c:#48474B;border-color:transparent}
  .fmf2 .seo-case__cell.seo-cut::before{display:block}
  .fmf2 .seo-case__client{border-bottom:1px solid transparent}
  .fmf2 .seo-case__cap{color:rgba(255,255,255,.6)}
  .fmf2 .seo-case__client-name{font-size:20px}
  .fmf2 .seo-case__logo{display:none}
  .fmf2 .seo-case__about{gap:20px}
  .fmf2 .seo-case__result{gap:20px}
  .fmf2 .seo-case__metrics{flex-direction:column;gap:2px}
  .fmf2 .seo-case__metric{flex:none;flex-direction:column;align-items:stretch;gap:4px;padding:16px;background:rgba(235,235,235,.2)}
  .fmf2 .seo-case__metric .seo-case__num{font-size:24px;line-height:1.1;color:#fff}
  .fmf2 .seo-case__metric .seo-case__unit{font-size:1em}
  .fmf2 .seo-case__metric .seo-case__label{max-width:none;font-size:14px;color:rgba(255,255,255,.6)}
  .fmf2 .seo-case__details .seo-case__more{color:var(--c-accent-on-dark)}
}

@media (prefers-reduced-motion:reduce){
  .fmf2 .seo-case,.fmf2 .seo-case::after,.fmf2 .seo-case__details{transition:none}
}