/*
 * RWD dla strony o szablonie page-home-v2.php.
 *
 * Zakres jest podwojny i celowo redundantny:
 *   1. arkusz jest wpinany tylko gdy is_page_template('page-home-v2.php') - functions.php
 *   2. kazda regula jest prefiksowana klasa .page-home-v2 z <div class="page-wrapper page-home-v2">
 * Dzieki temu nawet przypadkowe wczytanie pliku na innej podstronie nic nie zmieni.
 *
 * Breakpointy (1024 / 640) sa te same, ktorych uzywaja juz bloki hero, praca i poradniki.
 * Bloki news, praca, poradniki i hero maja wlasne media queries - nie sa tu ruszane.
 */

/* ─────────────────────────────────────────────────────────────
   Oddech po bokach.
   Motywowy .container to szerokosc 100% z max-width skokowo
   (450/640/768/1024/1170) i bez paddingu, wiec ponizej 450px
   tresc dotyka krawedzi ekranu.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-home-v2 .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* hero ma juz wlasny padding 20px na sekcji - nie dokladamy drugiego */
    .page-home-v2 .hero-v2 .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ─────────────────────────────────────────────────────────────
   Blok "Slider placowki" - kafle 33% -> 50% -> 100%
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-home-v2 .placowki-wrapper .item {
        width: 50%;
    }
}

@media (max-width: 640px) {
    .page-home-v2 .placowki-wrapper .item {
        width: 100%;
    }

    /* wyrownanie wysokosci tytulow ma sens tylko przy kilku kolumnach */
    .page-home-v2 .placowki-wrapper .item .lead-title {
        min-height: 0;
    }

    .page-home-v2 .placowki-wrapper .item-short-link {
        min-height: 0;
    }

    /* tooltip na hover jest bezuzyteczny na dotyku - opis widoczny na stale pod grafika */
    .page-home-v2 .placowki-wrapper .item-tooltip {
        position: static;
        opacity: 1;
        background-color: transparent;
        color: var(--main-color-1);
        padding: 12px 0 0 0;
        text-align: center;
    }
}

/* ─────────────────────────────────────────────────────────────
   Blok "Slider strona glowna" - dwie kolumny 60/40 -> jedna
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-home-v2 .slider-wrapper-block {
        padding-top: 45px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .page-home-v2 .slider-wrapper-block .container {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 28px;
    }

    .page-home-v2 .slider-wrapper-block .caption,
    .page-home-v2 .slider-wrapper-block .slider-img {
        width: 100%;
    }

    .page-home-v2 .slider-wrapper-block .caption .caption-title {
        font-size: 4.2rem;
        letter-spacing: 0;
    }

    .page-home-v2 .slider-wrapper-block .caption .caption-desc p {
        padding-right: 0;
    }
}

@media (max-width: 640px) {
    .page-home-v2 .slider-wrapper-block .caption .caption-title {
        font-size: 3.2rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Blok "Tresc z grafika Owl" - dwie kolumny 60/40 -> jedna.
   Wariant side-left/side-right przestaje mie znaczenie: na waskim
   ekranie grafika zawsze idzie nad tekstem.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-home-v2 .acf-block-owl-box-img-wrapper .row-flex {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 28px;
    }

    .page-home-v2 .acf-block-owl-box-img-wrapper .caption,
    .page-home-v2 .acf-block-owl-box-img-wrapper .slider-img {
        width: 100%;
    }

    .page-home-v2 .acf-block-owl-box-img-wrapper .side-left .caption,
    .page-home-v2 .acf-block-owl-box-img-wrapper .side-right .caption {
        order: 1;
        padding-left: 0;
        padding-right: 0;
    }

    .page-home-v2 .acf-block-owl-box-img-wrapper .side-left .slider-img,
    .page-home-v2 .acf-block-owl-box-img-wrapper .side-right .slider-img {
        order: 0;
    }

    .page-home-v2 .acf-block-owl-box-img-wrapper .caption .caption-title {
        font-size: 4rem;
        letter-spacing: 0;
    }

    .page-home-v2 .acf-block-owl-box-img-wrapper .caption .caption-desc p {
        padding-right: 0;
    }

    /* kwadrat 1:1 zjada cala wysokosc ekranu telefonu */
    .page-home-v2 .acf-block-owl-box-img-wrapper .side-left .slider-img img,
    .page-home-v2 .acf-block-owl-box-img-wrapper .side-right .slider-img img {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .page-home-v2 .acf-block-owl-box-img-wrapper .caption .caption-title {
        font-size: 3rem;
    }
}