/****** STYLY pro všechny stránky (krom produktů, kategorií a blogu) prefix .pdu-pag- ******/
/**** ODSTAVCE ****/

/* světlešedé pozadí bez rámečku */
.pdu-pag-pozadi-svetlesede-bez-okraje {
    width: 100%;
    background-color: var(--pdu-barva-sede-svetla);
    padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-l);
}


/* ===================================================
   PDU-PAG ÚVODNÍ ROZCESTNÍK (HOMEPAGE)
   Všechny barvy/spacing/radius/shadows/durations čerpá
   přímo z global.css. Změna probíhá výhradně tam.
   Sekce 1: Page wrapper + typografie (claim/mission/final)
   Sekce 2: Hero CTA (.pdu-pag-btn-primary / -cta)
   Sekce 3: Group (nadpis sekce)
   Sekce 4: Staty (6 výhod)
   Sekce 5: Pro koho jsme tady (publikum)
   Sekce 6: Carousel (wrap, šipky, dots) + karta
   Sekce 7: Mid CTA (tmavé pozadí s fotkou týmu)
   Sekce 8: Kontaktní karta
   Sekce 9: Hodnocení tlačítka (3 odkazy)
   Sekce 10: Hod karty (FB / DOD)
   Sekce 11: Final text + reduced motion
   =================================================== */


/* ───── 1. PAGE WRAPPER + ÚVODNÍ TEXT ───── */
.pdu-pag-page { font-family: inherit; color: var(--pdu-barva-tmavomodra); box-sizing: border-box; max-width: 100%; }
.pdu-pag-page *, .pdu-pag-page *::before, .pdu-pag-page *::after { box-sizing: border-box; font-family: inherit; }

.pdu-pag-claim   { text-align: center; color: var(--pdu-barva-text-sekundarni); font-style: italic; margin: 0 0 12px; font-size: 1.05em; }
.pdu-pag-mission { text-align: center; color: var(--pdu-barva-tmavomodra); line-height: 1.55; font-size: 1.15em; max-width: 780px; margin: 0 auto 28px; }
.pdu-pag-mission strong { color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-mission-link { color: var(--pdu-barva-zelena-akcent) !important; text-decoration: none !important; }
.pdu-pag-mission-link:hover { text-decoration: underline !important; }
.pdu-pag-mission-link strong { color: var(--pdu-barva-zelena-akcent); }


/* ───── 2. HERO CTA ───── */
.pdu-pag-hero { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 32px; }
.pdu-pag-btn-primary,
.pdu-pag-btn-cta {
  display: inline-block; padding: 14px 28px; font-size: 1.05em; font-weight: 700;
  text-decoration: none !important; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-align: center; cursor: pointer;
}
.pdu-pag-btn-primary { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; border: 1px solid var(--pdu-barva-zelena-akcent); }
.pdu-pag-btn-primary:hover { background: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra) !important; border-color: var(--pdu-barva-tmavomodra); }
.pdu-pag-btn-cta { background: var(--pdu-barva-zluta-cta); color: var(--pdu-barva-tmavomodra) !important; border: 1px solid var(--pdu-barva-zluta-cta); font-weight: 800; }
.pdu-pag-btn-cta:hover { background: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra) !important; border-color: var(--pdu-barva-zluta-cta); }


/* ───── 3. GROUP (sekce s nadpisem) ───── */
.pdu-pag-group       { padding: 24px 0; }
.pdu-pag-group-head  { margin-bottom: 18px; }
.pdu-pag-group-title { font-size: 1.8em; font-weight: 800; margin: 0; color: var(--pdu-barva-tmavomodra); text-align: left; line-height: 1.25; }


/* ───── 4. STATY (mřížka 6 výhod) ───── */
.pdu-pag-staty { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 600px) { .pdu-pag-staty { grid-template-columns: repeat(3, 1fr); } }
.pdu-pag-stat {
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 3px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); padding: 20px 12px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  box-shadow: var(--pdu-stin-jemny); height: 100%;
  text-decoration: none !important;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  min-height: 160px;
}
.pdu-pag-stat:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-3px); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-stat-num { color: var(--pdu-barva-zelena-akcent); font-size: 2.1em; font-weight: 800; line-height: 1.05; margin: 0 0 8px; display: block; letter-spacing: -.01em; }
.pdu-pag-stat-num-emoji { font-size: 1.9em; line-height: 1; }
.pdu-pag-stat strong { color: var(--pdu-barva-tmavomodra); font-size: 1.05em; font-weight: 800; display: block; }
.pdu-pag-stat-desc { color: var(--pdu-barva-text-sedy); font-size: .92em; line-height: 1.45; display: block; margin-top: 4px; }


