/* =========================================================
   Strona główna — odwzorowanie page 11 (Elementor) 1:1.
   Wszystkie wartości z post-11.css. Progi jak w Elementorze: 767 / 1024.
   ========================================================= */

/* Wspólny szkielet sekcji: e-con (full-bleed) + e-con-inner (content-width) */
.mo-sec { width: 100%; }
.mo-sec__inner { max-width: 1440px; margin-inline: auto; }        /* --content-width:1440px */
.mo-sec__inner--1000 { max-width: 1000px; }                        /* fe84d1b */

/* Divider (.mo-divider) — definicja bazowa przeniesiona do style.css,
   bo uzywaja jej takze podstrony uslug i modeli aut. Ponizej tylko override'y. */

.mo-h1 { font-size: 2.6em; font-weight: 700; }   /* ZMIERZONE: oryginal h1 ma fw 700
   (domyslny bold przegladarki — Kit nie ustawia wagi dla h1), NIE 600.
   var(--mo-fw-primary)=600 dawalo lzejszy H1 i inna szerokosc min-content. */
.mo-h2 { font-size: 2.6em; text-align: center; font-weight: 600; }

/* ---------------------------------------------------------
   1. HERO — 5d9fc87 / karuzela 9801bec (h=450, fade, autoplay 5s)
   --------------------------------------------------------- */
.mo-hero { padding-bottom: 2%; overflow: hidden; }   /* overflow: fix poziomego scrolla */
.mo-carousel { position: relative; width: 100%; }
.mo-carousel__track { position: relative; height: 450px; }
.mo-carousel__slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity .5s ease;                      /* speed:500 */
}
.mo-carousel__slide.is-active { opacity: 1; visibility: visible; }
.mo-carousel__link { display: block; height: 100%; }
.mo-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mo-carousel__btn {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 2; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	background: none; border: 0; cursor: pointer;
	color: var(--mo-white); opacity: .85;
}
.mo-carousel__btn:hover { opacity: 1; }
.mo-carousel__btn .mo-i { width: 20px; height: 20px; }   /* .elementor-swiper-button font-size:20px */
.mo-carousel__btn--prev { left: 10px; }
.mo-carousel__btn--next { right: 10px; }

.mo-carousel__dots {
	position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
	display: flex; justify-content: center; gap: 8px;
}
.mo-carousel__dot {
	width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: var(--mo-white); opacity: .5; cursor: pointer;
}
.mo-carousel__dot.is-active { opacity: 1; }
.mo-carousel__dot:hover { opacity: .8; }

/* ---------------------------------------------------------
   2. DWIE KARTY CTA — fe84d1b / 3748884 / 0d89627
   --------------------------------------------------------- */
.mo-sec--cta2 { padding: 20px 0 80px; }
.mo-cta2 { display: flex; flex-direction: row; gap: 50px; }
.mo-cta2__card {
	width: 50%; min-height: 26vh;
	display: flex; flex-direction: column; justify-content: center;
	gap: 20px;                     /* Kit: --widgets-spacing:20px (kontener bez --gap) */
	padding: 20px 0 30px;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
	text-decoration: none;
	transition: transform .3s, box-shadow .3s;
}
.mo-cta2__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 10px 0 rgba(250,0,0,.5);
}
.mo-cta2__img { display: block; text-align: center; }
.mo-cta2__img img { width: 22%; display: inline-block; }    /* 91cb57d */
.mo-cta2__title {
	display: block; text-align: center;
	font-size: 1.6em; font-weight: 600; color: var(--mo-text);
}
.mo-cta2__text {
	display: block; text-align: center; margin-top: -15px;   /* d777320 */
	font-size: 1.3em; line-height: 1.4em; color: var(--mo-text);
}

/* ---------------------------------------------------------
   3. / 6. NAGŁÓWKI SEKCJI — 955f006 / b2607b2
   --------------------------------------------------------- */
/* 955f006 nie deklaruje paddingu -> Elementor daje kontenerowi DOMYSLNE 10px
   gora/dol (`.e-con{--padding-block:10px}`). Stad 62 = 10 + 41.6 + 10.
   Dla porownania b2607b2 deklaruje padding-top:60/bottom:0 -> 102. */
.mo-sec--head { padding: 10px 0; }
.mo-sec--head2 { padding-top: 60px; }

/* ---------------------------------------------------------
   4. SIATKA USŁUG — ed9540a (28% / 28% / 40%)
   --------------------------------------------------------- */
