/* Каталог продуктов (/projects.html) и страницы продуктов (/projects/*.html).
   Подключается после /ui.css?v=2. Токены цветов и шрифта берутся из ui.css, здесь не переопределяются. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block}
.wrap{
  max-width:1120px;margin:0 auto;
  padding-left:max(24px,env(safe-area-inset-left,0px));
  padding-right:max(24px,env(safe-area-inset-right,0px));
}
/* текст только для экранного диктора */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* иконка продукта: квадратные и скруглённые исходники выглядят одинаково */
.p-icon{border-radius:22.5%;box-shadow:0 0 0 1px rgba(244,241,234,.10);background:var(--surface)}

/* ── переход между каталогом и карточкой: иконка переезжает (где браузер умеет) ── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ───────────── КАТАЛОГ ───────────── */
.cat-head{padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px)}
.cat-head h1{font:700 clamp(36px,4.4vw,52px)/1.06 var(--ui);letter-spacing:-.03em}
.cat-head p{margin-top:14px;max-width:560px;font:400 clamp(17px,1.5vw,19px)/1.5 var(--ui);color:var(--text-2)}

.cat{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:28px 8px}
.cat-more{display:flex;flex-wrap:wrap;gap:4px 24px;padding:clamp(40px,5vw,56px) 0 clamp(80px,10vw,128px)}