/* ───── 5. PRO KOHO JSME TADY ───── */
.pdu-pag-koho { display: flex; flex-wrap: wrap; gap: 14px; }
.pdu-pag-koho-item {
  flex: 1; min-width: 250px; position: relative;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-bottom: 3px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card); padding: 24px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-koho-item:hover { box-shadow: var(--pdu-stin-vyrazny); transform: translateY(-3px); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-koho-ico {
  width: 72px; height: 72px; background: var(--pdu-barva-zelena-svetla-3); border-radius: 50%;
  margin: 0 auto 4px; display: flex; align-items: center; justify-content: center;
  font-size: 36px; line-height: 1; flex-shrink: 0;
}
.pdu-pag-koho-item strong { font-size: 1.1em; color: var(--pdu-barva-tmavomodra); font-weight: 800; line-height: 1.3; display: block; }
.pdu-pag-koho-item span   { font-size: .92em; color: var(--pdu-barva-text-sekundarni); line-height: 1.5; display: block; }
.pdu-pag-koho-link { position: absolute; inset: 0; z-index: 10; text-decoration: none !important; }


/* ───── 6. CAROUSEL (wrap + scrollovací řádek + karty) ───── */
.pdu-pag-cwrap { position: relative; width: 100%; padding: 0; }
.pdu-pag-carousel {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; gap: 12px; padding: 5px 5px 12px; margin: 0;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: var(--pdu-barva-okraj-jemny) var(--pdu-barva-sede-svetla);
}
.pdu-pag-carousel::-webkit-scrollbar { height: 6px; }
.pdu-pag-carousel::-webkit-scrollbar-track { background: var(--pdu-barva-sede-svetla); border-radius: 4px; }
.pdu-pag-carousel::-webkit-scrollbar-thumb { background: var(--pdu-barva-okraj-jemny); border-radius: 4px; }
.pdu-pag-carousel::-webkit-scrollbar-thumb:hover { background: var(--pdu-barva-zelena-akcent); }

.pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); scroll-snap-align: start; }
@media (min-width: 600px) { .pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); } }
@media (min-width: 992px) { .pdu-pag-carousel .pdu-pag-karta { flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); } }

.pdu-pag-karta {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-card);
  background: var(--pdu-barva-bila); overflow: hidden;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none; min-height: 280px;
}
.pdu-pag-karta:hover { box-shadow: var(--pdu-stin-karta-hover); border-color: var(--pdu-barva-zelena-akcent); transform: translateY(-3px); }