.mo-sec--svc { padding: 60px 0; }
.mo-svcgrid { display: flex; flex-direction: row; }
.mo-svcgrid__col {
	width: 28%;
	display: flex; flex-direction: column; justify-content: space-evenly;
}
.mo-svcgrid__col--a { padding-left: 2%; }
.mo-svcgrid__col--b { padding: 0 2% 0 1%; }
.mo-svcgrid__photo { width: 40%; text-align: end; }         /* d172b5c */
.mo-svcgrid__photo img { width: 100%; border-radius: 3px; }

/* Kafel = widget image-box w wariancie position-LEFT (obrazek OBOK tekstu).
   Zmierzone na oryginale: widget 374x81, wrapper 374x121, figure 96 (30% po
   shrinku), img 56 (=96-2*20 paddingu), content 289x121. */
.mo-svc { display: block; margin: -20px 0; text-decoration: none; color: inherit; }
.mo-svc__wrap { display: flex; flex-direction: row; align-items: flex-start; }
/* Oryginal deklaruje width:30%, ale figure realnie konczy jako 25.6% szerokosci
   wrappera (zmierzone: 95.75/374 w kolumnie A i 92/360 w kolumnie B — ten sam
   stosunek). To skutek proporcjonalnego shrinku flexa wzgledem max-content
   tekstu. Zamiast odtwarzac krucha matematyke shrinku, przybijamy WYNIK. */
.mo-svc__img {
	flex: 0 0 25.6%;
	margin: 0 -10px 0 0;
	padding: 20px;                 /* box-sizing:border-box -> img = 25.6% - 40px */
}
.mo-svc__img img { width: 100%; display: block; }
.mo-svc__content { flex: 1 1 auto; min-width: 0; text-align: start; }
.mo-svc__title {
	margin: 20.8px 0 3px;          /* domyslny margin-top <p> = 1em; Elementor nadpisuje tylko bottom */
	font-size: 1.3em; font-weight: 600; line-height: normal;
	color: var(--mo-primary);      /* Kit nie ustawia koloru -> czarny, nie --mo-text */
	text-align: start;
}
.mo-svc__desc {
	margin: 0; font-size: 1em; line-height: normal;
	color: var(--mo-primary); text-align: start;
}
a.mo-svc:hover .mo-svc__title { color: var(--mo-accent); }

/* ---------------------------------------------------------
   5. PASEK PROMO — 3c6360d (bg #01041A) / 35564b2 (35%) / 2966c6c (45%)
   --------------------------------------------------------- */
.mo-sec--promo {
	background-color: #01041A;
	margin: 30px 0;
	padding-left: 7%;
	overflow: hidden;
}
.mo-promo {
	display: flex; flex-direction: row; justify-content: space-around;
	padding: 19px 0 20px;
}
.mo-promo__box {
	width: 35%; min-height: 14vh;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
	text-decoration: none;
	transition: transform .3s, box-shadow .3s;
}
.mo-promo__box:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 15px 0 rgba(250,0,0,.5);
}
.mo-promo__inner {
	display: flex; flex-direction: column; justify-content: space-evenly;
	gap: 20px;                     /* Kit: --widgets-spacing */
	width: 100%; padding: 20px 0;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(255,32,32,.98);               /* 1a2f416 */
	transition: box-shadow .3s;
}
.mo-promo__box:hover .mo-promo__inner { box-shadow: 0 0 25px 0 rgba(255,32,32,.95); }
.mo-promo__icon { display: block; text-align: center; }
.mo-promo__icon img { width: 15%; display: inline-block; }    /* 95582d7 */
.mo-promo__haslo {
	display: block; text-align: center; margin: -8px 0;        /* ba0bb66 */
	font-size: 2.1em; font-weight: var(--mo-fw-primary); color: #FFFFFF;
	line-height: 1.25;
}
.mo-promo__inner .mo-divider { width: auto; margin-inline: 20px; }
.mo-promo__cta {
	display: block; text-align: center; margin: -35px 0 -25px; /* 060aac6 */
	font-size: 1.3em; font-weight: 800; line-height: 1.4em;
	letter-spacing: 3.3px; color: #FFFFFF;
}
/* Kolumna 45% (2966c6c): wysokosc wyznacza spacer 79406c3 = 340px.
   Na desktopie tlo ma background-size:auto i pozycje 0% 0% (cover/center jest
   TYLKO w wariancie mobilnym) — zmierzone na oryginale. */
.mo-promo__art {
	width: 45%; min-height: 340px;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: 0% 0%;
}

