/*
Theme Name: Craftycom Child
Theme URI: https://craftycom.sk/
Description: Child téma Hello Elementor pre web Craftycomunity s. r. o. Nesie lokálne hostovaný Poppins, farebné tokeny a to, čo sa v Elementor kite nastaviť nedá. Veľkosti nadpisov, farby a primárne tlačidlo sú v kite, nie tu — aby existoval jeden zdroj pravdy.
Author: Craftycom
Template: hello-elementor
Version: 1.2.0
Requires PHP: 8.0
Text Domain: craftycom-child
*/

/* ==========================================================================
   1. Farebné tokeny

   Rovnaké hodnoty ako globálne farby v Elementor kite (sekcia 4 zadania).
   Kit ich dáva widgetom, tieto premenné ich dávajú ručne písanému CSS.
   Keď sa farba mení, mení sa na oboch miestach.

   PRAVIDLO ORANŽOVEJ (1.0.2). `#E8713C` smie byť výplň a dekoratívny akcent.
   Nesmie niesť text, nesmie mať pod sebou svetlý text a nesmie byť jediné, čo
   ohraničuje ovládací prvok alebo označuje zameranie klávesnicou — tam je
   netextové minimum 3 : 1 a oranžová má 2,81. Na to je `--cc-accent-text`
   (#B54A1B, 4,87 : 1) alebo `--cc-primary`.
   ========================================================================== */

:root {
    --cc-primary: #231F20;      /* takmer čierna; text na oranžovej aj zlatej */
    --cc-secondary: #ECB053;    /* zlatá, len výplň s tmavým textom */
    --cc-text: #3B3F3F;         /* bežný text, 9,80 : 1 na svetlom */
    --cc-accent: #E8713C;       /* tehlová oranžová — LEN výplň a dekoratívny akcent */
    --cc-accent-text: #B54A1B;  /* textová oranžová, 4,87 : 1 — odkazy, telefóny, rámy ovládacích prvkov */
    --cc-grey-text: #6B6257;    /* doplnkový šedý text, 5,50 : 1 */
    --cc-brown: #332713;        /* tmavohnedá, pozadie so svetlým textom */
    --cc-surface: #F7F5F2;      /* svetlé pozadie; text na tmavých plochách */
    --cc-gold-soft: #ECB05329;  /* zlatá s priehľadnosťou */

    --cc-radius-button: 20px;
    --cc-content-width: 1200px;
}

/* ==========================================================================
   2. Sekundárne tlačidlo

   Zadanie povyšuje hack `.trigger-form-popup` z ostrého webu na plnohodnotný
   sekundárny variant. Elementor v základnej verzii pozná iba jedno globálne
   tlačidlo, takže druhý variant musí byť trieda.

   Použitie: widgetu Tlačidlo pridať v Pokročilé → CSS triedy hodnotu
   `cc-button-secondary`. Trieda sa umiestni na obal widgetu, nie na samotné
   tlačidlo — od toho sa odvíjajú selektory nižšie.

   ZAOBLENIE 20 px JE SCHVÁLENÉ. Pôvodný hack mal 3 px, primárne tlačidlo
   z kitu 20 px. Dve tlačidlá vedľa seba s takým rozdielom vyzerali, akoby
   pochádzali z dvoch webov, a podľa sekcie 6 zadania stoja vedľa seba na
   každej stránke služby.

   ŠPECIFICITA — prečo sú selektory také dlhé (opravené v 1.0.1):
   Keď sa do kitu zadá vzhľad tlačidiel, Elementor vygeneruje do `post-7.css`
   pravidlo `.elementor-widget-button .elementor-button { ... }`. Má
   špecificitu 0,2,0, rovnakú, akú malo pôvodné `.cc-button-secondary
   .elementor-button` — a načíta sa neskôr, takže vyhrávalo ono. Sekundárne
   tlačidlo tak vyzeralo ako primárne.

   Riešením je vyššia špecificita (0,3,0), nie `!important`. Ten by sa už
   nedal prebiť, keď bude treba jedno konkrétne tlačidlo upraviť v editore —
   a to je bežná potreba, nie výnimka.

   Prepisujú sa všetky štyri vlastnosti, nielen pozadie. Kit generuje vlastné
   pravidlo aj pre farbu textu, takže pri oprave samotného pozadia by na
   priehľadnom podklade zostal svetlý text z primárneho tlačidla.
   ========================================================================== */

