.work { background: #FFFFFF; color: #1C1D20; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; }
.work .wrap { padding-top: calc(276 * var(--k)); }

/* ===== Фильтр и вид ===== */
.work__controls { display: flex; justify-content: space-between; align-items: center; margin-top: calc(109 * var(--k)); padding: 0 calc(310 * var(--k)) 0 calc(307 * var(--k)); }
.filters,
.views { display: flex; gap: calc(10 * var(--k)); }

.pill-btn { display: flex; align-items: center; box-sizing: border-box; height: max(56px, calc(80 * var(--k))); margin: 0; padding: 0 max(24px, calc(46 * var(--k))); border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(28,29,32,0.18); color: #1C1D20; font-family: inherit; font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.pill-btn sup { position: relative; top: calc(-10.5em / 11); margin-left: 4px; font-size: max(10px, calc(11 * var(--k))); line-height: 1; color: #6E6F73; }

.icon-btn { display: flex; align-items: center; justify-content: center; width: max(56px, calc(80 * var(--k))); height: max(56px, calc(80 * var(--k))); margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px rgba(28,29,32,0.18); color: #1C1D20; cursor: pointer; transition: background-color .25s, color .25s; }

.pill-btn[aria-pressed="true"],
.icon-btn[aria-pressed="true"] { background: #1C1D20; box-shadow: inset 0 0 0 1px #1C1D20; color: #FFFFFF; }
.pill-btn[aria-pressed="true"] sup { color: #FFFFFF; }

/* ===== Список ===== */
.work-list { margin: calc(110 * var(--k)) calc(163 * var(--k)) calc(200 * var(--k)) calc(160 * var(--k)); }
.work-list__head,
.work-list__row { display: grid; grid-template-columns: calc(550 * var(--k)) calc(319 * var(--k)) minmax(0,1fr) auto; column-gap: 0; padding: 0 calc(152 * var(--k)) 0 calc(153 * var(--k)); box-sizing: border-box; border-bottom: 1px solid rgba(28,29,32,0.18); }
.work-list__head { height: max(48px, calc(75 * var(--k))); align-items: start; padding-top: calc(18 * var(--k)); }
.work-list__head span { font-weight: 400; font-size: max(11px, calc(12 * var(--k))); line-height: calc(17 / 12); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: #6E6F73; }
.work-list__head span:last-child { text-align: right; }
.work-list__row { height: max(72px, calc(128 * var(--k))); align-items: center; color: #1C1D20; transition: opacity .3s; }
@media (hover: hover) { .work-list__row:hover { opacity: 0.45; } }
.work-list__name { font-weight: 400; font-size: max(26px, calc(46 * var(--k))); line-height: calc(56 / 46); letter-spacing: -0.01em; white-space: nowrap; color: #1C1D20; }
.work-list__cell { font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(28 / 19); white-space: nowrap; color: #1C1D20; }
.work-list__cell--year { text-align: right; }

/* ===== Плитка ===== */
.work-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: calc(60 * var(--k)); row-gap: calc(80 * var(--k)); margin: calc(110 * var(--k)) calc(315 * var(--k)) calc(146 * var(--k)) calc(313 * var(--k)); }
.work-card { display: flex; flex-direction: column; color: #1C1D20; }
.work-card__cover { display: flex; align-items: center; justify-content: center; height: calc(500 * var(--k)); background: #E9EAEB; transition: background-color .3s; }
@media (hover: hover) { .work-card__cover:hover { background-color: #DEDFE1; } }
.work-card__cover-name { font-weight: 400; font-size: max(26px, calc(46 * var(--k))); line-height: calc(56 / 46); color: #B3B2B2; }
.work-card__name { margin-top: calc(30 * var(--k)); padding-bottom: calc(22 * var(--k)); border-bottom: 1px solid rgba(28,29,32,0.18); font-weight: 400; font-size: max(26px, calc(46 * var(--k))); line-height: calc(56 / 46); letter-spacing: -0.01em; color: #1C1D20; }
.work-card__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: calc(22 * var(--k)); font-weight: 400; font-size: max(15px, calc(19 * var(--k))); line-height: calc(28 / 19); color: #1C1D20; }

/* ===== Ноутбук/планшет: колонки списка тянутся, между ними зазор ===== */
@media (max-width: 1100px) {
  .work-list__head,
  .work-list__row { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr) auto; column-gap: 24px; }
}

/* обложка проекта в плитке */
.work-card__cover { overflow: hidden; }
/* <picture> не участвует в раскладке - картинка заполняет рамку целиком, без серых полос */
.work-card__cover picture { display: contents; }
.work-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.19,1,.22,1); }
@media (hover: hover) { .work-card:hover .work-card__img { scale: 1.04; } }
/* мокап макбук + айфон на белом фоне - вписываем целиком (телефон у края не обрезается), рамка тоже белая */
.work-card__img.is-mockup { object-fit: contain; }
.work-card__cover:has(.is-mockup) { background: #FFFFFF; }

/* ===== Телефон: фильтры переносятся, в строке списка - название и год, ниже локация и услуги ===== */
@media (max-width: 767px) {
  .work .wrap { padding-top: 150px; }
  .work__controls { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; padding: 0 20px; }
  .filters { flex-wrap: wrap; gap: 8px; }
  .views { gap: 8px; }
  .pill-btn { height: 44px; padding: 0 18px; font-size: 15px; }
  .icon-btn { width: 44px; height: 44px; }

  .work-list { margin: 32px 20px 80px; border-top: 1px solid rgba(28,29,32,0.18); }
  .work-list__head { display: none; }
  .work-list__row { grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: 0; row-gap: 4px; height: auto; padding: 20px 0; }
  .work-list__name { grid-column: 1 / 3; font-size: 30px; white-space: normal; overflow-wrap: anywhere; }
  .work-list__cell { font-size: 14px; white-space: normal; color: #6E6F73; }
  .work-list__cell--year { grid-row: 1; grid-column: 3; padding-left: 12px; }
  .work-list__cell:nth-child(3)::before { content: '·'; padding: 0 6px; }
  .work-list__cell:nth-child(2):empty + .work-list__cell::before { content: none; }

  .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin: 32px 20px 80px; }
  .work-card__cover { height: auto; aspect-ratio: 4 / 3; }
  .work-card__name { margin-top: 16px; padding-bottom: 12px; font-size: 26px; }
  .work-card__meta { margin-top: 12px; font-size: 14px; }
}