/* =========================================================
   DOCHÁZKA ZAMĚSTNANCŮ
   SEKCE: Pro koho je ONI docházka vhodná?

   Úprava podle sekce karet na stránce Logistika a doprava:
   - zachováno 5 stávajících karet
   - původní ikony jsou skryté
   - každá karta = nadpis + popis + fotografie
   - fotografie tvoří spodní část karty
   ========================================================= */

.oni-attendance-audience {
    width: 100%;
    padding: 45px 0 35px;
    background: #ffffff;
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
}

.oni-attendance-audience *,
.oni-attendance-audience *::before,
.oni-attendance-audience *::after {
    box-sizing: border-box;
}

/* =========================================================
   HLAVNÍ KONTEJNER
   ========================================================= */

.oni-attendance-audience__shell {
    width: min(1380px, calc(100% - 48px));
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}

/* =========================================================
   NADPIS SEKCE
   ========================================================= */

.oni-attendance-audience__title {
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1F1F1F !important;
    text-align: center !important;
    border: 0 !important;
}

.oni-attendance-audience__title::before,
.oni-attendance-audience__title::after {
    display: none !important;
}

/* =========================================================
   GRID – 5 KARET NA DESKTOPU
   ========================================================= */

.oni-attendance-audience__grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* =========================================================
   KARTA
   ========================================================= */

.oni-attendance-audience__card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 370px !important;
    margin: 0 !important;
    padding: 24px 20px 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.04),
        0 10px 25px rgba(0, 0, 0, 0.03) !important;
    text-align: left !important;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease !important;
}

@media (hover: hover) {
    .oni-attendance-audience__card:hover {
        transform: translateY(-4px) !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.07),
            0 18px 35px rgba(0, 0, 0, 0.05) !important;
    }
}

/* =========================================================
   PŮVODNÍ IKONY – SKRÝT
   HTML NENÍ NUTNÉ MĚNIT
   ========================================================= */

.oni-attendance-audience__icon {
    display: none !important;
}

/* =========================================================
   NADPIS KARTY
   ========================================================= */

.oni-attendance-audience__card h3 {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1F1F1F !important;
    text-align: left !important;
    border: 0 !important;
}

.oni-attendance-audience__card h3::before,
.oni-attendance-audience__card h3::after {
    display: none !important;
}

/* =========================================================
   POPIS KARTY
   flex: 1 zajistí, že fotografie začínají ve stejné výšce
   ========================================================= */

.oni-attendance-audience__card p {
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #343a40 !important;
    text-align: left !important;
}

/* =========================================================
   FOTOGRAFIE – SPODNÍ ČÁST KARTY
   ========================================================= */

.oni-attendance-audience__photo {
    display: block !important;
    flex: 0 0 auto !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    height: 180px !important;
    margin: auto -20px 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* =========================================================
   MENŠÍ DESKTOP / TABLET – 3 + 2
   ========================================================= */

@media (max-width: 1200px) {
    .oni-attendance-audience__shell {
        width: calc(100% - 48px);
    }

    .oni-attendance-audience__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .oni-attendance-audience__card {
        min-height: 370px !important;
        padding: 26px 22px 0 !important;
    }

    .oni-attendance-audience__photo {
        width: calc(100% + 44px) !important;
        height: 190px !important;
        margin-left: -22px !important;
        margin-right: -22px !important;
    }
}

/* =========================================================
   TABLET – 2 SLOUPCE
   ========================================================= */

@media (max-width: 800px) {
    .oni-attendance-audience {
        padding: 35px 0 !important;
    }

    .oni-attendance-audience__title {
        margin-bottom: 24px !important;
        font-size: 27px !important;
    }

    .oni-attendance-audience__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .oni-attendance-audience__card {
        min-height: 360px !important;
    }
}

/* =========================================================
   MOBIL – 1 KARTA NA ŘÁDEK
   ========================================================= */

@media (max-width: 550px) {
    .oni-attendance-audience__shell {
        width: calc(100% - 24px);
    }

    .oni-attendance-audience__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .oni-attendance-audience__card {
        min-height: auto !important;
        padding: 24px 20px 0 !important;
    }

    .oni-attendance-audience__card p {
        padding-bottom: 12px !important;
    }

    .oni-attendance-audience__photo {
        width: calc(100% + 40px) !important;
        height: 210px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
}

/* =========================================================
   PROPOJENÍ S DOCHÁZKOVÝM SYSTÉMEM
   K2 / HELIOS / EXCEL / API – MENŠÍ IKONY V JEDNOM ŘÁDKU
   ========================================================= */

/* Pokud jsou loga vložená ve společném odstavci, drž je vedle sebe. */
p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 22px auto 0 !important;
    padding: 0 !important;
}

/* Případné ruční zalomení řádku mezi ikonami zrušit. */
p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) br {
    display: none !important;
}

