/* ==========================================================================
   Služba: Rovné a väzníkové strechy (/sluzba/strechy/) – drobné doplnky k main.css, prefix ss-
   ========================================================================== */

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

/* rozcestník pod hero – pás faktov ako odkazy na sekcie */
.hero-sluzba__fakty.ss-rozcestnik > li { padding: 0; }   /* 0,2,1 – prebije aj mobil.css (padding nesie odkaz) */
.ss-rozcestnik a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 20px 4px 0; color: inherit; }
.ss-rozcestnik a:hover strong { color: var(--c-akcent); }
.ss-rozcestnik strong { transition: color var(--t-rychly); }
@media (max-width: 640px) {
  .ss-rozcestnik a { gap: 2px; padding: 10px 0 4px; }
  .ss-rozcestnik strong { font-size: 1.25rem; }
}

/* text + fotka */
.ss-dvojica { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1024px) {
  .ss-dvojica { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .ss-dvojica--foto-vlavo > .ss-foto { order: -1; }
}
.ss-dvojica--druha { margin-top: clamp(40px, 5vw, 72px); }
.ss-dvojica__text > p { max-width: 40em; }
.ss-foto { margin: 0; width: 100%; }
.ss-foto .obr { aspect-ratio: 3 / 2; }
.ss-foto .obr > img { display: block; }

/* vlastnosti – zoznam s ikonou */
.ss-body { display: grid; gap: 0; margin-top: clamp(20px, 2.4vw, 28px) !important; padding: 0; list-style: none; border-top: 1px solid var(--c-linka); }
.ss-body > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--c-linka); }
.ss-body__ikona { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--ink); }
.ss-body__ikona .ikona { width: 16px; height: 16px; }
.ss-body__nadpis { font-size: 1.0625rem; line-height: 1.3; font-weight: 750; color: var(--c-nadpis); letter-spacing: -.005em; }
.ss-body p { margin-top: 4px; color: var(--c-text); line-height: 1.5; }

/* použitie / tvary – čipy */
.ss-pouzitie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(32px, 4vw, 56px); }
.ss-pouzitie__nadpis { font-weight: 750; color: var(--c-nadpis); }
.ss-cipy { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.ss-cipy > li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px;
  border: 1px solid var(--c-linka); border-radius: var(--r-pill); background: var(--paper-3, #fff);
  font-weight: 650; font-size: var(--fs-small); line-height: 1.2; color: var(--c-nadpis);
}
.ss-cipy > li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.ss-dvojica__text > .ss-cipy { margin-top: clamp(16px, 2vw, 24px); }

/* možnosti rovnej strechy + súvisiace služby – karty */
.ss-moznosti, .ss-suvisiace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gap, 20px); margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.ss-suvisiace { margin-top: 0; }
.ss-moznosti > .karta, .ss-suvisiace > .karta { height: 100%; }
.ss-viac { font-weight: 700; color: var(--c-nadpis); }

/* hlavička sekcie – tesnejšia */
.ss-hlavicka { margin-bottom: clamp(24px, 3vw, 40px); }

/* FAQ – úvod s výzvou vľavo, otázky vpravo */
.ss-faq { display: grid; gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (min-width: 1024px) {
  .ss-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .ss-faq__uvod { position: sticky; top: calc(var(--vyska-hlavicky, 80px) + 24px); }
}
.ss-vyzva { gap: 12px; margin-top: clamp(20px, 2.4vw, 32px) !important; }
.ss-vyzva .akcie { margin-top: 6px; }