/* =========================================================
   USŁUGI — TYPOGRAFIA wg FIGMA (tylko fonty/nagłówki)
   ========================================================= */

/* Mapowanie fontów z Figmy */
:root {
    --srv-font-aleo: 'Aleo', serif;
    --srv-font-futura: futura-pt, sans-serif;

    --srv-blue: #4570E5;
    --srv-black: #231F20;
}

/* Sekcja usług (wrapper) */
.services {
    color: #000;
}

/* ====== Nagłówek sekcji ====== */
/* USŁUGI — stylujemy faktyczny tekst Elementora (H1) */
.services .services-kicker .elementor-heading-title{
  font-family: var(--srv-font-aleo) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(1.35rem, 0.9vw + 1.05rem, 2.1875rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000 !important;
  margin: 0 !important;
}

/* STRATEGICZNE — stylujemy faktyczny tekst Elementora (H1) */
.services .services-title .elementor-heading-title{
  font-family: var(--srv-font-futura) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: clamp(2.6rem, 3.2vw + 1.4rem, 5.8125rem) !important;
  line-height: 1.28 !important;
  text-transform: uppercase;
  color: var(--srv-blue) !important;
  margin: 0 !important;
}

/* ====== Karta usługi ====== */
/* 01 — Futura 450, 16/21 */
.service-card .service-no {
    font-family: var(--srv-font-futura);
    font-style: normal;
    font-weight: 450;
    font-size: clamp(0.9rem, 0.25vw + 0.85rem, 1rem);
    /* ~14 -> 16px */
    line-height: 1.3125;
    /* 21/16 */
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    color: #000;
}

/* Etykieta: REPRINT (składana z dwóch fontów) */
.service-card .service-label {
    margin: 0 0 1.1rem;
    line-height: 1;
    display: inline-block;
    text-transform: uppercase;
}

/* RE — Futura italic 700, 38/49 */
.service-card .service-label .re {
    font-family: var(--srv-font-futura);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.125rem, 1.125vw + 1.6875rem, 2.97rem);
    /* ~27 -> 38px */
    line-height: 1.2895;
    /* 49/38 */
    color: var(--srv-black);
}

/* PRINT — Aleo italic 600, 35/42 + podkreślenie niebieskie pod całym słowem */
.service-card .service-label .rest {
    font-family: var(--srv-font-aleo);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.94rem, 1.06vw + 1.5rem, 2.734rem);
    /* ~25 -> 35px */
    line-height: 1.2;
    /* 42/35 */
    color: var(--srv-black);
    position: relative;
    display: inline-block;
    padding-bottom: 0.28rem;
}

/* Niebieska kreska jak w Figmie */
.service-card .service-label .rest {
    position: relative;
    display: inline-block;
    padding-bottom: 0.35rem;
}

/* =========================================================
   PODKREŚLENIE CAŁEGO NAPISU (REPRINT)
   ========================================================= */

.service-card .service-label {
    position: relative;
    display: inline-flex;
    /* trzyma RE + PRINT jako jeden blok */
    align-items: baseline;
    padding-bottom: 0.45rem;
    /* miejsce na kreskę */
}

/* „ręczna” linia pod CAŁYM napisem */
.service-card .service-label::after {
    content: "";
    position: absolute;
    left: -0.4em;
    width: calc(100% + 0.8em);
    bottom: 0.5rem;
    height: 2px;
    background: var(--srv-blue);
    border-radius: 999px;
    transform: rotate(-2.1deg);
    transform-origin: left center;
}

/* Tytuł niebieski — Aleo 800, 20/24 */
.service-card .service-title {
    font-family: var(--srv-font-aleo);
    font-style: normal;
    font-weight: 800;
    color: var(--srv-blue);
    font-size: clamp(1.7rem, 0.35vw + 0.95rem, 1.25rem);
    /* ~17 -> 20px */
    line-height: 1.2;
    /* 24/20 */
    margin: 0 0 1rem;
}

/* Opis — Futura 400/500, 16px (line-height w Figmie bywa 21 lub 30)
   Ustawiamy bazowo 1.65 (czytelne jak 30px przy 16px), a lead może być cięższy */
.service-card .service-lead {
    font-family: var(--srv-font-futura);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1.25rem, 0.25vw + 0.9rem, 1rem);
    /* ~15 -> 16px */
    line-height: 1.3125;
    /* 21/16 */
    margin: 0 0 0.7rem;
    color: #000;
}