/* Menší rozměr všech čtyř integračních ikon. */
img[alt="K2"],
img[alt="Helios"],
img[alt="MS Excel"],
img[alt="Integrace přes API rozhraní"],
img[alt="Jiné systémy"],
img[src*="/oni/K2.png"],
img[src*="/oni/helios.png"],
img[src*="/oni/excel.png"],
img[src*="/oni/jine_systemy.png"] {
    display: inline-block !important;
    flex: 0 1 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* Tablet */
@media (max-width: 800px) {
    p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
        gap: 12px !important;
    }

    img[alt="K2"],
    img[alt="Helios"],
    img[alt="MS Excel"],
    img[alt="Integrace přes API rozhraní"],
    img[alt="Jiné systémy"],
    img[src*="/oni/K2.png"],
    img[src*="/oni/helios.png"],
    img[src*="/oni/excel.png"],
    img[src*="/oni/jine_systemy.png"] {
        flex-basis: 90px !important;
        width: 90px !important;
        max-width: 90px !important;
        max-height: 68px !important;
    }
}

/* Mobil – všechny 4 ikony zůstanou vedle sebe */
@media (max-width: 550px) {
    p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
        gap: 6px !important;
        margin-top: 18px !important;
    }

    img[alt="K2"],
    img[alt="Helios"],
    img[alt="MS Excel"],
    img[alt="Integrace přes API rozhraní"],
    img[alt="Jiné systémy"],
    img[src*="/oni/K2.png"],
    img[src*="/oni/helios.png"],
    img[src*="/oni/excel.png"],
    img[src*="/oni/jine_systemy.png"] {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: 72px !important;
        max-height: 54px !important;
    }
}

/* =========================================================
   PŘEHLED DAT + PROPOJENÍ S DOCHÁZKOVÝM SYSTÉMEM
   Vzhled sjednocený se sekcemi na stránce Stavebnictví a stroje
   - nadpisy zarovnané doleva
   - H2 27 px / H3 17 px
   - kompaktnější odsazení
   - integrační loga zarovnaná doleva
   ========================================================= */

/* Levá karta: „Přehled a data v ONI system“
   Pravá karta: „Propojení s vašim docházkovým systémem“ */
body:has(.oni-attendance-audience)
:is(div, section, article):has(> h2 + ul),
body:has(.oni-attendance-audience)
:is(div, section, article):has(> h2 + h3) {
    box-sizing: border-box !important;
    padding: 26px !important;
    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #fbfbfc 60%,
        #f4f5f7 100%
    ) !important;
    border-radius: 6px !important;
    text-align: left !important;
}

/* Hlavní nadpisy obou karet */
body:has(.oni-attendance-audience) h2:has(+ ul),
body:has(.oni-attendance-audience) h2:has(+ h3) {
    margin: 0 0 16px !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 27px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #1F1F1F !important;
    text-align: left !important;
    border: 0 !important;
    background: none !important;
}

body:has(.oni-attendance-audience) h2:has(+ ul)::before,
body:has(.oni-attendance-audience) h2:has(+ ul)::after,
body:has(.oni-attendance-audience) h2:has(+ h3)::before,
body:has(.oni-attendance-audience) h2:has(+ h3)::after {
    display: none !important;
}

/* Podnadpis v pravé kartě */
body:has(.oni-attendance-audience) h2:has(+ h3) + h3 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #1F1F1F !important;
    text-align: left !important;
    border: 0 !important;
    background: none !important;
}

