/* =========================
   PORTFOLIO (index/page/case)
   ========================= */

/* базовые переменные (подхватывает твой :root из base.css, но на всякий случай) */
:root{
  --dark:#111827;
  --dark-2:#0f172a;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --soft:#f5f6f8;
  --orange:#f97316;
  --radius:18px;
}

.pf, .case{
  padding: 56px 0 70px;
}

.muted{ color: var(--muted); }

/* =========================
   Breadcrumbs
   ========================= */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:14px;
  color: var(--muted);
  margin: 0 0 18px;
}
.breadcrumbs__link{
  color: var(--muted);
  text-decoration:none;
}
.breadcrumbs__link:hover{ color: var(--text); }
.breadcrumbs__sep{ opacity:.6; }
.breadcrumbs__current{ color: var(--text); font-weight:800; }

/* =========================
   Head blocks
   ========================= */
.pf__head, .case__head{
  margin: 0 0 26px;
}
.pf__head--center, .pf__head--compact,
.case__head--compact{
  text-align:center;
}
.pf__title, .case__title{
  margin:0;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(34px, 3.6vw, 56px);
  color: var(--text);
}
.pf__title--compact, .case__title--compact{
  font-size: clamp(30px, 3.1vw, 46px);
}
.pf__subtitle, .case__subtitle{
  margin: 10px auto 0;
  max-width: 920px;
  font-size: 15.5px;
  line-height: 1.55;
}

/* =========================
   Buttons (под твои классы)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.20);
}
.btn:active{ transform: translateY(0); box-shadow:none; }

.btn--outline{
  background:#fff;
}
.btn--orange{
  background: var(--orange);
  border-color: transparent;
  color:#fff;
}
.btn--orange:hover{
  box-shadow: 0 14px 28px rgba(249,115,22,.22);
}

/* =========================
   Badges
   ========================= */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
}
.badge--paid{ color:#7c2d12; border-color: rgba(124,45,18,.22); }
.badge--free{ color:#14532d; border-color: rgba(20,83,45,.22); }

/* =========================
   INDEX: pages grid (4 in row)
   ========================= */
.pf-pages{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
}
.pf-page{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  background: #fff;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pf-page:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.18);
}
.pf-page__link{
  display:block;
  text-decoration:none;
  color: inherit;
}
.pf-page__body{
  padding: 18px 18px 16px;
  min-height: 160px;
  display:flex;
  flex-direction:column;
}
.pf-page__title{
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}
.pf-page__text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;

  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.pf-page__more{
  margin-top: auto;
  padding-top: 14px;
  font-weight: 900;
  color: var(--orange);
}

/* empty */
.pf-empty{
  border: 1px dashed rgba(15,23,42,.20);
  border-radius: var(--radius);
  padding: 26px;
  text-align:center;
  background: #fff;
}

/* =========================
   PAGE DETAIL: cases like your 2nd screenshot
   ========================= */
.pf-cases{
  margin-top: 22px;
}
.pf-cases--wide{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-case{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pf-case:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.18);
}
.pf-case__link{
  display:block;
  text-decoration:none;
  color: inherit;
}
.pf-case__img{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
}
.pf-case__img--wide{
  aspect-ratio: 16 / 9;
}
.pf-case__img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.pf-case__ph{
  width:100%;
  height:100%;
  background: radial-gradient(circle at 30% 25%, rgba(249,115,22,.14), rgba(15,23,42,.05));
}
.pf-case__body{
  padding: 16px 18px 16px;
}
.pf-case__title{
  margin:0 0 8px;
  font-size: 20px;
  font-weight: 900;
}
.pf-case__text{
  margin:0;
  font-size: 14px;
  line-height: 1.5;

  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.5em * 4);
}
.pf-case__more{
  margin-top: 12px;
  font-weight: 900;
  color: var(--orange);
}

/* =========================
   DOCS GRID (page + case) - 4 in row
   ========================= */
.pf-docs, .case-docs{
  margin-top: 34px;
}
.pf-docs__head, .case-docs__head{
  text-align:center;
  margin-bottom: 16px;
}
.pf-docs__title, .case-docs__title{
  margin:0;
  font-size: 24px;
  font-weight: 900;
}
.pf-docs__subtitle, .case-docs__subtitle{
  margin: 8px auto 0;
  max-width: 860px;
  font-size: 14px;
}

.pf-docs__grid, .case-docs__grid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* единый размер карточек доков */
.pf-doc, .case-doc{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
}
.pf-doc__media, .case-doc__media{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.02));
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.pf-doc__img, .case-doc__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
.pf-doc__ph, .case-doc__ph{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  letter-spacing:.08em;
}