.elementor-widget-button.cc-button-secondary .elementor-button,
.elementor-widget-button.cc-button-secondary .elementor-button:visited {
    background-color: transparent;
    color: var(--cc-accent-text);
    border: 2px solid var(--cc-accent-text);
    border-radius: var(--cc-radius-button);
}

/* Pri prejdení je tlačidlo vyplnené, takže tvar určuje výplň a nie rám —
   oranžová tu je v poriadku. Text musí byť tmavý: svetlý na oranžovej má
   2,81 : 1. Po oprave kitu tak vyzerá aj primárne tlačidlo a dvojica sedí. */
.elementor-widget-button.cc-button-secondary .elementor-button:hover,
.elementor-widget-button.cc-button-secondary .elementor-button:focus {
    background-color: var(--cc-accent);
    color: var(--cc-primary);
    border-color: var(--cc-accent);
}

/* Mimo widgetu Tlačidlo — napríklad v ručne písanej šablóne child témy.
   Kit sem nesiaha, takže stačí nízka špecificita. */
a.cc-button-secondary,
button.cc-button-secondary {
    background-color: transparent;
    color: var(--cc-accent-text);
    border: 2px solid var(--cc-accent-text);
    border-radius: var(--cc-radius-button);
}

a.cc-button-secondary:hover,
a.cc-button-secondary:focus,
button.cc-button-secondary:hover,
button.cc-button-secondary:focus {
    background-color: var(--cc-accent);
    color: var(--cc-primary);
}

/* ==========================================================================
   3. Viditeľné zameranie klávesnicou

   Elementor ani Hello Elementor neponúkajú na toto nastavenie. Bez neho sa
   web nedá ovládať klávesnicou, čo je prístupnostná chyba a pri formulári,
   ktorý je jedinou cestou dopytu, aj obchodná.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid var(--cc-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   4. Textová šablóna — pomenovaná odchýlka stupnice nadpisov

   Jediná odchýlka od globálnej stupnice v celom návrhu (dizajn v2, sekcia 5).
   Textové stránky majú mieru okolo 68 znakov a pri kitových 3 rem by boli
   nadpisy sekcií rovnako veľké ako názvy stránok inde. Pri dlhom texte to
   rozbíja čítanie.

   Použitie: kontajneru textovej šablóny pridať CSS triedu `cc-text-page`.
   Platí pre deväť stránok — O nás, Pridajte sa k nám, Blog, Napísali o nás,
   Podporujeme, Naši partneri, ochranu údajov, obchodné podmienky a cookies.

   Prečo trieda v téme a nie nastavenie na každom widgete: widgetové
   nastavenie platí len pre nadpisy, ktoré v šablóne už sú. Kto tam o mesiac
   pridá nový H2, dostane 3 rem a nevšimne si to. Trieda ho zdedí sama.

   Pravidlo pre 767 px je povinné. Bez neho by trieda svojou vyššou
   špecificitou prebila globálny mobilný zlom z kitu a nadpisy by sa na
   telefóne nezmenšili vôbec — zostali by na 2 rem.

   H3 má 1,5 rem na všetkých šírkach zámerne. Kitová mobilná hodnota je 2 rem,
   čiže väčšia než chceme; plochá hodnota je tu jednoduchšia než ďalší zlom.
   ========================================================================== */

.cc-text-page h2 { font-size: 2rem; }
.cc-text-page h3 { font-size: 1.5rem; }

@media (max-width: 767px) {
    .cc-text-page h2 { font-size: 1.7rem; }
}

/* ==========================================================================
   5. Drobnosti
   ========================================================================== */

/* Dlhé slová v nadpisoch na mobile nesmú pretekať mimo obrazovku. */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Obrázky v obsahu nikdy nepretečú svoj rámec. */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   9. ZLATÝ PRUH — čo naň smie ísť
   ==========================================================================

   Odmerané na `secondary` #ECB053:
     #231F20  8,46 : 1   smie text aj orámovanie
     #3B3F3F  5,54 : 1   smie text aj orámovanie
     #332713  7,57 : 1   smie text aj orámovanie
     #B54A1B  2,75 : 1   NESMIE nič
     #FFFFFF  1,93 : 1   NESMIE nič
     #F7F5F2  1,77 : 1   NESMIE nič

   Sekundárne tlačidlo nesie `--cc-accent-text` ako text AJ ako rám. Na zlatom
   podklade je to 2,75 : 1 v oboch roliach — text nesplní 4,5 : 1 a rám, ktorý
   ohraničuje ovládací prvok, nesplní 3 : 1.

   Preto každá sekcia so zlatým pozadím nesie triedu `cc-na-zlatej` a tu sa
   sekundárne tlačidlo prepíše na obrys v `--cc-primary`.

   Trieda je pomenovaná podľa FARBY PODKLADU, nie podľa účelu sekcie. Keby sa
   volala `cc-cta`, pravidlo by sa rozpadlo pri prvej CTA na inom pozadí.

   Špecificita: 0,4,0 proti 0,3,0 v pravidle nižšie v sekcii 5, takže vyhráva
   a nie je na to potrebný `!important`.
   ========================================================================== */

