/* ==========================================================================
   Карточки кейсов (cases.html + «другие кейсы» на страницах кейсов) и статей (articles.html) по стандарту главной:
   чистое фото без надписи, моно-строка тегов, жирный заголовок, синяя первая цифра,
   «Читать →». Всё строго внутри сеток .cases-page__grid, .case-related__grid и #blog-grid — классы
   .case-card и .art-cover ещё живут в блоках «похожие» на страницах статей и услуг.
   Подключается последним в <head>: старые правила страниц с !important перебиваем здесь.
   ========================================================================== */
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-cyrillic.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.cases-page,.blog-page,.main__title_pages,.case-related{
  --c-ink:#0b0b0c; --c-ink2:#3a3a40; --c-muted:#6f6f78; --c-line:#e6e6ec; --c-plate:#f5f5f7; --c-blue:#2d60fa;
  --c-mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --c-disp:"Golos Text",system-ui,sans-serif;
  --c-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- заголовок страницы: название крупно, фраза — подзаголовком, как на главной ---------- */
.main__title_pages .h1-sub{display:block;margin-top:.4em;font-size:clamp(20px,2.3vw,34px);font-weight:600;line-height:1.14;letter-spacing:-.025em;color:var(--c-ink2)}
.main__title_pages .h1-sub em{font-style:normal;color:var(--c-blue)}

/* ==========================================================================
   КЕЙСЫ
   ========================================================================== */
.cases-page__grid,.case-related__grid{gap:18px!important}
:is(.cases-page__grid,.case-related__grid) .case-card{padding:0!important;gap:0!important;border:0!important;border-radius:24px!important;background:var(--c-plate)!important;box-shadow:none!important;overflow:hidden!important;transition:transform .5s var(--c-ease),box-shadow .5s var(--c-ease)!important}
:is(.cases-page__grid,.case-related__grid) .case-card:hover{transform:translateY(-6px)!important;box-shadow:0 30px 60px -30px rgba(11,11,12,.3)!important}

/* a.case-card__cover.case-card__cover--photo — чтобы перебить мобильное правило style.css (обложка на 3.5rem шире карточки) */
:is(.cases-page__grid,.case-related__grid) a.case-card__cover.case-card__cover--photo{margin:0!important;width:100%!important;aspect-ratio:16/10!important;border-radius:0!important}
:is(.cases-page__grid,.case-related__grid) .case-card__cover--photo::after,:is(.cases-page__grid,.case-related__grid) .case-cover__title{display:none!important}
:is(.cases-page__grid,.case-related__grid) .case-card__cover--photo{display:block!important;position:relative!important;overflow:hidden!important;padding:0!important;min-height:0!important;height:auto!important;background:#111!important}
:is(.cases-page__grid,.case-related__grid) .case-card__cover-photo{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform 1s var(--c-ease)!important}
:is(.cases-page__grid,.case-related__grid) .case-card:hover .case-card__cover-photo{transform:scale(1.05)}

:is(.cases-page__grid,.case-related__grid) .case-card__tag{display:block!important;margin:18px 22px 0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;font:500 11px/1.4 var(--c-mono)!important;text-transform:uppercase;letter-spacing:.03em;color:var(--c-muted)!important}
/* заголовок раньше прятался визуально (виден был только текст на обложке) — теперь он и есть заголовок карточки */
:is(.cases-page__grid,.case-related__grid) .case-card__title{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:10px 22px 0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;font:700 19px/1.22 var(--c-disp)!important;letter-spacing:-.015em!important}
:is(.cases-page__grid,.case-related__grid) .case-card__title-link{color:var(--c-ink)!important;text-decoration:none}
:is(.cases-page__grid,.case-related__grid) .case-card__text{flex:none!important;margin:10px 22px 0!important;font-size:14.5px!important;line-height:1.55!important;color:var(--c-ink2)!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(.cases-page__grid,.case-related__grid) .case-card__stats{display:flex!important;gap:12px!important;margin:auto 22px 0!important;padding:20px 0 0!important;border:0!important;background:none!important}
:is(.cases-page__grid,.case-related__grid) .case-card__stats>div{flex:1;min-width:0;padding:12px 0 0!important;border:0!important;border-top:1px solid var(--c-line)!important;background:none!important}
:is(.cases-page__grid,.case-related__grid) .case-card__stats dt{font:700 clamp(24px,2.1vw,30px)/1 var(--c-disp)!important;letter-spacing:-.025em;color:var(--c-ink)!important;white-space:nowrap}
:is(.cases-page__grid,.case-related__grid) .case-card__stats>div:first-child dt{color:var(--c-blue)!important}
:is(.cases-page__grid,.case-related__grid) .case-card__stats dd{margin:6px 0 0!important;font:500 11px/1.3 var(--c-mono)!important;color:var(--c-muted)!important}
:is(.cases-page__grid,.case-related__grid) .case-card__more-wrap{display:flex!important;justify-content:space-between;align-items:center;margin:18px 22px 20px!important;padding:0!important;border:0!important}
:is(.cases-page__grid,.case-related__grid) .case-card__more{padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font:600 14px/1 var(--c-disp)!important;color:var(--c-ink)!important}
:is(.cases-page__grid,.case-related__grid) .case-card__more::after{content:"→";display:inline-block;margin-left:6px;transition:transform .35s var(--c-ease)}
:is(.cases-page__grid,.case-related__grid) .case-card:hover .case-card__more::after{transform:translateX(4px)}
:is(.cases-page__grid,.case-related__grid) .case-card__views{font:500 12px/1 var(--c-mono)!important;color:var(--c-muted)!important}

/* ==========================================================================
   СТАТЬИ: первая крупно (2×2), остальные в сетку — как «блог» на главной
   ========================================================================== */
#blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}
#blog-grid .blog-card{position:relative;border:0!important;border-radius:24px!important;background:var(--c-plate)!important;box-shadow:none!important;overflow:hidden;transition:transform .5s var(--c-ease),box-shadow .5s var(--c-ease)!important}
#blog-grid .blog-card:hover{transform:translateY(-6px)!important;box-shadow:0 30px 60px -30px rgba(11,11,12,.3)!important}
/* заголовок статьи живёт внутри обложки: «разворачиваем» обложку и блок текста, чтобы выстроить
   порядок главной (фото → теги → заголовок → текст → ссылка) без правки разметки 18 карточек */
#blog-grid .art-cover,#blog-grid .blog-card__content{display:contents!important}
#blog-grid .art-cover::before,#blog-grid .art-cover::after{display:none!important}
#blog-grid .art-cover img{order:1;position:static!important;display:block;width:100%!important;height:auto!important;aspect-ratio:16/10;object-fit:cover}
#blog-grid .blog-card__meta{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px!important;margin:16px 20px 0!important;font:500 11.5px/1.2 var(--c-mono)!important;color:var(--c-muted)!important}
#blog-grid .blog-card__tag{padding:4px 9px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:var(--c-ink2)!important;font:500 11.5px/1.2 var(--c-mono)!important}
#blog-grid .art-cover__text{order:3;position:static!important;margin:12px 20px 0!important;padding:0!important}
#blog-grid .art-cover__title{margin:0;padding:0!important;font:700 18px/1.25 var(--c-disp)!important;letter-spacing:-.015em;color:var(--c-ink)!important}
#blog-grid .blog-card__text{order:4;flex:none!important;margin:10px 20px 0!important;font-size:14.5px!important;line-height:1.55!important;color:var(--c-ink2)!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#blog-grid .blog-card__link{order:5;align-self:flex-start;margin:auto 20px 20px!important;padding-top:16px;font:600 14px/1 var(--c-disp)!important;color:var(--c-ink)!important;opacity:1!important}
#blog-grid .blog-card__link::after{content:"→";display:inline-block;margin-left:6px!important;transition:transform .35s var(--c-ease)!important}
#blog-grid .blog-card:hover .blog-card__link::after{transform:translateX(4px)}
#blog-grid .blog-card:hover .art-cover__title{color:var(--c-blue)!important}

/* первая статья — на всю ширину: фото слева, текст справа. Высоту задаёт фото 16:10,
   поэтому ни пустоты, ни растянутой обложки (как было при раскладке 2×2) */
#blog-grid .blog-card:first-child{grid-column:1/-1}
#blog-grid .blog-card:first-child .art-cover__title{font-size:clamp(24px,2.6vw,40px)!important;line-height:1.1!important;letter-spacing:-.025em}
#blog-grid .blog-card:first-child .blog-card__text{font-size:16px!important;-webkit-line-clamp:4}
@media (min-width:861px){
  #blog-grid .blog-card:first-child{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  #blog-grid .blog-card:first-child .art-cover img{grid-column:1;grid-row:1/-1;height:100%!important;min-height:100%;aspect-ratio:16/10}
  #blog-grid .blog-card:first-child .blog-card__meta{grid-column:2;margin:clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px) 0!important}
  #blog-grid .blog-card:first-child .art-cover__text{grid-column:2;margin:16px clamp(24px,2.6vw,40px) 0!important}
  #blog-grid .blog-card:first-child .blog-card__text{grid-column:2;margin:16px clamp(24px,2.6vw,40px) 0!important}
  #blog-grid .blog-card:first-child .blog-card__link{grid-column:2;align-self:end;margin:24px clamp(24px,2.6vw,40px) clamp(24px,2.6vw,36px)!important;padding-top:0}
}

@media (max-width:1023px){
  #blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cases-page__grid,.case-related__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:640px){
  #blog-grid,.cases-page__grid,.case-related__grid{grid-template-columns:minmax(0,1fr)!important}
  #blog-grid .blog-card:first-child .art-cover__title{font-size:22px!important}
  :is(.cases-page__grid,.case-related__grid) .case-card__title{font-size:18px!important}
  /* название страницы крупно, как названия разделов на главной */
  .main__title_pages{font-size:clamp(44px,14vw,64px)!important;line-height:.95!important}
  .main__title_pages .h1-sub{font-size:clamp(19px,5.4vw,24px);line-height:1.2}
}
/* узкие телефоны (320–400px): две цифры в ряд не помещаются, «639 000 ₽» вылезало за колонку — цифры мельче и могут встать в две строки */
@media (max-width:400px){
  :is(.cases-page__grid,.case-related__grid) .case-card__stats{flex-wrap:wrap}
  :is(.cases-page__grid,.case-related__grid) .case-card__stats>div{flex:1 1 auto}
  :is(.cases-page__grid,.case-related__grid) .case-card__stats dt{font-size:22px!important}
}
@media (prefers-reduced-motion:reduce){
  :is(.cases-page__grid,.case-related__grid) .case-card,#blog-grid .blog-card,:is(.cases-page__grid,.case-related__grid) .case-card__cover-photo{transition:none!important}
}