.pf-doc__badges, .case-doc__badges{
  position:absolute;
  left: 10px;
  top: 10px;
  display:flex;
  gap: 8px;
}

.pf-doc__body, .case-doc__body{
  padding: 14px 14px 14px;
  display:flex;
  flex-direction:column;
  flex: 1;
}

.pf-doc__title2, .case-doc__name{
  margin:0 0 8px;
  font-size: 16px;
  font-weight: 900;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.2em * 2);
}

.pf-doc__text, .case-doc__text{
  margin:0;
  font-size: 13.5px;
  line-height: 1.45;

  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.45em * 4);
}

.pf-doc__meta, .case-doc__price{
  margin-top: 10px;
  font-weight: 900;
}

.pf-doc__actions, .case-doc__actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
}

/* =========================
   Actions row
   ========================= */
.pf-actions{
  margin-top: 26px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pf-actions--center{ justify-content:center; }
.pf-actions--spaced{ padding-top: 10px; }

/* =========================
   CASE DETAIL: force the order you want
   title/short/cover/body/docs/gallery/files
   ========================= */
.case__cover{
  margin: 18px 0 22px;
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 18px 52px rgba(15,23,42,.10);
}
.case__cover--wide{
  max-width: 1180px;
  margin-left:auto;
  margin-right:auto;
}
.case__cover img{
  width:100%;
  height:auto;
  display:block;
  object-fit: cover;
}

.case__layout{
  display:flex;
  flex-direction:column;
  gap: 22px;
}

/* контент сверху */
.case__content{ order: 1; }

/* сайдбар вниз, чтобы галерея/файлы шли после документов */
.case__side{ order: 2; }

/* body */
.case__body{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
}
.case__body p{
  margin: 0 0 14px;
}
.case__body h2, .case__body h3{
  margin: 18px 0 10px;
  font-weight: 900;
}

/* =========================
   CASE: gallery + files blocks
   make gallery in 4 columns like docs, same size cards
   ========================= */
.case-box{
  margin-top: 18px;
}
.case-box__title{
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  text-align:center;
}

/* Галерея: 4 в ряд */
.case-gallery{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-gallery__item{
  margin:0;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  min-height: 260px; /* одинаковый размер */
}
.case-gallery__item img{
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display:block;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.case-gallery__cap{
  padding: 10px 12px 12px;
  font-size: 13px;
  line-height: 1.35;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.35em * 2);
}

/* Файлы: тоже сеткой 4 в ряд, чтобы по размеру совпадали с фото/доками */
.case-files{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-file{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  padding: 14px 14px;
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  min-height: 120px; /* визуально ровно */
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.case-file:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.18);
}
.case-file__name{
  font-weight: 900;
  font-size: 14px;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: calc(1.2em * 2);
}
.case-file__meta{
  margin-top: auto;
  padding-top: 10px;
  font-weight: 900;
  color: var(--orange);
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1200px){
  .pf-pages{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pf-docs__grid, .case-docs__grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .case-gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .case-files{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 920px){
  .pf-cases--wide{ grid-template-columns: 1fr; }
  .pf-pages{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pf-docs__grid, .case-docs__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .case-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .case-files{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px){
  .pf-pages{ grid-template-columns: 1fr; }
  .pf-docs__grid, .case-docs__grid{ grid-template-columns: 1fr; }
  .case-gallery{ grid-template-columns: 1fr; }
  .case-files{ grid-template-columns: 1fr; }

  .btn{ width:100%; }
  .pf-doc, .case-doc{ min-height: 0; }
}


/* Альтернатива без искажений: обрезать по высоте на ~20% */
.case__cover--wide{
  aspect-ratio: 16 / 5; /* было условно 16/9, стало ниже */
}
.case__cover--wide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf--page .pf-cases--wide{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px;
}
.pf-page__more.btn{
  margin-top: 10px;
  display: inline-flex;
  width: fit-content;
  pointer-events: none; /* чтобы клик всегда шел на всю карточку */
}

/* чтобы кнопка опустилась ниже текста */
.pf-page__text{
  margin-bottom: 18px; /* увеличь если надо */
}

/* если кнопка у тебя отдельным блоком */
.pf-page__actions{
  margin-top: 10px;
}

/* карточка кейса: тело как колонка */
.pf-case__body{
  display: flex;
  flex-direction: column;
}

/* текст даём чуть воздуха */
.pf-case__text{
  margin-bottom: 14px;
}

/* кнопка уезжает вниз и получает отступ сверху */
.pf-case__actions{
  margin-top: auto;
  padding-top: 12px;
}