/* ============================================================
   ПОРТФОЛИО — страница кейса (single-smlt_project) и архив
   (archive-smlt_project). Дополняет site.css/pages.css:
   переиспользуем .phead, .kicker, .btn, .cta, .form, базовый .folio.
   ============================================================ */

/* ---------- HERO кейса: скриншот в рамке + панель фактов ---------- */
.case-hero{background:var(--sand)}
.case-hero__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start}
.case-hero__grid:only-child,
.case-hero .facts:only-child{grid-column:1/-1}
/* если обложки нет — панель фактов на всю ширину */
.case-hero__grid > .facts:first-child{grid-column:1/-1;max-width:520px}

.browser{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.browser__bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:linear-gradient(180deg,#fbf7f1,#f3ebdf);border-bottom:1px solid var(--line)}
.browser__dots{display:flex;gap:7px;flex:none}
.browser__dots i{width:11px;height:11px;border-radius:50%;background:#d9cbb8}
.browser__url{font-family:var(--font-body);font-size:.86rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:100px;padding:5px 14px;flex:1;max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__shot{display:block;width:100%;height:auto}

.facts{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:sticky;top:20px}
.facts__top{height:4px;background:linear-gradient(90deg,var(--forge),var(--ember),var(--forge))}
.facts__row{display:flex;flex-direction:column;gap:2px;padding:14px 20px;border-bottom:1px solid var(--line)}
.facts__k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts__v{font-family:var(--font-display);font-weight:500;font-size:1.08rem;color:var(--text)}
.facts__cta{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.facts__cta .btn{width:100%}

/* ---------- Тело кейса (post_content) ---------- */
.case-body .wrap{max-width:var(--wrap)}
.case-body .section__head{margin-bottom:34px}
.case-body > .wrap > *+*{margin-top:34px}

/* плитки «Что сделали» — рендерятся в содержимом записи */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.feat__card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.feat__ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(120% 120% at 60% 10%,#fff4e8,#f6e7d2);margin-bottom:16px}
.feat__ic svg{width:23px;height:23px;stroke:var(--forge);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat__card h3{font-size:1.14rem;margin-bottom:7px}
.feat__card p{color:var(--muted);font-size:.95rem}

/* галерея скриншотов кейса */
.case-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.case-gallery figure{margin:0}
.case-gallery img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#fff;cursor:zoom-in;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.case-gallery img:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.case-gallery img:focus-visible{outline:2px solid var(--forge);outline-offset:3px}
.case-gallery figcaption{margin-top:8px;font-size:.88rem;color:var(--muted);text-align:center}
@media(prefers-reduced-motion:reduce){.case-gallery img{transition:none}}

/* «Как выглядит сайт» — во всю ширину на песочном фоне: цветом отделяет показ сайта
   от блока «Что сделали». Full-bleed: поля тянут фон до краёв экрана, паддинги
   возвращают контент в колонку --wrap; низ примыкает к тёмной CTA. */
.case-shots-sec .section__head{margin-bottom:32px}
.case-body .case-shots{margin:56px calc(50% - 50vw) calc(clamp(66px,9vw,116px) * -1);padding:clamp(48px,7vw,84px) calc(50vw - 50%);background:var(--sand);border-top:1px solid var(--line)}
.case-shots .section__head{margin-bottom:32px}

/* ---------- Отзыв клиента ---------- */
.case-review .quote{margin:0;max-width:840px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--forge);border-radius:10px;padding:26px 30px}
.case-review blockquote{margin:0}
.case-review blockquote p{font-size:1.16rem;color:var(--text);font-style:italic}
.case-review blockquote p+p{margin-top:10px}
.case-review figcaption{margin-top:14px;color:var(--muted);font-weight:600;font-family:var(--font-display)}

/* ---------- Нижняя навигация ---------- */
.case-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);padding-top:26px;margin-top:10px}
.case-nav a{font-weight:700;color:var(--forge)}
.case-nav a:hover{color:var(--ember)}
.case-nav-sec .folio{margin-bottom:34px}

/* ============================================================
   АРХИВ портфолио
   ============================================================ */
/* фильтр по нишам */
.pfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.pfilter__btn{font-family:var(--font-display);font-weight:500;font-size:.96rem;color:var(--text);background:var(--paper);
  border:1.5px solid var(--line);border-radius:100px;padding:9px 18px;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.pfilter__btn:hover{border-color:var(--forge);color:var(--forge)}
.pfilter__btn.is-active{background:var(--forge);border-color:var(--forge);color:#fff}

/* Карточки-ссылки (.folio__item[a], .folio__go, .folio__ttl, .folio__meta,
   .folio__empty) вынесены в pages.css — они нужны и на витринах
   (uslugi-sajty / keysy), где portfolio.css не подключается. */

/* ---------- Адаптив ---------- */
@media(max-width:860px){
  .case-hero__grid{grid-template-columns:1fr;gap:24px}
  .facts{position:static}
  .feat{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .feat{grid-template-columns:1fr}
  .case-nav{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .feat__card,.folio__go{transition:none}
}