/* ---------------------------------------------------------
   7. WYRÓŻNIKI — 294c1d3 / e4e1d04 (karta) / bac08b3 (18%)
   --------------------------------------------------------- */
.mo-sec--feat { padding: 20px 0 80px; }
.mo-featcard {
	display: flex; flex-direction: row; justify-content: center;
	gap: 30px; min-height: 26vh;
	padding: 20px 20px 30px;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
.mo-feat { width: 18%; display: flex; flex-direction: column; }
.mo-feat__head { display: flex; flex-direction: row; align-items: flex-end; }
.mo-feat__icon { width: 40%; max-width: 40%; text-align: start; margin-bottom: -10px; }
.mo-feat__icon img { width: 60px; }                            /* f2d16c7 */
.mo-feat__title {
	flex: 1; margin: 0; text-align: center;
	font-size: 1.3em; text-transform: uppercase;
	color: var(--mo-text); font-weight: var(--mo-fw-primary);
}
.mo-feat__desc {
	margin: -15px 0 0; text-align: center;                      /* 320c0b0 */
	font-size: 0.9em; line-height: 1.4em; color: var(--mo-text);
}

/* ---------------------------------------------------------
   8. BLOK SEO — 2fa7ed3 / 64400aa / f9d71c1 (bg tires_03.jpg)
   --------------------------------------------------------- */
.mo-sec--seo { padding-top: 30px; }
.mo-seo { display: flex; flex-direction: row; gap: 20px; padding: 10px; }
/* bed6b23: kontener bez zadeklarowanego paddingu ma domyslne 10px na WSZYSTKICH
   bokach (nie tylko gora/dol). Zmierzone: pad=10px, inner 1363.33, kolumny po
   (1363.33-20)/2 = 671.67. Przy `10px 0` kolumny wychodzily 691.67/671.67. */
.mo-seo__text {
	flex: 1; min-width: 0;         /* min-width:0 OBOWIAZKOWE — domyslne dla flex-itema
	   jest `auto`, przez co min-content naglowka H1 rozpychal kolumne do 691.67
	   zamiast 671.67 i zabieral szerokosc zdjeciu. Oryginal: obie kolumny 671.67. */
	display: flex; flex-direction: column; gap: 20px;
	padding: 10px;                 /* 64400aa: domyslne 10px */
}
.mo-seo__text .mo-h1 { text-align: start; }
.mo-seo__text p { font-size: 1.3em; line-height: 2.3em; }     /* 45a0e72 */
.mo-seo__photo {
	flex: 1; min-width: 0;
	padding: 10px;                 /* f9d71c1: domyslne 10px (bez wplywu wizualnego —
	   background-origin to padding-box — ale trzyma zgodnosc struktury) */
	background-image: url("../../../../uploads/2024/04/tires_03.jpg");
	background-size: cover;
	background-position: center center;
}

/* ---------------------------------------------------------
   9. OPINIE — 2ed26ac
   --------------------------------------------------------- */
.mo-sec--reviews { padding: 100px 0 60px; }
.mo-sec--reviews .mo-h2 { padding: 10px 0; }   /* ce3a138: domyslne 10px block */
.mo-reviews { padding: 10px 0; }               /* 091615d: domyslne 10px block */

/* ---------------------------------------------------------
   10. CTA Z TELEFONEM — 38590161 / 6d51261b (25%)
   --------------------------------------------------------- */
.mo-sec--tel {
	padding-left: 7%;
	background-image: url("../../../../uploads/2024/05/classic-retro-car-vintage-vehicle-2023-11-27-05-34-16-utc-scaled.jpg");
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}
.mo-tel { display: flex; flex-direction: row; padding: 19px 0 20px; }
.mo-tel__box {
	width: 25%; min-height: 14vh;
	display: flex; align-items: center; justify-content: center;
	border-radius: 10px;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
	text-decoration: none;
	transition: transform .3s, box-shadow .3s;
}
.mo-tel__box:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 15px 0 rgba(250,0,0,.5);
}
.mo-tel__inner {
	display: flex; flex-direction: column;
	gap: 20px;                     /* Kit: --widgets-spacing */
	width: 100%; padding: 20px 0;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(255,32,32,.75);                /* 4ee4bd8f */
	transition: box-shadow .3s;
}
.mo-tel__box:hover .mo-tel__inner { box-shadow: 0 0 15px 0 rgba(255,32,32,.67); }
.mo-tel__icon { display: block; text-align: center; }
.mo-tel__icon img { width: 15%; display: inline-block; }       /* 532ea423 */
.mo-tel__title {
	display: block; text-align: center; margin: -8px 0;         /* 7218c200 */
	font-size: 1.7em; color: #FFFFFF; font-weight: var(--mo-fw-primary);
	line-height: 1.25;
}
.mo-tel__inner .mo-divider { width: auto; margin-inline: 20px; }
.mo-tel__num {
	display: block; text-align: center; margin: -35px 0 -25px;  /* 3497542c */
	font-size: 1.5em; font-weight: 800; line-height: 1.4em;
	letter-spacing: 3.3px; color: #FFFFFF;
}

