/* ═══════════════════════════════════════════════════════════════════════════
   WORKS — the portfolio page: one card per completed job.
   Loaded only on the works page (see 'styles' in inc/routes.php), alongside
   contact.css, because the page ends with the enquiry form.

   A card is photos on top, then the description and, beside it, what was done
   and what it cost. Two photo layouts share the card:

     .case-ba        a before/after pair, 3:4 halves
     .case-gallery   an ordered run of 4:3 frames for a job with stages

   Background stays paper the whole way down; the dark bands on this page are
   the page banner at the top and the footer at the bottom.
   ═══════════════════════════════════════════════════════════════════════════ */

.cases{
  padding:var(--pad-y) var(--pad-x) 0;
  display:grid;gap:clamp(36px,5vw,64px);
}
.case{
  background:#fff;border-radius:16px;
  box-shadow:0 18px 46px -28px rgba(0,0,0,0.42);
  overflow:hidden;
}

/* ── PHOTOS ──────────────────────────────────────────────────────────────── */
.case-media{padding:clamp(14px,1.8vw,20px)}

/* Before/after. The halves stay side by side at every width, down to 320px —
   they read as one comparison and stacking them breaks the whole point of the
   section. Capped at 640px so a pair of 3:4 portraits does not tower over the
   text that explains it; above that cap each half is a steady 320px, which is
   what the sizes attribute in the template assumes. */
.case-ba{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  max-width:640px;margin:0 auto;
}
.ba{position:relative;margin:0}
.ba img{
  display:block;width:100%;aspect-ratio:3/4;
  object-fit:cover;background:#eceae2;border-radius:8px;
}
/* The ДО/ПОСЛЕ labels are burned into the source photographs; the build script
   crops them off so they can live here as text and therefore translate. */
.ba-tag{
  position:absolute;top:10px;left:10px;
  background:rgba(255,255,255,0.94);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  padding:4px 9px;border-radius:4px;
}
.ba:last-child .ba-tag{left:auto;right:10px}

/* Stage gallery. The frames read left to right and their numbers come from the
   loop index, so the order in inc/media.php is the chronology of the job. */
.case-gallery{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,16px);
}
.shot{margin:0}
.shot img{
  display:block;width:100%;aspect-ratio:4/3;
  object-fit:cover;background:#eceae2;border-radius:8px;
}
.shot-cap{margin-top:10px;font-size:14px;line-height:1.45;color:var(--body)}
.shot-n{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--amber-dark);margin-bottom:3px;
}

/* ── TEXT ────────────────────────────────────────────────────────────────── */
.case-body{
  padding:clamp(16px,2.2vw,26px) clamp(18px,2.6vw,32px) clamp(24px,3vw,34px);
}
.case-cat{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--amber-dark);
}
.case-h{
  font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.25;
  margin:10px 0 0;text-wrap:balance;
}
.case-cols{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:start;margin-top:22px;
}
.case-lead{
  font-family:var(--sora);font-weight:500;
  font-size:clamp(16px,1.8vw,18px);line-height:1.55;
  color:#2a2a28;margin:0;text-wrap:pretty;
}
.case-text{
  font-size:16px;line-height:1.7;color:var(--body);
  margin:16px 0 0;text-wrap:pretty;
}

/* ── WHAT WAS DONE, AND WHAT IT COST ─────────────────────────────────────── */
.case-side{background:var(--sand);border-radius:12px;padding:clamp(18px,2.2vw,24px)}
.case-scope-h{
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
}
.case-scope{list-style:none;margin:14px 0 0;padding:0}
.case-scope li{
  position:relative;padding:0 0 0 22px;margin-bottom:10px;
  font-size:15px;line-height:1.45;color:var(--body);
}
.case-scope li:last-child{margin-bottom:0}
.case-scope li::before{
  content:"";position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:2px;background:var(--amber);
}
/* The price is the reason this page exists. Somebody scanning for "what would
   this cost me" should be able to land on it without reading the description,
   which is why it sits on its own rule at the foot of the panel. */
.case-price{
  display:flex;align-items:baseline;gap:14px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.case-price-l{font-size:15px;color:var(--body)}
.case-price-v{
  font-family:var(--sora);font-weight:700;font-size:22px;
  color:var(--amber-dark);white-space:nowrap;margin-left:auto;
}
.case-price-n{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--muted);margin:10px 0 0;
}

/* What the prices do and do not cover. Sits outside the cards deliberately —
   it qualifies all of them, not one. */
.cases-note{
  padding:clamp(28px,4vw,40px) var(--pad-x) 0;
  max-width:calc(820px + var(--pad-x) * 2);
  font-size:14px;line-height:1.7;color:var(--muted);margin:0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .case-cols{grid-template-columns:1fr;gap:26px}
}
@media(max-width:700px){
  /* Three frames across a phone would be thumbnails. One column gives each
     stage a readable size, and the caption keeps the sequence clear. */
  .case-gallery{grid-template-columns:1fr;gap:20px}
}
@media(max-width:480px){
  .ba-tag{top:6px;left:6px;font-size:10px;padding:3px 6px}
  .ba:last-child .ba-tag{left:auto;right:6px}
  .case-price-v{font-size:20px}
}