/* =========================================================
   PODKREŚLENIE W TREŚCI BOKSÓW (u) — Loop Item Elementor
   działa w: .service-card (bez wrappera .services)
   ========================================================= */

/* wyłącz default underline */
.service-card .elementor-widget-text-editor u {
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}

/* niebieska “ręczna” kreska jak w projekcie */
.service-card .elementor-widget-text-editor u::after {
    content: "";
    position: absolute;
    left: -0.18em;
    width: calc(100% + 0.36em);
    bottom: -0.18em;
    height: 2px;
    background: #4570E5;
    border-radius: 999px;
    transform: rotate(-0.9deg);
    transform-origin: left center;
    pointer-events: none;
}

/* =========================================================
   RESPONSYWNOŚĆ: USŁUGI — tablet + mobile (większe fonty)
   ========================================================= */

/* TABLET (<= 1024px) */
@media (max-width: 1024px) {

    .services .services-kicker .elementor-heading-title {
        font-size: 2.6rem !important;
        /* było za małe */
        line-height: 1.15 !important;
    }

    .services .services-title .elementor-heading-title {
        font-size: 6.2rem !important;
        line-height: 1.05 !important;
    }

    .service-card .service-no {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
    }

    .service-card .service-label .re {
        font-size: 3.6rem !important;
        line-height: 1.15 !important;
    }

    .service-card .service-label .rest {
        font-size: 3.2rem !important;
        line-height: 1.15 !important;
    }

    .service-card .service-title {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    .service-card .service-desc,
    .service-card .service-lead {
        font-size: 1.8rem !important;
        line-height: 1.7 !important;
    }

    .service-card .service-price {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    /* podkreślenie w tytule (REPRINT) – lekko grubsze na tablet */
    .service-card .service-label::after {
        height: 3px !important;
        bottom: 0.35rem !important;
    }

    /* podkreślenie w treści <u> */
    .service-card .elementor-widget-text-editor u::after {
        height: 3px !important;
        bottom: -0.12em !important;
    }

    /* button większy na tablet */
    .rebranders-btn .elementor-button {
        padding: 1.8em 3.6em !important;
        font-size: 1.8rem !important;
    }
}


/* MOBILE (<= 767px) */
@media (max-width: 767px) {

    /* sekcja nagłówków */
    .services .services-kicker .elementor-heading-title {
        font-size: 3.2rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.02em;
    }

    .services .services-title .elementor-heading-title {
        font-size: 7.2rem !important;
        /* duże, jak w projekcie */
        line-height: 1.0 !important;
    }

    /* karta */
    .service-card .service-no {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
    }

    .service-card .service-label {
        padding-bottom: 0.9rem !important;
    }

    .service-card .service-label .re {
        font-size: 4.4rem !important;
        line-height: 1.05 !important;
    }

    .service-card .service-label .rest {
        font-size: 4.0rem !important;
        line-height: 1.05 !important;
    }

    .service-card .service-label::after {
        height: 4px !important;
        /* na mobile grubsza wygląda lepiej */
        bottom: 0.5rem !important;
        transform: rotate(-1.4deg) !important;
    }

    .service-card .service-title {
        font-size: 2.6rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.2rem !important;
    }

    .service-card .service-desc,
    .service-card .service-lead {
        font-size: 2.1rem !important;
        line-height: 1.75 !important;
    }

    .service-card .service-price {
        font-size: 2.8rem !important;
        line-height: 1.15 !important;
        margin-top: 1.6rem !important;
    }

    /* <u> w treści – grubsze i czytelniejsze */
    .service-card .elementor-widget-text-editor u {
        font-weight: 800 !important;
        padding-bottom: 0.45em;
    }

    .service-card .elementor-widget-text-editor u::after {
        height: 2px !important;
        bottom: 0 !important;
        transform: rotate(-1.1deg) !important;
    }

    /* button większy na mobile */
    .rebranders-btn .elementor-button {
        padding: 2.0em 4.0em !important;
        font-size: 2.0rem !important;
    }
}


/* =========================================================
   DESKTOP: mniejsze boczne marginesy kontenerów Elementora
   ========================================================= */

@media (min-width: 1025px) {
    .e-con {
        --container-default-padding-right: 4rem;
        --container-default-padding-left: 4rem;
    }
}


/* =========================================================
   GLOBALNE KLASY — FONT WEIGHT
   ========================================================= */

/* Bold 700 */
.font-bold {
    font-weight: 700 !important;
}

/* Extra Bold / Black 900 */
.font-black {
    font-weight: 900 !important;
}