/* =========================
   GLOBAL
========================= */

.tp-custom-banners {
    width: 100%;
}

.tp-banner {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;

    display: flex;
    align-items: stretch;
    position: relative;
}

/* =========================
   WSPÓLNE ZACHOWANIE SEKCJI
   (CENTROWANIE PIONOWE)
========================= */

.tp-split-left,
.tp-split-right,
.tp-third,
.tp-classic {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 🔑 pionowe centrowanie */
}

/* =========================
   UKŁAD 1:1 (SPLIT)
========================= */

.tp-layout-split {
    display: flex;
    width: 100%;
    height: 100%;
}

/* SZTYWNE 50% / 50% */
.tp-split-left,
.tp-split-right {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;

    padding: 40px;
    box-sizing: border-box;
}

/* lewa – obraz */
.tp-split-left {
    align-items: center;
}

/* prawa – tekst */
.tp-split-right {
    align-items: flex-start;
    white-space: nowrap;      /* 🔑 NIE ŁAM LINII NA DESKTOPIE */
    overflow: hidden;
}

/* linki (telefon / email / whatsapp) */
.tp-split-right a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

/* OBRAZ – PODPORZĄDKOWANY WYSOKOŚCI BANERU */
.tp-split-left img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    display: block;
}

/* =========================
   UKŁAD 3 CZĘŚCI (1/3 + 1/3 + 1/3)
========================= */

.tp-layout-third {
    display: flex;
    width: 100%;
    height: 100%;
}

.tp-third {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    height: 100%;

    padding: 40px;
    box-sizing: border-box;

    align-items: center;
}

.tp-third img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    display: block;
}

/* =========================
   TEKST – RESPONSYWNY
========================= */

.tp-text {
    font-size: clamp(16px, 1.2vw, 20px); /* 🔑 auto-skalowanie */
    line-height: 1.4;
}

/* =========================
   UKŁAD KLASYCZNY
========================= */

.tp-layout-classic {
    display: flex;
    width: 100%;
    height: 100%;
}

.tp-classic {
    width: 100%;
    height: 100%;

    padding: 40px;
    box-sizing: border-box;

    align-items: center;
    text-align: center;
}

/* obraz klasyczny – TEŻ PODLEGA WYSOKOŚCI */
.tp-classic-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    object-fit: contain;
    display: block;

    margin-bottom: 20px;
}

/* =========================
   RESPONSIVE – TABLET
========================= */

@media (max-width: 1024px) {

    .tp-split-left,
    .tp-split-right,
    .tp-third,
    .tp-classic {
        padding: 24px;
    }

    .tp-text {
        font-size: clamp(15px, 2vw, 18px);
    }
}

/* =========================
   RESPONSIVE – MOBILE
========================= */

@media (max-width: 768px) {

    /* split i third → kolumny */
    .tp-layout-split,
    .tp-layout-third {
        flex-direction: column;
    }

    .tp-split-left,
    .tp-split-right,
    .tp-third {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        height: auto;

        padding: 20px;
        align-items: center;
    }

    .tp-split-right {
        white-space: normal;   /* 🔄 na mobile pozwalamy łamać */
        text-align: center;
        align-items: center;
    }

    .tp-text {
        font-size: clamp(14px, 4vw, 18px);
    }

    /* ograniczenie obrazów */
    .tp-split-left img,
    .tp-third img,
    .tp-classic-image {
        max-height: 260px;
    }
}

/* =========================
   RESPONSIVE – MAŁE TELEFONY
========================= */

@media (max-width: 480px) {

    .tp-text {
        font-size: clamp(13px, 4.5vw, 16px);
        line-height: 1.3;
    }

    .tp-split-left img,
    .tp-third img,
    .tp-classic-image {
        max-height: 200px;
    }
}


/* =========================
   BLOKADA ŁAMANIA TEKSTU
   (SPLIT + THIRD)
========================= */

.tp-split-right,
.tp-third {
    white-space: nowrap;
    overflow: hidden;
}

/* linki w third */
.tp-third a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}


/* ===================================================
   FINAL OVERRIDE – RESPONSYWNOŚĆ Z !IMPORTANT
   =================================================== */

/* DESKTOP – pozwalamy na dynamiczne zmniejszanie */
.tp-text,
.tp-split-right p,
.tp-third p,
.tp-split-right a,
.tp-third a {
    font-size: clamp(16px, 1.2vw, 20px) !important;
    line-height: 1.35 !important;
}

