/* ============================================================
   PORTFOLIO — sdílený vzhled pro portfolio.html a case studies
   ------------------------------------------------------------
   Vlastní stylopis, protože ho sdílí tři stránky; kdyby byl inline,
   byly by to tři kopie, které se rozejdou (viz sync-header.js).
   Barvy se berou VÝHRADNĚ z proměnných webu (style-dark-tech.css).
   Každá stránka si nastaví jen svůj akcent:
     --pf-accent       … dekorace (linky, rámečky, SVG)
     --pf-ink          … tentýž akcent v odstínu použitelném na TEXT
                         (na světlém motivu musí držet kontrast 4.5:1)
     --pf-accent-soft  … podklad odznaků
     --pf-accent-line  … jemná linka
   ============================================================ */

/* ── HERO ────────────────────────────────────────────────── */
.pf-hero {
  padding: calc(var(--header-height) + 4rem) 0 3rem;
  background: var(--clr-bg-dark, var(--clr-bg));
  border-bottom: 1px solid var(--clr-border);
}
.pf-hero__inner { max-width: 820px; }
.pf-breadcrumb {
  font-size: 0.8rem; color: var(--clr-text-muted); margin-bottom: 1.25rem;
  font-family: 'IBM Plex Mono', monospace;
}
.pf-breadcrumb a { color: var(--clr-text-muted); text-decoration: none; }
.pf-breadcrumb a:hover { color: var(--pf-ink); text-decoration: underline; }
.pf-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--pf-accent-soft); border: 1px solid var(--pf-accent-line);
  border-radius: 100px; padding: 0.35rem 1rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pf-ink);
  margin-bottom: 1.25rem;
}
.pf-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 800; line-height: 1.14; margin-bottom: 18px; color: var(--clr-text);
}
.pf-hero__sub {
  font-size: clamp(16px, 2vw, 19px); color: var(--clr-text-muted);
  max-width: 660px; line-height: 1.65; margin: 0;
}

/* ── ŘÁDEK S FAKTY ───────────────────────────────────────── */
.pf-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 18px 24px; margin: 2.5rem 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--clr-border);
}
.pf-facts div { margin: 0; }
.pf-facts dt {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-text-muted); margin-bottom: 5px;
}
.pf-facts dd { margin: 0; font-size: 0.875rem; color: var(--clr-text); line-height: 1.5; }

/* ── SEKCE ───────────────────────────────────────────────── */
.pf-section { padding: 68px 0; }
.pf-section--alt { background: var(--clr-bg-alt); }
.pf-section__head { max-width: 680px; margin: 0 0 32px; }
.pf-section__head h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 800; color: var(--clr-text); margin-bottom: 12px; line-height: 1.2;
}
.pf-section__head p { color: var(--clr-text-muted); line-height: 1.7; margin: 0; }
.pf-prose { max-width: 720px; color: var(--clr-text-muted); line-height: 1.75; font-size: 1rem; }
.pf-prose strong { color: var(--clr-text); }
.pf-prose p { margin: 0 0 1rem; }
.pf-prose p:last-child { margin-bottom: 0; }

/* ── HIGHLIGHTY (3 dlaždice) ─────────────────────────────── */
.pf-highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px;
}
.pf-hl {
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-left: 3px solid var(--pf-accent);
  border-radius: 12px; padding: 22px 24px;
}
.pf-section--alt .pf-hl { background: var(--clr-bg-dark, var(--clr-bg)); }
.pf-hl__value {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--clr-text); line-height: 1.4; margin-bottom: 8px;
}
.pf-hl__note { font-size: 0.82rem; color: var(--clr-text-muted); line-height: 1.6; margin: 0; }

/* ── CO JSME POSTAVILI ───────────────────────────────────── */
.pf-builds { display: grid; gap: 16px; counter-reset: pfb; }
.pf-build {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-radius: 12px; padding: 22px 24px; counter-increment: pfb;
}
.pf-section--alt .pf-build { background: var(--clr-bg-dark, var(--clr-bg)); }
.pf-build::before {
  content: counter(pfb, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 0.78rem;
  color: var(--pf-ink); background: var(--pf-accent-soft);
  border-radius: 8px; padding: 5px 10px; margin-top: 2px;
}
.pf-build h3 { font-size: 1rem; font-weight: 700; color: var(--clr-text); margin: 0 0 7px; }
.pf-build p { margin: 0; font-size: 0.9rem; color: var(--clr-text-muted); line-height: 1.65; }
.pf-build__result {
  display: block; margin-top: 9px; font-size: 0.875rem; color: var(--clr-text);
  padding-left: 16px; border-left: 2px solid var(--pf-accent-line);
}

/* ── TABULKA PŘED/PO ─────────────────────────────────────── */
/* `overflow-x` tu zůstává jen jako pojistka pro nečekaně dlouhý obsah — nikdy se
   nemá spustit. Tabulka SCHVÁLNĚ nemá `min-width`: na úzké obrazovce se nesmí
   posouvat do strany, místo toho se pod 720 px přestaví na kartičky (níž).
   Vodorovné posouvání tabulky na mobilu nikdo nedělá a nikdo ho nečeká — obsah,
   který takhle uteče vpravo, je pro návštěvníka neviditelný. */
.pf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pf-table th, .pf-table td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--clr-border);
  vertical-align: top; line-height: 1.55;
}
.pf-table thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-muted);
  border-bottom: 1px solid var(--clr-border-strong, var(--clr-border));
}
.pf-table tbody th { font-weight: 600; color: var(--clr-text); width: 26%; }
.pf-table tbody td:first-of-type { color: var(--clr-text-muted); }
.pf-table tbody td:last-child { color: var(--clr-text); }
.pf-table tbody tr:last-child th, .pf-table tbody tr:last-child td { border-bottom: none; }

