/*
 * VIZUÁLNY EDITOR - WIDGET ODPOČÍTAVANIE (Vojto 2. 11. 2026, podľa JetElements Countdown Timer)
 * Boxy čísel s popiskami, oddeľovač, zarovnanie celku a rozloženie na mobile. Hodnoty z Lišty
 * prichádzajú ako CSS premenné (--ve-odp-*) zo šablóny stranky/widget-web-odpocitavanie.
 * Mobil = úzky widget do 480 px (container query) - rovnako v náhľade editora pri rozlíšení
 * Mobil aj na webe.
 */
.ve-odpocitavanie {
    container-type: inline-size;
    width: 100%;
    box-sizing: border-box;
}

.ve-odp-casti {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--ve-odp-medzera, 12px);
}
.ve-odp--vlavo .ve-odp-casti { justify-content: flex-start; }
.ve-odp--stred .ve-odp-casti { justify-content: center; }
.ve-odp--vpravo .ve-odp-casti { justify-content: flex-end; }

.ve-odp-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ve-odp-medzera-popisku, 6px);
    min-width: var(--ve-odp-sirka, 90px);
    padding: var(--ve-odp-odsadenie, 16px);
    box-sizing: border-box;
    background: var(--ve-odp-pozadie, #F4F4F6);
    border: var(--ve-odp-okraj, 0) solid var(--ve-odp-okraj-farba, transparent);
    border-radius: var(--ve-odp-zaoblenie, 8px);
    text-align: center;
}
.ve-odp--nad .ve-odp-box { flex-direction: column-reverse; }

.ve-odp-cislo,
.ve-odp-oddelovac {
    font-family: var(--ve-odp-c-rodina);
    font-size: var(--ve-odp-c-velkost);
    font-weight: var(--ve-odp-c-vaha);
    line-height: var(--ve-odp-c-riadkovanie);
    color: var(--ve-odp-c-farba);
    text-decoration: var(--ve-odp-c-dekoracia, none);
    /* Rovnako široké číslice - čísla pri zmene neposkakujú. */
    font-variant-numeric: tabular-nums;
}
.ve-odp-oddelovac {
    display: flex;
    align-items: center;
}
.ve-odp--nad .ve-odp-oddelovac,
.ve-odp-oddelovac { align-self: center; }

.ve-odp-popisok {
    font-family: var(--ve-odp-p-rodina);
    font-size: var(--ve-odp-p-velkost);
    font-weight: var(--ve-odp-p-vaha);
    line-height: var(--ve-odp-p-riadkovanie);
    color: var(--ve-odp-p-farba);
    text-decoration: var(--ve-odp-p-dekoracia, none);
    text-transform: var(--ve-odp-p-kapitalky, none);
    overflow-wrap: anywhere;
}

.ve-odp-koniec {
    font-family: var(--ve-odp-p-rodina);
    color: var(--ve-odp-c-farba);
}
.ve-odp--vlavo .ve-odp-koniec { text-align: left; }
.ve-odp--stred .ve-odp-koniec { text-align: center; }
.ve-odp--vpravo .ve-odp-koniec { text-align: right; }
.ve-odp-koniec[hidden] { display: none; }

/* Po skončení: text namiesto čísel; skryť (web - v náhľade editora len priesvitné, aby sa dal widget upraviť). */
.ve-odp--koniec-text .ve-odp-casti { display: none; }
.ve-odp--koniec-skryt:not(.ve-odp--nahlad) { display: none; }
.ve-odp--nahlad.ve-odp--koniec-skryt { opacity: .4; }

/* Mobil / úzky widget. */
@container (max-width: 480px) {
    .ve-odp-cislo,
    .ve-odp-oddelovac { font-size: calc(var(--ve-odp-c-velkost) * var(--ve-odp-mobil, .7)); }
    .ve-odp-box {
        min-width: 0;
        padding: calc(var(--ve-odp-odsadenie, 16px) * var(--ve-odp-mobil, .7));
    }
    /* V riadku: všetko vedľa seba, boxy sa delia o šírku. */
    .ve-odp--mobil-riadok .ve-odp-casti { flex-wrap: nowrap; gap: calc(var(--ve-odp-medzera, 12px) * var(--ve-odp-mobil, .7)); }
    .ve-odp--mobil-riadok .ve-odp-box { flex: 1 1 0; }
    /* Mriežka 2 × 2 (oddeľovač medzi riadkami nedáva zmysel). */
    .ve-odp--mobil-mriezka .ve-odp-casti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ve-odp--mobil-mriezka .ve-odp-oddelovac { display: none; }
    /* Pod sebou: každá jednotka na celú šírku. */
    .ve-odp--mobil-pod_sebou .ve-odp-casti { flex-direction: column; align-items: stretch; }
    .ve-odp--mobil-pod_sebou .ve-odp-oddelovac { display: none; }
}