.cc-na-zlatej .elementor-widget-button.cc-button-secondary .elementor-button,
.cc-na-zlatej .elementor-widget-button.cc-button-secondary .elementor-button:visited {
    background-color: transparent;
    color: var(--cc-primary);
    border-color: var(--cc-primary);
}

.cc-na-zlatej .elementor-widget-button.cc-button-secondary .elementor-button:hover,
.cc-na-zlatej .elementor-widget-button.cc-button-secondary .elementor-button:focus {
    background-color: var(--cc-primary);
    color: var(--cc-surface);
    border-color: var(--cc-primary);
}

/* ==========================================================================
   10. MOBILNÉ PORADIE ÚVODNEJ STRÁNKY (≤ 767 px)
   ==========================================================================

   HRANICA PRAVIDLA: celý tento blok platí LEN pod 767 px. Desktopové
   rozloženie sa nemení ani o pixel.

   Dôvod: pri 360 px bola horná hrana telefónneho tlačidla v karte opráv na
   2 788 px. Nad ohybom bol len štítok, H1 a časť vety. Karta opráv — tá, na
   ktorú má pristáť človek s pretečenou vodou — bola štvornásobne nižšie,
   než kam dovidí.

   Poradie sekcií sa prehadzuje cez `order`. Aby to fungovalo, musí byť obal
   stránky flex. Obal sa cieli cez `[data-elementor-type="wp-page"]`, teda
   len obsah stránky — hlavička ani pätička sa nedotknú.
   ========================================================================== */

@media (max-width: 767px) {

    [data-elementor-type="wp-page"] {
        display: flex;
        flex-direction: column;
    }

    /* Predvolene všetko za trojicu hero → karty → pruh dôvery.
       Zhodné hodnoty `order` sa radia v poradí, v akom sú v HTML, takže
       zvyšok stránky si poradie medzi sebou zachová. */
    [data-elementor-type="wp-page"] > * { order: 4; }
    [data-elementor-type="wp-page"] > .cc-hero { order: 1; }
    [data-elementor-type="wp-page"] > .cc-sluzby { order: 2; }
    [data-elementor-type="wp-page"] > .cc-trust { order: 3; }

    /* Štítok nad H1 je dekorácia, ktorá na 640 px obrazovke stojí 59 px
       vrátane odstupov. Skrytý, nie zmazaný — na desktope zostáva. */
    .cc-eyebrow { display: none; }

    /* Druhá veta podnadpisu. Na mobile zostáva JEDNA veta, celá, nie
       skrátená. Druhá je obalená v tomto span, takže desktop je nezmenený. */
    .cc-mobil-skryt { display: none; }

    /* Dvojkrokový sľub v hero je DUPLIKÁT — to isté je v karte opráv, kde to
       vecne patrí (je to sľub opráv, nie firmy). Skrýva sa v pravidle nižšie
       spolu s CTA, aby mal rovnakú špecificitu. */

    /* Hero CTA, hodiny a placeholder fotky: ich miesto v poradí je za kartami,
       ale presunúť ich von z hero sekcie by rozbilo dvojstĺpcové desktopové
       hero. Na mobile sa preto skrývajú. CTA nesú karty — tam, kde zámer
       vzniká. Sociálny dôkaz nesie sekcia „Hotové zákazky", ktorá je za
       kartami, teda presne tam, kde ju chceme.

       ŠPECIFICITA: Elementor vydáva pre vlastné CSS prvku selektor
       `.elementor-129 .elementor-element.elementor-element-XXXX`, teda 0,3,0,
       a nastavuje v ňom `display: grid` aj `display: flex`. Pravidlo
       `.cc-hero .cc-hero-cta` má 0,2,0 a PREHRÁ. Preto je tu selektor
       zámerne dlhší — 0,4,0 — a nie `!important`, ktorý by sa už nedal
       prebiť, keby sa jedna sekcia mala správať inak. */
    [data-elementor-type="wp-page"] .cc-hero .elementor-element.cc-hero-cta,
    [data-elementor-type="wp-page"] .cc-hero .elementor-element.cc-hero-hodiny,
    [data-elementor-type="wp-page"] .cc-hero .elementor-element.cc-hero-slub,
    [data-elementor-type="wp-page"] .cc-hero .elementor-element.cc-foto { display: none; }
}