/* TABLET */
@media (max-width: 1024px) {
    .tp-text,
    .tp-split-right p,
    .tp-third p,
    .tp-split-right a,
    .tp-third a {
        font-size: clamp(14px, 2vw, 18px) !important;
    }
}

/* MOBILE – ZMIANA UKŁADU + MNIEJSZA CZCIONKA */
@media (max-width: 768px) {

    /* ZMIANA UKŁADU NA WIERSZE */
    .tp-layout-split,
    .tp-layout-third {
        flex-direction: column !important;
    }

    /* POZWALAMY ŁAMAĆ TEKST */
    .tp-split-right,
    .tp-third {
        white-space: normal !important;
        text-align: center !important;
    }

    /* AGRESYWNE ZMNIEJSZENIE TEKSTU */
    .tp-text,
    .tp-split-right p,
    .tp-third p,
    .tp-split-right a,
    .tp-third a {
        font-size: clamp(13px, 4vw, 16px) !important;
        line-height: 1.3 !important;
    }
}

/* MAŁE TELEFONY */
@media (max-width: 480px) {
    .tp-text,
    .tp-split-right p,
    .tp-third p,
    .tp-split-right a,
    .tp-third a {
        font-size: 13px !important;
    }
}

/* ===================================================
   FIX: RZECZYWISTA STRUKTURA HTML
   =================================================== */

/* SPLIT = 2 równe kolumny */
.tp-layout-split {
    display: flex;
}

