/* hs-blog.css v3 – HomeSystem blog (dizajnový systém HomeSystem). Nasadenie: Záhlavie */
.hsb{--b:#239ceb;--b-mid:#1b8fdc;--b-deep:#136fb0;--tint:#f3f9fe;--line:#e3eef7;--ink:#1f1f1f;--txt:#4d4d4d;--muted:#6b6b6b;
  --y:#ffc807;--y-h:#f2b800;--pink:#f986c5;--pink-t:#fff4fa;--lime:#c8f25a;
  font-family:"Source Sans 3",Arial,sans-serif;font-size:18px;line-height:1.65;color:var(--txt);max-width:760px;margin:0 auto}
.hsb h2,.hsb h3{font-family:"Exo 2",Arial,sans-serif;color:var(--ink);line-height:1.25}
.hsb h2{font-size:1.55em;font-weight:700;margin:2.2em 0 .6em;scroll-margin-top:90px}
.hsb h3{font-size:1.15em;font-weight:700;margin:1.5em 0 .35em}
.hsb p{margin:0 0 1em}
.hsb a{color:var(--b-deep);text-decoration:underline;text-underline-offset:2px}
.hsb a:hover{color:var(--b)}
.hsb a:focus-visible,.hsb summary:focus-visible{outline:3px solid var(--b-deep);outline-offset:2px}
.hsb strong{color:var(--ink)}
.hsb ul,.hsb ol{padding-left:1.3em;margin:0 0 1.2em}
.hsb li{margin-bottom:.35em}
.hsb code{background:var(--tint);border:1px solid var(--line);border-radius:3px;padding:0 .3em;font-size:.92em}
.hsb .hsb-perex{font-size:1.15em;color:var(--ink);line-height:1.55;margin-bottom:1.4em}

/* Bubliny – dekorácia za produktmi (žltá, ružová, limetková), nikdy s textom */
.hsb .hsb-foto{position:relative;display:flex;align-items:center;justify-content:center}
.hsb .hsb-foto::before{content:"";position:absolute;inset:6% 8%;background:no-repeat center/contain;z-index:0}
.hsb .hsb-foto img{position:relative;z-index:1;max-width:100%;object-fit:contain}
.hsb .hsb-y::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M8 10C16-2 38 0 44 12s-2 26-18 27S0 22 8 10z' fill='%23ffc807'/%3E%3C/svg%3E")}
.hsb .hsb-p::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M6 18C6 4 28-2 40 6s8 28-8 32S6 32 6 18z' fill='%23f986c5'/%3E%3C/svg%3E")}
.hsb .hsb-l::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M4 22C2 8 22 0 36 4s12 22 2 30S6 36 4 22z' fill='%23c8f25a'/%3E%3C/svg%3E")}
.hsb .hsb-bod{display:block;width:48px;height:40px;margin-bottom:8px}
.hsb .hsb-bod::before{inset:0}

/* Stručne – svetlomodrý blok s bublinami (komponent Výhody) */
.hsb .hsb-strucne{background:var(--tint);border-radius:20px;padding:24px 28px;margin:1.6em 0}
.hsb .hsb-strucne>p{font-family:"Exo 2",Arial,sans-serif;font-weight:700;font-size:1.15em;color:var(--ink);margin-bottom:.8em}
.hsb .hsb-strucne ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hsb .hsb-strucne li{margin:0;font-size:.95em;line-height:1.5}
.hsb .hsb-strucne li strong{display:block;font-family:"Exo 2",Arial,sans-serif;margin-bottom:.2em}

/* Obsah článku */
.hsb .hsb-obsah{border:1px solid var(--line);border-radius:16px;padding:.9em 1.3em;margin:1.6em 0}
.hsb .hsb-obsah p{font-family:"Exo 2",Arial,sans-serif;font-weight:700;color:var(--ink);margin-bottom:.3em}
.hsb .hsb-obsah ol{margin:0;font-size:.95em;columns:2;column-gap:2em}