/* Text v pravé kartě */
body:has(.oni-attendance-audience) h2:has(+ h3) + h3 + p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    color: #343a40 !important;
    text-align: left !important;
}

/* Checklist v levé kartě */
body:has(.oni-attendance-audience) h2:has(+ ul) + ul {
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

body:has(.oni-attendance-audience) h2:has(+ ul) + ul li {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* K2 / Helios / Excel / API – vlevo, podobně jako ostatní obsah karty */
p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 24px 0 0 !important;
}

/* Drží loga opticky kompaktní */
img[alt="K2"],
img[alt="Helios"],
img[alt="MS Excel"],
img[alt="Integrace přes API rozhraní"],
img[alt="Jiné systémy"] {
    width: 96px !important;
    max-width: 96px !important;
    max-height: 68px !important;
    object-fit: contain !important;
}

/* Tablet */
@media (max-width: 800px) {
    body:has(.oni-attendance-audience)
    :is(div, section, article):has(> h2 + ul),
    body:has(.oni-attendance-audience)
    :is(div, section, article):has(> h2 + h3) {
        padding: 24px 22px !important;
    }

    body:has(.oni-attendance-audience) h2:has(+ ul),
    body:has(.oni-attendance-audience) h2:has(+ h3) {
        font-size: 25px !important;
    }

    p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
        gap: 12px !important;
    }

    img[alt="K2"],
    img[alt="Helios"],
    img[alt="MS Excel"],
    img[alt="Integrace přes API rozhraní"],
    img[alt="Jiné systémy"] {
        width: 82px !important;
        max-width: 82px !important;
        max-height: 60px !important;
    }
}

/* Mobil */
@media (max-width: 550px) {
    body:has(.oni-attendance-audience)
    :is(div, section, article):has(> h2 + ul),
    body:has(.oni-attendance-audience)
    :is(div, section, article):has(> h2 + h3) {
        padding: 22px 20px !important;
        border-radius: 6px !important;
    }

    body:has(.oni-attendance-audience) h2:has(+ ul),
    body:has(.oni-attendance-audience) h2:has(+ h3) {
        font-size: 23px !important;
        margin-bottom: 14px !important;
    }

    p:has(img[alt="K2"]):has(img[alt="Helios"]):has(img[alt="MS Excel"]) {
        justify-content: space-between !important;
        gap: 6px !important;
        margin-top: 20px !important;
    }

    img[alt="K2"],
    img[alt="Helios"],
    img[alt="MS Excel"],
    img[alt="Integrace přes API rozhraní"],
    img[alt="Jiné systémy"] {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: 68px !important;
        max-height: 52px !important;
    }
}


/* =========================================================
   PŘEHLED A DATA V ONI SYSTEM – FINÁLNÍ DOLADĚNÍ
   - odstranění vnitřního podkladu za textem
   - zarovnání levého textu k horní hraně
   - nadpis začíná ve stejné výšce jako pravý sloupec
   ========================================================= */

/* Levý textový blok bez samostatného šedého podkladu. */
body:has(.oni-attendance-audience)
:is(div, section, article):has(> h2 + ul) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: flex-start !important;
}

/*
   Nadřazený levý sloupec obsahuje textový blok a obrázek notebooku.
   Původní vertikální centrování posouvalo text níže než pravý sloupec.
*/
body:has(.oni-attendance-audience)
:is(div, section, article)
:has(> :is(div, section, article):has(> h2 + ul))
:has(img[alt="Export docházky do MS Excelu"]) {
    align-items: flex-start !important;
}

/* Záloha pro případ, že výšku textu určuje přímo jeho vlastní blok. */
body:has(.oni-attendance-audience) h2:has(+ ul) {
    margin-top: 0 !important;
}

/* Na mobilu ponecháme text bez samostatného podkladu i bez dalšího odsazení. */
@media (max-width: 550px) {
    body:has(.oni-attendance-audience)
    :is(div, section, article):has(> h2 + ul) {
        padding: 0 !important;
    }
}