/* ==========================================================================
   Leasing360 — nadpisania widgetów Elementora i motywu
   Plik: leasing360-blocks/assets/l360-theme.css
   Wersja: 1.2.0
   --------------------------------------------------------------------------
   Ten plik był wcześniej arkuszem motywu potomnego (style.css). Przeniesiony
   do wtyczki, bo motyw potomny kolejkował go z zależnością od nieistniejącego
   uchwytu 'hello-elementor' i WordPress pomijał go w całości.

   SPECYFICZNOŚĆ — dlaczego selektory są „przesadzone":
   1) Elementor wstawia klasy z pola „Klasy CSS" na ZEWNĘTRZNYM wrapperze
      widgetu (div.elementor-widget-button), a nie na <a class="elementor-button">.
   2) CSS zestawu Elementora (post-<id>.css z globalnymi kolorami) ładuje się
      po wtyczkach i nadpisuje proste selektory typu `h2 { color: ... }`.
      Dlatego kolory nagłówków ustawiamy przez `.elementor-widget-heading
      .elementor-heading-title` (2 klasy) — wygrywa niezależnie od kolejności.
   ========================================================================== */

/* ==========================================================================
   1. KONTENER I ODSTĘPY SEKCJI
   ========================================================================== */
.e-con, .elementor-section.elementor-section-boxed > .elementor-container {
  --container-max-width: 1200px;
}

/* Rytm pionowy zmierzony w prototypie: sekcje mają równe 80 px góra/dół
 * (u nas było do 104 px + dodatkowe odstępy kontenerów, przez co między
 * sekcjami robiła się dziura ~250 px). Hero jest wyjątkiem — zaczyna się
 * tuż pod nagłówkiem (ok. 28 px), bo treść ma być wyrównana do góry. */
.l360-section        { padding-block: clamp(48px, 5.5vw, 80px); }
.l360-section--tight { padding-block: clamp(32px, 3.5vw, 48px); }
.l360-section--hero  { padding-block: clamp(20px, 2.2vw, 32px) clamp(32px, 4vw, 56px); }
.l360-section--flush { padding-block: 0; }

/* Elementor dokłada każdemu kontenerowi 10 px paddingu na .e-con-inner.
 * Przy dwóch zagnieżdżeniach na sekcję dawało to +20 px góra i +20 px dół —
 * między sekcjami robiło się 200 px zamiast 160 px zmierzonych w prototypie.
 * Zerujemy tylko pion i tylko w naszych sekcjach, żeby nie ruszać layoutów
 * budowanych ręcznie w Elementorze. */
.l360-section .e-con-inner,
.l360-header  .e-con-inner { padding-block: 0; }

/* ==========================================================================
   2. NAGŁÓWKI — skala typograficzna i kolor
   ========================================================================== */
h1, .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.02em;
}
/* H2 = 36/40 px — dokładnie tyle ma prototyp (`text-3xl md:text-4xl`).
 * Wcześniej maksimum wynosiło 40 px, przez co każdy nagłówek sekcji był
 * o stopień za duży i razem z leadem 18 px rozciągał sekcje o ~120 px. */
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(26px, 2.9vw, 36px); line-height: 1.11; }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(18px, 1.8vw, 22px); }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: clamp(16px, 1.5vw, 18px); }

/* Kolor nagłówków. Prototyp ma granatową czerń, a nie kolor marki — globalny
 * kolor „Primary" zestawu Elementora domyślnie barwi nagłówki na niebiesko,
 * więc nadpisujemy go selektorem o wyższej specyficzności. */
/* Trzy klasy w selektorze, bo w PODGLĄDZIE EDYTORA arkusz zestawu
 * (post-<id>.css z globalnym kolorem „Primary") ładuje się po naszym i przy
 * dwóch klasach wygrywał — nagłówek H1 w hero robił się cały niebieski. */