/* Pod 720 px se tabulka přestaví na kartičky — jeden řádek = jedna karta.
   Zůstává to `<table>` (čtečky i vyhledávač vidí pořád tabulku se záhlavím),
   mění se jen vykreslení. Popisky „Dřív"/„Teď" se berou z `data-stav`
   na buňkách, protože vizuální záhlaví je v tomhle režimu skryté. */
@media (max-width: 720px) {
  .pf-table { display: block; font-size: 0.92rem; }
  /* Záhlaví se skrývá jen opticky, ne pro odečítače obrazovky. */
  .pf-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .pf-table tbody { display: block; }
  .pf-table tbody tr {
    display: block; background: var(--clr-bg);
    border: 1px solid var(--clr-border); border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px;
  }
  .pf-section--alt .pf-table tbody tr { background: var(--clr-bg-dark, var(--clr-bg)); }
  .pf-table tbody tr:last-child { margin-bottom: 0; }
  .pf-table tbody th, .pf-table tbody td {
    display: block; width: auto; padding: 0; border: none;
  }
  .pf-table tbody th {
    font-size: 0.95rem; padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--clr-border);
  }
  .pf-table tbody td { padding-top: 12px; }
  .pf-table tbody td:first-of-type { padding-top: 0; }
  .pf-table tbody td::before {
    content: attr(data-stav);
    display: block; margin-bottom: 3px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--clr-text-muted);
  }
  /* Stav „Teď" nese akcent, ať je na první pohled vidět, co je výsledek. */
  .pf-table tbody td:last-child::before { color: var(--pf-ink); }
}

/* ── DIAGRAM PŘED/PO ─────────────────────────────────────── */
/* Dvě inline SVG: široká varianta pro desktop, svislá pod 640 px. */
.pf-diagram { margin: 0; }
.pf-diagram svg { display: block; width: 100%; height: auto; }
/* Selektor musí mít vyšší specificitu než `.pf-diagram svg` výš (0,1,1),
   jinak ho `display: block` přebije a na desktopu se ukážou OBA diagramy. */
.pf-diagram svg.pf-diagram__tall { display: none; max-width: 340px; margin: 0 auto; }
.pf-diagram figcaption {
  margin-top: 14px; font-size: 0.8rem; color: var(--clr-text-muted);
  font-family: 'IBM Plex Mono', monospace;
}
/* Barvy diagramu jdou přes třídy, ne přes atributy fill/stroke — presentation
   atribut var(--x) prohlížeč neumí, musí to být CSS vlastnost. */
.pf-dg-box { fill: var(--clr-bg); stroke: var(--clr-border-strong, var(--clr-border)); stroke-width: 1.5; }
.pf-section--alt .pf-dg-box { fill: var(--clr-bg-dark, var(--clr-bg)); }
.pf-dg-box--now { fill: var(--pf-accent-soft); stroke: var(--pf-accent); stroke-width: 2; }
.pf-section--alt .pf-dg-box--now { fill: var(--pf-accent-soft); }
.pf-dg-txt { fill: var(--clr-text-muted); font-family: 'DM Sans', sans-serif; font-size: 13px; }
.pf-dg-txt--now { fill: var(--clr-text); font-weight: 600; font-size: 14px; }
.pf-dg-lbl {
  fill: var(--clr-text-muted); font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
}
.pf-dg-lbl--now { fill: var(--pf-ink); }
.pf-dg-arr { stroke: var(--clr-text-muted); stroke-width: 1.5; fill: none; }
.pf-dg-head { fill: var(--clr-text-muted); }
.pf-dg-arr--now { stroke: var(--pf-accent); }
.pf-dg-head--now { fill: var(--pf-accent); }
@media (max-width: 640px) {
  .pf-diagram svg.pf-diagram__wide { display: none; }
  .pf-diagram svg.pf-diagram__tall { display: block; }
}

/* ── TIMELINE ────────────────────────────────────────────── */
.pf-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 18px; }
.pf-phase {
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-top: 3px solid var(--pf-accent); border-radius: 12px; padding: 20px 22px;
}
.pf-section--alt .pf-phase { background: var(--clr-bg-dark, var(--clr-bg)); }
.pf-phase__when {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; color: var(--pf-ink); margin-bottom: 8px;
}
.pf-phase h3 { font-size: 0.98rem; font-weight: 700; color: var(--clr-text); margin: 0 0 6px; }
.pf-phase p { margin: 0; font-size: 0.84rem; color: var(--clr-text-muted); line-height: 1.6; }

/* ── OBRÁZKY ─────────────────────────────────────────────── */
.pf-shot {
  margin: 0; border: 1px solid var(--clr-border); border-radius: 14px;
  overflow: hidden; background: var(--clr-bg);
}
.pf-shot img { width: 100%; height: auto; display: block; }
.pf-shot figcaption {
  padding: 12px 16px; font-size: 0.8rem; color: var(--clr-text-muted);
  border-top: 1px solid var(--clr-border); font-family: 'IBM Plex Mono', monospace;
}
.pf-shot--hero { margin-top: 2.5rem; }
/* Mobilní snímek patří do rámečku telefonu, ne roztažený na šířku. */
.pf-phone { margin: 0; max-width: 292px; justify-self: center; }
.pf-phone__frame {
  border: 9px solid var(--clr-text); border-radius: 34px;
  background: var(--clr-text); box-shadow: var(--shadow-md); overflow: hidden;
}
.pf-phone img { width: 100%; height: auto; display: block; border-radius: 25px; }
.pf-phone figcaption {
  padding-top: 12px; font-size: 0.74rem; color: var(--clr-text-muted);
  text-align: center; font-family: 'IBM Plex Mono', monospace; line-height: 1.5;
}
.pf-media { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: center; }
@media (max-width: 860px) { .pf-media { grid-template-columns: 1fr; } }

/* Místo pro fotky, které zatím nemáme (technik v terénu, portrét klienta). */
.pf-photo-slot {
  border: 1px dashed var(--clr-border-strong, var(--clr-border)); border-radius: 14px;
  padding: 26px; text-align: center; color: var(--clr-text-muted); font-size: 0.82rem;
  line-height: 1.6; background: var(--clr-bg-alt);
}
.pf-section--alt .pf-photo-slot { background: var(--clr-bg); }

/* ── CTA ─────────────────────────────────────────────────── */
.pf-cta {
  text-align: center; padding: 76px 0;
  background: radial-gradient(ellipse at 50% 0%, var(--pf-accent-soft), transparent 65%),
              var(--clr-bg-dark, var(--clr-bg));
  border-top: 1px solid var(--clr-border);
}
.pf-cta h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 800; color: var(--clr-text); margin-bottom: 14px;
}
.pf-cta p { color: var(--clr-text-muted); max-width: 580px; margin: 0 auto 30px; line-height: 1.7; }
.pf-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── PŘEHLEDOVÁ MŘÍŽKA KARET ─────────────────────────────── */
/* `min(320px, 100%)` místo holých 320px: na 320px displeji je kontejner po
   odsazení široký 292 px, takže pevné minimum stopu roztáhlo na 320 a karta
   přetekla o 14 px. `min()` z minima udělá strop podle kontejneru. */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.pf-card {
  display: flex; flex-direction: column;
  background: var(--clr-bg); border: 1px solid var(--clr-border);
  border-radius: 16px; overflow: hidden; transition: border-color 0.2s, transform 0.2s;
}
.pf-section--alt .pf-card { background: var(--clr-bg-dark, var(--clr-bg)); }
.pf-card:hover { border-color: var(--pf-accent-line); transform: translateY(-2px); }
.pf-card__img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--clr-border); }
.pf-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.pf-card__label {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pf-ink); margin-bottom: 10px;
}
.pf-card h3 {
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 700;
  color: var(--clr-text); line-height: 1.3; margin: 0 0 10px;
}
.pf-card__hl { font-size: 0.88rem; color: var(--clr-text-muted); line-height: 1.65; margin: 0 0 16px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.pf-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
  color: var(--clr-text-muted); background: var(--clr-bg-alt);
  border: 1px solid var(--clr-border); border-radius: 100px; padding: 3px 10px;
}
.pf-section--alt .pf-tag { background: var(--clr-bg); }
.pf-card__link {
  margin-top: auto; align-self: flex-start;
  font-weight: 600; font-size: 0.9rem; color: var(--pf-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.pf-card__link:hover { text-decoration: underline; }
/* Připravené místo pro třetí kartu (GSCM). */
.pf-card--soon {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 240px; border-style: dashed; padding: 32px;
  color: var(--clr-text-muted); font-size: 0.9rem; line-height: 1.65;
}

/* ── MOBIL ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pf-section { padding: 52px 0; }
  .pf-hero { padding: calc(var(--header-height) + 2.5rem) 0 2.25rem; }
  .pf-build { grid-template-columns: 1fr; gap: 12px; }
  .pf-build::before { justify-self: start; }
  .pf-card__body { padding: 20px; }
}