/* плитка: иконка, название, одна строка; вся плитка одна ссылка */
.tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  height:100%;padding:16px 6px 18px;border-radius:22px;
  color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease;
}
.tile-icon{
  width:88px;height:88px;flex:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.tile-text{display:block;width:100%;min-width:0}
.tile-name{
  display:block;margin-top:14px;max-width:100%;
  font:600 15px/1.25 var(--ui);letter-spacing:-.012em;color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tile-line{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;min-height:calc(13px * 1.35 * 2);
  font:400 13px/1.35 var(--ui);letter-spacing:-.003em;color:var(--text-3);
  text-wrap:balance;
}
@media (hover:hover){
  .tile:hover{background:var(--surface)}
  .tile:hover .tile-icon{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(244,241,234,.14),0 10px 24px -8px rgba(0,0,0,.7)}
}
.tile:active{background:var(--surface-2)}
.tile:active .tile-icon{transform:scale(.96);transition-duration:.1s}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* планшет: две колонки строк, как списки App Store */
@media (max-width:1099px){
  .cat{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .cat > li{border-top:1px solid var(--line)}
  .cat > li:nth-child(-n+2){border-top:0}
  .cat .tile{flex-direction:row;align-items:center;text-align:left;gap:16px;min-height:92px;padding:14px 12px;margin:0 -12px;border-radius:16px}
  .cat .tile-icon{width:64px;height:64px}
  .cat .tile-text{flex:1}
  .cat .tile-name{margin-top:0;font-size:17px;line-height:1.3}
  .cat .tile-line{margin-top:2px;min-height:0;-webkit-line-clamp:1;font-size:15px}
  .cat .tile::after{
    content:"";flex:none;width:8px;height:8px;margin-right:6px;
    border:solid var(--text-3);border-width:0 1.75px 1.75px 0;transform:rotate(-45deg);
  }
}
/* телефон: одна колонка */
@media (max-width:599px){
  .cat{grid-template-columns:minmax(0,1fr)}
  .cat > li:nth-child(2){border-top:1px solid var(--line)}
  .cat .tile{min-height:84px;padding:12px;gap:14px}
  .cat .tile-icon{width:60px;height:60px}
}
@media (prefers-reduced-motion:reduce){.tile:hover .tile-icon,.tile:active .tile-icon{transform:none}}

/* ───────────── СТРАНИЦА ПРОДУКТА ───────────── */
.back{margin-top:16px}

/* шапка продукта */
.ph{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:32px;align-items:center;padding:clamp(24px,4vw,40px) 0 clamp(40px,5vw,56px)}
.ph-icon{grid-row:1 / span 2;align-self:center;width:96px;height:96px}
.ph-title{align-self:end}
.ph h1{font:700 clamp(30px,4vw,44px)/1.08 var(--ui);letter-spacing:-.03em}
.ph-sub{margin-top:8px;max-width:640px;font:400 clamp(17px,1.6vw,20px)/1.4 var(--ui);letter-spacing:-.01em;color:var(--text-2)}
.ph-more{align-self:start}
.ph-meta{margin-top:10px;font:400 15px/1.4 var(--ui);color:var(--text-3)}
.ph-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ph-note{margin-top:14px;font:400 15px/1.45 var(--ui);color:var(--text-3)}

/* секции */
.sec{border-top:1px solid var(--line);padding:clamp(32px,4vw,48px) 0}
.sec h2{font:700 clamp(22px,2.2vw,26px)/1.2 var(--ui);letter-spacing:-.02em;margin-bottom:18px}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-row h2{margin-bottom:0}
.sec-text{max-width:760px;font:400 clamp(17px,1.5vw,18px)/1.6 var(--ui);color:var(--text-2)}
.lead{max-width:760px;margin-bottom:24px;font:400 clamp(17px,1.5vw,18px)/1.6 var(--ui);color:var(--text-2)}

/* «Где открыть»: список строк в одной карточке, справа «Скоро» */
.where{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.list{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.row{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 18px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
.list li + li .row::before{content:"";position:absolute;top:0;left:68px;right:0;height:1px;background:var(--line)}
@media (hover:hover){a.row:hover{background:var(--surface-2)}}
a.row:active{background:rgba(244,241,234,.08)}
a.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:20px}
.glyph{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(244,241,234,.07);color:var(--paper)}
.glyph svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.row-t{flex:1;min-width:0}
.row-t b{display:block;font:600 17px/1.3 var(--ui);letter-spacing:-.012em}
.row-t span{display:block;margin-top:2px;font:400 14px/1.35 var(--ui);color:var(--text-3)}
.row-act{flex:none;display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--ui);color:var(--paper)}
.row-act svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.row.off .glyph{color:var(--text-3);background:rgba(244,241,234,.04)}
.row.off .row-t b{color:var(--text-2);font-weight:500}
.row.off .row-act{color:var(--text-3);font-weight:500}
.soon-label{margin:0 0 10px 2px}

/* «Возможности» */
.feat{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.feat li{padding:16px 0;border-top:1px solid var(--line);font:400 17px/1.45 var(--ui);letter-spacing:-.008em}
.feat li:nth-child(-n+2){border-top:0;padding-top:4px}
.note{margin-top:20px;font:400 14px/1.45 var(--ui);color:var(--text-3)}

/* «Информация» */
.info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px}
.info dt{font:400 14px/1.35 var(--ui);color:var(--text-3)}
.info dd{margin-top:4px;font:500 16px/1.4 var(--ui);letter-spacing:-.01em}

/* «Другие продукты»: та же плитка, что в каталоге, поменьше */
.shelf{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.shelf .tile-icon{width:72px;height:72px}
.shelf .tile-name{margin-top:12px}
.shelf .tile-line{min-height:0;-webkit-line-clamp:1}
.p-end{height:clamp(32px,5vw,64px)}

@media (max-width:1099px){
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
}
/* экраны продукта: снимки на тестовом аккаунте, 16:10 */
.shots{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.shots a{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:var(--surface);transition:box-shadow .15s}
.shots a:hover{box-shadow:0 0 0 1px var(--line-strong)}
.shots a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.shots img{width:100%;height:auto;aspect-ratio:16/10}
.shots figcaption{margin-top:12px;max-width:520px;font:400 15px/1.5 var(--ui);color:var(--text-2)}
/* снимки iPhone: четыре в ряд, на телефоне лента с прокруткой */
.shots.phone{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
.shots.phone a{border-radius:28px}
.shots.phone img{aspect-ratio:1206/2622}
.shots.phone figcaption{font-size:14px}

@media (max-width:900px){
  .shots{grid-template-columns:minmax(0,1fr)}
  .shots.phone{grid-template-columns:repeat(2,minmax(0,1fr))}
  .where{grid-template-columns:minmax(0,1fr)}
  .info{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .shots.phone{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:0 24px;scroll-padding:0 24px}
  .shots.phone::-webkit-scrollbar{display:none}
  .shots.phone li{flex:0 0 62%;scroll-snap-align:start}
  .ph{grid-template-columns:96px minmax(0,1fr);column-gap:18px}
  .ph-icon{grid-row:1}
  .ph-title{align-self:center}
  .ph-more{grid-column:1 / -1;margin-top:8px}
  .ph-actions .btn{flex:1 1 100%}
  .row-act .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .row-act svg{width:18px;height:18px}
  .feat{grid-template-columns:minmax(0,1fr)}
  .feat li:nth-child(2){border-top:1px solid var(--line);padding-top:16px}
  .shelf{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:0 24px;scroll-padding:0 24px}
  .shelf::-webkit-scrollbar{display:none}
  .shelf li{flex:0 0 116px;scroll-snap-align:start}
}

/* ───────────── ПОДВАЛ как на главной ───────────── */
footer{
  padding:32px max(24px,calc((100% - 1072px) / 2)) calc(32px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:14px;color:var(--text-3);
}
footer a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
footer a:hover{color:var(--paper)}
.foot-docs{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:560px){
  footer{flex-direction:column;align-items:flex-start;gap:4px}
}