/* ============================================================
   Сторінка розбору проєкту
   ============================================================ */
.cs{min-height:100svh;background:var(--ab-bg);color:var(--ab-fg)}
.cs__hero{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.cs__cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);display:block;margin-top:clamp(1rem,2.5vw,2rem)}
.cs__head{position:relative;margin-top:clamp(-4rem,-6vw,-2rem);
  background:color-mix(in srgb,var(--ab-fg) 7%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--ab-brd);border-radius:var(--r-lg);
  padding:clamp(1.2rem,3vw,2.2rem);display:flex;flex-direction:column;
  gap:clamp(.6rem,1.4vw,1rem);max-width:54rem}
.cs__title{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);line-height:1.04;margin:0;color:var(--ab-fg)}
.cs__sum{font-size:clamp(1rem,.9rem + .4vw,1.18rem);line-height:1.55;color:var(--ab-fg2);margin:0;max-width:46ch}
.cs__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.cs__chips li{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  padding:.4rem .7rem;border-radius:99px;border:1px solid var(--ab-brd);color:var(--ab-fg2)}
.cs__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.3rem}
.cs__private{font-size:.9rem;color:var(--ab-fg3);align-self:center}

.cs__body{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,4rem) var(--gutter) 6rem;
  display:flex;flex-direction:column;gap:clamp(2rem,4vw,3.4rem)}
.cs__h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);margin:0 0 .8rem;color:var(--ab-fg)}
.cs__task{font-size:1.05rem;line-height:1.6;color:var(--ab-fg2);max-width:60ch;margin:0;
  padding-left:1.1rem;border-left:2px solid var(--ab-acc)}
.cs__cols{display:grid;gap:clamp(1.4rem,3vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.cs__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem}
.cs__list li{position:relative;padding-left:1.6rem;font-size:.97rem;color:var(--ab-fg2);line-height:1.5}
.cs__list li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:color-mix(in srgb,var(--ab-fg) 30%,transparent)}
.cs__list--yes li::before{width:5px;height:9px;border-radius:0;background:none;top:.35em;
  border-right:1.8px solid var(--ab-acc);border-bottom:1.8px solid var(--ab-acc);transform:rotate(42deg)}
.cs__block--notes{padding:clamp(1rem,2.4vw,1.6rem);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--ab-fg) 5%,transparent);border:1px solid var(--ab-brd)}
.cs__note{font-size:.96rem;line-height:1.6;color:var(--ab-fg2);margin:0 0 .7rem;max-width:64ch}
.cs__note:last-child{margin-bottom:0}
.cs__gal{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.cs__shot{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--ab-brd);
  background:color-mix(in srgb,var(--ab-fg) 4%,transparent)}
.cs__shot img{width:100%;height:auto;display:block}
.cs__shot figcaption{font-size:.82rem;color:var(--ab-fg3);padding:.6rem .8rem}
.cs__cta{padding:clamp(1.4rem,3vw,2.4rem);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--ab-acc) 10%,transparent);border:1px solid var(--ab-brd);
  display:flex;flex-direction:column;gap:.7rem}
@media(max-width:700px){.cs__head{margin-top:-1.5rem}}

/* skip-посилання на підсторінках */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .7rem 1.1rem; border-radius: 0 0 10px 0;
  background: var(--ab-acc); color: var(--ab-acc-tx); font-weight: 600;
}
.skip:focus { left: 0; }

/* посилання «Усі проєкти» — повноцінна ціль дотику */
a.kv__step { min-height: 44px; display: inline-flex; align-items: center; }

/* ============================================================
   Каталог розборів
   ============================================================ */
.cx{max-width:var(--maxw);margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--gutter) 6rem;
  display:flex;flex-direction:column;gap:clamp(1.6rem,3.5vw,2.8rem)}
.cx__head{display:flex;flex-direction:column;gap:clamp(.6rem,1.5vw,1rem);max-width:52rem}
.cx__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.cx__filters .chip{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.55rem 1rem;border-radius:99px;cursor:pointer;font:inherit;font-size:.92rem;
  background:color-mix(in srgb,var(--ab-fg) 6%,transparent);
  border:1px solid var(--ab-brd);color:var(--ab-fg2);
  transition:background var(--d-fast) var(--ease-out),color var(--d-fast) var(--ease-out)}
.cx__filters .chip:hover{color:var(--ab-fg)}
.cx__filters .chip.is-on{background:var(--ab-acc);color:var(--ab-acc-tx);border-color:transparent}
.chip__n{font-family:var(--font-mono);font-size:.7rem;opacity:.65}

.cx__grid{display:grid;gap:clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.cx__card[hidden]{display:none}
.cx__link{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;
  background:color-mix(in srgb,var(--ab-fg) 5%,transparent);
  border:1px solid var(--ab-brd);color:inherit;
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),
             border-color var(--d-base) var(--ease-out)}
