/*
    Úpravy rozložení jen pro mobil a tablet (Čeněk 3. 11. 2026: „upravime pro mobil, ale pro pc vubec“).
    Všechno je uvnitř @media pod hranicí mobilního menu (991 px), počítač se nemění. Obsah (texty) se tu nemění.
    Bez url(): soubor může skončit vložený do stránky (doplněk ukotvení pro starší prohlížeče) a relativní
    adresy by se pak počítaly od stránky.
*/
@media (max-width: 61.99em) {

    /* --- Hlavička na jeden řádek: logo, lupa, jazyk, menu (dřív 100 px a menu na druhém řádku) --- */
    .main-nav { min-height: 0; }
    .main-nav .navbar { flex-wrap: nowrap; --bs-navbar-padding-y: 10px; column-gap: 4px; }
    .main-nav .navbar-brand { max-height: none; flex-shrink: 1; min-width: 0; }
    .main-nav .navbar-brand img { transform: none; width: 132px; height: auto; display: block; }
    .main-nav .search-expand .form-inline { min-width: 44px; min-height: 44px; }
    .main-nav .navbar-toggler { margin-left: 0; width: 44px; height: 44px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
    .main-nav .navbar-toggler .icon-bar { width: 24px; }
    .navbar-langswitcher .nav-link--langswitcher { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding-inline: 8px; }

    /* Okénko jazyků pevně pod hlavičkou (ukotvení k tlačítku starší prohlížeče neumí a okénko ujelo mimo obrazovku) */
    .popover--langswitcher { position: fixed !important; top: 60px !important; right: 12px !important; left: auto !important; bottom: auto !important; transform: none !important; }

    /* --- Mobilní menu --- */
    /* Všech 5 jazyků jako řada nahoře (dřív jen „CZ“, ostatní schované pod položkami). Bílý pruh,
       aby pod ním při posouvání dlouhého firemního menu neprosvítal text. */
    #nav-mmenu > .mm-lang__content { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; align-items: center; gap: 2px; padding: 0 60px 0 12px; z-index: 3; background: #fff; max-width: none; border-radius: 0; width: auto; }
    #nav-mmenu > .mm-lang__content .mm-lang__item a { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 8px; border-radius: 8px; font-size: 15px; font-weight: 500; color: #003770; }
    #nav-mmenu > .mm-lang__content .mm-lang__item.active a { background: rgba(0, 55, 112, .08); font-weight: 700; }
    #nav-mmenu:not(.mm-spn--main) > .mm-lang__content { display: none; }
    #nav-mmenu > .mm-lang__content { box-shadow: 0 1px 0 rgba(0, 55, 112, .1); }
    /* křížek na stejné výšce jako řada jazyků (dřív o 20 px níž) */
    html #nav-mmenu.mm-spn--navbar .close::after { top: 0; }
    /* Bublina chatu nesmí ležet přes otevřené menu */
    html:has(.mm-ocd--open) .chatway--trigger-container { display: none !important; }

    /* --- Úvodní stránka --- */
    /* Prázdné odstavce v obsahu (mezery z editoru) dělaly díry; označuje je mobil.js */
    .mob-prazdny { display: none !important; }
    /* Úvod jako zaoblená karta: fotka nahoře, pod ní nadpis a tlačítko „Ověřit dostupnost“ (Čeněk 3. 11.: jako T-Mobile).
       Odstavce úvodu se na mobilu schovají (třída .mob-uvod a tlačítko z mobil.js), na počítači zůstávají. */
    .hp-banner { margin: 10px 12px 0; border-radius: 24px; }
    .hp-banner__content { padding-inline: 20px !important; }
    .hp-banner__container { display: flex; flex-direction: column; }
    .hp-banner__container > .hp-banner__inner { order: -1; position: relative; z-index: 2; }
    /* Fotka: výřez 4 : 3, obrázek posunutý o 7 % nahoru, takže nad vlasy zbývá jen kousek a dole je vidět telefon i hrnek
       (Čeněk 3. 11.: celá byla moc velká, úzký ořez ztratil smysl, „at jsou vlasy vrsek ty fotky“).
       Obrázky jsou ve fotce přichycené k hornímu okraji, proto posun, ne object-position. */
    html .hp-banner .hp-banner__image { height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
    .hp-banner__image > * { transform: translateY(-7%); }
    .mob-uvod > p { display: none !important; }
    .mob-uvod__cta { display: flex; width: 100%; justify-content: center; margin-top: 20px; }
    /* Úvodní pruhy podstránek a tmavé sekce („Zavolejte mi“ apod.) jako zaoblené karty s okrajem, ne ostré pruhy
       přes celou šířku (Čeněk 3. 11.: „nelibi ty ostry rohy… oni maji v podstate vse zaoblene“) */
    main .banner, main .section.section-bg { margin-inline: 12px; border-radius: 24px; overflow: hidden; }
    main .banner { margin-top: 10px; }
    /* Rozcestník „Víme, že hledáte“ a podobné seznamy tlačítek: písmo 10,8 px → 15 px */
    .button-list li a { font-size: 15px; }

    /* Výpis článků: obrázek vlevo, nadpis vpravo, celá karta klikací (dřív 6 velkých karet pod sebou, asi 2 700 px) */
    .card__list { display: flex; flex-direction: column; gap: 10px; }
    .card__list > .card__item { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; margin: 0; padding: 0; }
    .card__list > .card__item .card__image { grid-row: 1 / span 2; margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
    .card__list > .card__item .card__image img { width: 100%; height: 100%; object-fit: cover; }
    .card__list > .card__item .card__tags { display: none; }
    .card__list > .card__item .card__date { margin: 0 0 2px; }
    .card__list > .card__item .card__heading { margin: 0; font-size: 15px; line-height: 1.3; }
    .card__list > .card__item .card__link { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; font-size: 0; color: transparent; border: 0; background: none; }
    .card__list > .card__item .card__link::before, .card__list > .card__item .card__link::after { display: none; }

    /* Recenze: všechny karty stejně vysoké a text nejvýš 6 řádků, aby stránka při posouvání neposkakovala
       (Čeněk 3. 11.); u delších odkaz „Celá recenze“ (mobil.js), rozbalí jen na klepnutí. */
    html .swiper--review .swiper-wrapper { align-items: stretch; height: auto !important; }
    html .swiper--review .swiper-slide { height: auto !important; }
    html .swiper--review .review__description:not(.mob-otevreno) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
    html .swiper--review .review__description:not(.mob-otevreno) p { display: inline; margin: 0; }
    .mob-recenze__vice { display: inline-block; margin-top: 10px; padding: 6px 0; border: 0; background: none; color: #003770; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

    /* Rozcestník Firmy: dlaždice služeb nižší (s fotkou 338 → 220 px, bez fotky podle textu) */
    html .service__item { min-height: 0; height: auto; }
    html .service__item:has(.service__image) { min-height: 220px; }

    /* --- Okna (poptávka, ověření dostupnosti…) --- */
    /* Stránka pod otevřeným oknem se nehýbe (Čeněk 3. 11.: „sekala se“, šla posouvat pod oknem). Zámek dělá mobil.js
       (třída mob-zamek + pevná pozice, kvůli iPhonu); posouvání uvnitř okna nepřetéká na stránku. */
    html.mob-zamek, html.mob-zamek body { overflow: hidden !important; }
    html.mob-zamek body { position: fixed; left: 0; right: 0; width: 100%; }
    .dialog .dialog__body, .dialog { overscroll-behavior: contain; }

    /* --- Tarify --- */
    /* Po ověření adresy: místo posuvníku seznam pod sebou (Čeněk 3. 11.: „strasnej chaos“ – vykukující sousední karty,
       lišta přes kartu). Tarif = nízký řádek s kolečkem výběru, název, rychlost a cena; klepnutím se vybere (skript
       tariff-carousel.js) a jen vybraný ukazuje, co v něm je. Jen výpis s výběrem (.is-selectable), ne objednávka
       u developerských projektů. Výšky, které skript karet srovnává, se tu ruší. */
    html .tariff__carousel.is-selectable .tariff__list { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 12px; padding: 14px 0 0 !important; margin: 0; }
    html .tariff__carousel.is-selectable .tariff__list > .tariff__item { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: none; }
    html .tariff__carousel.is-selectable .tariff__dots, html .tariff__carousel.is-selectable .tariff__nav { display: none !important; }
    html .tariff__carousel.is-selectable .tariff__item .tariff__tags { top: -11px; left: auto; right: 18px; transform: none; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; padding: 16px 18px 16px 52px !important; min-height: 0 !important; height: auto !important; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__body::before { content: ""; position: absolute; left: 16px; top: 47px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; opacity: .45; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id].is-selected .tariff__body::before { opacity: 1; box-shadow: none; background: #93D500 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.5l3 3 5.8-6.1' fill='none' stroke='%23003770' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id]:not(.is-selected) { cursor: pointer; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__top { height: auto !important; grid-column: 1; margin: 0 0 4px; justify-content: flex-start; gap: 8px; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__top { flex-wrap: wrap; row-gap: 4px; align-items: center; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__connection { font-size: 12px; padding: 3px 10px; line-height: 1.3; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id]:not(.tariff__item--recommended) .tariff__connection { border: 1px solid transparent; } /* stejná výška jako obrysový štítek na doporučené kartě */
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__speed small { white-space: nowrap; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__speed { grid-column: 1; margin: 0; font-size: 20px; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__speed-up { grid-column: 1; margin: 0; font-size: 13px; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__price { grid-column: 2; grid-row: 1 / span 3; height: auto !important; align-self: center; margin: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__price-main { font-size: 26px; line-height: 1.1; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__body > hr,
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__suitable,
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__select { display: none !important; } /* výběr ukazuje kolečko */
    /* Poptávka: velké zelené „Nezávazně poptat“ přímo ve vybraném tarifu, na střed karty; lišta dole na mobilu není
       (Čeněk 3. 11.: lišta se mu nelíbila, chtěl výraznější tlačítko; zelené mu dává mobil.js třídou btn-primary). */
    html .tariff__carousel.is-selectable + .tariff-bar { display: none !important; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__actions .btn-interested-in { display: flex !important; width: 100%; justify-content: center; --bs-btn-padding-y: 16px; font-size: 17px; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__content,
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__actions { grid-column: 1 / -1; }
    html .tariff__carousel.is-selectable:not(.mob-mereni) .tariff__item[data-select-id]:not(.is-selected) .tariff__content,
    html .tariff__carousel.is-selectable:not(.mob-mereni) .tariff__item[data-select-id]:not(.is-selected) .tariff__actions { display: none; }
    /* Otevřený (vybraný) tarif má vždy stejnou výšku – podle tarifu s nejvíc výhodami (měří mobil.js do --mob-otevrena),
       „Podrobnosti tarifu“ dole; při přepnutí tarifu stránka neposkočí (Čeněk 3. 11.) */
    html .tariff__carousel.is-selectable .tariff__list > .tariff__item[data-select-id] { display: flex; flex-direction: column; }
    html .tariff__carousel.is-selectable .tariff__list > .tariff__item[data-select-id].is-selected { min-height: var(--mob-otevrena, 0px); }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__body { flex: 1 1 auto; grid-template-rows: auto auto auto 1fr auto; }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__content { display: flex; flex-direction: column; justify-content: center; } /* výhody svisle na střed volného místa */
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__content { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(127, 140, 160, .25); }
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__actions { margin: 14px 0 0 -34px; align-items: center; gap: 10px; } /* přes celou kartu (vlevo je místo pro kolečko), tlačítko i odkaz na střed */
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__content,
    html .tariff__carousel.is-selectable .tariff__item[data-select-id] .tariff__benefits { margin-bottom: 0; }
    /* Karty TV, Skylink a Záloha pod tarify: malý celý obrázek vlevo (16 : 9), text vpravo (dřív asi 480 px každá) */
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__tags { display: none; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__body { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px !important; min-height: 0 !important; height: auto !important; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__image { grid-row: 1 / span 3; align-self: center; margin: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; } /* celý obrázek, bez ořezu do čtverce (Čeněk 3. 11.) */
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__image img { width: 100%; height: 100%; object-fit: cover; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__top { height: auto !important; margin: 0; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__heading { font-size: 17px; line-height: 1.25; margin: 0; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__content { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__content p { margin: 0; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__actions { grid-column: 2; margin-top: 8px; align-items: flex-start; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__actions > span { display: none; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__actions .btn { padding: 8px 18px; font-size: 14px; box-shadow: inset 0 0 0 2px #003770; border-radius: 100vw; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__actions .btn::before { display: none; }
    /* stejná výška všech tří karet (min-height nastaví mobil.js podle nejvyšší), tlačítko vždy dole (Čeněk 3. 11.) */
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) { display: flex; flex-direction: column; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__body { flex: 1 1 auto; grid-template-rows: auto auto 1fr; }
    html .tariff__carousel.is-selectable .tariff__item:not([data-select-id]) .tariff__actions { align-self: end; }
    /* Tmavá karta „Doporučujeme“: tmavé tlačítko splývalo s kartou → bílý obrys */
    .tariff__item--recommended .btn-secondary { box-shadow: inset 0 0 0 2px #fff; border-radius: 100vw; }
    /* „Vybrat tarif“ na bílých kartách vypadal jako obyčejný text */
    .tariff__item:not(.tariff__item--recommended):not(.is-selected) .tariff__select { box-shadow: inset 0 0 0 2px #003770; border-radius: 100vw; }

    /* --- Kontakty: růžové a zelené odkazy na světlém pozadí skoro nešly přečíst --- */
    .layout--kontakty main a[href^="tel:"], .layout--kontakty main a[href^="mailto:"] { color: #003770 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .layout--kontakty main a.link--underline { text-decoration: none; } /* mají vlastní podtržení */
    .layout--kontakty main .link--underline-accent { display: inline-block; padding-block: 3px; font-size: 16px; }

    /* --- Ochrana proti DDoS: náhled snímku --- */
    /* neprůhledné pozadí (dřív prosvítal text stránky) a snímek ve větším rozlišení, posouvá se prstem do stran */
    html body .ud-lightbox::backdrop { background: #00142d; }
    html body .ud-lightbox { padding: 64px 0 72px; overflow: auto; }
    html body .ud-lightbox-body { margin: 0; max-width: none; align-items: flex-start; }
    html body .ud-lightbox-body img { max-width: none; width: 960px; margin-inline: 12px; }
    html body .ud-lightbox-body figcaption { position: sticky; left: 12px; width: calc(100vw - 24px); text-align: left; }
    /* obsah stránky: odkazy vyšší, dají se lépe trefit prstem */
    html .uvt-ddos .ud-toc a { display: inline-block; padding-block: 6px; }

    /* --- Patička --- */
    .footer__grid { column-gap: 0; } /* dřív vpravo o 25 px větší okraj než vlevo */
    .footer__links-list--sm .footer__links-link { padding-block: 5px; }
    .footer__bottom { padding-bottom: 72px; } /* místo pro bublinu chatu */

    /* --- Tlačítka ke stažení: ozdobná linka se kreslila přes první písmeno textu --- */
    .btn-download::before { display: none; }
    /* velikost souboru pod názvem, ne vedle něj na dvou řádcích */
    .btn-download { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; }
    .btn-download > .ms-auto { grid-column: 1; grid-row: 2; margin: 0 !important; font-weight: 500; }
    .btn-download::after { grid-column: 2; grid-row: 1 / span 2; }

    /* --- Dlouhé adresy a slova v textu se zalomí, místo aby přetekly --- */
    main p, main li, main td, main dd { overflow-wrap: break-word; } /* ne „anywhere“: to lámalo i krátká slova v úzkých sloupcích */

    /* --- E-shop --- */
    /* Kategorie jako jeden posuvný řádek (dřív 9 řádků nad produkty) */
    html .accessory-layout { grid-template-columns: minmax(0, 1fr); }
    html .accessory-filter { min-width: 0; }
    html .accessory-filter details > summary { display: none; }
    html .accessory-filter details > ul { display: flex !important; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; }
    html .accessory-filter li { margin: 0; flex: none; }
    html .accessory-filter a { white-space: nowrap; padding: 8px 14px; border-radius: 100vw; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 55, 112, .2); }
    html .accessory-filter a[aria-current="page"] { background: #003770; box-shadow: none; }
    html .accessory-filter .icon { display: none; }
    html .accessory-actions { align-items: center; }
}

/* Malé písmo: na úzkém telefonu web zmenšuje vše na 90 %, drobné texty pak měly 10,8 px. Teď nejméně 12 px. */
@media (max-width: 35.99em) {
    .fs-small, .fs-small li, .fs-button-small, .fs-button-small li, .fs-tag, .fs-tag li,
    .breadcrumb-item span, .breadcrumb-item a, .btn-sm, .footer__small,
    .tag__item, .tv-service__tag, .project__tag, .tariff__alert, .tariff__connection, .tariff__tag, .card__tag, .review__tag,
    .card__date, .tariff__price-description, .tariff__content li, .tariff__content p, .tariff__content table td, .tariff__content table th,
    .review__subheading, .tv-service__content, .read-also__subheading, .town__tag, .town__heading { font-size: 12px; }
}