/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
.img-fluid-uvod {
    max-width: 50%;
    height: auto;
}

/* ==========================================================
   P4 MAP QUESTION
   Otázka typu Simple Choice s mapou vlevo a odpověďmi vpravo
   Aktivuje se pouze na otázce s CSS class:
   p4-map-question
   ========================================================== */


/* ----------------------------------------------------------
   Systémová nápověda LimeSurvey
   "Zvolte jednu z následujících odpovědí"
   JS ji přesune přímo pod název otázky.
   ---------------------------------------------------------- */

.p4-map-question .ls-questionhelp {
    margin-top: 4px !important;
    margin-bottom: 16px !important;
}

.p4-map-question .ls-questionhelp .ls-question-message {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ----------------------------------------------------------
   HLAVNÍ LAYOUT
   ---------------------------------------------------------- */

.p4-map-question .p4-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 28px;
    align-items: start;

    width: 100%;
    margin-top: 4px;
}


/* ----------------------------------------------------------
   LEVÝ SLOUPEC – MAPA
   ---------------------------------------------------------- */

.p4-map-question .p4-map-mapcol {
    min-width: 0;
}

.p4-map-question .p4-map-open {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    cursor: zoom-in;
}

.p4-map-question .p4-map-image {
    display: block;

    width: 100%;
    height: auto;

    /*
     * Zásadní:
     * mapa na normální stránce nepřeroste viewport.
     */
    max-height: 60vh;

    object-fit: contain;

    border: 1px solid #d9d9d9;
    border-radius: 8px;

    background: #fff;

    transition:
        box-shadow .15s ease,
        transform .15s ease;
}

.p4-map-question .p4-map-open:hover .p4-map-image {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .15);
}

.p4-map-question .p4-map-open:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}


/* Text pod mapou */

.p4-map-question .p4-map-zoom-help {
    margin-top: 8px;

    text-align: center;

    font-size: .9rem;
    line-height: 1.35;

    color: #666;
}


/* ----------------------------------------------------------
   PRAVÝ SLOUPEC – ODPOVĚDI
   ---------------------------------------------------------- */

.p4-map-question .p4-map-answercol {
    min-width: 0;

    padding: 18px;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fafafa;

    /*
     * Při scrollování zůstanou odpovědi na obrazovce.
     */
    position: sticky;
    top: 16px;

    /*
     * Pokud by bylo odpovědí hodně,
     * scrolluje pouze pravý panel.
     */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}

.p4-map-question .p4-map-answer-title {
    margin: 0 0 14px 0;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}


/*
 * Původní LimeSurvey answer-container
 * zůstává zachován, jen je přesunut.
 */

.p4-map-question .p4-map-answercol .answer-container,
.p4-map-question .p4-map-answercol .ls-answers {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Jednotlivé odpovědi */

.p4-map-question .p4-map-answercol .radio-item,
.p4-map-question .p4-map-answercol .answer-item,
.p4-map-question .p4-map-answercol .form-check {
    margin-bottom: 8px !important;
}


/* Čitelnější popisky */

.p4-map-question .p4-map-answercol label {
    cursor: pointer;

    font-size: 1rem;
    line-height: 1.4;
}


/* Trochu větší radio button */

.p4-map-question .p4-map-answercol input[type="radio"] {
    margin-right: 7px;

    transform: scale(1.12);
    transform-origin: center;
}


/* ----------------------------------------------------------
   FULLSCREEN LIGHTBOX
   ---------------------------------------------------------- */

body.p4-map-modal-open {
    overflow: hidden !important;
}


.p4-map-lightbox[hidden] {
    display: none !important;
}


.p4-map-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, .90);
}


/* Obrázek ve fullscreen */

.p4-map-lightbox__image {
    display: block;

    width: auto;
    height: auto;

    max-width: 96vw;
    max-height: 94vh;

    object-fit: contain;

    background: #fff;

    box-shadow:
        0 8px 40px rgba(0, 0, 0, .50);
}


/* Zavírací X */

.p4-map-lightbox__close {
    position: fixed;

    top: 16px;
    right: 20px;

    z-index: 1000000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .96);

    color: #222;

    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 3px 15px rgba(0, 0, 0, .25);
}

.p4-map-lightbox__close:hover {
    background: #fff;
}

.p4-map-lightbox__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}


/* ----------------------------------------------------------
   MOBIL
   ---------------------------------------------------------- */

@media (max-width: 800px) {

    .p4-map-question .p4-map-layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .p4-map-question .p4-map-image {
        max-height: 52vh;
    }


    .p4-map-question .p4-map-answercol {
        position: static;

        max-height: none;

        overflow: visible;

        padding: 15px;
    }


    .p4-map-lightbox {
        padding: 10px;
    }


    .p4-map-lightbox__image {
        max-width: 98vw;
        max-height: 90vh;
    }


    .p4-map-lightbox__close {
        top: 10px;
        right: 10px;

        width: 46px;
        height: 46px;

        font-size: 32px;
    }
}