.pdu-pag-foto { width: 100%; padding-top: 100%; position: relative; background: var(--pdu-barva-pozadi-foto); flex-shrink: 0; }
.pdu-pag-foto img {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: contain; padding: 14px; box-sizing: border-box;
  border-radius: 0 !important; border: none !important; margin: 0 !important;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-karta:hover .pdu-pag-foto img { transform: scale(1.08); }

.pdu-pag-nazev {
  padding: 14px 12px 16px; line-height: 1.3; color: var(--pdu-barva-tmavomodra); background: var(--pdu-barva-bila);
  border-top: 1px solid var(--pdu-barva-okraj-svetly); flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; min-height: 95px; word-break: break-word;
}
.pdu-pag-nazev strong { font-size: 1.18em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-nazev span   { font-size: .95em;  font-weight: 500; color: var(--pdu-barva-text-sekundarni); line-height: 1.45; }
.pdu-pag-link { position: absolute; inset: 0; z-index: 10; text-decoration: none !important; }

/* Šipky carouselu */
.pdu-pag-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: 50%;
  font-size: 22px; color: var(--pdu-barva-tmavomodra); cursor: pointer; z-index: 2;
  box-shadow: var(--pdu-stin-jemny);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  line-height: 0; padding-bottom: 3px;
}
.pdu-pag-arrow:hover { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila); border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-arrow-left  { left: -20px; }
.pdu-pag-arrow-right { right: -20px; }
@media (max-width: 768px) { .pdu-pag-arrow { display: none; } }

/* Dots (mobil) */
.pdu-pag-dots { display: none; gap: 6px; justify-content: center; padding: 8px 0 0; }
.pdu-pag-dots button {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pdu-barva-sede-stredni);
  border: none; padding: 0; cursor: pointer;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-dots button.active { background: var(--pdu-barva-zelena-akcent); width: 22px; border-radius: 100px; }
@media (max-width: 768px) { .pdu-pag-dots { display: flex; } }


/* ───── 7. MID CTA (tmavé pozadí s fotkou týmu) ───── */
.pdu-pag-cta-mid {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                    url('/user/documents/upload/fotografie/team/tym-ploty-dobry-768w.jpg');
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  color: var(--pdu-barva-bila); padding: 38px 26px;
  border-radius: var(--pdu-radius-xl); text-align: center; margin: 32px 0;
}
@media (min-width: 768px) {
  .pdu-pag-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('/user/documents/upload/fotografie/team/tym-ploty-dobry-1280w.jpg');
  }
}
@media (min-width: 1440px) {
  .pdu-pag-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('/user/documents/upload/fotografie/team/tym-ploty-dobry-1920w.jpg');
  }
}
.pdu-pag-cta-mid-title { font-size: 1.6em;  font-weight: 800; margin: 0 0 12px; color: var(--pdu-barva-bila); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pdu-pag-cta-mid-text  { font-size: 1.12em; line-height: 1.55; margin: 0 auto 22px; max-width: 620px; color: var(--pdu-barva-bila); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }


/* ───── 8. KONTAKTNÍ KARTA ───── */
.pdu-pag-kontakt {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin: 32px 0 24px; background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-xl);
  overflow: hidden; box-shadow: var(--pdu-stin-stredni);
}
@media (min-width: 992px) { .pdu-pag-kontakt { grid-template-columns: 5fr 7fr; } }

