@charset "UTF-8";

/* Přepis Shoptet zápatí pro widget Firmy.cz */
.bukoma-widget-firmycz {
  max-width: 240px;
  margin: 30px auto;
  padding: 20px;
  border: 1.5px solid #bbb !important;
  border-radius: 4px;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Flexbox pro dvojici bloku (adresa + otev?c?oba) */
.content-wrapper #content .content-inner .bukoma-grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

/* Vizitky týmu */
.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card img {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card h3 {
  font-size: 20px;
  margin: 6px 0 4px;
  font-weight: 600;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid .bukoma-person-card p {
  margin: 4px 0;
  font-size: 15px;
}

.content-wrapper #content .content-inner article.pageArticleDetail .bukoma-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  justify-content: center;
}

/* Poehled výhod (USP grid) */
.content-inner article.pageArticleDetail .bukoma-usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin: 40px auto;
  max-width: 1280px;
}

.content-inner .pageArticleDetail .bukoma-usp-item {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  text-align: center;
}

.content-inner .pageArticleDetail .bukoma-usp-item h3 {
  font-size: 20px;
  font-family: 'Exo 2', sans-serif;
  margin-top: 12px;
  margin-bottom: 8px;
}

.content-inner .pageArticleDetail .bukoma-usp-item p {
  font-size: 16px;
  color: #555;
  font-family: 'Source Sans 3', sans-serif;
}

.content-inner .pageArticleDetail .bukoma-usp-icon {
  font-size: 36px;
  line-height: 1;
}

.content-inner .pageArticleDetail .bukoma-usp-item a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.content-inner .pageArticleDetail .bukoma-usp-item:hover h3,
.bukoma-usp-item:hover p {
  text-decoration: underline;
}
.content-inner .pageArticleDetail .bukoma-usp-item {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.content-inner .pageArticleDetail .bukoma-usp-item:hover h3,
.bukoma-usp-item:hover p {
  text-decoration: underline;
}
/* ====== BUKOMA ? obr?k s popiskem (desktop overlay, mobile/tablet below) ====== */

/* Kontejner */
.bk-img{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 24px 0;
  overflow:hidden;
  border-radius:16px;
}

/* Obr?k */
.bk-img picture,
.bk-img img{
  display:block;
  width:100%;
  height:auto;
}

/* Popisek ? z?ad (konkr??ozlo?en?iz breakpoints n? */
.bk-caption{
  display:grid;
  gap:6px;
  z-index:1;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.bk-cap-title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
  font-size:clamp(18px, 2.4vw, 28px);
}
.bk-cap-sub{
  font-size:clamp(13px, 1.6vw, 16px);
  opacity:.95;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; /* 2 o?y poi overlayi */
  overflow:hidden;
}
.bk-cap-cta{
  justify-self:start;
  margin-top:6px;
  padding:12px 18px;
  border-radius:999px;
  background:#009688;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.bk-cap-cta:hover{ background:#2E5F66; transform:translateY(-1px); }
.bk-cap-cta:focus-visible{ outline:2px solid #009688; outline-offset:2px; }

/* ---------- DESKTOP (overlay) ---------- */
@media (min-width:1025px){
  /* gradient overlay */
  .bk-img::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70%);
    pointer-events:none;
    transition:opacity .3s ease;
  }

  /* caption jako overlay dole */
  .bk-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:18px 22px;
  }
}

/* jemnĂ˝ zoom pouze na zao?n? s hover (kombinovan?edia query) */
@media (min-width:1025px) and (hover:hover){
  .bk-img img{ transition:transform .5s ease; }
  .bk-img:hover img{ transform:scale(1.02); }
  .bk-img:hover::after{ opacity:.95; }
}

/* ---------- TABLET & MOBIL (caption mimo fotku) ---------- */
@media (max-width:1024px){
  .bk-img::after{ display:none; }          /* bez overlaye */
  .bk-caption{
    position:static;
    padding:10px 0 0 0;
    color:#111;
    text-shadow:none;
  }
  .bk-cap-title{ font-size:clamp(18px, 5vw, 22px); color:#111; }
  .bk-cap-sub{ font-size:14px; color:#444; -webkit-line-clamp:unset; }
  .bk-cap-cta{
    padding:10px 14px;
    font-size:14px;
    background:#009688;
    color:#fff;
    border:0;
  }
  /* jemn??aoblen?a men?? zao?n? */
  .bk-img, .bk-img img{ border-radius:12px; }
}

/* ---------- Po?upnost / syst?v?reference ---------- */
@media (prefers-reduced-motion:reduce){
  .bk-img img,
  .bk-cap-cta,
  .bk-img::after{ transition:none !important; }
}

/* ---------- Modifik?ry ---------- */
/* Vynutit overlay na v?ech velikostech (napo. promo hero) */
.bk-img.bk--overlay-all::after{ display:block; }
.bk-img.bk--overlay-all .bk-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 20px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45);
}
@media (max-width:1024px){
  .bk-img.bk--overlay-all .bk-caption{ -webkit-line-clamp:1; }
}

/* Vynutit caption mimo fotku v?ude (i na desktopu) */
.bk-img.bk--below-all::after{ display:none; }
.bk-img.bk--below-all .bk-caption{
  position:static;
  padding:12px 0 0 0;
  color:#111; text-shadow:none;
}

/* Vypnout hover-zoom */
.bk-img.bk--no-zoom img{ transform:none !important; }

/* ===== BUKOMA ? m? "masivn?obr?y na desktopu ===== */

/* Výchoz?v?echny .bk-img se na desktopu zú?? zarovnaj?a stoed.
   Netýk?e gridu/karet, kde chceme 100% ??u. */
@media (min-width: 1200px){
  .bk-img{
    max-width: 1100px;          /* z?adn?po?mn???a */
    margin-left: auto;
    margin-right: auto;
  }
  /* výjimky ? v mo?? nech?me 100% ??u parentu */
  .bukoma-grid-3 .bk-img,
  .ji-hp-cats__items .bk-img{
    max-width: 100%;
  }
}

/* Jemn?v?en?a ?ir?? monitorech */
@media (min-width: 1600px){
  .bk-img{ max-width: 1200px; }
}

/* R??/st?pro lep??dd?n?d okol?jen desktop) */
@media (min-width: 1025px){
  .bk-img{
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    overflow: hidden; /* aby se zaoblen?rojevilo i na img */
  }
}

/* ??? Utility ??y ???
   Poidej na <figure class="bk-img ..."> podle potoeby. */
@media (min-width: 1200px){
  .bk-img.bk--narrow{ max-width: 900px; }
  .bk-img.bk--medium{ max-width: 1100px; }   /* default */
  .bk-img.bk--wide{ max-width: 1300px; }
  .bk-img.bk--full{ max-width: none; }       /* ponech?ull-width */
}

/* ??? HERO varianta s men??Ă˝?kou na desktopu ???
   Poidej to? .bk--hero na figure, vĂ˝?ka pusob?? "masivn? */
@media (min-width: 1200px){
  .bk-img.bk--hero img{
    aspect-ratio: 16 / 6;  /* ni???bannerovĂ˝" pom?*/
    object-fit: cover;
    object-position: center;
  }
}

/* Kdy? je obr?k uvnito textu dvousloupcov?ekce, zachov? jeho
   flexibilitu (u? si ??u o? flex parent) */
@media (min-width: 1200px){
  [style*="display:flex"] > .bk-img{ max-width: none; }
}

/* ---------- Pom?v?o? (proti CLS) ---------- */
/* Poidej to? na .bk-img, kdy? nezn?width/height nebo chce? sjednotit pom?
   St? je doporu??v?t i width/height po? na <img> kvuli CLS. */
.bk-img.bk--ar-16x9    img{ aspect-ratio:16 / 9;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-3x2     img{ aspect-ratio:3  / 2;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-4x3     img{ aspect-ratio:4  / 3;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-2x1     img{ aspect-ratio:2  / 1;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-8x3     img{ aspect-ratio:8  / 3;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-1050x480 img{ aspect-ratio:35 / 16; object-fit:cover; object-position:center; } /* ? 1050?80 */
.bk-img.bk--ar-1x1     img{ aspect-ratio:1  / 1;  object-fit:cover; object-position:center; }
.bk-img.bk--ar-3x4     img{ aspect-ratio:3  / 4;  object-fit:cover; object-position:center; }

/* Voliteln?tility pro výoez (kdy? je hlavn?otiv mimo stoed) */
.bk-img.bk--pos-top img{ object-position:50% 10%; }
.bk-img.bk--pos-bottom img{ object-position:50% 90%; }
.bk-img.bk--pos-left img{ object-position:10% 50%; }
.bk-img.bk--pos-right img{ object-position:90% 50%; }

/* ====== BUKOMA ? dopl??pro str?u Pokl?y ====== */
:root{
  --bk-primary:#009688;
  --bk-primary-dark:#2E5F66;
  --bk-text:#111;
  --bk-text-muted:#555;
  --bk-border:#e7e7e7;
  --bk-bg:#fafafa;
}

/* CTA tla?ka */
.bukoma-button{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:var(--bk-primary);
  color:#fff!important;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.bukoma-button:hover{ background:var(--bk-primary-dark); transform:translateY(-1px); }
.bukoma-button:focus-visible{ outline:2px solid var(--bk-primary); outline-offset:2px; }
.bukoma-button--ghost{
  background:transparent; color:var(--bk-primary)!important; border:2px solid var(--bk-primary);
}
.bukoma-button--ghost:hover{ background:var(--bk-primary); color:#fff!important; }

/* CTA box (sv??ozad? jemnĂ˝ r??) */
.bukoma-cta-box{
  padding:18px 20px;
  border:1px solid var(--bk-border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
  margin:18px 0 28px 0;
}
.bukoma-cta-box h3{ margin:0 0 6px 0; }
.bukoma-cta-box p{ margin:0 0 12px 0; color:var(--bk-text-muted); }
.bukoma-cta-box .bukoma-button{ margin-right:8px; }

/* Odstavce a drobn?ypografie */
.bukoma-text{ color:var(--bk-text); line-height:1.6; }
.bukoma-subtext{ color:var(--bk-text-muted); }

/* Kroky ? o?lovanĂ˝ postup */
.bukoma-steps{
  counter-reset: step;
  list-style:none; padding:0; margin:12px 0 22px 0;
  display:grid; gap:10px;
}
.bukoma-steps li{
  position:relative;
  padding:12px 12px 12px 48px;
  border:1px solid var(--bk-border);
  border-radius:12px; background:#fff;
}
.bukoma-steps li::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bk-primary); color:#fff; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Bullet body ? poehledn?enefity */
.bukoma-bullets{ list-style:none; padding:0; margin:12px 0 18px 0; }
.bukoma-bullets li{
  position:relative; padding-left:28px; margin:10px 0;
}
.bukoma-bullets li::before{
  content:"+"; position:absolute; left:0; top:0;
  font-weight:900; color:var(--bk-primary); line-height:1;
}

/* Grid 3 sloupce pro uk?y (auto-responzivn?*/
.bukoma-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin:14px 0 8px 0;
}
@media (max-width: 1024px){ .bukoma-grid-3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 640px){ .bukoma-grid-3{ grid-template-columns:1fr; } }

/* FAQ akordeon ? minimalisticky (bez JS funguje jako sekce) */
.bukoma-faq h3{
  position:relative;
  margin:12px 0 6px 0;
  padding:12px 14px;
  border:1px solid var(--bk-border);
  border-radius:12px;
  background:var(--bk-bg);
  cursor:default;
}
.bukoma-faq p{
  margin:0 0 14px 0;
  padding:0 14px;
  color:var(--bk-text-muted);
}

/* Obecn?tility pro mezery (kdyby se hodily) */
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }
.mt-8{ margin-top:8px!important; }
.mt-16{ margin-top:16px!important; }
.mb-16{ margin-bottom:16px!important; }

/* Pomocn?prava pro obr?y v gridu: sjednot? r?us s .bk-img */
.bukoma-grid-3 .bk-img,
.bukoma-grid-3 .bk-img img{ border-radius:12px; }

/* Voliteln?jemn?výrazn? odkazu v textu */
.bukoma-text a{ color:var(--bk-primary); text-decoration:underline; text-underline-offset:2px; }
.bukoma-text a:hover{ color:#0b7b72; }

/* BUKOMA ? nov?om?v?o? */
.bk-img.bk--ar-8x3  img { aspect-ratio: 8 / 3;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-1050x480 img { aspect-ratio: 35 / 16; object-fit: cover; object-position: center; }

/* (pro Ăşplnost ? pokud bys je je?t?em? */
.bk-img.bk--ar-2x1  img { aspect-ratio: 2 / 1;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-16x9 img { aspect-ratio: 16 / 9;  object-fit: cover; object-position: center; }
.bk-img.bk--ar-3x2  img { aspect-ratio: 3 / 2;   object-fit: cover; object-position: center; }
.bk-img.bk--ar-4x3  img { aspect-ratio: 4 / 3;   object-fit: cover; object-position: center; }


/* ===== BUKOMA ? sjednocenĂ˝ FAQ ===== */
.bk-faq { margin: 18px 0; }
.bk-faq details {
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  background: #fff;
  margin: 10px 0;
  overflow: clip;
}
.bk-faq summary {
  list-style: none; /* skryje default trojúheln?v n?erých browserech */
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: #111;
  position: relative;
  outline: none;
}
.bk-faq summary::-webkit-details-marker { display: none; } /* Safari/Chrome */

.bk-faq .bk-faq__icon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  transition: transform .2s ease;
  font-weight: 900; color: var(--bk-primary, #009688);
}
.bk-faq details[open] .bk-faq__icon { transform: translateY(-50%) rotate(45deg); } /* + ? ?*/

.bk-faq .bk-faq__answer {
  padding: 0 16px 14px 16px;
  color: #555; line-height: 1.6;
  border-top: 1px solid #f1f1f1;
}

/* Hover/Focus stavy */
.bk-faq summary:hover { background: #fafafa; }
.bk-faq summary:focus-visible {
  box-shadow: 0 0 0 2px var(--bk-primary, #009688) inset;
  border-radius: 12px;
}

/* Kompaktn??a mobilu */
@media (max-width:640px){
  .bk-faq summary{ padding: 12px 14px; }
  .bk-faq .bk-faq__answer{ padding: 0 14px 12px 14px; }
}


.bukoma-banner-rada {
  width: 100%;
  max-width: 1200px;
  margin-left: 0;
  text-align: center;
}

.bukoma-banner-rada img {
  width: 100%;
  height: auto;
  display: none;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .bukoma-banner-rada .banner-desktop {
    display: block;
  }
}

@media (max-width: 767px) {
  .bukoma-banner-rada .banner-mobile {
    display: block;
  }
}
.content-inner {max-width: none !important;}

/* CTA bloky */
.bukoma-cta-box {
  background-color: #f5f5f5;
  padding: 24px;
  margin: 30px 0;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bukoma-cta-box h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.bukoma-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #009688;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bukoma-button:hover {
  background-color: #2E5F66;
  text-decoration: underline;
}

/* Informace vedle sebe */
.bukoma-info-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 30px 0;
}

.bukoma-info-blocks .info-block {
  flex: 1 1 300px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}


/* GRID & card pro nativní i novou galerii */
.plus-gallery-wrap,
.bk-gallery,
.gallery-unified{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  gap:16px!important;
}
.plus-gallery-wrap .plus-gallery-item,
.bk-gallery .bk-item,
.gallery-unified .bk-item{
  width:auto!important;height:auto!important;position:relative!important;
  aspect-ratio:4/3;border-radius:16px!important;overflow:hidden!important;
  background:#f5f5f5!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;
  transition:transform .15s ease, box-shadow .15s ease!important;cursor:pointer!important;
}
.plus-gallery-wrap .plus-gallery-item>span,
.gallery-unified .bk-item>span{display:block!important;width:100%!important;height:100%!important;position:relative!important;}
.plus-gallery-wrap .plus-gallery-item img,
.bk-gallery .bk-item img,
.gallery-unified .bk-item img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:transform .35s ease!important;}
.plus-gallery-wrap .plus-gallery-item:hover img,
.bk-gallery .bk-item:hover img,
.gallery-unified .bk-item:hover img{transform:scale(1.03)!important;}
/* overlay z data-hover */
.plus-gallery-wrap a[href]::after,
.bk-gallery a[href]::after,
.gallery-unified a[href]::after{
  content: attr(data-hover);
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));
  color:#fff;font-size:14px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:none;z-index:3;
}
.plus-gallery-wrap a[href]:hover::after,
.bk-gallery a[href]:hover::after,
.gallery-unified a[href]:hover::after{opacity:1;transform:translateY(0)}
/* breakpoints – menší tile na mobilu */
@media (max-width:1024px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:14px!important;}
}
@media (max-width:768px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:12px!important;}
}
@media (max-width:480px){
  .plus-gallery-wrap,.bk-gallery,.gallery-unified{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;}
  .plus-gallery-wrap .plus-gallery-item,.bk-gallery .bk-item,.gallery-unified .bk-item{aspect-ratio:1/1;}
}





<script>
document.addEventListener('click', function(e){
  if(e.target.closest('.bk-faq summary')){
    const current = e.target.closest('details');
    const list = current?.parentElement?.querySelectorAll('details[open]');
    list && list.forEach(d => { if(d!==current) d.removeAttribute('open'); });
  }
});
</script>