/* ---------------------------------------------------------
   11. BLOG — dc6857d / karty jak skin "cards" widgetu posts (939b8a3)
   --------------------------------------------------------- */
.mo-sec--blog { padding: 100px 0; }
.mo-sec--blog .mo-h2 { padding-bottom: 30px; }                 /* 4d150dc */
/* Kontener b63cfa2 — w oryginale trzyma <script> z JSON-LD i ma domyslne
   10px gora/dol => 20px pustego miejsca na koncu sekcji blog (zmierzone
   1383.3x20.0). U nas JSON-LD siedzi w wp_footer (inc/home.php), wiec sam
   odstep trzeba odtworzyc, zeby uklad zgadzal sie co do piksela. */
.mo-sec--blog__tail { padding: 10px 0; }
/* ---------------------------------------------------------
   Karty bloga — widget posts, skin "cards" (939b8a3).
   Cala specyfikacja ZMIERZONA na oryginale (viewport 1400x1050):
     .elementor-posts: grid 3 kol, gap 35px 50px  (cards_column_gap:50)
     __card: flex column, bg #fff, radius 3px, overflow hidden,
             shadow rgba(0,0,0,.15) 0 0 10px 0
     __thumbnail: padding-bottom 66%, overflow hidden; img absolutny
     __badge: ABSOLUTNY (top:0 right:0 margin:20px) -> nie liczy sie do wysokosci
     __text: margin-top 20, padding 0 30px
     __title: <p> 1.1em/600, margin 0 0 40 (cards_title_spacing:40)
     __title a: 1.1em NA TYM SAMYM elemencie -> font-size SIE KUMULUJE
                (17.6 * 1.1 = 19.36). To quirk oryginalu, nie blad.
     __read-more: 12px/700, inline-block, margin-bottom 20
     __meta-data: padding 15px 30px, 12px/1.3, #ADADAD, border-top 1px #EAEAEA
   Suma: 277.9 + 20 + 20 + 121.6 + 46.7 = 486.2 (article = 486.3).
   --------------------------------------------------------- */
.mo-cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 50px;
	padding: 10px;   /* rzad 3a9df4c: domyslne 10px. Bez tego siatka ma 1383.3
	   zamiast 1363.3, a karta 427.8 zamiast 421.1. Wysokosc: 10+486.3+10 = 506.3. */
}
.mo-card { display: flex; }
.mo-card__inner {
	display: flex; flex-direction: column;
	position: relative;
	width: 100%;
	background: var(--mo-white);
	border-radius: 3px;
	box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
	overflow: hidden;
	/* Motyw Hello (oryginal) ma bazowe line-height:1.15, nasz body ma 1.6.
	   Tytul dziedziczy lh jako LICZBE, wiec przy 1.6 mialby 31px zamiast
	   22.26 na linie i karta rosla o ~18px. Latamy lokalnie (decyzja: bazowe
	   1.6 zostaje). */
	line-height: 1.15;
}
.mo-card__thumblink { display: block; margin-bottom: 20px; position: relative; }
.mo-card__thumb { display: block; position: relative; padding-bottom: 66%; overflow: hidden; }
/* img absolutny -> zero wplywu na wysokosc. Oryginal: height:100%, width:auto,
   wysrodkowany + scale(1.01) (trik Elementora na subpikselowe szpary). */
