/* ==========================================================================
   Služba: Pergoly, prístrešky, altánky a carporty (/sluzba/pergoly/) – drobné doplnky k main.css, prefix spg-
   Jednoduchá prezentačná stránka: úvod, typy (karty), doplnky, cena na mieru, časté otázky, formulár.
   ========================================================================== */

/* ÚVOD – nadpis vo veľkosti h1 ako na ostatných službách (krátky text → 2 riadky, „prístrešky" sú v nadtitulku); fotka na šírku */
.spg-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.spg-hero .hero-sluzba__nadpis { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.032em; }
@media (min-width: 960px) { .spg-hero .hero-sluzba__media > img { aspect-ratio: 4 / 3; } }

/* skratky na jednotlivé typy (pod tlačidlami v úvode) */
.spg-skratky { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.spg-hero .hero-sluzba__obsah > .spg-skratky { margin-top: 28px; max-width: 500px; }   /* 6 skratiek → 2 rady po 3 */
.spg-skratky a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--c-linka); background: var(--paper-3);
  color: var(--c-nadpis); font-size: var(--fs-small); font-weight: 700; text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.spg-skratky a:hover { background: var(--green-soft); border-color: transparent; color: var(--ink) !important; }   /* v tmavom úvode by zelený text na svetlozelenom splynul */
/* na telefóne skratky nezobrazujeme – karty nasledujú hneď pod úvodom */
@media (max-width: 639px) { .spg-hero .hero-sluzba__obsah > .spg-skratky { display: none; } }

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

/* TYPY – 1 / 2 / 3 v rade */
.spg-typy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .spg-typy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spg-typy { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spg-typy > li { display: flex; min-width: 0; }
.spg-typ { width: 100%; scroll-margin-top: calc(var(--vyska-hlavicky, 80px) + 16px); }
.spg-typ .karta__media { --pomer: 16 / 10; }
.spg-typ .karta__text { color: var(--c-text); }
@media (max-width: 639px) { .spg-typ .karta__media { --pomer: 2 / 1; } }

/* DOPLNKY – ikona + text, 1 / 2 / 3 v rade */
.spg-doplnky { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.2vw, 32px) clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .spg-doplnky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .spg-doplnky { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spg-doplnky > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; }
.spg-doplnky .ikona-box { width: 48px; height: 48px; border-radius: 14px; }
.spg-doplnky .ikona-box .ikona { width: 24px; height: 24px; }
.spg-doplnky strong { display: block; font-size: 1.0625rem; line-height: 1.3; color: var(--c-nadpis); }
.spg-doplnky p { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--c-text); }

/* CENA NA MIERU – biela karta s ikonou, textom a tlačidlom */
.spg-cena { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 16px clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .spg-cena { grid-template-columns: auto minmax(0, 1fr) auto; } }
.spg-cena__text > * + * { margin-top: 8px; }
.spg-cena__text p { max-width: 46em; }
.spg-cena .akcie { margin: 0; }
@media (max-width: 639px) { .spg-cena .btn { width: 100%; } }

/* ČASTÉ OTÁZKY – úvod vľavo, otázky vpravo */
.spg-faq { display: grid; gap: clamp(24px, 4vw, 72px); align-items: start; }
.spg-faq__uvod > * + * { margin-top: 18px; }
@media (min-width: 1024px) {
  .spg-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .spg-faq__uvod { position: sticky; top: calc(var(--vyska-hlavicky, 80px) + 24px); }
}
.spg-vyzva { margin-top: 28px; }
.spg-vyzva .akcie { margin-top: 6px; }

/* 5. 10. 2026: 7. karta (Záhradné domčeky) – posledná karta, ktorá by ostala v rade sama, je na celú šírku vodorovne */
@media (min-width: 640px) and (max-width: 1023px) {
  .spg-typy > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .spg-typy > li:last-child:nth-child(odd) .spg-typ { flex-direction: row; }
  .spg-typy > li:last-child:nth-child(odd) .karta__media { flex: 0 0 50%; aspect-ratio: 4 / 3; }
  .spg-typy > li:last-child:nth-child(odd) .karta__telo { align-self: center; }
}
@media (min-width: 1024px) {
  .spg-typy > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .spg-typy > li:last-child:nth-child(3n+1) .spg-typ { flex-direction: row; }
  .spg-typy > li:last-child:nth-child(3n+1) .karta__media { flex: 0 0 calc((200% - var(--gap)) / 3); aspect-ratio: 21 / 9; }
  .spg-typy > li:last-child:nth-child(3n+1) .karta__telo { align-self: center; }
}
@media (min-width: 640px) {
  .spg-typy > li:last-child:is(:nth-child(odd), :nth-child(3n+1)) .karta__media > img { position: absolute; inset: 0; }
}