/* --------------------------------------------------------------------------
   10b. Odstupy a poradie, ktoré robia rozdiel medzi „nad ohybom" a „pod ním"
   HRANICA: len ≤ 767 px.

   Všetky hodnoty nižšie sú odmerané na 360 px širokom kontejneri pri aktívnom
   mobilnom štýle, nie odhadnuté.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Stĺpec s fotkou v hero sa skrýva CELÝ. Skrytý placeholder vnútri neho
       za sebou nechával 56 px odstup riadka + 20 px prázdneho rodiča = 76 px. */
    [data-elementor-type="wp-page"] .cc-hero .elementor-element.cc-hero-foto { display: none; }

    /* Svislý odstup boxovaného kontejnera je na .e-con-inner, nie na .e-con. */
    [data-elementor-type="wp-page"] .cc-hero > .e-con-inner {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    [data-elementor-type="wp-page"] .cc-sluzby > .e-con-inner { padding-top: 24px; }

    /* Úvodná veta sekcie kariet: 172 px vrátane odstupov. Nadpis H2 ZOSTÁVA —
       skryť ho by na mobile vyrobilo preskok z H1 na H3. */
    [data-elementor-type="wp-page"] .cc-sluzby .elementor-element.cc-sluzby-lede { display: none; }
    [data-elementor-type="wp-page"] .cc-sluzby > .e-con-inner > .elementor-widget-heading { margin-bottom: 24px; }

    /* Poradie v karte: názov → sľub → tlačidlá → zoznam služieb.
       Telefónne tlačidlo tak ide nad zoznam, nie pod neho. */
    .cc-karta > * { order: 3; }
    .cc-karta > .elementor-widget-heading { order: 1; }
    .cc-karta > .cc-mini-slub { order: 2; }
    .cc-karta > .cc-karta-popis { order: 4; }
}

/* ==========================================================================
   §11  Drobčeková navigácia zo skráteného kódu [cc_drobcek]
   Štýl je tu, nie vo widgete, lebo drobček vykresľuje PHP v child téme
   a používa ho spoločná šablóna detailu pre 21 stránok.
   ========================================================================== */

.cc-drobcek ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.875rem;
}

.cc-drobcek li {
    color: var(--e-global-color-grey-text);
}

.cc-drobcek a {
    color: var(--e-global-color-accent-text);
    text-decoration: none;
}

.cc-drobcek a:hover,
.cc-drobcek a:focus {
    color: var(--e-global-color-primary);
    text-decoration: underline;
}

.cc-drobcek .cc-dr-sep {
    color: var(--e-global-color-line-strong);
}

/* ==========================================================================
   §12  Telo stránky služby — vykresľuje ho widget Obsah článku
   ----------------------------------------------------------------------
   Prečo je telo HTML v editore WordPressu a nie postavené v Elementore:
   21 stránok má rovnakú stavbu a líši sa len text. Jedna šablóna + 21 textov
   sa udržiava na jednom mieste; 21 samostatných Elementor stránok by sa
   muselo pri každej zmene stavby prerobiť dvadsaťjedenkrát.
   Kontejner s widgetom Obsah článku je ZÁMERNE na celú šírku — každá sekcia
   si nesie vlastný .cc-wrap, aby farebné pruhy išli od okraja po okraj.
   ========================================================================== */

.cc-sec {
    padding: 88px 0;
}

.cc-sec--biela {
    background: var(--e-global-color-surface-0);
}

.cc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

.cc-sec h2 {
    font-size: 3rem;
    margin: 0 0 16px;
}

.cc-sec h3 {
    font-size: 1.5rem;
    margin: 0 0 10px;
}

.cc-sec .cc-lede {
    font-size: 1.125rem;
    max-width: 42em;
    margin: 0 0 44px;
}

/* Zoznam prác — dva stĺpce, odškrtnuté položky. */
.cc-zoznam {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 40px;
}

.cc-zoznam li {
    position: relative;
    padding-left: 30px;
}

.cc-zoznam li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--e-global-color-accent);
}

