/* Standalone case-study pages (/realizace/*, /en/work/*).
   Colours come from the case palette tokens in shopify-vyvoj.css — the body
   carries .case-page plus the case class (e.g. .case-facederma-new) — so a page
   and its homepage section always share one palette. This file is layout only. */

body.case-page {
  background:
    radial-gradient(circle at var(--case-glow-x,80%) 4%,rgba(var(--case-rgb),var(--case-glow)),transparent 38%),
    var(--case-canvas);
  color:var(--case-strong);
}
/* The nav is transparent with light text until scroll; on the cream Molecules
   page that would disappear, so case pages keep it solid from the start. */
body.case-page .nav-wrap { border-color:var(--line); background:rgba(10,10,10,.96); color:#efeee8; }
body.case-page footer { background:#0a0a0a; }

.case-hero {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
  gap:clamp(40px,6vw,96px);
  align-items:end;
  padding-top:clamp(130px,17vh,190px);
  padding-bottom:clamp(44px,5vw,72px);
}
.case-hero .case-order { font-size:12px; }
.case-hero .case-logo-title { margin:26px 0 30px; line-height:1; }
.case-hero h1 { max-width:20ch; margin:0; font-size:clamp(34px,4.3vw,64px); line-height:1.03; letter-spacing:-.055em; }
.case-hero h1 em { color:var(--case-accent); font-style:normal; }
.case-lead { max-width:660px; margin:26px 0 0; color:var(--case-body); font-size:clamp(15px,1.2vw,18px); line-height:1.72; }

.case-facts { margin:0; border-top:1px solid var(--case-line); }
.case-facts div { display:grid; grid-template-columns:112px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--case-line); }
.case-facts dt { color:var(--case-accent); font:500 12px/1.7 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.case-facts dd { margin:0; color:var(--case-strong); font-size:14px; line-height:1.55; }
.case-facts a { color:inherit; text-decoration:underline; text-decoration-color:rgba(var(--case-rgb),.55); text-underline-offset:3px; }

.case-media { padding-bottom:clamp(56px,7vw,100px); }
.case-media .media-frame { border-color:rgba(var(--case-rgb),.22); }
.case-media .media-frame figcaption { font-size:12px; }

.case-section {
  display:grid;
  grid-template-columns:minmax(190px,.4fr) minmax(0,1fr);
  gap:clamp(30px,6vw,96px);
  padding-top:clamp(52px,6vw,88px);
  padding-bottom:clamp(52px,6vw,88px);
  border-top:1px solid var(--case-line);
}
.case-section > header .work-index { color:var(--case-accent); }
.case-section h2 { margin:16px 0 0; font-size:clamp(26px,2.7vw,40px); line-height:1.06; letter-spacing:-.05em; }
.case-prose p { max-width:720px; margin:0 0 16px; color:var(--case-body); font-size:16px; line-height:1.8; }
.case-prose p:last-child { margin-bottom:0; }
.case-list { max-width:760px; margin:0; padding:0; list-style:none; border-top:1px solid var(--case-line); }
.case-list li { position:relative; padding:14px 0 14px 26px; border-bottom:1px solid var(--case-line); color:var(--case-body); font-size:15px; line-height:1.65; }
.case-list li::before { content:""; position:absolute; left:2px; top:23px; width:8px; height:8px; border-radius:50%; background:var(--case-accent); }

.case-page .case-scope { max-width:900px; }

.case-quote { max-width:820px; margin:0; padding-left:24px; border-left:2px solid var(--case-accent); color:var(--case-strong); font-size:clamp(19px,1.9vw,27px); line-height:1.45; letter-spacing:-.03em; }
.case-quote cite { display:block; margin-top:18px; color:var(--case-body); font:500 12px "DM Mono",monospace; font-style:normal; letter-spacing:.08em; text-transform:uppercase; }

.case-page .case-action { max-width:420px; margin-top:28px; font-size:12px; }

.case-links { max-width:900px; margin:0; padding:0; list-style:none; border-top:1px solid var(--case-line); }
.case-links a { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--case-line); color:var(--case-strong); font-size:17px; line-height:1.35; letter-spacing:-.02em; transition:padding-left .3s ease; }
.case-links a:hover { padding-left:8px; }
.case-links small { display:block; margin-top:5px; color:var(--case-body); font-size:13px; letter-spacing:0; }
.case-links b { color:var(--case-accent); font-size:18px; font-weight:400; }

/* Team projects: the scope of the whole project, then a source note. */
.case-source { max-width:760px; margin:18px 0 0; color:var(--case-body); font-size:13px; line-height:1.65; }
.case-source a { color:var(--case-strong); text-decoration:underline; text-decoration-color:rgba(var(--case-rgb),.6); text-underline-offset:3px; }

/* Data map: one admin record on the left, the places it surfaces on the right. */
.data-map { display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); gap:18px; align-items:stretch; max-width:900px; margin:30px 0 0; }
.data-map-col { padding:22px; border:1px solid var(--case-line); background:rgba(var(--case-rgb),.04); }
.data-map-label { display:block; margin:0 0 14px; color:var(--case-accent); font:500 12px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.data-map ul,.data-map ol { margin:0; padding:0; list-style:none; }
.data-map li { display:flex; flex-direction:column; gap:3px; padding:10px 0; border-top:1px solid var(--case-line); color:var(--case-body); font-size:14px; line-height:1.5; }
.data-map li:first-child { border-top:0; padding-top:0; }
.data-map code { color:var(--case-strong); font:500 12px "DM Mono",monospace; }
.data-map b { color:var(--case-strong); font-weight:600; }
.data-map-arrow { display:flex; align-items:center; justify-content:center; color:var(--case-accent); font-size:24px; }
.data-map-note { margin-top:14px!important; font-size:13px!important; }

/* Bottle-to-game journey and the three markets. */
.journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; max-width:960px; margin:30px 0 0; padding:0; list-style:none; background:var(--case-line); counter-reset:j; }
.journey li { display:flex; flex-direction:column; gap:6px; padding:20px 18px 22px; background:var(--case-canvas); color:var(--case-body); font-size:14px; line-height:1.55; }
.journey span { color:var(--case-accent); font:500 12px "DM Mono",monospace; letter-spacing:.08em; }
.journey b { color:var(--case-strong); font-size:17px; font-weight:600; letter-spacing:-.02em; }
.markets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:960px; margin:18px 0 0; padding:0; list-style:none; }
.markets li { display:flex; flex-direction:column; gap:4px; padding:18px; border:1px solid var(--case-line); color:var(--case-body); font-size:14px; line-height:1.5; }
.markets b { color:var(--case-strong); font-size:16px; }
.markets small { color:var(--case-accent); font:500 12px "DM Mono",monospace; letter-spacing:.04em; }

