/*
 * bvelektronik.cz – responzivní dodatky k screen.css (2026-10).
 * screen.css je minifikovaný build bez zdrojů, proto jsou mobilní úpravy
 * komponent stránek v tomto čitelném souboru. Načítá se za screen.css.
 */

/* ---------- ≤ 1280px: široké wrappery na 100 % ---------- */
@media (max-width: 1280px) {
    .news-top .news-wrapper,
    .support .support-wrapper,
    .certificates-image .certificates-wrapper { width: 100%; }
    .map .map-image { width: 100%; right: 0; }
}

/* ---------- ≤ 1024px: tablet na šířku ---------- */
@media (max-width: 1024px) {
    .video-list li { width: 50%; flex: 0 0 50%; }
    .news-main .news-list li { width: 33.333333%; flex: 0 0 33.333333%; }

    .list-social-networks { width: 100%; }
    .list-social-networks li,
    .list-social-networks li:first-of-type,
    .list-social-networks li:nth-of-type(2),
    .list-social-networks li:last-of-type { flex: 0 0 33.333333%; padding: 0 15px; }

    .map .map-legend { width: 360px; }
}

/* ---------- ≤ 768px: tablet na výšku / velký mobil ---------- */
@media (max-width: 768px) {
    /* úvodní stránka – novinky, podporujeme, certifikáty (slidery) */
    .news-top .news-wrapper,
    .support .support-wrapper,
    .certificates-image .certificates-wrapper { flex-wrap: wrap; width: 100%; }
    /* "> div[class]" kvůli specificitě – původní pravidla mají tři třídy */
    .news-top .news-wrapper > div[class],
    .support .support-wrapper > div[class],
    .certificates-image .certificates-wrapper > div[class] { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; }
    .news-top .news-wrapper .news-info,
    .support .support-wrapper .support-info,
    .certificates-image .certificates-wrapper .certificates-info { padding: 20px 25px 65px; margin-bottom: 20px; }
    .news .news-list,
    .support .support-list,
    .certificates-image .certificates-list { width: 100%; min-width: 100%; max-width: 100%; }

    /* karty sliderů bez výšky z desktopového wrapperu: novinky dostanou
       minimální výšku, certifikáty místo pro absolutně pozicované tlačítko */
    .news-top .news-list .details { min-height: 280px; }
    .certificates-image .certificates-list .in { padding-bottom: 100px; }

    /* výhody (ikony) */
    .list-about-us { width: 100%; margin: 0; }
    .list-about-us li { flex: 0 0 50%; padding: 0 10px 30px; }
    .list-about-us li h3 { font-size: 20px; }

    /* kontaktní formulář – žlutý panel nad formulářem */
    .form-wrapper { flex-wrap: wrap; }
    .form-wrapper .form-info { flex: 0 0 100%; width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; padding: 20px 25px 60px; }
    .form-wrapper .form { flex: 0 0 100%; width: 100%; max-width: 100%; border-radius: 0 0 12px 12px; padding: 20px; }

    /* archiv novinek */
    .news-main .news-list li { width: 50%; flex: 0 0 50%; padding: 0 10px 20px; }

    /* výrobní technologie – videa */
    .video-list { width: 100%; min-width: 100%; max-width: 100%; margin: -80px auto -20px; }
    .video-list li { padding: 0 10px 20px; }
    .video-list .details { padding: 160px 20px 20px; }
    .video-list .details h2,
    .video-list .details h3 { font-size: 22px; }


    /* hlavička podstránek – text + blok vpravo (PDF, video) pod sebe */
    main .introduction.introduction-secondary .container { flex-wrap: wrap; }
    main .introduction.introduction-secondary .info,
    main .introduction.introduction-secondary .more { flex: 0 0 100%; width: 100%; max-width: 100%; }
    main .introduction.introduction-secondary .info h1 { padding-left: 0; padding-top: 50px; font-size: 36px; }
    main .introduction.introduction-secondary .info h1:before { top: 0; width: 110px; height: 28px; }
    main .introduction.introduction-secondary .more .file,
    main .introduction.introduction-secondary .more .video-wrapper { margin-top: 30px; }

    /* o firmě – časová osa: obrázek nad textem, rok jako běžný nadpis */
    .list-history li { flex-wrap: wrap; }
    .list-history li > div:first-of-type { flex: 0 0 100%; width: 100%; border-radius: 12px 12px 0 0; }
    .list-history li > div:first-of-type:before { padding-top: 55%; }
    .list-history li > div img { border-radius: 12px 12px 0 0; }
    .list-history li > div:last-of-type { flex: 0 0 100%; width: 100%; border-radius: 0 0 12px 12px; }
    .list-history li p { width: 100%; max-width: 100%; }
    .list-history li h4 { position: static; width: auto; margin: 0 0 8px; text-align: left; }

    /* o firmě – citace a historie */
    .page-about-us .quote .illustration { display: block; width: 240px; margin: 0 auto 60px; }
    .page-about-us .quote .text { display: block; width: 100%; padding-left: 0; }
    .list-history li,
    .list-history li:nth-of-type(2) { width: 100%; margin-top: 20px; }
    .list-history li:before,
    .list-history li:after { display: none; }

    /* kontakty */
    .contact-persons .field { margin-top: -60px; padding: 35px 10px 0; border-radius: 16px; }
    .list-contact-persons .li { width: 50%; max-width: 243px; }
    .list-social-networks li,
    .list-social-networks li:first-of-type,
    .list-social-networks li:nth-of-type(2),
    .list-social-networks li:last-of-type { flex: 0 0 100%; padding: 10px 0; }
    .map .container { display: flex; flex-direction: column; }
    .map .map-legend { position: static; transform: none; width: 100%; margin-bottom: 20px; }
    .map .map-legend li { padding: 15px 0; }
    .map .map-legend p { font-size: 20px; }
    .map .map-legend .btn { position: static; display: inline-block; margin-top: 12px; }

    /* produkty – soubor ke stažení v úvodu */
    .file { flex-wrap: wrap; }
    .file .illustration { flex: 0 0 120px; }
    .file .details { flex: 0 0 calc(100% - 120px); }
    .file h3 { font-size: 22px; }
}

/* ---------- ≤ 600px: mobil ---------- */
@media (max-width: 600px) {
    .list-about-us li { flex: 0 0 100%; }
    .news-main .news-list li { width: 100%; flex: 0 0 100%; padding: 0 0 20px; }
    .video-list li { width: 100%; flex: 0 0 100%; padding: 0 0 20px; }
    .list-contact-persons .li { width: 100%; }
    .page-about-us .quote .illustration { width: 200px; }

    .file .illustration { flex: 0 0 100%; max-width: 150px; margin: 0 auto 15px; }
    .file .details { flex: 0 0 100%; padding: 0 0 60px; }
    .file .btn { width: 100%; }
}

/* ---------- ≤ 480px: malý mobil ---------- */
@media (max-width: 480px) {
    .form-wrapper .form-info,
    .news-top .news-wrapper .news-info,
    .support .support-wrapper .support-info { padding: 16px 20px 55px; }
    .form-wrapper .form { padding: 15px; }
    .video-list .details { padding: 130px 15px 15px; }
}