/* ==========================================================================
   projektyvanecek.cz – sdílené styly
   Načítá index.html, podstranky.html i gdpr.html.
   Pozn.: prototypy mají většinu stylů inline, proto responzivní přepisy
   používají !important – jinak by inline style vyhrál.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: #F7F7F5; color: #2B2E3A; font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.55; }
a { color: #2B2E3A; text-decoration: none; }
a:hover { color: #C1622A; }
input, select, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: #8A8E99; }
img { max-width: 100%; }

@keyframes pvPulse { 0% { box-shadow: 0 0 0 0 rgba(123,196,127,.7) } 70% { box-shadow: 0 0 0 7px rgba(123,196,127,0) } 100% { box-shadow: 0 0 0 0 rgba(123,196,127,0) } }
@keyframes pvPulseDark { 0% { box-shadow: 0 0 0 0 rgba(43,46,58,.45) } 70% { box-shadow: 0 0 0 7px rgba(43,46,58,0) } 100% { box-shadow: 0 0 0 0 rgba(43,46,58,0) } }

:focus-visible { outline: 3px solid #C1622A; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Navigace – desktop
   -------------------------------------------------------------------------- */
.pv-nav { display: flex; gap: 22px; flex: 1 1 auto; justify-content: center; font-size: 16px; font-weight: 500; min-width: 0; align-items: center; }
.pv-nav-item { position: relative; }
.pv-nav-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding-top: 4px; padding-bottom: 2px; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; font-size: 16px; font-weight: 500; color: #2B2E3A; padding-left: 0; padding-right: 0; }
.pv-nav-link.is-active { color: #C1622A; border-bottom-color: #C1622A; }
.pv-nav-link:hover { color: #C1622A; }

/* neviditelný můstek přes mezeru mezi odkazem a dropdownem */
.pv-nav-item.has-drop::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 16px; }
.pv-drop {
  position: absolute; top: 100%; left: 50%; margin-top: 14px; min-width: 300px;
  background: #fff; border: 1px solid #E3E3DF; border-radius: 12px; padding: 8px;
  box-shadow: 0 24px 60px -24px rgba(43,46,58,.45), 0 2px 6px rgba(43,46,58,.06);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60;
}
.pv-nav-item:hover .pv-drop, .pv-nav-item:focus-within .pv-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
/* po kliknutí na službu se dropdown zavře, i když pod ním zůstane kurzor */
.pv-nav-item.is-dismissed .pv-drop, .pv-nav-item.is-dismissed:hover .pv-drop, .pv-nav-item.is-dismissed:focus-within .pv-drop { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 6px); }
.pv-nav-item.is-dismissed:hover .pv-chev { transform: none; }
.pv-drop a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; line-height: 1.35; transition: background .15s ease; }
.pv-drop a:hover { background: #F0F0ED; color: #2B2E3A; }
.pv-drop .pv-drop-ico { flex: 0 0 34px; height: 34px; border-radius: 8px; background: #F0F0ED; color: #2B2E3A; display: inline-flex; align-items: center; justify-content: center; }
.pv-drop a:hover .pv-drop-ico { background: #2B2E3A; color: #fff; }
.pv-drop-sep { height: 1px; background: #E3E3DF; margin: 6px 8px; }
.pv-drop-all { color: #C1622A !important; font-weight: 600; }
.pv-chev { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; transition: transform .2s ease; }
.pv-nav-item:hover .pv-chev { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Hamburger + off-canvas
   -------------------------------------------------------------------------- */
.pv-burger { display: none; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #D5D6D2; background: #fff; color: #2B2E3A; cursor: pointer; align-items: center; justify-content: center; padding: 0; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pv-burger:hover { background: #2B2E3A; color: #fff; border-color: #2B2E3A; }

.pv-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20,22,30,.55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; border: 0; padding: 0; cursor: pointer; }
.pv-scrim.is-open { opacity: 1; visibility: visible; }

.pv-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(380px, 88vw); background: #F7F7F5; border-left: 1px solid #E3E3DF;
  transform: translateX(101%); transition: transform .32s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -20px 0 60px -30px rgba(0,0,0,.5);
}
.pv-panel.is-open { transform: translateX(0); }
.pv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #E3E3DF; position: sticky; top: 0; background: #F7F7F5; z-index: 1; }
.pv-panel-close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #D5D6D2; background: #fff; color: #2B2E3A; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pv-panel-close:hover { background: #2B2E3A; color: #fff; border-color: #2B2E3A; }
.pv-panel-body { padding: 8px 16px 16px; display: grid; gap: 0; align-content: start; }
.pv-panel-body > a, .pv-panel-body .pv-panel-link { display: flex; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 16px; font-weight: 600; font-family: 'Outfit', sans-serif; letter-spacing: -.01em; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; color: #2B2E3A; }
.pv-panel-body > a:hover, .pv-panel-body .pv-panel-link:hover { background: #ECECE8; color: #2B2E3A; }
.pv-panel-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A8E99; padding: 12px 12px 4px; }
.pv-panel-sub { display: grid; gap: 0; padding-left: 8px; border-left: 2px solid #E3E3DF; margin: 2px 0 2px 12px; }
.pv-panel-sub a { display: flex; box-sizing: border-box; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.pv-panel-sub a:hover { background: #ECECE8; color: #2B2E3A; }

/* rozbalovací skupina (Služby) v off-canvas */
.pv-panel-group > .pv-panel-sub { display: none; }
.pv-panel-group.is-open > .pv-panel-sub { display: grid; }
.pv-panel-chev { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; color: #8A8E99; transition: transform .25s ease; }
.pv-panel-group.is-open .pv-panel-chev { transform: rotate(180deg); color: #C1622A; }
.pv-panel-foot { margin-top: auto; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid #E3E3DF; display: grid; gap: 10px; }
.pv-panel-foot .pv-btn-primary, .pv-panel-foot .pv-btn-outline { box-sizing: border-box; min-height: 52px; padding: 12px 18px; justify-content: center; font-size: 16px; }

.pv-btn-primary { background: #C1622A; color: #fff; border: 0; padding: 12px 18px; border-radius: 6px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .18s ease; }
.pv-btn-primary:hover { background: #A8531F; color: #fff; }
.pv-btn-outline { border: 1.5px solid #2B2E3A; color: #2B2E3A; background: none; padding: 11px 18px; border-radius: 6px; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.pv-btn-outline:hover { background: #2B2E3A; color: #fff; }

/* --------------------------------------------------------------------------
   Karty realizací – hover zoom fotky + posun šipky
   -------------------------------------------------------------------------- */
.pv-proj { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3.6; border-radius: 14px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #2B2E3A; text-align: left; color: #fff; font-family: inherit; isolation: isolate; }
.pv-proj:hover, .pv-proj:focus-visible { color: #fff; }
.pv-proj-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.pv-proj:hover .pv-proj-img, .pv-proj:focus-visible .pv-proj-img { transform: scale(1.07); }
.pv-proj-arrow { transition: transform .4s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease; }
.pv-proj:hover .pv-proj-arrow, .pv-proj:focus-visible .pv-proj-arrow { transform: translate(4px, -4px); background: #C1622A; color: #fff; }
.pv-proj-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(20,22,30,.85) 100%); transition: opacity .4s ease; }
.pv-proj:hover .pv-proj-shade { opacity: .92; }

/* karta realizace v řádku (související realizace na podstránce) */
.pv-rel-thumb { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pv-rel:hover .pv-rel-thumb { transform: scale(1.06); }
.pv-rel-arrow { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pv-rel:hover .pv-rel-arrow { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   Detail realizace – klikací fotky, lightbox, přechod na další realizaci
   -------------------------------------------------------------------------- */
.pv-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; background: #E3E3DF; cursor: zoom-in; }
.pv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pv-photo:hover img, .pv-photo:focus-visible img { transform: scale(1.03); }
.pv-photo-zoom { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94); color: #2B2E3A; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); transition: background .2s ease, color .2s ease; }
.pv-photo:hover .pv-photo-zoom, .pv-photo:focus-visible .pv-photo-zoom { background: #C1622A; color: #fff; }

.pv-lb { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; color: #fff; }
.pv-lb-bg { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(18,20,27,.94); cursor: zoom-out; }
.pv-lb-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; pointer-events: none; }
.pv-lb-top > * { pointer-events: auto; }
.pv-lb-count { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .08em; color: #DCDEE5; }
.pv-lb-btn { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .18s ease, border-color .18s ease; }
.pv-lb-btn:hover { background: #C1622A; border-color: #C1622A; color: #fff; }
.pv-lb-fig { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 76px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.pv-lb-fig img { max-width: 100%; max-height: 100%; min-height: 0; flex: 0 1 auto; object-fit: contain; border-radius: 8px; background: #fff; pointer-events: auto; }
.pv-lb-fig figcaption { flex: 0 0 auto; max-width: 720px; text-align: center; font-size: 15px; color: #DCDEE5; pointer-events: auto; }
.pv-lb-prev, .pv-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.pv-lb-prev { left: 16px; }
.pv-lb-next { right: 16px; }

.pv-projnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-top: 56px; padding-top: 32px; border-top: 1px solid #E3E3DF; }
.pv-projnav-link { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 20px; background: #fff; border: 1px solid #E3E3DF; border-radius: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.pv-projnav-link.is-next { justify-content: flex-end; text-align: right; }
.pv-projnav-link:hover { border-color: #2B2E3A; color: #2B2E3A; box-shadow: 0 14px 30px -22px rgba(43,46,58,.6); }
.pv-projnav-ico { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1.5px solid #2B2E3A; color: #2B2E3A; display: inline-flex; align-items: center; justify-content: center; padding: 11px; box-sizing: border-box; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pv-projnav-link:hover .pv-projnav-ico { background: #C1622A; border-color: #C1622A; color: #fff; }
.pv-projnav-txt { display: grid; gap: 2px; min-width: 0; }
.pv-projnav-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8A8E99; }
.pv-projnav-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #2B2E3A; text-wrap: pretty; }
.pv-projnav-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; font-weight: 600; font-size: 15px; white-space: nowrap; border-radius: 12px; }

/* --------------------------------------------------------------------------
   Zarovnání sloupců – kontakt a „Proč si vybrat mě“
   -------------------------------------------------------------------------- */
/* Formulář určuje výšku, poslední blok levého sloupce (Google recenze)
   se přisaje k jeho dolní hraně. */
.pv-contact-split { align-items: stretch !important; }
.pv-contact-left { display: flex; flex-direction: column; }
.pv-contact-left .pv-contact-gap { margin-bottom: auto; }
.pv-contact-form { display: flex; flex-direction: column; }
.pv-contact-form > form { flex: 1 1 auto; align-content: space-between; }

/* 4 recenze ve 2×2 mřížce; dolní hrana spodních karet lícuje s levým sloupcem. */
.pv-why-split { align-items: stretch !important; }
.pv-why-left { display: flex; flex-direction: column; }
.pv-why-left .pv-why-list { flex: 1 1 auto; align-content: space-between; }
.pv-why-reviews { display: flex; flex-direction: column; }
.pv-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); grid-auto-rows: 1fr; gap: 16px; flex: 1 1 auto; }

/* Telefon i e-mail jsou položky gridu – bez tohohle by se odkaz roztáhl
   přes celou šířku sloupce a vytáčel by se i po kliknutí vedle textu. */
.pv-contact-list > a, .pv-contact-list > div, .pv-footer-inner a { justify-self: start; }

/* --------------------------------------------------------------------------
   CTA v hlavičce – na mobilu zkrácené na „Poptat“
   -------------------------------------------------------------------------- */
.pv-cta-short { display: none; }

/* ==========================================================================
   BREAKPOINTY
   ========================================================================== */

/* ---- ≤1100 px: desktop nav pryč, nastupuje hamburger ---- */
@media (max-width: 1100px) {
  .pv-nav, .pv-tel { display: none !important; }
  .pv-burger { display: inline-flex; }
}
@media (min-width: 1101px) {
  .pv-panel, .pv-scrim { display: none; }
}

/* ---- ≤1000 px: sticky sloupce vypnout, ať se obsah nepřekrývá ---- */
@media (max-width: 1000px) {
  .pv-sticky-col { position: static !important; top: auto !important; max-width: none !important; }
}

/* ---- ≤900 px ---- */
@media (max-width: 900px) {
  html { scroll-padding-top: 90px; }
  .pv-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .pv-split { gap: 32px 32px !important; }
  .pv-aside { position: static !important; width: 100% !important; }
}

/* ---- ≤760 px: mobil ---- */
@media (max-width: 760px) {
  /* topbar přestane být sticky, ať nežere výšku obrazovky */
  .pv-topbar { position: static !important; }
  .pv-header { top: 0 !important; }
  .pv-header-inner { padding: 10px 16px !important; gap: 12px !important; }
  .pv-logo img { height: 32px !important; }

  /* CTA zůstává v hlavičce, jen zkrácené – spodní sticky lišta už není */
  .pv-header-cta { padding: 9px 12px !important; font-size: 15px !important; gap: 6px !important; }
  .pv-cta-full { display: none; }
  .pv-cta-short { display: inline; }

  .pv-container { padding-left: 16px !important; padding-right: 16px !important; }
  .pv-section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* hero */
  .pv-hero-inner { padding-top: 40px !important; padding-bottom: 44px !important; gap: 28px !important; }
  .pv-hero-text { max-width: none !important; }
  .pv-hero-form { max-width: none !important; width: 100% !important; flex: 1 1 100% !important; }
  .pv-hero-badge { width: 100%; box-sizing: border-box; }

  /* formuláře */
  .pv-form-card { padding: 20px !important; }
  /* iOS nezoomuje při focusu až od 16px */
  .pv-form-card input, .pv-form-card select, .pv-form-card textarea { font-size: 16px !important; }

  /* karty */
  .pv-card { padding: 20px !important; }
  .pv-proj { aspect-ratio: 4 / 3.2; }

  /* timeline v detailu realizace */
  .pv-timeline-row { grid-template-columns: 1fr !important; gap: 4px !important; }


  /* přechod mezi realizacemi + lightbox */
  .pv-projnav { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; padding-top: 24px; }
  .pv-projnav-all { order: 3; padding: 12px 18px; }
  .pv-lb-fig { padding: 0 12px 76px; }
  .pv-lb-prev, .pv-lb-next { top: auto; bottom: 16px; transform: none; }
  .pv-lb-prev { left: calc(50% - 54px); }
  .pv-lb-next { right: calc(50% - 54px); }

  /* CTA banner */
  .pv-banner { padding: 32px 20px !important; }

  /* footer */
  .pv-footer-inner { padding-top: 36px !important; gap: 28px !important; }
}

/* ---- ≤560 px: malé telefony ---- */
@media (max-width: 560px) {
  .pv-container { padding-left: 14px !important; padding-right: 14px !important; }
  .pv-section { padding-top: 42px !important; padding-bottom: 42px !important; }
  /* hlavička: logo + „Poptat“ + hamburger se musí vejít i na úzký telefon */
  .pv-header-inner { gap: 10px !important; }
  .pv-logo img { height: 30px !important; }
  .pv-header-cta { padding: 8px 11px !important; font-size: 14px !important; }
  .pv-burger { width: 42px; height: 42px; }
  .pv-card { padding: 18px !important; }
  .pv-form-card { padding: 18px !important; }
  .pv-proj { aspect-ratio: 4 / 3; }
  .pv-stack-sm { grid-template-columns: 1fr !important; }
  .pv-hero-badge { flex-wrap: wrap; gap: 12px !important; }
  .pv-filters { gap: 8px !important; }
  .pv-filters button { font-size: 14px !important; padding: 8px 14px !important; }
}

/* ---- ≥1600 px: ať se to neztrácí na velkých monitorech ---- */
@media (min-width: 1600px) {
  .pv-container, .pv-section > .pv-container { max-width: 1320px; }
}

/* ---- Pohyb omezit, když si to uživatel přeje ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pv-proj-img, .pv-proj-arrow, .pv-panel, .pv-scrim, .pv-drop, .pv-rel-thumb, .pv-rel-arrow, .pv-proj-shade, .pv-photo img { transition: none !important; }
  .pv-proj:hover .pv-proj-img { transform: none; }
  [style*="pvPulse"] { animation: none !important; }
}

/* Slidery na úvodní stránce: počet karet na šířku (zlomy odpovídají `pv` v logice stránky). */
.pv-slide { flex: 0 0 33.3333%; }
@media (max-width: 1039px) { .pv-slide { flex-basis: 50%; } }
@media (max-width: 699px) { .pv-slide { flex-basis: 100%; } }

/* Dokud se aplikace nevykreslí, je vidět předgenerované HTML (#pv-prerender). */
html:not(.pv-live) #dc-root { display: none; }

/* Surová šablona nesmí být vidět, než ji runtime (načítaný s defer) převezme. */
x-dc { display: none; }