/*
 * Patička webu (modules/footer.php) — červený CTA pruh + tmavá patička
 * s kontakty na pobočky.
 *
 * Rozměry jsou přepočtené z CSS exportu z Figmy (desktop rám 1440 px,
 * mobilní rám 402 px). Export dává absolutní souřadnice v rámu, takže
 * hodnoty níž vznikly jako rozdíly mezi nimi — u každé neobvyklé hodnoty
 * je v komentáři, ze kterých souřadnic vyšla, ať jde zpětně ověřit.
 *
 * Pozor na dvě věci, kvůli kterým se export nedá číst doslova:
 *   - Šířky/výšky textových rámů z Figmy jsou rámy, ne šířka textu (např.
 *     „Cookies" má rám 147 px, ale text zabírá ~48 px). Vodorovné rozestupy
 *     se proto počítají z hodnot `left`, ne ze šířek.
 *   - Výšky textů jsou oříznuté (`height: 19px` při `line-height: 21px`),
 *     takže svislé rozestupy odvozené z rozdílu `top` kolísají o 2–3 px.
 *     Kde návrh kolísá, je použitý průměr.
 */

/* =========================================
   1. ČERVENÝ CTA PRUH
   ========================================= */
/* Návrh: rám 1440×67, text `top: 5055` v pruhu od `top: 5035` → 20 px shora,
   font 18/22 váha 500. Řádek je ale vysoký 23 px podle zvýrazněné části
   (viz `strong` níž), takže 22 + 23 + 22 = 67 px celkové výšky. */
