/* Фото кейсов на текстовых страницах (27.08.2026).
   Машина показала 13 длинных страниц вообще без картинок — читались как простыня текста.
   Стиль взят со страниц: белый фон, скругления 12–16, акцент #5b8c51. */

.pw-shot {
  margin: 28px 0 44px;
}
.pw-shot__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: 21 / 9;
}
.pw-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pw-shot__cap {
  margin: 10px 2px 0;
  font-size: 13.5px;
  color: #888;
  line-height: 1.5;
}
.pw-shot__cap b { color: #5b8c51; font-weight: 600; }

.pw-cases { margin: 48px 0; }
.pw-cases__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.pw-cases__head h2 { margin: 0; }
.pw-cases__all {
  font-size: 14px;
  color: #5b8c51;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.pw-cases__all:hover { text-decoration: underline; }
.pw-cases__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 186px;
  gap: 12px;
}
.pw-case {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #f2f2f2;
  text-decoration: none;
}
.pw-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.pw-case:hover img { transform: scale(1.03); }
.pw-case::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  pointer-events: none;
}
.pw-case__cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* 12 колонок: ряд 1-2 — крупный кадр (7) и два боковых (5+5),
   ряд 3 — три узких (4+4+4). Иначе плитки не сходятся и остаются дыры. */
.pw-case--big { grid-column: span 7; grid-row: span 2; }
.pw-case--side { grid-column: span 5; grid-row: span 1; }
.pw-case--third { grid-column: span 4; grid-row: span 1; }

@media (max-width: 720px) {
  .pw-shot__frame { aspect-ratio: 4 / 3; border-radius: 12px; }
  .pw-cases__grid { gap: 10px; }
  .pw-cases__grid { grid-auto-rows: 150px; }
  .pw-case--big { grid-column: span 12; grid-row: span 2; }
  .pw-case--side { grid-column: span 6; grid-row: span 1; }
  .pw-case--third { grid-column: span 6; grid-row: span 1; }
  /* шестая плитка на мобиле остаётся одна в ряду — растягиваем на всю ширину */
  .pw-cases__grid > .pw-case:last-child:nth-child(even) { grid-column: span 12; }
  .pw-case__cap { font-size: 12px; left: 10px; right: 10px; bottom: 9px; }
}

/* Блок «Статьи по теме» на коммерческих страницах (27.08.2026).
   До этого дня с них не вело НИ ОДНОЙ ссылки в блог — 25 статей не попали в индекс Google. */
.pw-reads { margin: 48px 0 0; }
.pw-reads h2 { margin: 0 0 16px; }
.pw-reads__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pw-reads__list a {
  display: block;
  padding: 16px 18px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  color: #111;
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.pw-reads__list a:hover { border-color: #5b8c51; background: #f7faf6; }
@media (max-width: 720px) {
  .pw-reads__list { grid-template-columns: 1fr; }
  .pw-reads__list a { padding: 14px 16px; font-size: 15px; }
}