/* ════════════════════════════════════════════════════════════════════════
   24-work-detail.css — VOALA detail reference (single design_work)

   Zdroj: Figma VOALA_WEB_2025 → PROJEKT 2157:1538 (2. 9. 2026), hodnoty
   z get_design_context (Inter, black_voala #2A3133, red_voala #EA515B):
   - hlavička končí y=150, hero fotka 1222 × 800 hned pod ní (bez mezery),
     bez zaoblení a stínu
   - o 60 níž dva sloupce 597 + 597 (mezera 28): vlevo kategorie Medium 20
     červená (verzálky lícují s horní hranou fotky vpravo), název Medium
     44/1.2 tracking −0.02em, text Medium 18/1.5 černý šířka 569;
     vpravo 2. a 3. fotka 597 × 447 pod sebou, mezera 60
   - o 60 níž 4. fotka velká 1222 × 800, pak další fotky po dvou
     (597 × 447), mezery 60 svisle / 28 vodorovně
   - konec fotek → linka 184
   - „Naše další práce": linka → verzálky nadpisu 130, nadpis Medium 48/1.3
     na střed, mřížka 4 × 5 dlaždic 287 (11-works.css), mřížka → tlačítko 85,
     pill 187 × 40 Semibold 20, tlačítko → patička 130

   Markup: single-design_work.php + includes/work-detail.php.
   Rytmus (od verzálek) je přepočítaný na margin-top, proto hodnoty nejsou
   kulaté. Fluidní clamp 390 → 1440.
   ════════════════════════════════════════════════════════════════════════ */

.vo-wd {
  --vo-wd-gap:      clamp(25px, calc(12px + 3.333vw), 60px);   /* 60 svisle */
  --vo-wd-gap-col:  clamp(16px, calc(11.55px + 1.143vw), 28px); /* 28 vodorovně */
  font-family: var(--font-base);
}

/* Sekce: hero lícuje s hlavičkou, dole 184 k lince */
.vo-wd-section {
  padding-top: 0;
  padding-bottom: clamp(70px, calc(27.7px + 10.857vw), 184px);
}
.vo-wd-section--builder { padding-top: var(--vo-page-pad-top); }

/* ── Fotky ───────────────────────────────────────────────────────────────
   Ve Figmě hranaté, bez stínu. Poměry: velké 1222:800, malé 597:447.
   Fotky klienta mají různé poměry → object-fit: cover, ořez na střed.
   !important kvůli WC/Divi `height: auto` na obrázcích (viz 20-product-detail).
   ──────────────────────────────────────────────────────────────────────── */
.vo-wd__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--gray-voala);
}
.vo-wd__photo .vo-wd__img,
.vo-wd__photo img.vo-wd__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
}
.vo-wd__photo--hero,
.vo-wd__photo--big  { aspect-ratio: 1222 / 800; }
.vo-wd__photo--side,
.vo-wd__photo--grid { aspect-ratio: 597 / 447; }

/* ── Úvod: text vlevo, dvě fotky vpravo ─────────────────────────────── */
.vo-wd__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--vo-wd-gap) var(--vo-wd-gap-col);
  align-items: start;
  margin-top: var(--vo-wd-gap);
}
.vo-wd__intro--no-side { grid-template-columns: minmax(0, 1fr); }

.vo-wd__side {
  display: grid;
  gap: var(--vo-wd-gap);
}

/* Divi dává každému <p> padding-bottom 1em — rytmus řídí margin-top. */
.vo-wd__text p { padding: 0; }

.vo-wd__cat {
  /* verzálky kategorie lícují s horní hranou fotky vpravo (Figma y=1011 / 1010) */
  margin: -7px 0 0;
  font-size: clamp(16px, calc(14.51px + 0.381vw), 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.vo-wd__cat a {
  color: var(--red-voala);
  text-decoration: none;
  transition: color var(--t-fast);
}
.vo-wd__cat a:hover { color: var(--red-voala-dark); text-decoration: underline; }

.vo-wd__title {
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: clamp(28px, calc(22.06px + 1.524vw), 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--black-voala);
  text-align: left;
}

/* Text: Medium 18/1.5, šířka 569, 60 pod verzálkami názvu */
.vo-wd__desc.vo-content {
  max-width: 569px;
  margin: clamp(26px, calc(19.7px + 1.619vw), 43px) 0 0;   /* .vo-content centruje (margin auto), tady vlevo */
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--black-voala);
}
.vo-wd__desc.vo-content p { margin: 0 0 1.5em; padding: 0; }
.vo-wd__desc.vo-content p:last-child { margin-bottom: 0; }
.vo-wd__desc.vo-content ul,
.vo-wd__desc.vo-content ol { margin: 0 0 1.5em; }
.vo-wd__desc.vo-content strong,
.vo-wd__desc.vo-content b { font-weight: 700; color: var(--black-voala); }
.vo-wd__desc.vo-content a {
  color: var(--red-voala);
  text-decoration: underline;
  text-underline-offset: .12em;
}
.vo-wd__desc.vo-content a:hover { color: var(--red-voala-dark); }

/* ── 4. fotka velká, další po dvou ───────────────────────────────────── */
.vo-wd__photo--big { margin-top: var(--vo-wd-gap); }

.vo-wd__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vo-wd-gap) var(--vo-wd-gap-col);
  margin-top: var(--vo-wd-gap);
}

/* ── Volný obsah za „Číst dál" ───────────────────────────────────────── */
.vo-wd__extra {
  margin-top: clamp(40px, calc(21.1px + 4.857vw), 91px);
}
.vo-wd__extra.vo-content { max-width: none; }
.vo-wd__extra .gallery img,
.vo-wd__extra .wp-block-gallery img { border-radius: 0; }

/* ── Naše další práce ────────────────────────────────────────────────────
   Sdílený vzor sekce (linka + nadpis 48 na střed), jen s odsazeními
   z tohoto framu: linka → verzálky 130, mřížka → tlačítko 85, dole 130.
   Mřížku a dlaždice dodává [vo_works] (11-works.css).
   ──────────────────────────────────────────────────────────────────────── */
.vo-wd-related {
  --vo-page-pad-top:    clamp(50px, calc(25.5px + 6.286vw), 116px);
  --vo-page-pad-bottom: clamp(50px, calc(20.3px + 7.619vw), 130px);
}
/* Tlačítko tu má Figma 187 × 40 / Semibold 20 (na homepage 157 × 32) */
.vo-wd-related .vo-works {
  --vo-works-gap-btn: clamp(50px, calc(37px + 3.333vw), 85px);
  --vo-works-btn-h:   40px;
  --vo-works-btn-fs:  clamp(16px, calc(14.51px + 0.381vw), 20px);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vo-wd__intro { grid-template-columns: minmax(0, 1fr); }
  .vo-wd__desc.vo-content { max-width: none; }
}
@media (max-width: 560px) {
  .vo-wd__grid { grid-template-columns: minmax(0, 1fr); }
  .vo-wd__photo--hero,
  .vo-wd__photo--big { aspect-ratio: 4 / 3; }
}