/* ==========================================================================
   Služba: Zateplenie domu (/sluzba/zateplenie-domu/) – drobné doplnky k main.css, prefix sz-
   ========================================================================== */

/* HERO – kompaktnejší: nadpis vo veľkosti h1, fotka na šírku (originál 4:3) */
.sz-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.sz-hero .hero-sluzba__nadpis { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.032em; }
@media (min-width: 960px) {
  .sz-hero .hero-sluzba__mriezka { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .sz-hero .hero-sluzba__media > img { aspect-ratio: 5 / 4; }
}

/* hlavička sekcie – tesnejšia; s odkazom vpravo */
.sz-hlavicka { margin-bottom: clamp(24px, 3vw, 40px); }
.sz-hlavicka--akcia { align-items: end; }
@media (min-width: 900px) { .sz-hlavicka--akcia { grid-template-columns: minmax(0, 1fr) auto; } }
/* 5.8 úvodná veta pod nadpisom realizácií */
.sz-realizacie__uvod { max-width: 40em; color: var(--c-text); }
/* 5.8 karty realizácií: 4 v rade až od 1180 px; pri 900–1179 px 2 v rade (4 × 2), aby karty neboli stiesnené (sizes v HTML tomu zodpovedá) */
@media (min-width: 900px) and (max-width: 1179px) { .mriezka.sz-realizacie-mriezka > .st-3 { grid-column: span 6; } }

/* 5.2 text + skutočná dvojica pred/po */
.sz-dvojica { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1024px) { .sz-dvojica { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.sz-dvojica__text > p { max-width: 40em; }
.sz-predpo { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.sz-predpo figcaption { margin-top: 12px; }

/* 5.3 Prečo s nami – pás s ikonami */
.sz-preco__nadpis { margin-bottom: clamp(18px, 2vw, 28px); }
.sz-preco { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
/* 6 bodov: 2 × 3 na tablete, 3 × 2 od 900 px (bez osamotenej položky v poslednom rade) */
@media (min-width: 560px) { .sz-preco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sz-preco { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(20px, 2.2vw, 32px); } }
.sz-preco > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.sz-preco p { margin: 0; line-height: 1.45; font-size: var(--fs-small); color: var(--c-text); }
.sz-preco strong { font-size: 1.0625rem; line-height: 1.3; color: var(--c-nadpis); }

/* 5.4 Výhody – 4 tmavé karty */
.sz-vyhody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--gap, 20px); margin: 0; padding: 0; list-style: none; }
.sz-vyhody > .karta { height: 100%; }

/* 5.9 FAQ – nadpis s fotkou vľavo, otázky vpravo */
.sz-faq { display: grid; gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (min-width: 1024px) {
  .sz-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sz-faq__uvod { position: sticky; top: calc(var(--vyska-hlavicky, 80px) + 24px); }
}
.sz-faq__foto { max-width: 420px; }
@media (max-width: 1023px) { .sz-faq__foto { display: none; } }

/* 5.10 záver pred formulárom */
.sz-zaver { display: grid; gap: 24px clamp(24px, 4vw, 64px); align-items: center; }
@media (min-width: 900px) { .sz-zaver { grid-template-columns: minmax(0, 1fr) auto; } }
.sz-zaver .akcie { margin: 0; }

/* 5.6 dotácia – na mobile bez dekoratívneho štítku (kompaktnejšie) */
@media (max-width: 859px) { body[data-page="sluzba-zateplenie"] .dotacia-box__vizual { display: none; } }