.elementor-widget.elementor-widget-heading .elementor-heading-title { color: var(--l360-ink); }
.l360-on-dark .elementor-widget.elementor-widget-heading .elementor-heading-title { color: #fff; }

/* Niebieski fragment w nagłówku (jak w prototypie: „…— porównujemy oferty…") */
.elementor-widget-heading .elementor-heading-title .l360-accent,
.l360-accent { color: var(--l360-primary); }

/* Lead — akapit wprowadzający pod H1/H2.
 * Prototyp rozróżnia dwa rozmiary: 18/28 px w hero i 16/24 px pod nagłówkami
 * sekcji. U nas oba miały 18 px, co przy 2–3 wierszach dokładało po ~26 px
 * do każdej sekcji. */
.l360-lead, .l360-lead p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--l360-muted);
}
.l360-hero-light .l360-lead,
.l360-hero-light .l360-lead p { font-size: 18px; line-height: 1.56; }
/* Szerokość leadu w hero — prototyp łamie go na 576 px (max-w-xl). */
.l360-lead--narrow { max-width: 576px; }

/* Nagłówek sekcji. Prototyp wyrównuje wszystkie nagłówki DO LEWEJ,
 * dlatego wariant wyśrodkowany jest opcjonalny (klasa --center). */
.l360-sectionhead { max-width: 860px; }
.l360-sectionhead--center { margin-inline: auto; text-align: center; }

/* ==========================================================================
   3. PRZYCISKI ELEMENTORA
   ========================================================================== */
.elementor-button,
.elementor-widget-button .elementor-button {
  font-family: var(--l360-font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  border-radius: var(--l360-r-btn);
  padding: 8px 16px;                /* zmierzone w prototypie: 138x36 px */
  min-height: 36px;
  white-space: nowrap;              /* „Porównaj oferty" łamało się na 2 linie */
  text-decoration: none;            /* motyw podkreśla linki — przycisk nie */
  border-style: solid;
  border-width: 0;
  transition: transform .28s var(--l360-ease-out), box-shadow .28s,
              background-color .25s, color .25s, border-color .25s;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); text-decoration: none; }
.elementor-button .elementor-button-text { text-decoration: none; }
.elementor-button-icon svg { width: 1em; height: 1em; }

/* --- primary --- */
.elementor-button.l360-btn-primary,
.l360-btn-primary .elementor-button,
.elementor-widget-button.l360-btn-primary .elementor-button {
  background-color: var(--l360-primary);
  border-color: var(--l360-primary);
  color: #fff;
  box-shadow: var(--l360-sh-blue);
}
.elementor-button.l360-btn-primary:hover,
.l360-btn-primary .elementor-button:hover,
.elementor-widget-button.l360-btn-primary .elementor-button:hover {
  background-color: var(--l360-primary-600);
  border-color: var(--l360-primary-600);
  box-shadow: 0 16px 36px rgba(26,44,232,.34);
  color: #fff;
}

/* --- outline --- (prototyp: BIAŁE tło + delikatna ramka, nie przezroczyste) */
.elementor-button.l360-btn-outline,
.l360-btn-outline .elementor-button,
.elementor-widget-button.l360-btn-outline .elementor-button {
  background-color: var(--l360-surface);
  color: var(--l360-ink);
  border-width: 1px;
  border-color: var(--l360-line);
  box-shadow: 0 1px 2px rgba(10,10,15,.04);
}
.elementor-button.l360-btn-outline:hover,
.l360-btn-outline .elementor-button:hover,
.elementor-widget-button.l360-btn-outline .elementor-button:hover {
  border-color: var(--l360-primary);
  color: var(--l360-primary);
  background-color: var(--l360-primary-050);
}
.l360-on-dark .elementor-button.l360-btn-outline,
.l360-on-dark .l360-btn-outline .elementor-button,
.l360-on-dark .elementor-widget-button.l360-btn-outline .elementor-button {
  color: #fff; border-color: rgba(255,255,255,.24); background-color: transparent;
}
.l360-on-dark .elementor-button.l360-btn-outline:hover,
.l360-on-dark .l360-btn-outline .elementor-button:hover,
.l360-on-dark .elementor-widget-button.l360-btn-outline .elementor-button:hover {
  background-color: rgba(255,255,255,.08); border-color: #fff; color: #fff;
}

