/* ============================================================================
   TesList — doplňky stylu pro sekci „Nabíjení Tesly"
   ============================================================================

   Sekce jinak vystačí s teslist-2026.css. Tady je jen to, co v něm zatím
   nebylo: odznak s procenty u posuvníků, vzhled samotných posuvníků a pár
   drobností kolem tabulek a mapy.

   Načítá se z header.php hned za hlavním stylem.
   ========================================================================== */

/* ── Posuvníky v kalkulačce ──────────────────────────────────────────────── */

.ts-calc__badge {
    font-family: var(--ts-font-mono, monospace);
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ts-ink);
    background: var(--ts-accent);
    border-radius: 999px;
    padding: .15rem .6rem;
    line-height: 1.5;
}

/* Bootstrapí .form-range má jinak šedou dráhu, která v téhle paletě působí
   jako vypnuté pole. */
.form-range {
    height: 1.5rem;
    padding: 0;
    background: transparent;
}

.form-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--ts-line, #e5e1d8);
}

.form-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--ts-line, #e5e1d8);
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--ts-ink, #141310);
    border: 3px solid var(--ts-accent, #f5d547);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ts-ink, #141310);
    border: 3px solid var(--ts-accent, #f5d547);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.form-range:focus {
    outline: none;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(245, 213, 71, .35);
}

/* ── Výsledek kalkulačky ─────────────────────────────────────────────────── */

/* Hlavní částka se v .ts-calc__result opírá o clamp(), takže na úzkých
   sloupcích umí přetéct. Tady jí dáme vlastní řádkování a zalomení. */
.ts-calc__result .ts-calc__value {
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.ts-ch-result__head {
    font-size: .8125rem;
    color: var(--ts-muted);
    letter-spacing: .01em;
    margin-bottom: 1.25rem;
}

/* Velká karta s hlavním číslem — vizuální těžiště celé stránky. */
.ts-ch-hero-figure {
    background: var(--ts-card, #fff);
    border: 1.5px solid var(--ts-line, #e5e1d8);
    border-radius: var(--ts-r-lg, 16px);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.ts-ch-hero-figure__label {
    font-size: .8125rem;
    color: var(--ts-muted);
    margin-bottom: .35rem;
}

.ts-ch-hero-figure__sub {
    font-size: .875rem;
    color: var(--ts-muted);
    border-top: 1px solid var(--ts-line, #e5e1d8);
    margin-top: 1.25rem;
    padding-top: .85rem;
}

/* ── Tabulky ─────────────────────────────────────────────────────────────── */

/* Široké tabulky (ceníky, seznam stanic) se na mobilu musí posouvat samy,
   ne roztahovat stránku. */
.ts-ch-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ts-ch-scroll .ts-cena-table {
    min-width: 560px;
}

/* Odznak „Neověřeno" nesmí vypadat jako cena. */
.ts-cena-table .ts-badge-outline {
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Mapa ────────────────────────────────────────────────────────────────── */

.ts-ch-map {
    height: 440px;
    border-radius: var(--ts-r-lg, 16px);
    overflow: hidden;
    border: 1.5px solid var(--ts-line, #e5e1d8);
}

@media (max-width: 767px) {
    .ts-ch-map { height: 320px; }
}

/* Leaflet si jinak přetáhne typografii webu a popisky pak nesedí. */
.ts-ch-map .leaflet-container {
    font-family: inherit;
    font-size: .875rem;
}

/* ── Rozcestníkové karty ─────────────────────────────────────────────────── */

/* .ts-cards__item má v hlavním stylu jen `min-width: 0` — je to obal pro jiné
   komponenty, ne hotová karta. Tady z něj kartu uděláme, protože v rozcestníku
   sekce žádná vhodnější komponenta není. */
.ts-ch-tile {
    display: block;
    background: var(--ts-card, #fff);
    border: 1.5px solid var(--ts-line, #e5e1d8);
    border-radius: var(--ts-r-lg, 16px);
    padding: 1.5rem;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ts-ch-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 19, 16, .32);
    box-shadow: 0 8px 24px rgba(20, 19, 16, .08);
    color: inherit;
}

.ts-ch-tile__icon {
    font-size: 1.5rem;
    line-height: 1;
    display: block;
    margin-bottom: .75rem;
}

.ts-ch-tile h3 {
    font-size: 1.0625rem;
    margin-bottom: .4rem;
}

.ts-ch-tile p {
    font-size: .875rem;
    color: var(--ts-muted);
    margin-bottom: 0;
    line-height: 1.6;
}

.ts-ch-tile__go {
    display: inline-block;
    margin-top: .85rem;
    font-family: var(--ts-font-mono, monospace);
    font-size: .75rem;
    color: var(--ts-faint);
}

.ts-ch-tile:hover .ts-ch-tile__go { color: var(--ts-ink, #141310); }

/* Vysvětlivky typů nabíjení — stejná mřížka, ale bez odkazu. */
.ts-ch-note-card {
    background: var(--ts-card, #fff);
    border: 1.5px solid var(--ts-line, #e5e1d8);
    border-radius: var(--ts-r-lg, 16px);
    padding: 1.5rem;
    height: 100%;
}

.ts-ch-note-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.ts-ch-note-card p  { font-size: .875rem; color: var(--ts-muted); margin-bottom: 0; line-height: 1.6; }