.mo-card__thumb img {
	position: absolute; top: 50%; left: 50%;
	height: 100%; width: auto; max-width: none;
	transform: scale(1.01) translate(-50%, -50%);
	transform-origin: top left;
}
.mo-card__badge {
	position: absolute; top: 0; right: 0; margin: 20px;
	padding: 7.2px 14.4px;
	border-radius: 999px;
	background: #69727D; color: var(--mo-white);
	font-size: 12px; line-height: 12px; font-weight: 400;
	text-transform: uppercase;   /* ZMIERZONE — bez tego badge ma 52.4 zamiast 60.6 */
}
.mo-card__text { margin-top: 20px; padding: 0 30px; }
.mo-card__title { margin: 0 0 40px; font-size: 1.1em; font-weight: 600; text-align: start; }
.mo-card__title a { font-size: 1.1em; color: var(--mo-text); text-decoration: none; }
.mo-card__title a:hover { color: var(--mo-accent); }
.mo-card__more {
	display: inline-block; margin-bottom: 20px;
	font-size: 12px; line-height: 13.8px; font-weight: 700;
	color: var(--mo-text); text-decoration: none;
	text-transform: uppercase;   /* ZMIERZONE — bez tego 79.2 zamiast 97.5 */
}
.mo-card__more:hover { color: var(--mo-accent); }
.mo-card__meta {
	margin-top: auto;
	padding: 15px 30px;
	border-top: 1px solid #EAEAEA;
	font-size: 12px; line-height: 1.3; color: #ADADAD;
}

/* =========================================================
   Tablet — próg Elementora 1024
   ========================================================= */
@media (max-width: 1024px) {
	.mo-sec__inner { max-width: 1024px; }
	.mo-cards { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.mo-featcard { flex-wrap: wrap; }
	.mo-feat { width: 45%; }
}

/* =========================================================
   Mobile — próg Elementora 767
   ========================================================= */
@media (max-width: 767px) {
	.mo-h1, .mo-h2 { font-size: 1.9em; }
	.mo-carousel__track { height: 450px; }   /* oryginal: 450px takze na mobile (brak override) */

	.mo-sec--cta2 { padding: 20px 10px 40px; }                 /* fe84d1b @767 */
	.mo-cta2 { flex-direction: column; }
	.mo-cta2__card { width: 100%; }

	.mo-sec--svc { padding: 0 20px; }                          /* ed9540a @767 */
	.mo-svcgrid { flex-direction: column; }
	.mo-svcgrid__col, .mo-svcgrid__photo { width: 100%; padding: 0; }
	.mo-svcgrid__photo { text-align: center; }
	/* Na mobile Elementor przelacza image-box na uklad PIONOWY: wrapper staje sie
	   block + text-align:center, figure inline-block 35%, obrazek na gorze.
	   Zmierzone: widget 331x218, figure 116x116, img 76x76, content 331x98. */
	.mo-svc { margin: 0; }
	.mo-svc__wrap { display: block; text-align: center; }
	.mo-svc__img {
		display: inline-block; width: 35%; flex: none;
		margin: 0 0 -20px 0; padding: 20px;
	}
	.mo-svc__content { text-align: center; }
	.mo-svc__title { text-align: center; margin-top: 20.8px; margin-bottom: 0; }
	.mo-svc__desc { text-align: center; }

	.mo-sec--promo { padding: 0 4%; margin: 20px 0; }          /* 3c6360d @767 */
	.mo-promo { flex-wrap: wrap; padding: 10px; }              /* --flex-wrap-mobile:wrap */
	.mo-promo__box, .mo-promo__art { width: 100%; }
	.mo-promo__icon img { width: 12%; }                        /* 95582d7 @767 */
	.mo-promo__cta { margin: 0; }                              /* 060aac6 @767 */
	.mo-promo__art { min-height: 232px; background-size: cover; background-position: 50% 50%; }

	.mo-sec--head2 { padding-top: 30px; }
	.mo-sec--feat { padding: 20px 10px 40px; }                 /* 294c1d3 @767 */
	.mo-featcard { flex-direction: column; gap: 20px; }
	.mo-feat { width: 100%; }

	.mo-seo { flex-direction: column; }
	.mo-seo__text .mo-h1 { text-align: center; }               /* b0438ad @767 */
	.mo-seo__text p { font-size: .9em; line-height: 1.8em; }   /* 45a0e72 @767 */
	.mo-seo__photo { min-height: 29vh; }                       /* f9d71c1 @767 */

	.mo-sec--reviews { padding: 40px 10px; }

	.mo-sec--tel {
		padding: 4% 4% 90%;                                     /* 38590161 @767 */
		min-height: 77vh;
		background-position: bottom center;
	}
	.mo-tel { padding: 10px; }
	.mo-tel__box { width: 100%; }
	.mo-tel__num { margin: 0; }

	.mo-sec--blog { padding: 30px 10px 40px; }                 /* dc6857d @767 */
	.mo-cards { grid-template-columns: 1fr; padding: 0; }   /* 3a9df4c @767: padding 0 */
	.mo-card__thumb { padding-bottom: calc(.5 * 100%); }       /* 939b8a3 @767 */
}