.cc-podnadpis {
    margin: 52px 0 10px;
}

/* Cenové karty. */
.cc-ceny {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cc-cena {
    background: var(--e-global-color-surface-0);
    border: 1px solid var(--e-global-color-line);
    border-radius: 14px;
    padding: 28px;
}

.cc-sec--biela .cc-cena {
    background: var(--e-global-color-ccbglight);
}

.cc-cena h3 {
    font-size: 1.25rem;
}

.cc-cena .cc-suma {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--e-global-color-primary);
    margin: 14px 0 0;
}

.cc-pozn {
    font-size: 0.875rem;
    color: var(--e-global-color-grey-text);
    max-width: 46em;
    margin: 28px 0 0;
}

.cc-doplnit {
    color: var(--e-global-color-accent-text);
    font-weight: 600;
}

/* Vylúčenia a súvisiace služby — karty v rade. */
.cc-karty {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cc-karty--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-kartaa {
    background: var(--e-global-color-surface-0);
    border: 1px solid var(--e-global-color-line);
    border-radius: 14px;
    padding: 28px;
}

.cc-sec--biela .cc-kartaa {
    background: var(--e-global-color-ccbglight);
}

.cc-kartaa p {
    margin: 0;
}

.cc-kartaa .cc-odkaz {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    color: var(--e-global-color-accent-text);
}

/* Zástupné miesto pre fotku — vedome prázdne, nie stocková fotka. */
.cc-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 220px;
    background: var(--e-global-color-surface-2);
    border: 1px dashed var(--e-global-color-line-strong);
    border-radius: 14px;
    color: var(--e-global-color-grey-text);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 16px;
}

/* Recenzie k tejto službe. */
.cc-rec {
    background: var(--e-global-color-surface-0);
    border: 1px solid var(--e-global-color-line);
    border-radius: 14px;
    padding: 28px;
}

.cc-sec--biela .cc-rec {
    background: var(--e-global-color-ccbglight);
}

.cc-rec blockquote {
    margin: 0 0 14px;
    font-size: 1.0625rem;
}

.cc-rec figcaption {
    font-size: 0.9375rem;
    color: var(--e-global-color-grey-text);
}

.cc-rec .cc-hviezdy {
    color: var(--e-global-color-accent-text);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Otázky a odpovede. */
.cc-faq {
    border-top: 1px solid var(--e-global-color-line);
    max-width: 52em;
}

.cc-faq details {
    border-bottom: 1px solid var(--e-global-color-line);
}

.cc-faq summary {
    cursor: pointer;
    padding: 20px 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--e-global-color-primary);
    list-style: none;
}

.cc-faq summary::-webkit-details-marker {
    display: none;
}

.cc-faq summary::after {
    content: "+";
    float: right;
    font-weight: 600;
}

.cc-faq details[open] summary::after {
    content: "–";
}

.cc-faq details > p {
    margin: 0 0 20px;
    max-width: 46em;
}

@media (max-width: 1024px) {
    .cc-sec h2 { font-size: 2.8rem; }
    .cc-ceny,
    .cc-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cc-sec { padding: 56px 0; }
    .cc-wrap { padding: 0 20px; }
    .cc-sec h2 { font-size: 2.2rem; }
    .cc-sec h3 { font-size: 1.35rem; }
    .cc-zoznam,
    .cc-ceny,
    .cc-karty,
    .cc-karty--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   §13  Karty detailu služby — sľubová karta a karta formulára
   ----------------------------------------------------------------------
   Prečo tu a nie vo `custom_css` kontejnera: Elementor vlastné CSS prekladá
   na `.elementor-279 .elementor-element-<id> { … }`, teda na ID prvku. Trieda
   `cc-form-karta` by potom existovala, ale nič by nenosila — a práve to je
   chyba, ktorú kontrola hľadá. Takto trieda štýl naozaj nesie a pravidlo §33
   sa dá na celom webe overiť jedným hľadaním.
   Odsadenie zostáva v ovládačoch Elementora, aby sa dalo meniť v paneli.
   ========================================================================== */

.cc-karta-slub {
    background: var(--e-global-color-surface-0);
    border: 1px solid var(--e-global-color-line);
    border-radius: 14px;
}

/* §33 — formulár na farebnom pruhu stojí na karte, nie na pruhu. */
.cc-form-karta {
    background: var(--e-global-color-surface-0);
    border: 2px solid var(--e-global-color-ccbrown);
    border-radius: 14px;
}

/* Dvojkrokový sľub. */
.cc-slub {
    background: var(--e-global-color-ccgoldtr);
    border-radius: 10px;
    padding: 16px 18px;
}

.cc-slub ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.cc-slub li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--e-global-color-primary);
    line-height: 1.35;
}

