/************************************************************
 * custom.css — bazan.pro (Joomla 5 + Helix/SP Page Builder)
 * Porządek: global → blog → komponenty → menu → formularze → CTA → dodatki
 ************************************************************/


/* =========================================================
   1) GLOBAL / TYPOGRAFIA
   ========================================================= */

/* Ramka / „karta” wokół nagłówka (np. page header w listach kategorii) */
.page-header {
  display: inline-block;
  padding: 10px 22px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  border-left: 5px solid #1f3c88;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}


/* =========================================================
   2) BLOG / ARTYKUŁY (JOOMLA)
   ========================================================= */

/* Odstępy między rzędami wpisów */
.blog .items-row {
  margin-bottom: 60px;
}

/* Odstępy i padding pojedynczego wpisu */
.blog .item {
  margin-bottom: 40px;
  padding: 20px;
}

/* Kolory linków nagłówków na listach artykułów */
.article-list .article .article-header h1 a,
.article-list .article .article-header h2 a,
.article-list .article .article-header h4 a {
  color: #158bcd;
}

/* Metadane artykułu */
.article-info > span {
  font-size: .813rem;
  font-style: italic;
}

.article-info > span a {
  color: #dc3545;
}

/* Link „czytaj więcej” */
.article-list .article .readmore a {
  color: #03338d;
  font-weight: 500;
}


/* === BLOG: zostawiamy Bootstrap siatkę, poprawiamy wygląd kart === */

/* Odstępy w siatce (Bootstrap gutters) */
.article-list.boxed .row {
  --bs-gutter-x: 1.75rem;
  --bs-gutter-y: 1.75rem;
}

/* Gdyby BS nie respektował gutter-y */
.article-list.boxed .row > [class*="col-"] {
  margin-bottom: 1.75rem;
}

/* Karta wpisu wypełnia kolumnę */
.article-list.boxed .article {
  width: 100%;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow: 0 4px 10px #21252952;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

/* Obraz: proporcje zamiast sztywnej wysokości */
.article-list.boxed .article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Wnętrze karty */
.article-list.boxed .article .article-body {
  padding: 18px 20px 20px;
}

/* Czytelność odstępów w karcie */
.article-list.boxed .article .article-header { margin-bottom: 10px; }
.article-list.boxed .article .article-info   { margin-bottom: 12px; }
.article-list.boxed .article .article-introtext { margin-bottom: 14px; }

/* --- KONIEC sekcji BLOG --- */



/* =========================================================
   3) MEDIA / OBRAZY / MODALE
   ========================================================= */

/* Klasa pomocnicza do obrazka (jeśli gdzieś walczysz z warstwami) */
.zdjecie {
  position: relative;
  z-index: 1;
  width: auto !important;
}

/* Wymuszenie, żeby modal + overlay były zawsze na wierzchu */
.modal-backdrop { z-index: 1040 !important; }
.modal          { z-index: 1050 !important; }

/* Obrazek w kontenerze — dopasowanie i kadrowanie */
.obrazek {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Uwaga: `.img` nie jest standardową klasą Bootstrapa (Bootstrap ma `.img-fluid`).
   Zostawiam, bo używasz tego selektora, ale to globalny styl dla `.img`. */
.img {
  display: inline;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   4) EVENTS BOOKING / KAFELKI WYDARZEŃ
   ========================================================= */

/* Odstęp przycisków na dole kafelka wydarzenia */
.eb-event-item-grid-default-layout > div:last-child {
  padding-bottom: 12px;
}

/* Splide: zostaw miejsce na elementy pod karuzelą */
.eb-events-grid-items .splide__track {
  padding-bottom: 50px !important;
}

/* Szerokość „miesiąca” w upcoming events (układ daty) */
.ebm-upcoming-events-improved div.ebm-event-date {
  width: 57px;
}


/* =========================================================
   5) „MAPA OKRĘGI” — PUNKTY KLIKALNE NA OBRAZKU
   ========================================================= */

.mapa-okregi {
  position: relative;
  width: 100%;
  max-width: 1536px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}

.mapa-okregi img {
  display: block;
  width: 100%;
  height: auto;
}

.mapa-okregi .punkt {
  position: absolute;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  z-index: 10;

  /* kluczowe dla responsywności */
  aspect-ratio: 1 / 1;
  height: auto;
}

.mapa-okregi .punkt:hover {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 25px 15px rgba(0, 123, 255, 0.5);
}

/* Mobile: wyłączasz translate — UWAGA: to zmienia pozycjonowanie punktu
   (bo top/left liczone są wtedy inaczej). Jeśli coś „ucieka” na telefonie,
   to właśnie to może być przyczyną. */
@media (max-width: 768px) {
  .mapa-okregi .punkt {
    transform: none;
  }
}


/* =========================================================
   6) MENU (HELIX / SP MEGAMENU)
   ========================================================= */

.sp-megamenu-parent .sp-dropdown {
  /* background: linear-gradient(to bottom, #b3e5fc, #2196f3) !important; */
  /* background-color: transparent !important; */
  background-color: #fff; /* np. #23CBFA / #76B4FA */
  border-radius: 10px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
  padding: 10px;
  min-width: auto !important;
  width: auto !important;
}

/* Usuń „dzióbek” dropdowna */
.sp-megamenu-parent .sp-dropdown::before,
.sp-megamenu-parent .sp-dropdown::after {
  display: none !important;
}

.sp-megamenu-parent .sp-dropdown li a {
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
}

.sp-megamenu-parent .sp-dropdown li a:hover {
  background-color: rgba(212, 241, 255, 0.2) !important;
  border-radius: 5px;
}

/* Hover na pozycjach głównych */
.sp-megamenu-parent > li:hover > a {
  font-weight: 900;
}

/* Wnętrze dropdowna */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 0px;
  box-shadow: unset;
  background: none !important;
}

.sp-megamenu-parent > li > a {
  color: #000;
}

/* --- KONIEC MENU --- */


/* =========================================================
   7) BREADCRUMBS
   ========================================================= */

.breadcrumb {
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border-radius: 0.25rem;
  font-size: 0.6rem;
}


/* =========================================================
   8) FORMULARZE / INPUTY
   ========================================================= */

/* Pola formularza (UWAGA: globalnie zmieniasz Bootstrapowe .form-control) */
.form-control {
  display: block;
  width: 74%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 0.8;
  color: #212529;
  background-color: #e3f2ff;
  background-clip: padding-box;
  border: 2px solid #0d6efd;
  appearance: none;
  border-radius: 1.375rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Checkboxy */
.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: .25em;
  vertical-align: top;
  background-color: #e3f2ff;
  border: 2px solid rgba(0, 0, 0, .35);
  margin-right: 20px;
}


/* =========================================================
   9) BUTTONY / CTA — NADPISANIE BOOTSTRAP + SP PAGE BUILDER
   ========================================================= */

/* Primary: pełne nadpisanie */
a.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary,
.btn.btn-primary,
.btn.btn-primary:not(:disabled):not(.disabled),
.sppb-btn.sppb-btn-primary,
.sppb-btn.sppb-btn-primary.sppb-btn-rounded {
  background: linear-gradient(45deg, #f62e2e, #2e97d9d9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 22px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  text-decoration: none !important;
}

/* Primary: hover */
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
input.btn.btn-primary:hover,
.sppb-btn.sppb-btn-primary:hover,
.sppb-btn.sppb-btn-primary.sppb-btn-rounded:hover {
  /* background: linear-gradient(45deg, #34c5f0, #3f5394) !important; */
  background: linear-gradient(45deg, #fa0000, #d9d82ed9) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.01);
}

/* Secondary: własny styl */
.btn-secondary {
  background: linear-gradient(45deg, #3f5394, #34c5f0) !important;
  color: white !important;
  font-size: 1.1rem !important;
  font-weight: normal !important;
  border: none !important;
  border-radius: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease-in-out !important;
}

.btn-secondary:hover {
  background: linear-gradient(45deg, #34c5f0, #3f5394) !important;
  transform: scale(1.01) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
  color: white !important;
}


/* =========================================================
   10) SP PAGE BUILDER — DROBNE NAPRAWY DODATKÓW
   ========================================================= */

/* SKILIO: centrowanie grafiki w konkretnym addon */
#sppb-addon-f43c58b2-8e88-44cc-b287-7b626226a443 .sppb-addon-image-layout-image .sppb-img-responsive,
#sppb-addon-f43c58b2-8e88-44cc-b287-7b626226a443 .sppb-image-layouts-inline-img .sppb-img-responsive,
#sppb-addon-f43c58b2-8e88-44cc-b287-7b626226a443 .sppb-addon-image-overlay {
  margin: auto !important;
}

/* Price table: wycentrowanie tytułu w konkretnym addon */
#sppb-addon-1b74aeb0-e446-489f-87c9-7763a4374a12 .sppb-pricing-title {
  text-align: center !important;
}

/* ImageOverlay: naprawa rozciągniętych obrazów (slide-left) */
body .sppb-addon-image-overlay.image-effect-slide-left .overlay-background-image {
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  background-size: contain !important; /* lub cover jeśli wolisz przycięcie */
}

/* „na wszelki wypadek” dla wszystkich overlay */
body .sppb-addon-image-overlay .overlay-background-image {
  height: auto !important;
  width: 100% !important;
}
/* =========================================================
   11) JOOMLA — ZMNIEJSZENIE ODSTĘPU TYTUŁU BLOGA OD POCZĄTKU STRONY
   ========================================================= */

/* SKILIO: centrowanie grafiki w konkretnym addon */
#sp-main-body {
    padding: 15px 0;
}