/* ARTTIM — стили внутренних экранов: страница работы, «Все работы»,
   модуль «работа в интерьере». Подключается после style.css и использует те же
   переменные темы, поэтому смена палитры в одном месте меняет весь сайт. */

/* ─────────── хлебные крошки и заголовок раздела ─────────── */
.crumbs{
  font-size:13px;color:var(--mut);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumbs a{border-bottom:1px solid var(--line);padding-bottom:1px}
.crumbs a:hover{color:var(--warm);border-color:rgba(224,167,99,.5)}
.crumbs i{font-style:normal;opacity:.5}

/* ─────────── страница работы ─────────── */
.wp{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.wp__frame{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
/* занять весь кадр, но не раздувать колонку своей шириной (ширина кадра 800 px) */
.wp__img{width:100%;height:auto;display:block;transform-origin:50% 50%;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.wp__frame.is-zoom .wp__img{transform:scale(1.9);transition:transform .18s ease-out}
.wp__frame.is-zoom{cursor:zoom-out}
.wp__frame{cursor:zoom-in}
.wp__zoomhint{
  position:absolute;left:14px;bottom:14px;z-index:3;
  font:600 11px/1 var(--txt);letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);background:rgba(10,9,12,.72);border:1px solid var(--line);
  padding:8px 11px;border-radius:999px;pointer-events:none;backdrop-filter:blur(6px);
}
.wp__frame.is-zoom .wp__zoomhint{color:var(--warm)}
.wp__caption{font-size:13px;color:var(--mut);margin:14px 0 0;padding-left:2px}

.wp__cat{font:700 11.5px/1 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--warm);margin:0 0 14px}
.wp__title{font-size:clamp(26px,4.4vw,40px);margin:0 0 20px}
/* музейная табличка: техника, размер, год, наличие */
.museum{margin:0 0 22px;border-top:1px solid var(--line-soft)}
.museum > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft)}
.museum dt{font:600 10.5px/1.5 var(--txt);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0}
.museum dd{margin:0;font-size:14.5px;color:var(--text)}
.avail{display:inline-flex;align-items:center;gap:7px}
.avail::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--warm)}
.avail--sold::before{background:var(--mut)}
.avail--sold{color:var(--body)}
.wp__desc{font-size:15.5px;color:var(--body)}
.wp__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.wp__hint{font-size:12.5px;color:var(--mut);margin:16px 0 0}

/* переходы между работами */
.wp__steps{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:46px 0 0;padding:18px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.wp__step{display:flex;flex-direction:column;gap:4px;font-size:14px;min-width:0}
.wp__step span{font:600 10.5px/1 var(--txt);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.wp__step b{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.wp__step:hover b{color:var(--warm)}
.wp__step--next{text-align:right;align-items:flex-end}

/* блок запроса цены на странице работы */
.wp__request{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:52px;
  padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2)}
.wp__request h2{font-size:24px;margin-bottom:14px}
.wp__about{font-size:14.5px;color:var(--body)}
.wp__picked{
  display:flex;gap:12px;align-items:center;margin:20px 0 0;padding:12px 14px;
  border:1px solid rgba(224,167,99,.3);border-radius:14px;background:rgba(224,167,99,.06);
}
.wp__picked img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.wp__picked b{display:block;color:var(--text);font-weight:600;font-size:14.5px}
.wp__picked span{font-size:12.5px;color:var(--mut)}

/* ─────────── «Все работы» ─────────── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.filters button{padding:10px 15px;border-radius:999px;border:1px solid var(--line);
  font-size:13.5px;color:var(--body);transition:.18s}
.filters button:hover{border-color:rgba(224,167,99,.4)}
.filters button.on{background:linear-gradient(145deg,var(--warm),var(--warm2));
  color:#120e10;border-color:transparent;font-weight:700}
.filters--sub{margin-top:0}
.filters__label{font:600 10.5px/1 var(--txt);letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin:18px 0 0}
.gcount{font-size:13px;color:var(--mut);margin:16px 0 0}
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.empty{padding:34px;border:1px dashed var(--line);border-radius:var(--radius);color:var(--mut);font-size:14.5px}

/* ─────────── карточка работы становится ссылкой ─────────── */
.work__link{display:block;color:inherit;height:100%}
/* подпись перекрывает низ кадра и пропускает клики насквозь — их ловит ссылка
   карточки; кликабельна только кнопка «Узнать цену» (pointer-events в style.css) */
.work--photo .work__cap{position:absolute}
/* затемнение соседей: наведённая работа остаётся светлой — так видно, что
   каждая карточка открывается. На телефоне наведения нет, правило не работает */
@media (hover:hover){
  .grid:hover .work:not(:hover):not(:focus-within),
  .works:hover .work:not(:hover):not(:focus-within),
  .related__list:hover .work:not(:hover):not(:focus-within){opacity:.42}
  .grid .work,.works .work,.related__list .work{transition:opacity .22s ease}
}

/* ─────────── похожие работы ─────────── */
.related{margin-top:56px}
.related__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}

/* ─────────── модуль «работа в интерьере» ─────────── */
.inroom{margin-top:42px}
.inroom__bar{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.inroom__group{min-width:0}
.inroom__stage{
  position:relative;margin:22px 0 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:#0c0b0e;
}
.inroom__stage img{width:100%;height:auto;display:block}
.inroom__work{
  position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.14);
  transition:left .35s ease,top .35s ease,width .35s ease;
}
.inroom__work img{width:100%;height:auto;display:block}
.inroom__hint{
  position:absolute;right:14px;bottom:14px;z-index:3;
  font:600 11px/1.4 var(--txt);letter-spacing:.06em;
  color:var(--body);background:rgba(10,9,12,.74);border:1px solid var(--line);
  padding:9px 12px;border-radius:12px;backdrop-filter:blur(6px);max-width:70%;
}
.inroom__note{font-size:13px;color:var(--mut);margin:16px 0 0;max-width:80ch}

/* ─────────── адаптив ─────────── */
@media (max-width:1080px){
  .wp{grid-template-columns:1fr;gap:32px}
  .wp__request{grid-template-columns:1fr;gap:28px}
  .works,.related__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .works,.related__list{grid-template-columns:1fr}
  .museum > div{grid-template-columns:112px minmax(0,1fr);gap:10px}
  .wp__steps{flex-direction:column;align-items:flex-start;gap:16px}
  .wp__step--next{text-align:left;align-items:flex-start}
  .wp__request{padding:22px}
  .inroom__hint{position:static;display:block;margin:12px 12px 0;max-width:none;
    background:transparent;border:0;padding:0;backdrop-filter:none;color:var(--mut)}
  .wp__zoomhint{font-size:10px;padding:7px 9px}
  /* подпись остаётся поверх кадра (клик по карточке открывает работу целиком),
     но на телефоне она компактнее — иначе закрывает треть картины */
  .work__cap{padding:24px 11px 10px}
  .work__cap b{font-size:15px}
  .work__cap .work__meta{font-size:11px}
  .work__foot{margin-top:7px}
  .work__price{font-size:10px;padding:7px 9px}
}