.cjs-footer-cta {
    background: linear-gradient(90deg, #E0382D 51.75%, #BB2530 100%);
    color: #ffffff;
    text-align: center;
    padding: 22px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
}

/* Zvýrazněná část věty je v návrhu výrazně větší než zbytek řádku — 23px/800
   italic. Z prvního exportu z Figmy to nešlo poznat: ten pro celý textový
   uzel vypsal jen převažující styl (18/22 váha 500), rozsah uvnitř odstavce
   dodal uživatel zvlášť. */
.cjs-footer-cta strong {
    font-size: 23px;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
}

/* =========================================
   2. TMAVÁ PATIČKA — OBAL A MŘÍŽKA
   ========================================= */
.cjs-footer {
    background-color: #252525;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Obsah patičky je v návrhu užší, než by člověk čekal: sloupce začínají na
   x = 346 a končí cca na x = 1097, tedy ~750 px vycentrovaných v rámu 1440.
   790 px = 750 obsahu + 2× 20 px vnitřního odsazení (to drží okraje na
   užších oknech, na 1440 px se neprojeví). */
.cjs-footer-sloupce {
    max-width: 790px;
    box-sizing: border-box;
    margin: 0 auto;
    /* 51 px = první nadpis (5153) pod spodní hranou červeného pruhu (5102);
       46 px = mezera od konce otevírací doby (5351) k dělící čáře (5397). */
    padding: 51px 20px 46px;
    display: grid;
    /* Rozestupy sloupců z návrhu: 347 → 642 → 913.

       Třetí sloupec je `max-content`, ne `1fr`: zbytkovou šířkou mu vycházelo
       184 px a skutečná adresa Brna („Masná 458/106, Brno, 602 00", potřebuje
       209 px) se lámala na dva řádky. V návrhu je adresa zkrácená („Masná
       106"), na webu musí být plná. `max-content` nechá sloupec přerůst
       kontejner doprava do prázdné plochy — levý okraj i rozestupy tak
       zůstanou přesně dle návrhu (ověřeno v prohlížeči: sloupce sedí na
       345 / 640 / 911 a stránka nemá vodorovný posuvník). */
    grid-template-columns: 295px 271px max-content;
}

/* =========================================
   3. SPOLEČNÉ PRVKY SLOUPCŮ
   ========================================= */
.cjs-footer-sloupec-nadpis {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-transform: none;
}

/* Nadpis s ikonou (jen sloupec obecných kontaktů — v návrhu je ikona vedle
   nadpisu, ne vedle hodnoty pod ním). */
.cjs-footer-sloupec-nadpis--ikona {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Ikona 18 px + 6 px mezera = 24 px odsazení textu (v návrhu 347 → 371
   u obecných kontaktů, 642 → 666 u poboček — shodně). Výška se u řádků
   přepisuje na výšku řádku, aby ikona seděla na první řádek i u textu,
   který se zalomí. */
.cjs-footer-ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cjs-footer-ikona-tvar {
    background-color: #E0382D;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    display: inline-block;
    width: 17px;
    height: 17px;
}

.cjs-footer-ikona-mail   { -webkit-mask-image: url('../images/ikona-mail.svg');    mask-image: url('../images/ikona-mail.svg'); }
.cjs-footer-ikona-tel    { -webkit-mask-image: url('../images/ikona-telefon.svg'); mask-image: url('../images/ikona-telefon.svg'); }
.cjs-footer-ikona-pin    { -webkit-mask-image: url('../images/ikona-pin.svg');     mask-image: url('../images/ikona-pin.svg'); }
.cjs-footer-ikona-hodiny { -webkit-mask-image: url('../images/ikona-hodiny.svg');  mask-image: url('../images/ikona-hodiny.svg'); }

/* =========================================
   3a. SLOUPEC 1 — OBECNÉ KONTAKTY
   ========================================= */
/* 75 px mezi horními hranami obou bloků (5154 → 5229); blok sám je vysoký
   22 (nadpis) + 3 + 21 (hodnota) = 46 px, zbývá 29 px. */
.cjs-footer-kontakt-blok + .cjs-footer-kontakt-blok {
    margin-top: 29px;
}

/* Hodnota je odsazená stejně jako text nadpisu (o šířku ikony), vlastní
   ikonu už nemá. */
.cjs-footer-kontakt-hodnota {
    margin: 3px 0 0 24px;
    font-size: 17px;
    line-height: 21px;
    font-weight: 500;
    color: #CECECE;
}

.cjs-footer-kontakt-hodnota a {
    color: inherit;
    text-decoration: none;
}

.cjs-footer-kontakt-hodnota a:hover {
    color: #ffffff;
}

/* =========================================
   3b. SLOUPCE 2+3 — POBOČKY
   ========================================= */
/* Nadpis pobočky je v návrhu zarovnaný na ikony (x = 642), ne na text
   řádků (x = 666) — proto tu není odsazení o 24 px. */
.cjs-footer-pobocka .cjs-footer-sloupec-nadpis {
    margin-bottom: 4px;
}

.cjs-footer-pobocka-radek {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 21px;
    color: #838383;
}

/* Ikona vycentrovaná na první řádek textu (ne na celý zalomený blok). */
.cjs-footer-pobocka-radek .cjs-footer-ikona,
.cjs-footer-hodiny .cjs-footer-ikona {
    height: 21px;
}

.cjs-footer-pobocka-radek a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cjs-footer-pobocka-radek a:hover {
    color: #ffffff;
}

/* Telefon je v návrhu jediný řádek bez podtržení. */
.cjs-footer-bez-podtrzeni {
    text-decoration: none;
}

/* --- Otevírací doba --- */
.cjs-footer-hodiny {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.cjs-footer-hodiny-tabulka {
    display: grid;
    /* 29 px = rozestup sloupce dnů (666) a sloupce časů (695). */
    grid-template-columns: 29px auto;
    font-size: 14px;
    line-height: 21px;
    color: #838383;
}

/* V návrhu mají dny i časy stejnou barvu. */
.cjs-footer-hodiny-den {
    color: inherit;
}

/* Náhled mapy je jen v mobilním návrhu — `background-image` se nastavuje až
   v mobilním media query (sekce 6), takže se na desktopu ani nestahuje. */
.cjs-footer-mapa {
    display: none;
}

/* =========================================
   4. DĚLÍCÍ ČÁRA
   ========================================= */
.cjs-footer-spodek {
    border-top: 1px solid #4A4A4A;
}

/* =========================================
   5. SPODNÍ LIŠTA (logo, copyright)
   ========================================= */
/* Návrh: logo `left: 346` (= levý okraj obsahu), text vpravo od něj začíná
   na `left: 568` → 59 px za pravou hranou loga (346 + 164). Není to tedy
   `space-between` na celou šířku, ale pevná mezera hned za logem.

   Spodní odsazení: návrh má 82 px, ale počítá se dvěma řádky (právní odkazy
   + copyright). Odkazy jsou pryč (viz footer.php), zůstal jeden řádek, takže
   82 px by dole nechalo nápadně prázdný pruh — sníženo na 40 px, aby lišta
   zůstala opticky vyvážená. */
.cjs-footer-spodek-inner {
    max-width: 790px;
    box-sizing: border-box;
    margin: 0 auto;
    /* 27 px = od dělící čáry (5397) k hornímu okraji loga (5424). */
    padding: 27px 20px 40px;
    display: flex;
    align-items: center;
    gap: 59px;
}

.cjs-footer-logo {
    display: block;
    width: 164px;
    height: auto;
    flex-shrink: 0;
}

.cjs-footer-copyright {
    display: flex;
    /* 39 px = mezera mezi koncem copyrightu a „Made by" (568 + text → 837). */
    gap: 39px;
    font-size: 11px;
    line-height: 21px;
    color: #838383;
}

.cjs-footer-copyright strong {
    color: #838383;
    font-weight: 700;
}

.cjs-footer-copyright a {
    color: #838383;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}

.cjs-footer-copyright a:hover {
    color: #ffffff;
}

.cjs-footer-srdce {
    color: #E0382D;
}

/* =========================================
   6. MOBIL (do 767 px) — návrh rám 402 px
   ========================================= */
@media (max-width: 767px) {
    /* Rám 402×107, text `top: 5359` (32 px shora), font 16/19, dva řádky. */
    .cjs-footer-cta {
        padding: 32px 20px 35px;
        font-size: 16px;
        line-height: 19px;
    }

    /* Zvýrazněná část je na mobilu 21 px (na desktopu 23 px). */
    .cjs-footer-cta strong {
        font-size: 21px;
    }

    .cjs-footer-sloupce {
        grid-template-columns: 1fr;
        /* 48 px = od spodní hrany červeného pruhu (5434) k prvnímu nadpisu
           (5482); 43 px = od konce otevírací doby Brna (6028) k čáře (6071). */
        padding: 48px 25px 43px;
        row-gap: 41px;
    }

    /* Obecné kontakty jsou na mobilu vedle sebe (x = 25 a x = 189). */
    .cjs-footer-obecne {
        display: grid;
        grid-template-columns: 164px 1fr;
        column-gap: 0;
    }

    .cjs-footer-kontakt-blok + .cjs-footer-kontakt-blok {
        margin-top: 0;
    }

    .cjs-footer-sloupec-nadpis {
        font-size: 17px;
        line-height: 21px;
    }

    .cjs-footer-kontakt-hodnota {
        /* 25 px mezi horní hranou nadpisu (5482) a hodnoty (5507), nadpis
           je vysoký 21 px. */
        margin-top: 4px;
        font-size: 15px;
        /* Servisní e-mail je o 1 px širší než sloupec a lámal se na dva
           řádky. V návrhu je na jednom a jeho rám (213–388) taky mírně
           přesahuje odsazení obsahu, takže je to i tam „na doraz". */
        white-space: nowrap;
    }

    /* 47 px mezi koncem otevírací doby Prahy (5776) a nadpisem Brna (5823);
       row-gap mřížky je 41 px, zbytek dorovná tenhle margin. */
    .cjs-footer-pobocka + .cjs-footer-pobocka {
        margin-top: 6px;
    }

    /* Otevírací doba vlevo, náhled mapy vpravo u pravého okraje (návrh:
       mapa 165×98 na x = 215 v obsahu 25–377). */
    .cjs-footer-hodiny-blok {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
    }

    .cjs-footer-mapa {
        display: block;
        flex-shrink: 0;
        width: 165px;
        height: 98px;
        /* 5 px = mapa (5676) začíná o kousek níž než tabulka hodin (5671). */
        margin-top: 5px;
        background-image: var(--cjs-footer-mapa);
        background-size: cover;
        background-position: center;
    }

    /* --- Spodní lišta --- */
    .cjs-footer-spodek-inner {
        /* 33 px = od čáry (6071) k prvnímu odkazu (6104); 20 px = od
           posledního řádku (6175) ke konci patičky (6195). */
        padding: 33px 25px 20px;
        gap: 0;
    }

    /* V mobilním návrhu logo v patičce není. */
    .cjs-footer-logo {
        display: none;
    }

    /* Copyright a „Made by" se v návrhu lámou na dva řádky (na užších
       displejích se nevejdou vedle sebe) — proto zalamovaný flex, ne pevné
       dva sloupce. */
    .cjs-footer-copyright {
        flex-wrap: wrap;
        gap: 2px 24px;
    }
}

/* =========================================
   7. TABLET (768–1024 px)
   ========================================= */
/* Návrh tablet nemá. Sloupce z desktopu (295 + 271 + 184 px) se do téhle
   šířky nevejdou, takže se použije mezikrok: obecné kontakty přes celou
   šířku nad pobočkami, pobočky vedle sebe. Mapa zůstává skrytá jako na
   desktopu. */
@media (min-width: 768px) and (max-width: 1024px) {
    .cjs-footer-sloupce {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        row-gap: 40px;
    }

    .cjs-footer-obecne {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    .cjs-footer-kontakt-blok + .cjs-footer-kontakt-blok {
        margin-top: 0;
    }

    .cjs-footer-spodek-inner {
        gap: 40px;
    }
}