.pdu-pag-kontakt-foto {
  background: var(--pdu-barva-bila); min-height: 200px; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.pdu-pag-kontakt-foto img {
  max-width: 220px !important; max-height: 220px !important;
  width: 100% !important; height: auto !important;
  object-fit: contain; display: block;
  margin: 0 auto !important; padding: 0 !important;
  border-radius: 0 !important; border: none !important;
  position: relative !important; top: auto !important; left: auto !important;
}

.pdu-pag-kontakt-body    { padding: 26px 28px; }
.pdu-pag-kontakt-body h3 { margin: 0 0 10px !important; font-size: 1.45em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-kontakt-body p  { margin: 0 0 18px !important; color: var(--pdu-barva-text-sekundarni); line-height: 1.6; font-size: 1.02em; }
.pdu-pag-kontakt-akce    { display: flex; flex-direction: column; gap: 10px; }
.pdu-pag-kontakt-tel,
.pdu-pag-kontakt-mail {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--pdu-barva-zelena-svetla-2); color: var(--pdu-barva-tmavomodra) !important; text-decoration: none !important;
  padding: 13px 16px; border-radius: 8px; font-weight: 700; font-size: 1.05em;
  border: 1px solid var(--pdu-barva-okraj-zeleny-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-kontakt-tel:hover,
.pdu-pag-kontakt-mail:hover { background: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-kontakt-ico {
  width: 22px !important; height: 22px !important;
  max-width: 22px !important; max-height: 22px !important;
  flex-shrink: 0; object-fit: contain;
  margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 0 !important;
  position: relative !important; top: auto !important; left: auto !important;
  transition: filter var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-kontakt-tel:hover  .pdu-pag-kontakt-ico,
.pdu-pag-kontakt-mail:hover .pdu-pag-kontakt-ico { filter: brightness(0) invert(1); }
.pdu-pag-kontakt-vsechny       { color: var(--pdu-barva-zelena-akcent) !important; font-weight: 700; text-decoration: none !important; padding: 8px 0 0; font-size: 1em; }
.pdu-pag-kontakt-vsechny:hover { text-decoration: underline !important; }


/* ───── 9. HODNOCENÍ TLAČÍTKA (3 odkazy) ───── */
.pdu-pag-hodnoceni { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 25px; }
@media (min-width: 992px) {
  .pdu-pag-hodnoceni { flex-direction: row; align-items: stretch; }
  .pdu-pag-hodnoceni-item { flex: 1; }
  .pdu-pag-hodnoceni-btn  { height: 100%; }
}
.pdu-pag-hodnoceni-item {
  width: 100%; max-width: 480px; margin-bottom: 2px;
  transition: transform var(--pdu-prechod-dur-stredni) ease;
  box-sizing: border-box;
}
.pdu-pag-hodnoceni-item:hover { transform: translateY(-3px); }
.pdu-pag-hodnoceni-btn {
  display: flex; align-items: center;
  background-color: var(--pdu-barva-zelena-akcent); border: 1px solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-m); overflow: hidden;
  text-decoration: none !important; cursor: pointer; width: 100%;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-hodnoceni-btn:hover { background-color: var(--pdu-barva-bila); border-color: var(--pdu-barva-tmavomodra); }
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-nadpis,
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-popis,
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-arrow { color: var(--pdu-barva-tmavomodra); }
.pdu-pag-hodnoceni-btn:hover .pdu-pag-hodnoceni-btn-popis { background: rgba(25, 25, 50, .08); }
.pdu-pag-hodnoceni-btn-body { flex: 1; padding: 14px 14px 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.pdu-pag-hodnoceni-btn-nadpis { font-size: 1.02em; font-weight: 700; color: var(--pdu-barva-bila); display: block; transition: color var(--pdu-prechod-dur-stredni) ease; }
.pdu-pag-hodnoceni-btn-popis {
  font-size: .78em; background: rgba(255, 255, 255, .2);
  padding: 2px 8px; border-radius: 3px;
  color: rgba(255, 255, 255, .95);
  display: inline-block; align-self: flex-start;
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-hodnoceni-btn-arrow {
  width: 44px; flex-shrink: 0; text-align: center;
  font-size: 20px; color: rgba(255, 255, 255, .85);
  padding: 14px 0; transition: color var(--pdu-prechod-dur-stredni) ease;
}


/* ───── 10. HOD KARTY (FB hodnocení / DOD) ───── */
.pdu-pag-hod-karty { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 5px; }
.pdu-pag-hod-karta {
  flex: 1; min-width: 260px;
  background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card); padding: 20px 22px;
  display: flex; flex-direction: column;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-pag-hod-karta h2 { margin: 0 0 10px; font-size: 1.25em; font-weight: 800; color: var(--pdu-barva-tmavomodra); }
.pdu-pag-hod-karta p,
.pdu-pag-hod-karta ul { font-size: .95em; margin: 0 0 8px; color: var(--pdu-barva-tekst-zakladni); line-height: 1.55; }
.pdu-pag-hod-karta ul { padding-left: 20px; }
.pdu-pag-hod-karta li { margin: 3px 0; }

.pdu-pag-hod-karta-btn {
  display: block; width: 100%;
  padding: 14px 24px; text-align: center;
  font-size: 1.02em; font-weight: 700;
  text-decoration: none !important; cursor: pointer;
  border: 1px solid; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-pag-hod-karta-btn-fb        { background-color: var(--pdu-barva-facebook); color: var(--pdu-barva-bila) !important; border-color: var(--pdu-barva-facebook); }
.pdu-pag-hod-karta-btn-fb:hover  { background-color: var(--pdu-barva-bila); color: var(--pdu-barva-facebook) !important; border-color: var(--pdu-barva-facebook); }
.pdu-pag-hod-karta-btn-green     { background-color: var(--pdu-barva-zelena-akcent); color: var(--pdu-barva-bila) !important; border-color: var(--pdu-barva-zelena-akcent); }
.pdu-pag-hod-karta-btn-green:hover { background-color: var(--pdu-barva-bila); color: var(--pdu-barva-tmavomodra) !important; border-color: var(--pdu-barva-tmavomodra); }


/* ───── 11. FINAL TEXT + REDUCED MOTION ───── */
.pdu-pag-final {
  color: var(--pdu-barva-text-sedy); font-size: .95em; line-height: 1.6;
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
  text-align: center;
}
.pdu-pag-final a { color: var(--pdu-barva-zelena-akcent); }

@media (prefers-reduced-motion: reduce) {
  .pdu-pag-karta, .pdu-pag-arrow, .pdu-pag-foto img,
  .pdu-pag-btn-primary, .pdu-pag-btn-cta { transition: none; }
  .pdu-pag-karta:hover { transform: none; }
  .pdu-pag-carousel    { scroll-behavior: auto; }
}