/* --- link ze strzałką --- */
.l360-btn-link .elementor-button,
.elementor-widget-button.l360-btn-link .elementor-button {
  background: transparent; padding: 0; color: var(--l360-primary);
  box-shadow: none; border-width: 0;
}
.l360-btn-link .elementor-button:hover,
.elementor-widget-button.l360-btn-link .elementor-button:hover { transform: none; color: var(--l360-primary-600); }
.l360-btn-link .elementor-button-icon { transition: transform .25s var(--l360-ease-out); }
.l360-btn-link .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* Grupa przycisków — wspólne odstępy i zawijanie na mobile */
.l360-btnrow { display: flex; flex-wrap: wrap; gap: 14px; }
.l360-btnrow--center { justify-content: center; }

/* ==========================================================================
   4. OBRAZY
   ========================================================================== */
.l360-img-rounded img { border-radius: var(--l360-r-xl); }
.l360-img-shadow img  { box-shadow: var(--l360-sh-lg); }
.l360-img-frame img {
  border-radius: var(--l360-r-md);
  box-shadow: var(--l360-sh-md);
}
/* Obraz wypełniający kolumnę na równi z sąsiednią siatką kart
   (prototyp: „Co finansujemy?", „Jak działa broker?"). */
.l360-img-fill, .l360-img-fill > div, .l360-img-fill .elementor-widget-container { height: 100%; }
.l360-img-fill img {
  width: 100%; height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--l360-r-md);
}

/* Portret założyciela — bez obróconego akcentu (prototyp go nie ma),
   zdjęcie wyrównane do dołu kolumny. */
.l360-img-accent { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.l360-img-accent img {
  position: relative; z-index: 1;
  max-height: 420px; width: auto; max-width: 100%;
  object-fit: contain;
}
@media (max-width: 767px) {
  .l360-img-accent img { max-height: 320px; }
}

/* ==========================================================================
   5. MENU MOBILNE (widget Nav Menu z Elementora / HFE)
   ========================================================================== */
.l360-nav .elementor-nav-menu--dropdown {
  border-radius: 0 0 var(--l360-r-lg) var(--l360-r-lg);
  box-shadow: var(--l360-sh-lg);
  overflow: hidden;
}
.l360-nav .elementor-nav-menu--dropdown a {
  font: 600 16px/1 var(--l360-font-body);
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--l360-line-soft);
}
.l360-nav .elementor-menu-toggle {
  background: transparent !important;
  color: var(--l360-ink) !important;
}
.l360-nav .elementor-menu-toggle svg { width: 26px; height: 26px; }

/* ==========================================================================
   6. TREŚĆ WPISU (Baza Wiedzy)
   ========================================================================== */
.l360-article { max-width: 760px; margin-inline: auto; }
.l360-article h2 { margin-top: 2em; margin-bottom: .6em; }
.l360-article h3 { margin-top: 1.6em; margin-bottom: .5em; }
.l360-article p  { margin-bottom: 1.15em; font-size: 17px; line-height: 1.75; }
.l360-article ul, .l360-article ol { margin: 0 0 1.4em 1.2em; }
.l360-article li { margin-bottom: .45em; line-height: 1.7; }
.l360-article img { border-radius: var(--l360-r-lg); margin: 1.8em 0; }
.l360-article blockquote {
  margin: 1.8em 0; padding: 1.2em 1.6em;
  border-left: 3px solid var(--l360-primary);
  background: var(--l360-primary-050);
  border-radius: 0 var(--l360-r-md) var(--l360-r-md) 0;
  font-size: 17px; font-style: normal; color: var(--l360-ink);
}
.l360-article a { color: var(--l360-primary); text-decoration: underline; text-underline-offset: 3px; }
.l360-article a:hover { color: var(--l360-primary-600); }
.l360-article table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.l360-article th, .l360-article td { padding: 12px 14px; border: 1px solid var(--l360-line); text-align: left; }
.l360-article th { background: var(--l360-surface-2); font-weight: 700; color: var(--l360-ink); }

/* ==========================================================================
   7. DOSTĘPNOŚĆ
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--l360-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.l360-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  padding: 12px 20px; background: var(--l360-primary); color: #fff; border-radius: 0 0 8px 0;
}
.l360-skip-link:focus { left: 0; }

/* ==========================================================================
   8. DROBIAZGI
   ========================================================================== */
/* Header/footer budujemy w Header & Footer Builder — natywne ukrywamy */
.site-header, .site-footer { display: none; }

.e-con-inner > *:last-child { margin-bottom: 0; }
::selection { background: var(--l360-primary); color: #fff; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }