/* Podstránky varianty 11: projekty, služby, kontakt.
   Tokeny, tlačítka, tmavé pásy a formulář jsou v klid.css, drobečky, štítky,
   galerie a lightbox v detail.css. Tady jsou jen nové komponenty. */

/* ---------- hlavička stránky ---------- */
.o-head{padding-top:clamp(28px,4.4vw,56px)}
.o-title{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px}
.o-title h1{font-size:clamp(40px,7vw,96px);letter-spacing:-.05em;line-height:.94;overflow-wrap:anywhere}
.o-title .pills{margin-bottom:.5em}
.o-place{margin-top:14px;font-size:16.5px;color:var(--muted)}
.o-head-list{padding-bottom:clamp(40px,5vw,72px)}
.o-lede-top{margin-top:clamp(20px,2.6vw,32px)}

/* velká fotka, odhalení zdola jako okna v hero hlavní stránky */
.o-hero{display:block;width:100%;margin-top:clamp(24px,3.4vw,44px);border:0;padding:0;border-radius:var(--r-panel);overflow:hidden;background:var(--g900);aspect-ratio:21/9;position:relative}
button.o-hero{cursor:zoom-in}
.o-hero img{width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:no-preference){
  .o-hero{animation:o-reveal 1.15s cubic-bezier(.77,0,.18,1) .08s both}
  .o-hero img{animation:o-settle 1.5s cubic-bezier(.16,1,.3,1) .08s both}
}
@keyframes o-reveal{from{clip-path:inset(100% 0 0 0 round 26px)}to{clip-path:inset(0 0 0 0 round 26px)}}
@keyframes o-settle{from{transform:scale(1.14)}to{transform:scale(1)}}

/* široký typografický úvod pod fotkou */
.o-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:var(--space-grid);padding-top:clamp(34px,4.6vw,64px);padding-bottom:clamp(56px,7vw,104px);align-items:start}
.o-lede{font-size:clamp(21px,2.3vw,31px);line-height:1.3;letter-spacing:-.022em;font-weight:500;max-width:34ch;color:var(--g900)}
.o-state{border-top:1.5px solid var(--g900);padding-top:18px}
.o-state h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em}
.o-state-p{margin-top:10px;font-size:15.5px;color:var(--muted)}
.o-state-svc .o-state-p{margin-top:0}
.o-counts{display:flex;margin:0}
.o-counts div{flex:1;display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:2px 16px 0;border-left:1px solid var(--line)}
.o-counts div:first-child{border-left:0;padding-left:0}
.o-counts dd{margin:0;font-size:clamp(32px,3.4vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.o-counts dt{margin-top:6px;font-size:13.5px;color:var(--muted)}
.o-counts .is-free dd{color:var(--g500)}
.o-stamp{margin-top:14px;font-size:12.5px;color:var(--muted)}
.o-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- tmavý pás: čísla v řádku a odstavce nadpis / text ---------- */
.o-cisla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.o-cisla div{padding:26px 24px 28px;border-left:1px solid var(--line-d);min-width:0}
.o-cisla div:first-child{border-left:0;padding-left:0}
.o-cisla b{display:block;font-size:clamp(26px,2.9vw,42px);font-weight:800;letter-spacing:-.045em;line-height:1.02;color:var(--cream);text-wrap:balance}
.o-cisla span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:rgba(252,247,238,.68)}

.o-rows{margin-top:clamp(56px,7vw,100px)}
.o-rows-flush{margin-top:0}
.o-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--space-grid);padding-top:clamp(26px,3vw,40px);padding-bottom:clamp(26px,3vw,40px);border-top:1px solid var(--line-2)}
.o-row:last-child{border-bottom:1px solid var(--line-2)}
.dark .o-row{border-color:var(--line-d)}
.o-row h2,.o-row h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.032em;line-height:1.1}
.o-row p{font-size:17px;line-height:1.65;color:var(--g700)}
.dark .o-row p{color:rgba(252,247,238,.76)}
.o-list,.o-links{list-style:none}
.o-list li{font-size:16.5px;line-height:1.6;padding:12px 0;border-top:1px solid var(--line-d);color:rgba(252,247,238,.8)}
.o-list li:first-child{border-top:0;padding-top:0}
.o-links li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-d)}
.o-links li:first-child{border-top:0;padding-top:0}
.o-links a{font-weight:700;color:var(--cream);border-bottom:1.5px solid rgba(252,247,238,.4);padding-bottom:1px;overflow-wrap:anywhere}
.o-links a:hover{border-bottom-color:var(--cream)}
.o-links span{font-size:14px;color:rgba(252,247,238,.6)}

/* parkování jako tabulka dat */
.o-table-wrap{min-width:0}
.o-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.o-table th{text-align:left;font-size:12.5px;font-weight:600;color:rgba(252,247,238,.6);padding:0 18px 10px 0;border-bottom:1.5px solid rgba(252,247,238,.5)}
.o-table td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line-d);vertical-align:top;color:rgba(252,247,238,.76)}
.o-table td:first-child{font-weight:700;color:var(--cream);width:28%}
.o-table td.num{white-space:nowrap;font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums}

/* ---------- galerie a video ---------- */
.o-gal-sec .gal{margin-top:0}
.o-subh{font-size:clamp(22px,2.3vw,30px);margin-top:clamp(44px,5.4vw,72px);margin-bottom:18px}
.o-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.o-videos.n1{grid-template-columns:minmax(0,1fr);max-width:880px}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-block);overflow:hidden;background:var(--g900)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s}
.yt:hover img{opacity:.92}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--cream);color:var(--g900);font-weight:700;font-size:14.5px;padding:12px 20px 12px 16px;cursor:pointer;transition:transform .25s}
.yt-play:hover{transform:translateY(-1px)}
.yt-play svg{width:16px;height:16px}
.o-small{margin-top:10px;font-size:12.5px;color:var(--muted)}

.o-units{padding-top:0}
.o-gal-sec + .o-units{padding-top:0}
.o-body-sec{padding-top:0}

/* ---------- okrová plocha: kontaktní osoba a CTA ---------- */
.o-cta{background:var(--orange);color:var(--g900)}
.o-cta-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(22px,3.4vw,52px);align-items:center;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.o-cta-plain .o-cta-in{grid-template-columns:minmax(0,1fr) auto}
.o-cta img{width:clamp(112px,12vw,170px);aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:var(--r-block);background:var(--cream-3)}
.o-cta h2{font-size:clamp(28px,3.6vw,46px)}
.o-cta p{margin-top:12px;font-size:16.5px;color:rgba(34,63,59,.8);max-width:56ch}
.o-cta-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;align-items:baseline}
.o-cta-links a{font-weight:700;border-bottom:1.5px solid rgba(34,63,59,.35);padding-bottom:1px;overflow-wrap:anywhere}
.o-cta-links a:hover{border-bottom-color:var(--g900)}
.o-cta-links .o-tel{font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em;border-bottom-color:var(--g900)}

/* citát */
.o-quote{background:var(--orange);color:var(--g900)}
.o-quote .wrap{padding-top:clamp(56px,7vw,112px);padding-bottom:clamp(56px,7vw,112px)}
.o-quote blockquote p{font-size:clamp(24px,3.3vw,44px);font-weight:700;letter-spacing:-.032em;line-height:1.18;max-width:32ch}
.o-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:14.5px;color:rgba(34,63,59,.8)}
.o-quote figcaption img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--cream-3);flex:none}
.o-quote figcaption b{display:block;font-size:16px;color:var(--g900)}

/* ---------- řádky dalších projektů a služeb ---------- */
.o-after-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.o-after-head h2{font-size:clamp(28px,3.6vw,46px)}
.o-after-head a{font-size:14.5px;font-weight:700;color:var(--cream);border-bottom:1.5px solid rgba(252,247,238,.4);padding-bottom:1px}
.o-after-head a:hover{border-bottom-color:var(--cream)}
.o-next{border-top:1px solid var(--line-d)}
.o-next > a{display:grid;grid-template-columns:132px minmax(0,1fr) auto 18px;gap:24px;align-items:center;padding:16px 8px 16px 0;border-bottom:1px solid var(--line-d);transition:background .25s,padding-left .25s}
.o-next > a:hover{background:rgba(252,247,238,.045);padding-left:12px}
.o-next .th{width:132px;aspect-ratio:3/2;border-radius:var(--r-row);overflow:hidden;background:var(--g700)}
.o-next .th img{width:100%;height:100%;object-fit:cover}
.o-next .th img.is-plan{object-fit:contain;background:var(--g900)}
.o-next b{display:block;font-size:clamp(20px,2.2vw,28px);font-weight:800;letter-spacing:-.032em;line-height:1.1;color:var(--cream)}
.o-next b + span{display:block;margin-top:4px;font-size:14px;color:rgba(252,247,238,.62)}
.o-next em{font-style:normal;font-size:14.5px;font-weight:700;color:var(--cream);white-space:nowrap}
.o-next svg{width:16px;height:16px;color:rgba(252,247,238,.6)}
.o-next-svc > a{grid-template-columns:132px minmax(0,1fr) 18px}
.o-next-svc em{display:none}

/* ---------- přehled projektů ---------- */
.o-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px;font-size:14.5px;color:var(--muted)}
.o-stats b{color:var(--g900);font-size:22px;font-weight:800;letter-spacing:-.03em;margin-right:7px;font-variant-numeric:tabular-nums}
.o-group .sec-head{margin-bottom:36px}
.o-plist{border-top:1.5px solid var(--g900)}
.dark .o-plist{border-top-color:rgba(252,247,238,.5)}
.o-proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-grid);align-items:center;padding-top:clamp(26px,3.2vw,44px);padding-bottom:clamp(26px,3.2vw,44px);border-bottom:1px solid var(--line)}
.dark .o-proj{border-bottom-color:var(--line-d)}
.o-proj-img{display:block;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:16/10;background:var(--g900)}
.o-proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.o-proj-img:hover img{transform:scale(1.03)}
.o-proj-img img.is-plan{object-fit:contain;padding:14px}
.o-proj-img img.is-plan,.o-proj-img:hover img.is-plan{transform:none}
.o-proj h3{font-size:clamp(28px,3.6vw,48px);letter-spacing:-.04em}
.o-proj h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.o-loc{margin-top:6px;font-size:15px;color:var(--muted)}
.dark .o-loc{color:rgba(252,247,238,.62)}
.o-desc{margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--g700)}
.dark .o-desc{color:rgba(252,247,238,.74)}
.o-proj-meta{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:24px}
.o-free{font-size:15px;color:var(--muted)}
.o-flag{display:inline-block;margin-bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.02em;background:var(--orange);color:var(--g900);border-radius:999px;padding:5px 12px}
.o-proj-lead h3{font-size:clamp(34px,4.4vw,60px)}
.o-free b{font-size:28px;font-weight:800;letter-spacing:-.035em;color:var(--g900);margin-right:7px;font-variant-numeric:tabular-nums}
.dark .o-free{color:rgba(252,247,238,.66)}
.dark .o-free b{color:var(--cream)}

.o-prep{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:stretch}
.o-prep-card{border:1px solid var(--line-d);border-radius:var(--r-panel);padding:clamp(24px,3.2vw,44px);background:var(--deep);display:flex;flex-direction:column;align-items:flex-start}
.o-prep-card.lead{background:var(--deepest)}
.o-prep-card h3{font-size:clamp(30px,4.2vw,58px);letter-spacing:-.045em;color:var(--cream)}
.o-prep-card .btn{margin-top:26px}
.o-prep-card .facts{margin-top:20px}
.o-done{padding-top:0}
.o-done .sec-head{border-top:1px solid var(--line-d);padding-top:clamp(56px,7vw,100px)}
.o-head-list + .o-group{padding-top:clamp(28px,3.6vw,52px)}

/* ---------- služby ----------
   Obrázky služeb jsou na fourlocations.cz vyříznuté do tvaru značky 4L
   (střecha, rovné stěny, hrot dole). Maska ten tvar drží i u fotky, která
   výřez nemá, takže všechny čtyři služby mluví stejným tvarem. */
.o-pin{display:block;aspect-ratio:564/662;overflow:hidden;
  clip-path:polygon(50% 0,97% 30%,100% 35%,100% 83%,96% 87.2%,64% 87.2%,50% 100%,36% 87.2%,4% 87.2%,0 83%,0 35%,3% 30%)}
.o-pin img{width:100%;height:100%;object-fit:cover}
.o-pin-hero{width:100%;max-width:440px;justify-self:end}
@media(prefers-reduced-motion:no-preference){
  .o-pin-hero{animation:o-rise 1.2s cubic-bezier(.77,0,.18,1) .08s both}
  .o-pin-hero img{animation:o-settle 1.5s cubic-bezier(.16,1,.3,1) .08s both}
}
@keyframes o-rise{
  from{clip-path:polygon(50% 100%,97% 100%,100% 100%,100% 100%,96% 100%,64% 100%,50% 100%,36% 100%,4% 100%,0 100%,0 100%,3% 100%)}
  to{clip-path:polygon(50% 0,97% 30%,100% 35%,100% 83%,96% 87.2%,64% 87.2%,50% 100%,36% 87.2%,4% 87.2%,0 83%,0 35%,3% 30%)}
}
.o-svc-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-grid);align-items:end;padding-bottom:clamp(56px,7vw,104px)}
.o-svc-top .o-state{margin-top:clamp(28px,3.4vw,44px);max-width:560px}