.tp-layout-split .tp-item {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* THIRD = 3 równe kolumny */
.tp-layout-third {
    display: flex;
}

.tp-layout-third .tp-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ===================================================
   FORCE RESPONSIVE TEXT (INLINE OVERRIDE)
   =================================================== */

.tp-banner h1,
.tp-banner h2,
.tp-banner h3 {
    font-size: clamp(20px, 2.5vw, 48px) !important;
    line-height: 1.2 !important;
    text-align: center;
}

.tp-banner p,
.tp-banner a {
    font-size: clamp(14px, 1.4vw, 22px) !important;
    line-height: 1.35 !important;
}
@media (max-width: 768px) {

    .tp-layout-split,
    .tp-layout-third {
        flex-direction: column;
    }
 /* LEWA kolumna – 1 */
    .tp-layout-third .tp-third:nth-child(1) {
        order: 1;
    }

    /* PRAWA kolumna – 3 */
    .tp-layout-third .tp-third:nth-child(3) {
        order: 2;
    }

    /* ŚRODKOWA kolumna – 2 */
    .tp-layout-third .tp-third:nth-child(2) {
        order: 3;
    }
    .tp-layout-split .tp-item,
    .tp-layout-third .tp-item {
        max-width: 100%;
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
    }
}


/* ===================================================
   MOBILE FIX: RESET WYSOKOŚCI BANERU
   =================================================== */

@media (max-width: 768px) {

    .tp-banner {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
    }

    /* gdyby któryś layout miał własne ograniczenie */
    .tp-layout-split,
    .tp-layout-third,
    .tp-layout-classic {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
    }
}


.tp-banner h2 {
    font-size: clamp(20px, 2.4vw, 30px);
}


/* =========================
   RESPONSYWNE TELEFONY
========================= */

/* =========================
   LINKI KONTAKTOWE – GLOBAL
========================= */

/* =========================
   TELEFON – NAJWIĘKSZY
========================= */
.tp-banner a[href^="tel:"] {
    font-size: clamp(20px, 2.4vw, 30px) !important;
    font-weight: 800 !important;
}

/* =========================
   EMAIL – ŚREDNI
========================= */
.tp-banner a[href^="mailto:"] {
    font-size: clamp(16px, 1.8vw, 22px) !important;
    font-weight: 700 !important;
}

/* =========================
   WHATSAPP – MNIEJSZY
========================= */
.tp-banner a[href*="wa.me"] {
    font-size: clamp(14px, 1.6vw, 18px) !important;
    font-weight: 600 !important;
}


/* =========================
   IKONY – RESPONSYWNE
========================= */

.tp-banner a[href^="tel:"] img,
.tp-banner a[href^="mailto:"] img,
.tp-banner a[href*="wa.me"] img {
    width: clamp(24px, 2vw, 40px) !important;
    height: auto !important;
    flex-shrink: 0;
}

/* =========================
   NAGŁÓWKI W BANERACH
   (mniejsze + responsywne)
========================= */

.tp-banner h2 {
    font-size: clamp(22px, 2.2vw, 32px) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
}


/* =========================
   MOBILE – WIĘKSZA CZYTELNOŚĆ
========================= */
@media (max-width: 768px) {

  /* nagłówki */
  .tp-banner h1,
  .tp-banner h2,
  .tp-banner h3 {
    font-size: clamp(26px, 6vw, 36px) !important;
    line-height: 1.25 !important;
  }

  /* zwykły tekst */
  .tp-banner p,
  .tp-banner span {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.4 !important;
  }

  /* TELEFON – numer (najważniejszy) */
  .tp-banner a[href^="tel:"] {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  /* ikona telefonu */
  .tp-banner a[href^="tel:"] img {
    width: 34px !important;
  }
}
/* =========================
   MOBILE – EMAIL + NAGŁÓWEK
========================= */
@media (max-width: 768px) {

  /* EMAIL (link mailto) */
  .tp-banner a[href^="mailto:"] {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    font-weight: 800 !important;
  }

  /* ikona email */
  .tp-banner a[href^="mailto:"] img {
    width: 42px !important;
    height: auto !important;
  }

  /* TEKST: "Nie znalazłeś części..." */
  .tp-banner span {
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.2 !important;
    display: inline-block;
  }
}

/* =====================================
   MOBILE – TEKST 1. BANERU (UJEDNOLICENIE)
===================================== */
@media (max-width: 768px) {

  /* tekst w pierwszym banerze */
  .tp-banner p,
  .tp-banner span {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.4 !important;
  }

}

/* =====================================
   MOBILE – ODSTĘP NAD BANEREM
===================================== */
@media (max-width: 768px) {

  .tp-custom-banners {
    margin-top: 20px !important;
  }

}

/* =====================================
   MOBILE – NUMERY TELEFONÓW JEDEN POD DRUGIM
===================================== */
@media (max-width: 768px) {

  /* tabela z telefonami */
  .tp-banner table,
  .tp-banner tbody,
  .tp-banner tr {
    display: block;
    width: 100%;
  }

  .tp-banner td {
    display: block;
    width: 100%;
    padding: 10px 0 !important;
    text-align: center;
  }

}


/* =====================================
   MOBILE – UJEDNOLICENIE WYRÓŻNIONYCH SPANÓW
   (np. "oryginalnych części używanych")
===================================== */
@media (max-width: 768px) {

  .tp-banner span {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.4 !important;
  }

}
/* =====================================
   MOBILE – 1. BANER – PEŁNE WYRÓWNANIE TEKSTU
===================================== */
@media (max-width: 768px) {

  /* TEN KONKRETNY BLOK TEKSTU */
  .tp-custom-banners .tp-banner .tp-split.tp-item > div > div {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.4 !important;
  }

  /* SPANY MAJĄ DZIEDZICZYĆ, A NIE LICZYĆ WŁASNY ROZMIAR */
  .tp-custom-banners .tp-banner .tp-split.tp-item span {
    font-size: inherit !important;
    line-height: inherit !important;
  }

}
/* =====================================
   MOBILE – 1. BANER – WYŚRODKOWANIE TEKSTU
===================================== */
@media (max-width: 768px) {

  /* TEN KONKRETNY BLOK TEKSTU */
  .tp-custom-banners .tp-banner .tp-split.tp-item > div > div {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}
/* =====================================
   MOBILE – CAŁKOWITE WYŚRODKOWANIE CTA + TEKSTU
===================================== */
@media (max-width: 768px) {

  /* ZABIJAMY LEWY MARGINES INLINE */
  .tp-custom-banners .tp-banner .tp-split.tp-item > div {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* TEKST GŁÓWNY */
  .tp-custom-banners .tp-banner .tp-split.tp-item > div > div {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* PRZYCISK CTA */
  .tp-custom-banners .tp-banner a,
  .tp-custom-banners .tp-banner button {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* OPCJONALNIE – MNIEJSZE ODSTĘPY NA TELEFONIE */
  .tp-custom-banners .tp-banner .tp-split.tp-item > div {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

}