.cx__link:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ab-acc) 45%,transparent);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.6)}
.cx__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:color-mix(in srgb,var(--ab-fg) 8%,transparent)}
.cx__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease-out)}
.cx__link:hover .cx__media img{transform:scale(1.05)}
.cx__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--ab-bg) 92%,transparent) 0%,transparent 58%)}
.cx__body{display:flex;flex-direction:column;gap:.55rem;padding:clamp(1rem,2vw,1.3rem);flex:1}
.cx__kicker{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ab-fg3)}
.cx__name{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:1.18rem;color:var(--ab-fg)}
.cx__sum{font-size:.93rem;line-height:1.5;color:var(--ab-fg2);flex:1}
.cx__body .case__go{margin-top:.3rem}

/* --- Компактна форма на підсторінках --- */
.mini{display:grid;gap:.65rem;grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:.6rem;max-width:36rem}
@media(max-width:560px){.mini{grid-template-columns:1fr}}
.mini input{width:100%;padding:.9em 1.05em;border-radius:11px;font:inherit;font-size:.96rem;
  color:var(--ab-fg);background:color-mix(in srgb,var(--ab-fg) 6%,transparent);
  border:1px solid var(--ab-brd);transition:border-color var(--d-fast) var(--ease-out)}
.mini input::placeholder{color:var(--ab-fg3)}
.mini input:focus{outline:none;border-color:var(--ab-acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ab-acc) 20%,transparent)}
.mini__wide{grid-column:1/-1}
.mini__hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.mini__status{grid-column:1/-1;font-size:.86rem;min-height:1.2em;color:var(--ab-fg3)}
.mini__status[data-kind="err"]{color:#E8807A}
.mini__alt{grid-column:1/-1;font-size:.86rem;color:var(--ab-fg3)}
.mini__alt a{color:var(--ab-acc)}

/* --- Повʼязані проєкти --- */
.cs__related{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.cs__rel{display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--ab-brd);background:color-mix(in srgb,var(--ab-fg) 5%,transparent);
  color:inherit;transition:transform var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
.cs__rel:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ab-acc) 45%,transparent)}
.cs__rel img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.cs__rel-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ab-fg3);padding:.75rem .9rem 0}
.cs__rel-n{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ab-fg);
  padding:.2rem .9rem 1rem;letter-spacing:-.02em}

/* --- Хлібні крихти --- */
.cs__crumbs{max-width:var(--maxw);margin:0 auto;padding:clamp(.9rem,2vw,1.4rem) var(--gutter) 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--ab-fg3)}
.cs__crumbs a{color:var(--ab-fg3);min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--d-fast) var(--ease-out)}
.cs__crumbs a:hover{color:var(--ab-fg)}
.cs__crumbs span[aria-hidden]{opacity:.4}
.cs__crumbs [aria-current]{color:var(--ab-fg2)}

/* ============================================================
   Друк розбору: власник роздруковує для партнера чи інвестора
   ============================================================ */
@media print {
  @page { margin: 14mm; }
  .cs { background: #fff !important; color: #111 !important; }
  .kv__top, .cs__crumbs, .tg-fab, .to-top, .cs__cta, .cs__related,
  .mini, .cs__acts, .skip { display: none !important; }
  .cs__hero { padding: 0; }
  .cs__cover { border-radius: 0; margin: 0 0 8mm; max-height: 70mm; object-fit: cover; }
  .cs__head { margin: 0; padding: 0; background: none !important; border: 0;
              backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cs__title { font-size: 22pt; color: #111 !important; }
  .cs__sum, .cs__task, .cs__note, .cs__list li { color: #222 !important; }
  .cs__h2 { font-size: 13pt; color: #111 !important; margin-top: 6mm; }
  .cs__body { padding: 0; gap: 6mm; }
  .cs__chips li { border-color: #bbb !important; color: #333 !important; }
  .cs__task { border-left-color: #888 !important; }
  .cs__list--yes li::before { border-color: #444 !important; }
  .cs__block--notes { background: #f5f5f5 !important; border-color: #ddd !important; }
  .cs__gal { grid-template-columns: repeat(2, 1fr); }
  .cs__shot { border-color: #ddd !important; break-inside: avoid; }
  .cs__shot figcaption { color: #555 !important; }
  /* адреса сторінки в кінці — щоб з паперу можна було повернутись */
  .cs__body::after {
    content: 'dstudio.com.ua · Дмитро Садченко · +38 067 429 74 47';
    display: block; margin-top: 8mm; padding-top: 4mm;
    border-top: 1px solid #ccc; font-size: 9pt; color: #666;
  }
}

.cs__checked{margin:.9rem 0 0;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.06em;color:var(--ab-fg3);display:flex;align-items:center;gap:.5rem}
.cs__checked::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ab-acc);opacity:.7;flex:none}