/* ==========================================================================
   MOBIL – STRÁNKOVÉ ÚPRAVY (telefón do 767 px)
   Vlastník: agent „sluzby“ (podstránky služieb /sluzba/*). Spoločné prvky a typografia sú v mobil.css.

   Pravidlá (rovnaké ako v mobil.css):
   · VŠETKO je vo vnútri @media (max-width: 767px) → počítač a tablet (≥ 768 px) sa nezmenia ani o pixel.
   · Súbor sa načítava ZA main.css, komponentmi, štýlmi stránok aj mobil.css → pri rovnakej špecificite vyhráva.
     Selektory kopírujú špecificitu pôvodného (stránkového) pravidla, !important sa nepoužíva.
   · Texty sa neskracujú ani neorezávajú – mení sa len rozloženie, veľkosť písma (najmenej 14 px) a zalamovanie.
   ========================================================================== */

@media (max-width: 767px) {

  /* ------------------------------------------------------------------------
     FOTOVOLTIKA – fakty v úvode (.sf-hero .hero-sluzba__fakty)
     sluzba-fotovoltika.css ich pod 640 px dáva do 3 stĺpcov; pri 390 px mal stĺpec ~109 px: „nainštalovaných“
     sa dotýkalo susedného stĺpca, „životnosť“ sa delilo spojovníkom a popisy mali 1 – 4 riadky (nezarovnané).
     Pod 480 px → riadky: číslo vľavo (pevný stĺpec 7 rem), popis vpravo, oddelené linkou. Od 480 px ostávajú 3 stĺpce.
     ------------------------------------------------------------------------ */
  @media (max-width: 479px) {
    .sf-hero .hero-sluzba__fakty { grid-template-columns: minmax(0, 1fr); }
    .sf-hero .hero-sluzba__fakty > li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: baseline; gap: 0 12px; padding: 12px 0; border-bottom: 1px solid var(--c-linka); }
    .sf-hero .hero-sluzba__fakty > li:last-child { border-bottom: 0; padding-bottom: 4px; }
    .sf-hero .hero-sluzba__fakty strong { font-size: 1.375rem; }
    .sf-hero .hero-sluzba__fakty span { font-size: .875rem; line-height: 1.4; }
  }

  /* ------------------------------------------------------------------------
     PUR PENA – sadzby dotácie v dotačnom boxe (.sp2-sadzby)
     Flex s obtekaním: dve položky mali cenu pod dvojriadkovým popisom, tretia cenu vpravo vedľa popisu → nezarovnané.
     Na telefóne vždy popis a pod ním suma (rovnaká špecificita 0,1,1 ako v sluzba-pur-pena.css).
     ------------------------------------------------------------------------ */
  .sp2-sadzby > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* ------------------------------------------------------------------------
     KLIMATIZÁCIE – tlačidlo „Aktuálne ceny v e-shope“ (.sk-eshop .btn)
     Obsah tlačidla (ikona + „Aktuálne ceny“ + „v e-shope“ + šípka) mal pri 360 – 390 px ~315 px, tlačidlo bolo
     užšie → „Aktuálne / ceny“ sa lámalo na dva riadky vedľa jednoriadkového „v e-shope“. Na telefóne tlačidlo
     na celú šírku karty, menší vnútorný okraj a písmo 15 px (pod 380 px 14 px) → jeden riadok.
     ------------------------------------------------------------------------ */
  .sk-eshop .btn { width: 100%; padding-inline: 16px; font-size: .9375rem; }
  @media (max-width: 379px) { .sk-eshop .btn { padding-inline: 12px; font-size: .875rem; } }
  /* najužšie telefóny (320 px): bez dekoratívnej ikony tašky (text + šípka „otvorí sa v novom okne“ ostávajú) */
  @media (max-width: 339px) { .sk-eshop .btn > .ikona:first-child { display: none; } }
}