/*
 * Hero sekcia na /tvorba-webstranky/ - odrazky a mockup zariadeni.
 *
 * Mockup je zamerne postaveny z HTML a CSS, nie z obrazka. Reklamne kreativy
 * v knihovni maju vypaleny text pre zubne ambulancie a jedina volna ilustracia
 * je modra, co by na zelenom gradiente bilo do oci. Takto je ostry v kazdom
 * rozliseni, drzi brandovu paletu a nema co zostat nedonacitane.
 *
 * Cely mockup je dekoracia - v markupe je aria-hidden, aby ho citac preskocil.
 */

/* ---------- odrazky v hero ---------- */

body .kodeo-hero-list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-size: 17px;
    line-height: 1.5;
}

body .kodeo-hero-list li {
    position: relative;
    margin: 0 0 11px;
    padding-left: 30px;
    color: #fff;
    list-style: none;
    text-wrap: pretty;
}

/*
 * Fajka je biela, nie brandova zelena. Na zelenom gradiente by mala zelena
 * kontrast okolo 1,3:1 a bola by prakticky nevidiet.
 */
body .kodeo-hero-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -1px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

/* ---------- mockup zariadeni ---------- */

.kodeo-hero-mockup {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 46px;
    /* Telefon vyklada z pravej strany - nesmie sposobit vodorovny scroll. */
    overflow: hidden;
}

.kodeo-hero-mockup * {
    box-sizing: border-box;
}

/* --- okno prehliadaca --- */

.kodeo-hero-browser {
    width: 88%;
    background: #2f3133;
    border-radius: 12px;
    box-shadow: 0 22px 50px rgba(20, 30, 15, .28);
    overflow: hidden;
    transform: rotate(-1.2deg);
}

.kodeo-hero-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}

.kodeo-hero-dot {
    width: 9px;
    height: 9px;
    background: #5b6167;
    border-radius: 50%;
}

.kodeo-hero-url {
    flex: 1;
    height: 16px;
    margin-left: 6px;
    background: #44494e;
    border-radius: 999px;
}

.kodeo-hero-screen {
    padding: 0 0 16px;
    background: #fff;
}

.kodeo-hero-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #7bc043;
}

.kodeo-hero-logo {
    width: 46px;
    height: 9px;
    background: rgba(255, 255, 255, .95);
    border-radius: 3px;
}

.kodeo-hero-navlink {
    width: 26px;
    height: 6px;
    background: rgba(255, 255, 255, .6);
    border-radius: 3px;
}

.kodeo-hero-navlink:first-of-type {
    margin-left: auto;
}

.kodeo-hero-body {
    padding: 18px 16px 0;
}

.kodeo-hero-h {
    width: 68%;
    height: 13px;
    margin-bottom: 9px;
    background: #323a48;
    border-radius: 4px;
}

.kodeo-hero-line {
    height: 6px;
    margin-bottom: 6px;
    background: #dfe3e8;
    border-radius: 3px;
}

.kodeo-hero-line--short {
    width: 55%;
}

.kodeo-hero-cta {
    width: 92px;
    height: 21px;
    margin: 14px 0 18px;
    background: #7bc043;
    border-radius: 5px;
}

.kodeo-hero-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.kodeo-hero-card {
    height: 52px;
    padding: 8px 7px;
    background: #f6f7f8;
    border: 1px solid #e7eaed;
    border-radius: 6px;
}

.kodeo-hero-card span {
    display: block;
    height: 5px;
    margin-bottom: 5px;
    background: #d6dbe0;
    border-radius: 3px;
}

.kodeo-hero-card span:first-child {
    width: 60%;
    background: #7bc043;
}

/* --- telefon --- */

.kodeo-hero-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 27%;
    max-width: 148px;
    padding: 7px;
    background: #2f3133;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(20, 30, 15, .32);
    transform: rotate(2deg);
}

.kodeo-hero-phone-screen {
    padding-bottom: 12px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}

.kodeo-hero-phone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 9px 8px;
    background: #7bc043;
}

.kodeo-hero-phone-logo {
    width: 34px;
    height: 7px;
    background: rgba(255, 255, 255, .95);
    border-radius: 3px;
}

