/* ===== shared styles of the standalone case pages (case-*.html) ===== */
:root{ --font: 'Onest', sans-serif; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body.case-page{
  font-family: var(--font); color: var(--m-ink); background: var(--m-bg);
  min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; }
::selection{ background: var(--m-ink); color:#fff; }

/* slim top bar: back to the project list */
.case-top{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--m-line);
}
.case-top-inner{
  max-width: 1120px; margin: 0 auto; padding: 14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; font-weight:600;
}
.case-back{ display:inline-flex; align-items:center; gap:8px; color: var(--m-ink); }
.case-back:hover{ color:#000; text-decoration:underline; }
.case-handle{ color: var(--m-muted); }
.case-handle:hover{ color: var(--m-ink); }

/* full-width white page, content in one centred column */
.case-main{ max-width: 1120px; margin: 0 auto; padding: 64px 32px 120px; }
.case-foot{ margin-top: 88px; padding-top: 28px; border-top: 1px solid var(--m-line); font-size:14px; font-weight:600; }
@media (max-width: 620px){
  .case-top-inner{ padding: 12px 16px; }
  .case-main{ padding: 36px 16px 80px; }
  .case-foot{ margin-top: 56px; }
}

/* =======================================================================
   CASE-STUDY MODALS — light editorial "paper" long-read, modelled closely
   on jacquelineji.com/projects/wxg.html (measured via computed styles):
   white panel, warm near-black text, large serif-weight headings, huge
   whitespace, plain (unboxed) meta row, no icon badges.
   ======================================================================= */

:root{
  --m-bg: #FFFFFF;
  --m-ink: #241a0d;
  --m-muted: #ACACAC;
  --m-line: #EBE7E1;
  --m-soft: #F4F2EF;
}

.card{ background:none; border:none; box-shadow:none; padding:0; }

/* section heading sits in a left label column, content flows in the right column.
   row-gap carries ALL vertical spacing between "Проблема"/"Решение"-style groups now,
   so any inline margin-top left over from the old single-column layout must be
   neutralised — otherwise the label (column 1) and its own first line of content
   (column 2) drift out of alignment. */
.card:has(> .sec-head){ display:grid; grid-template-columns: 220px 1fr; column-gap: 56px; align-items:start; }
.card:has(> .sec-head) > *{ grid-column: 2; }
.card:has(> .sec-head) > .sec-head{ grid-column: 1; margin-top: 0 !important; }
.card > .subcase-title{ grid-column: 1 / -1 !important; }
@media (max-width: 760px){
  .card:has(> .sec-head){ grid-template-columns: 1fr; row-gap: 8px; }
  .card:has(> .sec-head) > *{ grid-column: 1; }
}

.page-section{ display:flex; flex-direction:column; gap: 64px; }

.case-main h1{ font-weight: 800; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -0.02em; line-height: 1.15; color: var(--m-ink); }

.title-row{ display:flex; align-items:center; gap: 18px; }
.title-logo{
  max-height:52px; width:auto; max-width:150px; object-fit: contain; flex-shrink: 0;
  background:#fff; border-radius:10px; padding:6px 10px;
}

.meta-list{
  display:flex; flex-direction:column; gap: 16px; margin-top:28px; padding-top:28px;
  border-top: 1px solid var(--m-line);
}
.meta-list li{ display:flex; gap: 24px; font-size: 16px; color: var(--m-ink); line-height:1.6; }
.meta-list li b{ flex: 0 0 140px; font-weight: 400; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color: var(--m-muted); padding-top:2px; }
@media (max-width: 560px){
  .meta-list li{ flex-direction:column; gap:4px; }
  .meta-list li b{ flex-basis:auto; }
}

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(22,163,74,.1); color: #16A34A;
  font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.status-pill::before{ content:""; width: 6px; height:6px; border-radius:50%; background: currentColor; }
.status-pill.status-progress{ background: rgba(217,119,6,.1); color: #D97706; }

.about-text{ font-size: 17px; color: var(--m-ink); line-height:1.85; }

.exp-list{ display:flex; flex-direction:column; gap: 16px; }
.exp-list li{ position:relative; padding-left: 20px; font-size: 17px; color: var(--m-ink); line-height: 1.85; }
.exp-list li::before{ content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background: var(--m-muted); }
.exp-list li i, .exp-list li em{ font-style: normal; color: #8A8A8A; }
.exp-list li b{ color: var(--m-ink); }

.code-inline{ font-family: 'Courier New', monospace; background: var(--m-soft); color: #B34700; padding: 2px 6px; border-radius: 5px; font-size: 13px; }

.subcase-title{ font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; letter-spacing: -0.015em; color: var(--m-ink); margin-bottom: 28px; }

.sec-head{ display:flex; align-items:center; gap: 10px; margin-bottom: 0; }
.sec-icon{ display:none; }
.sec-head span{ font-weight: 800; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.01em; text-transform:none; color: var(--m-ink); }

.figma-link{ display:inline-flex; align-items:center; gap:4px; font-weight: 700; color: var(--m-ink); border-bottom:1px solid var(--m-line); }
.figma-link:hover{ color: #000; border-color: var(--m-ink); }

.figma-banner{
  display:inline-flex; align-items:center; gap: 10px; background:none; border:none;
  border-bottom: 1px solid var(--m-line);
  padding: 0 0 6px; margin-top: 20px; font-weight: 700; font-size: 15px; color: var(--m-ink);
}
.figma-banner svg{ width:18px; height:18px; flex-shrink:0; }
.figma-banner:hover{ border-color: var(--m-ink); }

.ui-kit-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ui-kit-item{ display:flex; flex-direction:column; gap: 10px; }
.ui-kit-thumb{
  border-radius: 16px; background: transparent;
  position: relative; overflow: hidden;
}
.ui-kit-item span{ text-align:center; font-size: 13px; font-weight: 600; color: var(--m-ink); overflow-wrap:anywhere; word-break:break-word; }
.ui-kit-grid--tiles{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px){ .ui-kit-grid{ grid-template-columns: repeat(2, 1fr); } }

/* two catalogue-style grids deliberately keep a fixed, uniform tile size
   instead of sizing to each image individually:
   --tiles   (b2b block library)         — fills the tile, cropped (cover)
   --uniform (design-system component grid) — whole image visible, letterboxed (contain) */
.ui-kit-grid--tiles .ui-kit-thumb,
.ui-kit-grid--uniform .ui-kit-thumb{ aspect-ratio: 16/11; }
.ui-kit-grid--tiles .media-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ui-kit-grid--uniform .ui-kit-thumb{ background: var(--m-soft); }
.ui-kit-grid--uniform .media-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

.media-fill{ display:block; width:100%; height:auto; }

.shot-placeholder{
  border-radius: 24px; background: transparent;
  position: relative; overflow: hidden; cursor: zoom-in;
}
.shot-caption{ font-size: 13.5px; color: var(--m-muted); font-style: normal; text-align:center; margin-top: 14px; margin-bottom: 28px; }

.compare-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare-col{ display:flex; flex-direction:column; gap: 14px; }
.compare-pill{
  display:inline-flex; align-items:center; width: fit-content; font-weight: 700; font-size: 13px;
  letter-spacing: .03em; padding: 8px 20px; border-radius: 999px;
}
.compare-pill.was{ background: var(--m-soft); color: var(--m-muted); }
.compare-pill.now{ background: var(--m-ink); color: #fff; }
@media (max-width: 620px){ .compare-row{ grid-template-columns: 1fr; } }

.tg-post{ padding:0; max-width: 300px; }

.cv-file{
  display:flex; align-items:center; gap: 12px; border: 1px solid var(--m-line); border-radius: 14px;
  padding: 10px 14px; width: fit-content; transition: border-color .15s ease;
}
.cv-file:hover{ border-color: var(--m-ink); }
.cv-file-icon{ background: var(--m-ink); color: #fff; font-weight: 800; font-size: 11px; border-radius: 8px; padding: 6px 8px; letter-spacing: .02em; }
.cv-file-meta{ display:flex; flex-direction:column; }
.cv-file-name{ font-weight:700; font-size: 13.5px; color: var(--m-ink); }
.cv-file-size{ font-size: 11.5px; color: var(--m-muted); }

table{ color: var(--m-ink); }

@media (max-width: 620px){ .page-section{ gap: 44px; } }

body.modal-open{ overflow: hidden; }

.fs-btn{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background: rgba(16,17,20,.75); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transition: opacity .15s ease; z-index: 3;
}
.fs-host:hover .fs-btn{ opacity:1; }
.fs-btn svg{ width:16px; height:16px; }

.lightbox-overlay{
  display:none; position:fixed; inset:0; background: rgba(4,4,6,0.94); z-index: 500;
  align-items:center; justify-content:center; padding: 32px; cursor: zoom-out;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img, .lightbox-overlay video{
  max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.lightbox-close{
  position:fixed; top:20px; right:24px; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; border:none; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index: 501;
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }

/* ---- case "Ферма Цветковых": text rhythm ---- */
.case-ferma .exp-list{ margin-left:0; }
.case-ferma :where(.card:has(> .sec-head)) > :where(:not(.sec-head)){ margin-top:16px; }
.case-ferma .card > .shot-placeholder{ margin-top:24px; }
.case-ferma .card > .shot-caption{ margin-top:14px; margin-bottom:20px; }
.case-ferma .fz-sub{ font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--m-ink); }
.case-ferma .sec-head + *{ margin-top:0; }