/* Real screenshots from the live store, each with a caption saying what it shows. */
.case-stills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin:34px 0 0; }
.case-still { margin:0; }
.case-still:first-child:not(:last-child) { grid-column:1/-1; }
.case-still img { display:block; width:100%; height:auto; border:1px solid rgba(var(--case-rgb),.22); background:#fff; }
.case-still figcaption { max-width:640px; margin-top:12px; color:var(--case-body); font-size:13px; line-height:1.6; }

.case-page.case-molecules-new .media-frame { box-shadow:0 24px 70px rgba(0,0,0,.12); }

@media (max-width:960px) {
  .case-hero,.case-section { grid-template-columns:1fr; }
  .case-hero { align-items:start; }
  .case-facts { max-width:640px; }
}
@media (max-width:760px) {
  .case-hero { padding-top:104px; gap:34px; }
  .case-hero .case-logo-title { margin:20px 0 22px; }
  .case-facts div { grid-template-columns:92px 1fr; gap:12px; }
  .case-page .case-scope { grid-template-columns:1fr; gap:0; background:transparent; }
  .case-page .case-scope li { padding:15px 0; border-bottom:1px solid var(--case-line); background:transparent; }
  .case-prose p { font-size:15px; }
  .case-links a { font-size:16px; }
  .data-map { grid-template-columns:1fr; }
  .data-map-arrow { transform:rotate(90deg); height:28px; }
  .journey { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .markets,.case-stills { grid-template-columns:1fr; }
}

.case-page .case-action { font-size:14px; }
@media (max-width:760px) { .case-prose p,.case-list li { font-size:16px; } }