.cc-slub .cc-cislo {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-ccbglight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    margin-top: 3px;
}

.cc-slub p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

/* ==========================================================================
   §14  Site Reviews — mriežka recenzií sa nesmie rozťahovať obsahom
   ----------------------------------------------------------------------
   `.glsr-reviews` je grid bez zadaných stĺpcov, takže implicitný stĺpec má
   šírku `auto`. Položky gridu majú `min-width: auto`, čo im zakazuje zmrštiť
   sa pod šírku najdlhšieho nezalomiteľného slova. Jedna recenzia má v poli
   služby reťazec „Elektroinštalacia,murárske práce,podlaha,maliarske
   práce,sadrokartónové práce." — čiarky bez medzier, teda jedno slovo.
   Pri 360 px to roztiahlo stĺpec na 438 px a stránka pretekala o 99 px.

   Text recenzie sa NEMENÍ — mení sa len to, kde sa smie zalomiť.
   ========================================================================== */

.glsr-reviews {
    grid-template-columns: minmax(0, 1fr);
}

.glsr-review,
.glsr-review-title,
.glsr-review-content,
.glsr-review-date,
.glsr-tag-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   §15  Cenová veta v karte (úloha 46)
   Znenie je schválené doslovne a je to VETA, nie suma. `.cc-suma` má
   1,75 rem — veta by sa v karte rozpadla na štyri riadky obrovského písma.
   Preto vlastná trieda: dosť výrazná, aby bola cena vidieť, dosť malá,
   aby sa veta dala prečítať.
   ========================================================================== */

.cc-cena-veta {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--e-global-color-primary);
    margin: 14px 0 0;
}

/* ==========================================================================
   §16  Pokračovanie zoznamu otázok zo šablóny (úloha 49)
   Dve spoločné otázky sú v šablóne, špecifické v tele stránky. Sú to dve
   samostatné sekcie, ale pre čitateľa to má byť jeden zoznam — preto druhý
   blok nemá vlastnú hornú čiaru, inak by medzi nimi bola dvojitá.
   ========================================================================== */

.cc-faq--pokracovanie {
    border-top: 0;
}

/* ==========================================================================
   §17  Sľubová škatuľka rekonštrukcií (úloha 18b)
   Jeden sľub, nie dva kroky ako pri opravách. Hlavná veta je zvýraznená,
   vysvetlenie pod ňou menšie — práve ono bráni tomu najčastejšiemu
   nedorozumeniu, že obhliadka do 72 hodín je ponuka do 72 hodín.
   ========================================================================== */

.cc-slub-72 {
    background: var(--e-global-color-ccgoldtr);
    border-radius: 10px;
    padding: 16px 18px;
}

.cc-slub-72 .cc-slub-hlavny {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--e-global-color-primary);
    line-height: 1.35;
    margin: 0 0 10px;
}

.cc-slub-72 p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================================
   §18  Číslované kroky v tele stránky rekonštrukcie (úloha 18b)
   ========================================================================== */

.cc-kroky {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.cc-kroky .cc-n {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--e-global-color-accent);
    line-height: 1;
    margin: 0 0 10px;
}

.cc-kroky p {
    margin: 0;
    font-size: 0.9375rem;
}

@media (max-width: 1024px) {
    .cc-kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cc-kroky { grid-template-columns: 1fr; }
}

/* ==========================================================================
   §19  Vyhradené miesto pre kalkulačku (úloha 18b, fáza 2)
   Štýl je tu a nie vo `custom_css`, aby trieda naozaj niečo niesla —
   platí pravidlo z v2 §35. Prerušovaný rám hovorí „tu to ešte nie je",
   rovnako ako pri zástupných fotkách.
   ========================================================================== */

.cc-kalkulacka {
    background: var(--e-global-color-surface-2);
    border: 1px dashed var(--e-global-color-line-strong);
    border-radius: 14px;
    padding: 32px;
}

.cc-kalkulacka .cc-faza {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-global-color-accent-text);
    margin: 0 0 10px;
}

.cc-kalkulacka p {
    margin: 0 0 10px;
    max-width: 46em;
}

.cc-kalkulacka p:last-child {
    margin-bottom: 0;
}