/* Schéma zapojenia – hlavný vizuálny prvok */
.hsb .hsb-schema{margin:1.4em 0 .6em;display:flex;align-items:stretch;gap:0}
.hsb .hsb-uzol{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.hsb .hsb-uzol .hsb-foto{width:100%;height:120px;margin-bottom:8px}
.hsb .hsb-uzol .hsb-foto img{height:100px}
.hsb .hsb-uzol b{font-family:"Exo 2",Arial,sans-serif;color:var(--ink);font-size:.95em;line-height:1.25}
.hsb .hsb-uzol>div{display:flex;flex-direction:column;align-items:center}
.hsb .hsb-uzol small{font-size:.82em;line-height:1.35;color:var(--muted);margin-top:.2em}
.hsb .hsb-sipka{flex:0 0 34px;display:flex;align-items:center;justify-content:center;padding-bottom:40px;color:var(--b);font-size:1.6em;font-weight:700}
.hsb .hsb-popis{font-size:.88em;color:var(--muted);text-align:center;margin-bottom:1.6em}

/* Fotky v texte */
.hsb figure{margin:1.4em 0 1.6em}
.hsb figure img{width:100%;height:auto;border-radius:16px;display:block}
.hsb figcaption{font-size:.88em;color:var(--muted);margin-top:.5em}

/* Tip – ružový (najviac jeden na článok) */
.hsb .hsb-tip{padding:14px 18px;border-left:4px solid var(--pink);background:var(--pink-t);border-radius:0 10px 10px 0;margin:1.4em 0}
.hsb .hsb-tip p:last-child{margin-bottom:0}
.hsb .hsb-tip a{font-weight:600}

/* Tabuľky */
.hsb .hsb-tab{overflow-x:auto;margin:1.2em 0 1.6em;border:1px solid var(--line);border-radius:8px}
.hsb table{border-collapse:collapse;width:100%;font-size:.92em;min-width:520px}
.hsb th{background:var(--b-deep);color:#fff;font-family:"Exo 2",Arial,sans-serif;font-weight:700;text-align:left;padding:.6em .8em}
.hsb td{padding:.6em .8em;border-top:1px solid var(--line);vertical-align:top}
.hsb tr:nth-child(even) td{background:var(--tint)}

/* Produktové karty */
.hsb .hsb-produkty{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:1.2em 0 1.8em}
.hsb .hsb-produkt{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff;text-decoration:none;color:var(--txt)}
.hsb .hsb-produkt:hover{border-color:var(--b)}
.hsb .hsb-produkt .hsb-foto{height:150px;margin-bottom:10px}
.hsb .hsb-produkt .hsb-foto img{height:130px}
.hsb .hsb-produkt b{font-family:"Exo 2",Arial,sans-serif;color:var(--ink);font-size:.95em;line-height:1.3}
.hsb .hsb-produkt small{font-size:.86em;line-height:1.4;margin:.3em 0 .7em}
.hsb .hsb-produkt .hsb-produkt-cena{margin-top:auto;font-family:"Exo 2",Arial,sans-serif;font-weight:700;color:var(--b-deep)}

/* Automatizácie */
.hsb .hsb-auto{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:1em 0 1.6em}
.hsb .hsb-auto>div{background:var(--tint);border-radius:16px;padding:16px 18px}
.hsb .hsb-auto h3{margin-top:0;font-size:1.02em}
.hsb .hsb-auto p{font-size:.92em;line-height:1.5;margin:0}
.hsb .hsb-auto p+p{margin-top:.6em;color:var(--muted);font-size:.85em}

/* Zostavy */
.hsb .hsb-zostavy{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.4em 0 2em}
.hsb .hsb-zostava{border:2px solid var(--b);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.hsb .hsb-zostava-pas{background:var(--b-deep);color:#fff;font-family:"Exo 2",Arial,sans-serif;font-weight:700;padding:.5em 2.2em .5em .9em;
  align-self:flex-start;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.hsb .hsb-zostava .hsb-foto{height:130px;margin:10px 10px 0}
.hsb .hsb-zostava .hsb-foto img{height:110px}
.hsb .hsb-zostava-pre{padding:.5em .9em 0;font-size:.92em;color:var(--ink);margin:0}
.hsb .hsb-zostava ul{list-style:none;padding:.5em .9em;margin:0;font-size:.9em}
.hsb .hsb-zostava li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:.3em 0;margin:0}
.hsb .hsb-zostava li .hsb-cena{white-space:nowrap;text-align:right}
.hsb .hsb-zostava .hsb-povodna{display:block;font-size:.8em}
.hsb .hsb-pol{display:flex;align-items:center;gap:7px}
.hsb .hsb-zostava-info{display:none;font-size:.82em;line-height:1.4;color:var(--muted);padding:0 .9em .7em;margin:0}
.hsb .hsb-zostava-pozor .hsb-zostava-info{display:block}
.hsb .hsb-zostava-spolu{margin-top:auto;background:var(--tint);padding:.7em .9em;display:flex;justify-content:space-between;align-items:baseline;
  font-family:"Exo 2",Arial,sans-serif;color:var(--ink);font-weight:700}
.hsb .hsb-zostava-spolu strong{font-size:1.35em;color:var(--b-deep)}


/* Živé ceny a dostupnosť (hs-blog.js) */
.hsb .hsb-povodna{color:var(--muted);font-weight:400;font-size:.85em;margin-left:.2em}
.hsb .hsb-dost{display:inline-flex;align-items:center;gap:6px;min-height:1.7em;font-size:.8em;font-weight:600;line-height:1.2;border-radius:999px;padding:0 .75em;margin-top:6px;align-self:flex-start}
.hsb .hsb-dost:empty{visibility:hidden}
.hsb .hsb-dost::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.hsb .hsb-dost-ok{color:#006b00;background:#e6f4e6}
.hsb .hsb-dost-nie{color:#cc0000;background:#fdecec}
.hsb .hsb-dost-info{color:var(--b-deep);background:var(--tint)}
.hsb .hsb-dost-bod{font-size:0;padding:0;min-height:0;margin:0;background:none;flex:0 0 9px}
.hsb .hsb-dost-bod::before{width:9px;height:9px;flex-basis:9px;background:var(--line)}
.hsb .hsb-dost-bod.hsb-dost-ok::before{background:#009901}
.hsb .hsb-dost-bod.hsb-dost-nie::before{background:#cc0000}
.hsb .hsb-dost-bod.hsb-dost-info::before{background:var(--b)}

/* FAQ */
.hsb .hsb-faq details{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;background:#fff}
.hsb .hsb-faq summary{cursor:pointer;padding:.75em 2.6em .75em 1em;font-family:"Exo 2",Arial,sans-serif;font-weight:700;color:var(--ink);list-style:none;position:relative}
.hsb .hsb-faq summary::-webkit-details-marker{display:none}
.hsb .hsb-faq summary::after{content:"+";position:absolute;right:1em;top:50%;transform:translateY(-50%);font-size:1.4em;color:var(--b-deep)}
.hsb .hsb-faq details[open] summary::after{content:"–"}
.hsb .hsb-faq details[open] summary{border-bottom:1px solid var(--line)}
.hsb .hsb-faq details>div{padding:.8em 1em .2em}

/* Výzva – modrý pás so šikmou hranou a žltým tlačidlom */
.hsb .hsb-cta{position:relative;background:var(--b-deep);color:#fff;border-radius:20px 20px 0 0;padding:28px 30px 56px;margin:2.4em 0 1.6em;
  clip-path:polygon(0 0,100% 0,100% 82%,0 100%);overflow:hidden;display:grid;grid-template-columns:1fr 150px;gap:20px;align-items:center}
.hsb .hsb-cta::after{content:"";position:absolute;right:0;bottom:0;width:45%;height:30%;background:var(--b-mid);clip-path:polygon(100% 0,100% 100%,0 100%);z-index:0}
.hsb .hsb-cta>*{position:relative;z-index:1}
.hsb .hsb-cta h2{color:#fff;margin:0 0 .4em;font-size:1.4em;font-weight:800}
.hsb .hsb-cta p{color:#fff;margin-bottom:1em}
.hsb .hsb-cta a{color:#fff;font-weight:600;white-space:nowrap}
.hsb .hsb-cta a.hsb-btn{display:inline-block;background:var(--y);color:var(--ink);font-family:"Exo 2",Arial,sans-serif;font-weight:700;text-decoration:none;padding:.7em 1.4em;border-radius:8px}
.hsb .hsb-cta a.hsb-btn:hover{background:var(--y-h)}
.hsb .hsb-cta a:focus-visible{outline:3px solid #fff}
.hsb .hsb-cta .hsb-foto{height:140px}
.hsb .hsb-cta .hsb-foto img{height:120px}

.hsb .hsb-suvisiace{border-top:2px solid var(--line);padding-top:1em;margin-top:1.6em}
.hsb .hsb-suvisiace p{font-family:"Exo 2",Arial,sans-serif;font-weight:700;color:var(--ink);margin-bottom:.4em}

@media (max-width:820px){
  .hsb{font-size:17px}.hsb h2{font-size:1.35em}
  .hsb .hsb-strucne ul,.hsb .hsb-auto{grid-template-columns:1fr}
  .hsb .hsb-strucne{padding:20px}
  .hsb .hsb-obsah ol{columns:1}
  .hsb .hsb-schema{flex-direction:column;gap:4px}
  .hsb .hsb-uzol{flex-direction:row;text-align:left;gap:12px}
  .hsb .hsb-uzol .hsb-foto{width:90px;flex:0 0 90px;height:80px;margin:0}
  .hsb .hsb-uzol .hsb-foto img{height:70px}
  .hsb .hsb-uzol>div{align-items:flex-start}
  .hsb .hsb-sipka{padding:0;transform:rotate(90deg);height:28px;flex-basis:28px;width:90px}
  .hsb .hsb-cta{grid-template-columns:1fr;padding:24px 20px 84px}
  .hsb .hsb-cta .hsb-foto{display:none}
  .hsb .hsb-cta a.hsb-btn{display:block;text-align:center}
}