.kodeo-hero-burger {
    width: 13px;
    height: 7px;
    border-top: 2px solid rgba(255, 255, 255, .85);
    border-bottom: 2px solid rgba(255, 255, 255, .85);
}

.kodeo-hero-phone-body {
    padding: 11px 9px 0;
}

.kodeo-hero-phone-body .kodeo-hero-h {
    width: 82%;
    height: 9px;
    margin-bottom: 7px;
}

.kodeo-hero-phone-body .kodeo-hero-line {
    height: 5px;
}

.kodeo-hero-phone-body .kodeo-hero-cta {
    width: 100%;
    height: 17px;
    margin: 11px 0 10px;
}

.kodeo-hero-stack {
    display: grid;
    gap: 6px;
}

.kodeo-hero-stack i {
    display: block;
    height: 20px;
    background: #f6f7f8;
    border: 1px solid #e7eaed;
    border-radius: 5px;
}

/* ---------- mobil ---------- */

@media (max-width: 767px) {
    .kodeo-hero-mockup {
        max-width: 420px;
        padding-bottom: 30px;
    }

    .kodeo-hero-browser {
        width: 84%;
        transform: none;
    }

    .kodeo-hero-phone {
        transform: none;
    }

    body .kodeo-hero-list {
        display: inline-block;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kodeo-hero-browser,
    .kodeo-hero-phone {
        transform: none;
    }
}

/* ---------- postup s vyznacenym miestom platby ---------- */

/*
 * Jadro tvrdenia nie je rychlost, ale KEDY sa prvykrat plati. Preto to nie su
 * tri rovnocenne karty "ako pracujeme", ale dve skupiny oddelene ciarou:
 * vlavo co je zadarmo, vpravo kde ide peniaz z ruky.
 */

.kodeo-flow {
    max-width: 980px;
    /* Bez karty - ziadna ina sekcia homepage kartu nema. */
    margin: 0 auto;
    padding: 0 20px;
}

.kodeo-flow * {
    box-sizing: border-box;
}

/*
 * Hlavicka drzi vzor ostatnych sekcii webu: nadocie 19px/700 uppercase,
 * pod nim H2 v Poppins 32px/600 a sivy uvodny odstavec 19px - vsetko
 * centrovane. Kroky nizsie zostavaju zarovnane vlavo, inak by sa necitali.
 *
 * Velkost H2 sa zamerne NENASTAVUJE - tema bezny h2 uz renderuje ako
 * Poppins 32px/600 #323a48.
 */

.kodeo-flow__head {
    margin-bottom: 30px;
    text-align: center;
}

/*
 * Velkost 14px, nie 19px ako v kalkulacke: nadocia sekcii na homepage maju
 * 14px, na /tvorba-webstranky/ 19px. Kazda komponenta drzi vzor tej stranky,
 * na ktorej zije.
 *
 * Zelena je tmavsia nez akcent #93c45a, ktorym su nadocia homepage. Akcent
 * ma na svetlom podklade kontrast ~2:1; pri 14px treba 4,5:1. #4a7420 ma 4,9:1.
 */
.kodeo-flow__eyebrow {
    margin: 0 0 6px;
    color: #4a7420;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.5;
    text-transform: uppercase;
}

body .kodeo-flow__heading {
    margin: 0 0 14px;
    line-height: 1.5;
    text-wrap: pretty;
}

.kodeo-flow__lead {
    max-width: 720px;
    margin: 0 auto;
    color: #737b84;
    font-size: 19px;
    line-height: 1.5;
    text-wrap: pretty;
}

.kodeo-flow__groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

.kodeo-flow__label {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kodeo-flow__group .kodeo-flow__label {
    color: #4d7a1f;
}

.kodeo-flow__group--paid .kodeo-flow__label {
    color: #323a48;
}

.kodeo-flow__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.kodeo-flow__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: #eaf3de;
    color: #3b6d11;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

/* Krok s ukazkou je jadro tvrdenia - jediny plnou zelenou. */
.kodeo-flow__num--key {
    background: #7bc043;
    color: #fff;
}

.kodeo-flow__num--paid {
    background: #323a48;
    color: #fff;
}

.kodeo-flow__text {
    color: #323a48;
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}

.kodeo-flow__note {
    margin: 4px 0 0 38px;
    font-size: 13px;
    line-height: 1.5;
}

.kodeo-flow__group .kodeo-flow__note {
    color: #4d7a1f;
}

.kodeo-flow__group--paid .kodeo-flow__note {
    color: #737b84;
}

.kodeo-flow__cta {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eef0f2;
    text-align: center;
}

/* ---------- variant s nadpisom a odstavcom v kroku ---------- */

/*
 * Sekcia "7 krokov" pouziva ten isty vzor ako postup na homepage, len ma
 * v kazdom kroku vlastny nadpis a odstavec. Preto len nadstavba nad
 * .kodeo-flow, nie druha kopia toho isteho layoutu.
 */

/*
 * Sirka je 1320px, teda cely wrapper stranky - nie 980px ako postup na
 * homepage. Sedem krokov s odstavcami potrebuje sirku, inak sa oba stlpce
 * zlepia a text sa lame po styroch slovach.
 */
.kodeo-flow--steps {
    max-width: 1320px;
}

.kodeo-flow--steps .kodeo-flow__step {
    gap: 16px;
    margin-bottom: 34px;
}

.kodeo-flow--steps .kodeo-flow__step:last-child {
    margin-bottom: 0;
}

/* Vacsi odznak k vacsiemu nadpisu kroku. */
.kodeo-flow--steps .kodeo-flow__num {
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 32px;
}

.kodeo-flow--steps .kodeo-flow__label {
    margin-bottom: 20px;
    font-size: 12px;
}

/* Nesie nadpis aj odstavec, takze blok - nie riadok ako na homepage. */
.kodeo-flow__step--detailed .kodeo-flow__text {
    display: block;
}

body .kodeo-flow__step-title {
    margin: 0 0 7px;
    color: #323a48;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.kodeo-flow__step-body {
    margin: 0;
    color: #5b6470;
    font-size: 18px;
    line-height: 1.55;
    text-wrap: pretty;
}

@media (min-width: 860px) {
    .kodeo-flow {
        padding: 0 24px;
    }

    /*
     * Ciara medzi skupinami je hranica platby - preto ju kreslime ako medzeru
     * so zvislou preruskou, nie ako ramcek okolo kariet.
     */
    .kodeo-flow__groups {
        grid-template-columns: 1fr 1px 1fr;
        gap: 30px;
        align-items: start;
    }

    .kodeo-flow--steps .kodeo-flow__groups {
        gap: 56px;
    }

    .kodeo-flow__divider {
        align-self: stretch;
        background: repeating-linear-gradient(to bottom, #c9ced6 0 4px, transparent 4px 9px);
    }
}

@media (max-width: 859px) {
    /* Na mobile ciara nedava zmysel svisle - stane sa vodorovnou hranicou. */
    .kodeo-flow__divider {
        height: 1px;
        background: repeating-linear-gradient(to right, #c9ced6 0 4px, transparent 4px 9px);
    }
}

/* ---------- sirsi wrapper pre sekciu krokov ---------- */

/*
 * Tema drzi boxed kontejner na 1110px a 1320px pusti az od sirky okna
 * 1500px. Na beznom notebooku (1440) tak sekcia s dvoma stlpcami krokov
 * zostava uzka - odstavce sa lamu na pat riadkov.
 *
 * Pre tuto jednu sekciu presadzujeme 1320px uz od 1200px. Selektor nesie
 * id, takze prebije temu bez !important. Zamerne to nemenime globalne:
 * to je zasah do kupenej temy a dotklo by sa to kazdej stranky webu.
 */
@media (min-width: 1200px) {
    body #kroky.elementor-section-boxed > .elementor-container {
        max-width: 1320px;
    }
}

/* ---------- pas s odkazom na zubne ambulancie ---------- */

/*
 * Widget "html" v Elementore NEMA ovladaci prvok zarovnania - nastavenie
 * align/align_mobile sa na nom ticho ignoruje. Tlacidlo preto na mobile
 * zostavalo pri lavom okraji, hoci nadpis aj text nad nim boli na stred.
 * Zarovnanie musi urcit CSS.
 */
@media (max-width: 767px) {
    #pre-ambulancie .elementor-widget-html .elementor-widget-container {
        text-align: center;
    }
}