.o-svc-sec{padding-top:0}
.o-svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.4vw,56px);border-top:1.5px solid var(--g900)}
.o-svc{display:grid;grid-template-columns:minmax(120px,.72fr) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);align-items:center;padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--line)}
.o-svc .o-pin img{transition:transform .7s var(--ease)}
.o-svc:hover .o-pin img{transform:scale(1.05)}
.o-svc h2{font-size:clamp(26px,3vw,40px)}
.o-svc p{margin-top:10px;font-size:16.5px;color:var(--muted)}
.o-svc-go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14.5px;font-weight:700;border-bottom:1.5px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.o-svc-go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.o-svc:hover .o-svc-go{border-bottom-color:var(--g900)}
.o-svc:hover .o-svc-go svg{transform:translateX(3px)}
.o-next .th.o-pin{width:64px;aspect-ratio:564/662;border-radius:0;background:none;justify-self:center}

.o-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--space-grid);align-items:start}

/* číslovaný postup, jediné místo, kde čísla dávají smysl */
.o-steps{list-style:none;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0 22px}
.o-steps li{border-top:1.5px solid rgba(252,247,238,.5);padding-top:20px;min-width:0}
.o-step-n{display:block;font-size:clamp(38px,4.4vw,60px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.o-steps h3{margin-top:18px;font-size:clamp(19px,1.8vw,23px);color:var(--cream)}
.o-steps p{margin-top:8px;font-size:15px;line-height:1.55}

/* ---------- kontakt ---------- */
.o-team-sec{padding-top:0}
.o-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.8vw,40px)}
.o-person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:var(--r-panel);background:var(--cream-3)}
.o-person h2{margin-top:20px;font-size:clamp(24px,2.4vw,32px)}
.o-person .role{margin-top:4px;margin-bottom:14px;font-size:15px;color:var(--muted)}

/* ---------- responzivní ---------- */
@media(max-width:1000px){
  .o-intro{grid-template-columns:minmax(0,1fr)}
  .o-svc-top{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:center}
  .o-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px}
  .o-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .o-cta-in{grid-template-columns:auto minmax(0,1fr)}
  .o-cta-in > .btn{grid-column:1/-1;justify-self:start}
  .o-cta-plain .o-cta-in{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .o-hero{aspect-ratio:16/10}
  .o-cisla{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o-cisla div:nth-child(3){border-left:0;padding-left:0}
  .o-cisla div:nth-child(n+3){border-top:1px solid var(--line-d)}
  .o-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .o-proj{grid-template-columns:minmax(0,1fr);gap:22px}
  .o-prep{grid-template-columns:minmax(0,1fr)}
  .o-team{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .o-svc-grid{grid-template-columns:minmax(0,1fr)}
  .o-next > a{grid-template-columns:88px minmax(0,1fr) 16px;gap:16px;row-gap:6px}
  .o-next .th{width:88px}
  .o-next em{grid-column:2/3;grid-row:2;font-size:13.5px}
  .o-next .th{grid-row:1/3}
  .o-next svg{grid-column:3;grid-row:1/3}
  .o-next-svc > a{grid-template-columns:88px minmax(0,1fr) 16px}
}
@media(max-width:640px){
  .o-hero{aspect-ratio:4/3;border-radius:var(--r-block)}
  @keyframes o-reveal{from{clip-path:inset(100% 0 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
  .o-counts div{padding:2px 12px 0}
  .o-steps{grid-template-columns:minmax(0,1fr)}
  .o-team{grid-template-columns:minmax(0,1fr)}
  .o-person img{aspect-ratio:1/1}
  .o-svc-top{grid-template-columns:minmax(0,1fr)}
  .o-pin-hero{max-width:230px;justify-self:start}
  .o-svc{grid-template-columns:96px minmax(0,1fr)}
  .o-cta-in{grid-template-columns:minmax(0,1fr)}
  .o-cta img{width:112px}
  /* tabulka se skládá do bloků, popisky sloupců z data-l */
  .o-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .o-table,.o-table tbody,.o-table tr,.o-table td{display:block;width:100%}
  .o-table tr{padding:14px 0;border-bottom:1px solid var(--line-d)}
  .o-table tr:first-child{padding-top:0}
  .o-table td,.o-table td:first-child{width:100%;padding:2px 0;border:0}
  .o-table td.num{white-space:normal}
  .o-table td:first-child{font-size:16.5px}
  .o-table tr:last-child{border-bottom:0;padding-bottom:0}
  .o-videos{grid-template-columns:minmax(0,1fr)}
  .yt-play{left:12px;bottom:12px;padding:10px 16px 10px 13px;font-size:13.5px}
}

/* galerie na tmavém pásu (vyprodaný projekt, stránka jako reference) */
.o-gal-sec.dark{padding-top:0}
.o-gal-sec.dark .gal-item{background:var(--g700)}
.o-gal-sec.dark .o-small{color:rgba(252,247,238,.55)}
.o-gal-sec.dark + .o-units{padding-top:var(--space-section)}

/* poslední tmavý pás navazuje na tmavou patičku, bez dvojité mezery */
.o-after{padding-bottom:clamp(24px,3vw,40px)}