/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =====================================================================
   [vtms_lang_flags] – Inline flags, no dropdown
   Nagłówek VTMS: ciemne tło (foto + #00000082), elementy białe (#FFF)
   ===================================================================== */

.vtms-lang-flags {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.vtms-lang-flag {
    display: flex;
    align-items: center;
    text-decoration: none;
    outline: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: border-color .18s ease;
}

/* Flagi jako element nawigacji, nie naklejki: jednakowy rozmiar, delikatna
   krawedz zamiast ciezkiego cienia, nieaktywna przygaszona. */
.vtms-lang-flag img {
    width: 26px;
    height: 19.5px;
    display: block;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    opacity: 0.55;
    transition: opacity .18s ease, box-shadow .18s ease;
}

.vtms-lang-flag:hover img,
.vtms-lang-flag:focus-visible img {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Aktywny jezyk: pelny kolor i podkreslenie w kolorze marki. */
.vtms-lang-flag--active {
    border-bottom-color: #009AFB;
}

.vtms-lang-flag--active img {
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.vtms-lang-flag:focus-visible {
    outline: 2px solid #009AFB;
    outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1024px) {
    .vtms-lang-flag img { width: 24px; height: 18px; }
}

/* Mobile */
@media (max-width: 767px) {
    .vtms-lang-flag img { width: 22px; height: 16.5px; }
    .vtms-lang-flags { gap: 8px; }
}

/* =====================================================================
   Fallback: stary [language-switcher] TRP – zachowany na wypadek
   ===================================================================== */

.elementor-element-ab9c2ae .trp-flag-image {
    width: 38px !important;
    height: auto !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block !important;
}

/* =====================================================================
   Pasek CTA a pasek partnerów
   Sekcja CTA "Zainteresowany współpracą?" (42a28b73) należy do szablonu
   stopki, więc renderuje się na wszystkich podstronach. Na stronie głównej
   zastępuje ją sekcja "Nasi partnerzy" (partSekcja1) dodana na końcu treści
   strony, dlatego CTA ukrywamy wyłącznie tam.
   ===================================================================== */

body.home .elementor-element-42a28b73 {
    display: none;
}

/* Logotypy partnerów: jednolita wysokość niezależnie od proporcji pliku. */
.elementor-element-partSlider1 .swiper-slide img {
    height: 70px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .elementor-element-partSlider1 .swiper-slide img { height: 56px; }
}

/* Certyfikaty w stopce: jednakowa wysokość mimo różnych proporcji plików
   (znaczki ISO są pionowe, logo RINA poziome).

   Kontener ma flex-wrap: nowrap i tylko 265 px szerokości, więc trzy widgety
   były ściskane po równo do 75 px, a max-width: 100% nadpisywało width: auto —
   logo RINA traciło proporcje. Stąd flex-shrink: 0 i zdjęty max-width. */

.elementor-element-fc3_logos {
    flex-wrap: wrap;
    row-gap: 14px;
}

.elementor-element-fc3_logos > .elementor-widget-image {
    flex: 0 0 auto;
    width: auto;
}

/* Logo RINA zajmuje cały wiersz, więc oba znaki ISO spadają pod nie. */
.elementor-element-fc3_logos > .elementor-element-fc3_cert2 {
    flex: 0 0 100%;
}

/* Hierarchia wg życzenia klienta: duże logo RINA w pierwszym wierszu,
   dwa mniejsze znaki ISO pod nim. */

.elementor-element-fc3_logos .elementor-widget-image img {
    width: auto;
    max-width: none;
}

.elementor-element-fc3_logos > .elementor-element-fc3_cert2 img {
    height: 104px;
}

.elementor-element-fc3_logos > .elementor-element-fc3_cert1 img,
.elementor-element-fc3_logos > .elementor-element-fc3_cert3 img {
    height: 62px;
}

/* Wszystkie trzy znaki do lewej krawędzi, w jednej osi z nagłówkiem
   „CERTYFIKATY". Widget RINA zajmuje całą szerokość wiersza, a widgety obrazu
   Elementora mają domyślnie text-align: center — bez tego RINA odjeżdżała
   na środek, podczas gdy znaczki ISO stały przy lewej krawędzi. */
.elementor-element-fc3_logos .elementor-widget-image {
    text-align: left;
}

/* Na telefonie cała stopka jest wyśrodkowana, więc znaki też. */
@media (max-width: 767px) {
    .elementor-element-fc3_logos { justify-content: center; }
    .elementor-element-fc3_logos .elementor-widget-image { text-align: center; }
    .elementor-element-fc3_logos > .elementor-element-fc3_cert2 img { height: 86px; }
    .elementor-element-fc3_logos > .elementor-element-fc3_cert1 img,
    .elementor-element-fc3_logos > .elementor-element-fc3_cert3 img { height: 52px; }
}

/* Naglowek: RINA, VTMS, menu, jezyki i LinkedIn. */
.elementor-7 .elementor-element-274a823 > .e-con-inner {
    display: grid;
    grid-template-columns: 64px 140px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    max-width: 1600px;
    padding-inline: 24px;
}
.elementor-7 .elementor-element-274a823 > .e-con-inner > * { width: auto; min-width: 0; }
.elementor-7 .elementor-element-hdrRina img { width: 64px; height: 48px; object-fit: contain; }
/* Logo VTMS (biale, 2026-09-15): wysokosc taka jak mialo poprzednie logo.
   Nowe ma proporcje 2,23:1 zamiast 2,58:1, wiec przy tej samej szerokosci jest
   wyzsze i podnioslo naglowek z 60 do 68 px (na telefonie ze 133 do 142 px).
   Stala wysokosc, szerokosc z proporcji. */
.elementor-7 .elementor-element.elementor-element-4f2626f.elementor-widget-image img { width: auto; height: 52px; max-width: 100%; }
.elementor-7 .elementor-element-hdrLinked .elementor-button { padding: 10px 12px; white-space: nowrap; }
/* LinkedIn odsuniety od flag jezykowych (prosba klienta 2026-09-15). Siatka
   naglowka daje 16 px miedzy wszystkimi elementami - przy LinkedIn przyciski
   stykaly sie wizualnie z podkresleniem aktywnej flagi. Dodatkowe 16 px = 32 px.
   Tylko od 768 px: na telefonie LinkedIn stoi w osobnym wierszu. */
@media (min-width: 768px) {
    .elementor-7 .elementor-element-hdrLinked { margin-left: 16px; }
}
.elementor-7 .elementor-element-25a0dc7 { padding: 0; }
@media (max-width: 1024px) {
    .elementor-7 .elementor-element-feb07ee { align-items: flex-end; }
}
@media (max-width: 767px) {
    .elementor-7 .elementor-element-274a823 > .e-con-inner {
        grid-template-columns: 56px minmax(0, 1fr) 44px;
        padding: 12px 16px;
        gap: 12px;
    }
    .elementor-7 .elementor-element-hdrRina { grid-column: 1; grid-row: 1; }
    .elementor-7 .elementor-element-9c5ec54 { grid-column: 2; grid-row: 1; max-width: 160px; }
    .elementor-7 .elementor-element.elementor-element-4f2626f.elementor-widget-image img { height: 62px; }
    .elementor-7 .elementor-element-feb07ee { grid-column: 3; grid-row: 1; }
    .elementor-7 .elementor-element-25a0dc7 { grid-column: 1 / 3; grid-row: 2; justify-content: flex-start; }
    .elementor-7 .elementor-element-hdrLinked { grid-column: 2 / 4; grid-row: 2; justify-self: end; }
    .elementor-7 .elementor-element.elementor-element-4f2626f { margin: 0; }
}

/* Realizacje: szersza siatka i edytowalny typ jednostki nad lokalizacja. */
.elementor-452 .elementor-element-rz010000 {
    padding-inline: 24px;
}
.elementor-452 .elementor-element-rz010000 > .e-con-inner {
    max-width: 1400px;
}
.elementor-460 .elementor-element-livessel { padding-left: 0; }
.vtms-vessel-type {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5D5D5D;
    font: 500 14px/1.5 Montserrat, sans-serif;
}
.vtms-vessel-type svg { flex: 0 0 18px; color: #009AFB; }
@media (max-width: 767px) {
    .elementor-452 .elementor-element-rz010000 { padding-inline: 16px; }
}

/* Kontakt: dzialy po lewej, formularz i dwie mapy po prawej. */
.elementor-345 .elementor-element-cmain01 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    max-width: 1400px;
    margin-inline: auto;
    padding: 80px 32px;
    gap: 64px;
    align-items: start;
}
.elementor-345 .elementor-element-cdepts01 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px 40px;
}
.elementor-345 .elementor-element-cmaps01 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.elementor-345 .elementor-element-cmain01 .e-con { min-width: 0; }
.elementor-345 .elementor-element-cdepts01 .elementor-icon-list-text { overflow-wrap: anywhere; }
.elementor-345 .elementor-element-cright01 { gap: 32px; }
.elementor-345 .elementor-element-cright01 .wpforms-container { margin-top: 0; margin-bottom: 0; }
.elementor-345 .elementor-element-cright01 .wpforms-field-medium { max-width: 100%; }
@media (max-width: 1024px) {
    .elementor-345 .elementor-element-cmain01 { grid-template-columns: 1fr; gap: 48px; padding: 48px 24px; }
    .elementor-345 .elementor-element-cdepts01 { gap: 40px; }
}
@media (max-width: 600px) {
    .elementor-345 .elementor-element-cdepts01,
    .elementor-345 .elementor-element-cmaps01 { grid-template-columns: 1fr; }
}

/* Uslugi: wspolne tory zdjecia, opisu i akordeonu w kazdym rzedzie.
   Rozwinieta lista powieksza trzeci tor, a nie opis sasiedniej karty. */
.elementor-454 .elementor-element-sgrid01.e-con {
    grid-auto-rows: auto !important;
}
.elementor-454 .elementor-element-sgrid01.e-con > .e-con {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}
.elementor-454 .elementor-element-sgrid01 .elementor-widget-accordion {
    align-self: start;
}
@media (max-width: 767px) {
    .elementor-454 .elementor-element-sgrid01.e-con > .e-con {
        display: flex;
        grid-row: auto;
    }
    .elementor-454 .elementor-element-sgrid01 [class*="elementor-element-sbs"] {
        flex-grow: 0 !important;
    }
}

/* Stopka: wspolny uklad trzech kolumn na desktopie i tablecie. */
.elementor-216 .elementor-element-eb71aa8 > .e-con-inner {
    max-width: 1120px;
    padding-inline: 24px;
}
.elementor-216 .elementor-element-fmain_row {
    display: grid;
    grid-template-columns: 1fr .85fr 1.2fr;
    gap: 48px;
}
.elementor-216 .elementor-element-fmain_row > .e-con {
    width: auto;
    min-width: 0;
    padding: 0;
}
.elementor-216 .elementor-element-fc1_logo { width: 200px; }
.elementor-216 .elementor-element-a3dc846,
.elementor-216 .elementor-element-fc2_wrap { padding-top: 64px !important; }
.elementor-216 .elementor-element-fc2_nav_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 20px;
}
.elementor-216 .elementor-element-fc2_nav_row > .elementor-widget { min-width: 0; }
@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-216 .elementor-element-fmain_row { gap: 24px; grid-template-columns: 1fr .75fr 1.25fr; }
}
@media (max-width: 767px) {
    .elementor-216 .elementor-element-fmain_row { grid-template-columns: 1fr; gap: 40px; }
    .elementor-216 .elementor-element-a3dc846,
    .elementor-216 .elementor-element-fc2_wrap { padding-top: 0 !important; }
    .elementor-216 .elementor-element-fc1_wrap .elementor-widget-heading { text-align: center; }
    .elementor-216 .elementor-element-fc2_nav_row { max-width: 340px; }
}

/* Oferta: wodne tlo nawigacji jak na Online Support; tresc pozostaje biala. */
.elementor-454 .elementor-element-ntabs001 > .e-n-tabs > .e-n-tabs-heading {
    padding: 10px 0;
    background: linear-gradient(rgba(31, 78, 121, .8), rgba(31, 78, 121, .8)),
        url('/wp-content/uploads/2026/09/tlo-e1776781595926.webp') center / cover no-repeat;
}

.elementor-454 .elementor-element-sis02 img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

/* ------------------------------------------------------------------
   Oferta → „Zarządzanie projektami”: równa wysokość obu kolumn
   ------------------------------------------------------------------
   Obie kolumny (t3steps i t3right) ZAWSZE miały tę samą wysokość — rozjeżdżała
   się ich ZAWARTOŚĆ, bo jedna nie wypełniała swojej kolumny do końca. Kierunek
   rozjazdu zmieniał się z szerokością okna, więc dostrajanie interlinii ani
   sztywna wysokość nie mogły tego rozwiązać:

       1200 px   lewa wyższa o 65 px   (tekst łamie się na więcej wierszy)
       1440 px   zgodne co do 2 px
       1920 px   prawa wyższa o 144 px (zdjęcie rośnie razem z szerokością)

   Wysokość wyznacza lista kroków po lewej, a pasek zdjęć po prawej dobiera się
   do niej: flex-grow zabiera całą pozostałą przestrzeń, object-fit: cover
   kadruje zdjęcie zamiast je rozciągać. Panel z certyfikatami zachowuje swoją
   naturalną wysokość — jego treści nie wolno kadrować.

   Zmierzone po zmianie: różnica 0 px przy 1200, 1440, 1920 i 2560 px.

   Próg 768 px, a nie 1024: zmierzone, że wiersz NIE zmienia kierunku na
   kolumnowy — rozkłada się przez flex-wrap dopiero poniżej mobilnego progu
   Elementora. Przy 768, 820, 880, 960 i 1023 px kolumny wciąż stoją obok
   siebie, więc reguła musi je obejmować. Po zawinięciu (≤767 px) każda zajmuje
   całą szerokość i nie ma czego wyrównywać. */
@media (min-width: 768px) {
    .elementor-element-t3right > .elementor-element-t3img01 {
        flex: 1 1 0;
        min-height: 140px;
    }

    .elementor-element-t3right > .elementor-element-t3certs {
        flex: 0 0 auto;
    }

    .elementor-element-t3img01 > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* ------------------------------------------------------------------
   O nas → „Serwisujemy urządzenia producentów”: równa siatka pigułek
   ------------------------------------------------------------------
   Po rozszerzeniu listy do 24 producentów (skrypt onas-2026-09-15-producenci.php)
   zwykłe zawijanie wierszy zostawiało samotne pigułki w ostatnim wierszu —
   np. przy 1024 i 1040 px sam „ZF”. Sprawdzone przeliczeniem szerokości kontenera
   330–1140 px co 2 px: przy KAŻDYM odstępie (10–20 px) zostaje 79–102 szerokości
   z 1–2 pigułkami w ostatnim wierszu. Dostrajanie odstępu tylko przesuwa problem.

   Dlatego siatka o liczbie kolumn będącej dzielnikiem 24 — wszystkie wiersze
   zawsze pełne: 8 × 3 na desktopie, 6 × 4 na tablecie, 3 × 8 na telefonie.
   Kolumna ma co najmniej 90 px = szerokość najdłuższej nazwy („SCANA VOLDA”),
   więc żadna nazwa się nie łamie.

   Przy zmianie liczby producentów dobrać kolumny tak, by dzieliły nową liczbę. */
.elementor-286 .elementor-element-e949fd9.e-con {
    --display: grid;
    display: grid;
    grid-template-columns: repeat(8, minmax(90px, 120px));
    justify-content: center;
    gap: 12px;
}

.elementor-286 .elementor-element-e949fd9.e-con > .elementor-widget {
    width: auto;
    max-width: none;
    margin: 0;
    align-self: stretch;
}

.elementor-286 .elementor-element-e949fd9.e-con > .elementor-widget p {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .elementor-286 .elementor-element-e949fd9.e-con {
        grid-template-columns: repeat(6, minmax(90px, 120px));
    }
}

@media (max-width: 767px) {
    .elementor-286 .elementor-element-e949fd9.e-con {
        grid-template-columns: repeat(3, minmax(90px, 120px));
    }
}

/* O nas: lead pod naglowkiem strony - wyrownane dlugosci wierszy, zeby po
   korekcie tekstu (2026-09-15) nie zostawalo samo "ladowego." w drugim wierszu.
   Wysrodkowanie jest natywnym ustawieniem widgetu (onas-2026-09-15-teksty.php). */
.elementor-286 .elementor-element-261b9750 p {
    text-wrap: balance;
}

/* Realizacje: 4 kafelki w rzedzie (natywne columns = 4, skrypt
   realizacje-2026-09-15-cztery-kolumny.php). W waskim przedziale laptopowym
   1025-1199 px zostaja 3 - przy 4 kafelek mial tam 215-280 px, a tytuly
   lamaly sie do 4 wierszy.
   Nadpisywane jest grid-template-columns, NIE zmienna --grid-columns: natywne
   columns = 4 dodaje klase elementor-grid-4, a regula frontend.min.css
   ".elementor-grid-4 .elementor-grid { grid-template-columns: repeat(4, 1fr) }"
   ustawia kolumny bezposrednio - zmiana samej zmiennej nie dawala efektu.
   Granica 1199.98px, nie 1199px: przy powiekszeniu strony lub skalowaniu
   ekranu szerokosc bywa ulamkowa (1199.x) i wypadala z obu przedzialow. */
@media (min-width: 1025px) and (max-width: 1199.98px) {
    .elementor-452 .elementor-element-rz010200 .elementor-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------
   Zamienniki Elementor Pro (2026-10-09, kod w inc/bez-pro.php)
   ------------------------------------------------------------------
   Wymiary i kolory przeniesione z ustawien widgetow Pro i z pomiaru
   strony przed zmiana, tak zeby wyglad zostal ten sam. */

/* --- Menu glowne: [vtms_menu] --- */
.vtms-menu { position: relative; }
.vtms-menu__lista {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vtms-menu__lista a {
    display: block;
    padding: 13px 9px;
    color: #fff;
    font: 600 12px/20px Montserrat, sans-serif;
    white-space: nowrap;
    transition: color .3s;
}
.vtms-menu__lista a:hover,
.vtms-menu__lista a:focus-visible,
.vtms-menu__lista .current-menu-item > a { color: #009AFB; }
.vtms-menu__przelacznik { display: none; }

@media (max-width: 1024px) {
    .vtms-menu__przelacznik {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        margin-left: auto;
        padding: 0;
        border: 0;
        border-radius: 3px;
        background: rgba(0, 0, 0, .05);
        color: #009AFB;
        cursor: pointer;
    }
    .vtms-menu__przelacznik:hover,
    .vtms-menu__przelacznik:focus { background: rgba(0, 0, 0, .05); color: #009AFB; }
    .vtms-menu__przelacznik[aria-expanded="true"] .vtms-menu__ikona-otworz,
    .vtms-menu__przelacznik[aria-expanded="false"] .vtms-menu__ikona-zamknij { display: none; }

    .vtms-menu__lista {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 100;
        width: min(320px, calc(100vw - 48px));
        background: #071522;
    }
    .vtms-menu__przelacznik[aria-expanded="true"] + .vtms-menu__lista { display: block; }
    .vtms-menu__lista a {
        padding: 10px 20px;
        font: 500 21px/1.3 Montserrat, sans-serif;
        text-align: center;
    }
    .vtms-menu__lista a:hover,
    .vtms-menu__lista a:focus-visible,
    .vtms-menu__lista .current-menu-item > a { background: #009AFB; color: #fff; }
}

/* --- Siatki kart: [vtms_karty] ---
   Liczbe kolumn daja klasy elementor-grid-* na widgecie (jak w loop-grid Pro),
   odstep to domyslne 30 px tamtego widgetu. */
.elementor-element-rz010200,
.elementor-element-rf010200 {
    --grid-column-gap: 30px;
    --grid-row-gap: 30px;
}

/* --- Oferta: karty uslug rozciagniete w wierszu (byl to wlasny CSS elementu w Pro) --- */
.elementor-454 .elementor-element.elementor-element-sgrid01 { align-items: stretch; }

/* --- Okna realizacji: natywny <dialog> --- */
dialog.vtms-okno {
    width: 860px;
    max-width: 90vw;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
    overflow: hidden auto;
}
dialog.vtms-okno::backdrop { background: rgba(0, 0, 0, .75); }
html:has(dialog.vtms-okno[open]) { overflow: hidden; }
.vtms-okno__x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #071522;
    color: #fff;
    font: 400 24px/36px Arial, sans-serif;
    cursor: pointer;
}
.vtms-okno__x:hover,
.vtms-okno__x:focus { background: #071522; color: #fff; }
/* Zdjecia w karuzeli: stala wysokosc i kadrowanie, jak w karuzeli Pro. */
.vtms-okno .elementor-image-carousel-wrapper img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
}
@media (max-width: 767px) {
    dialog.vtms-okno { max-width: 94vw; }
    .vtms-okno .elementor-image-carousel-wrapper img { height: 240px; }
}