/* =========================================================================
   Leasing360 — design tokens + komponenty + animacje
   Odwzorowanie prototypu z leasing360.online (Lovable / Tailwind + shadcn)
   ========================================================================= */

:root {
	/* --- Marka --- */
	--l360-brand: #0C25EC;
	--l360-brand-600: #0A1FC4;
	--l360-brand-700: #08199E;
	--l360-brand-50: #EEF1FE;
	--l360-brand-soft: #EAF6FF;
	--l360-accent: #DFF0FF;

	/* --- Neutralne --- */
	--l360-ink: #0A121F;
	--l360-muted: #545E6F;
	--l360-border: #DCE6F2;
	--l360-bg: #FFFFFF;
	--l360-bg-alt: #F7FAFF;

	/* --- Semantyczne --- */
	--l360-success: #0FA968;
	--l360-danger: #EE0F1F;

	/* --- Kształt / cień --- */
	--l360-radius-sm: 8px;
	--l360-radius: 14px;
	--l360-radius-lg: 22px;
	--l360-radius-pill: 999px;
	--l360-shadow-card: 0 4px 20px -8px rgba(17, 57, 215, .12);
	--l360-shadow-hover: 0 10px 28px -12px rgba(12, 37, 236, .35);
	--l360-shadow-bar: 0 -8px 24px -12px rgba(0, 0, 0, .12);

	/* --- Layout --- */
	--l360-container: 1280px;
	--l360-section-y: 80px;

	/* --- Ruch --- */
	--l360-ease: cubic-bezier(.4, 0, .2, 1);
	--l360-dur: .2s;

	/* Nadpisywalny per-widget kolor akcentu */
	--l360-w-accent: var(--l360-brand);
}

/* =========================================================================
   Klasy pomocnicze (do użycia w polu "Klasy CSS" widgetów Elementora)
   ========================================================================= */

/* Wyróżnienie fragmentu nagłówka kolorem marki (span w tytule H1/H2) */
.l360-hl { color: var(--l360-brand); }

/* Pigułka nad nagłówkiem — "Niezależny broker leasingowy" */
.l360-pill,
.l360-pill .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 13px;
	border: 1px solid rgba(12, 37, 236, .25);
	border-radius: var(--l360-radius-pill);
	background: #fff;
	color: var(--l360-brand);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .01em;
}

/* Karta z hoverem — dodaj klasę do kontenera Elementora */
.l360-hover-card {
	transition: transform var(--l360-dur) var(--l360-ease),
	            box-shadow var(--l360-dur) var(--l360-ease),
	            border-color var(--l360-dur) var(--l360-ease);
	will-change: transform;
}
.l360-hover-card:hover {
	transform: translateY(-4px);
	border-color: var(--l360-brand) !important;
	box-shadow: var(--l360-shadow-hover);
}

/* Strzałka w linku "Więcej →" rozsuwa się na hover */
.l360-arrow-link .elementor-button-content-wrapper { gap: 8px; transition: gap var(--l360-dur) var(--l360-ease); }
.l360-arrow-link:hover .elementor-button-content-wrapper { gap: 14px; }

/* Sekcja z miękkim tłem marki */
.l360-bg-soft { background-color: var(--l360-brand-soft) !important; }

/* Delikatna ramka górna/dolna */
.l360-border-y { border-top: 1px solid var(--l360-border); border-bottom: 1px solid var(--l360-border); }

/* Tekst pomocniczy / disclaimer */
.l360-fineprint { font-size: 12px; line-height: 1.6; color: var(--l360-muted); }

.l360-empty { color: var(--l360-muted); font-size: 14px; }

/* =========================================================================
   ANIMACJA: scroll reveal (fade + up)
   Elementy .l360-reveal startują ukryte, klasa .is-visible dodawana przez JS.
   Widgety L360 dodają .l360-reveal automatycznie.
   ========================================================================= */
.l360-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--l360-ease), transform .55s var(--l360-ease);
}
.l360-reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* Kaskada dla elementów w tym samym kontenerze */
.l360-reveal:nth-child(2) { transition-delay: .06s; }
.l360-reveal:nth-child(3) { transition-delay: .12s; }
.l360-reveal:nth-child(4) { transition-delay: .18s; }
.l360-reveal:nth-child(5) { transition-delay: .24s; }
.l360-reveal:nth-child(6) { transition-delay: .30s; }

/* Bez JS — pokaż od razu */
.no-js .l360-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.l360-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   1. MARQUEE PARTNERÓW
   ========================================================================= */
.l360-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.l360-marquee--fade {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.l360-marquee__track {
	display: flex;
	align-items: center;
	gap: 14px;
	width: max-content;
	animation: l360-marquee 45s linear infinite;
}
.l360-marquee--reverse .l360-marquee__track { animation-direction: reverse; }
.l360-marquee:hover .l360-marquee__track { animation-play-state: paused; }

.l360-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 56px;
	padding: 12px 22px;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius);
	background: #fff;
	color: var(--l360-muted);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color var(--l360-dur) var(--l360-ease), color var(--l360-dur) var(--l360-ease);
}
.l360-marquee__item:hover { border-color: var(--l360-brand); color: var(--l360-ink); }
.l360-marquee__item img { max-height: 32px; width: auto; object-fit: contain; }

@keyframes l360-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.l360-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* =========================================================================
   2. SAMOCHODY — filtr + siatka kart
   ========================================================================= */
.l360-cars__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}
.l360-chip {
	appearance: none;
	cursor: pointer;
	padding: 8px 16px;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-pill);
	background: #fff;
	color: var(--l360-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	transition: all var(--l360-dur) var(--l360-ease);
}
.l360-chip:hover { border-color: var(--l360-w-accent); color: var(--l360-ink); }
.l360-chip.is-active {
	background: var(--l360-w-accent);
	border-color: var(--l360-w-accent);
	color: #fff;
	box-shadow: var(--l360-shadow-hover);
}

.l360-cars__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/* --- Karta samochodu --- */
.l360-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	transition: transform var(--l360-dur) var(--l360-ease),
	            box-shadow var(--l360-dur) var(--l360-ease),
	            border-color var(--l360-dur) var(--l360-ease);
}
.l360-card:hover {
	transform: translateY(-4px);
	border-color: var(--l360-w-accent);
	box-shadow: var(--l360-shadow-hover);
}
/* Cała karta klikalna, ale tekst dalej zaznaczalny */
.l360-card__link { position: absolute; inset: 0; z-index: 2; text-indent: -9999px; }
.l360-card__link:focus-visible { outline: 3px solid var(--l360-w-accent); outline-offset: 2px; }

.l360-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, var(--l360-brand-soft), #fff);
	overflow: hidden;
}
.l360-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--l360-ease);
}
.l360-card:hover .l360-card__media img { transform: scale(1.04); }

.l360-card__media-placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: rgba(12, 37, 236, .22);
}
.l360-card__media-placeholder svg { width: 72px; height: 72px; }

.l360-badge {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: var(--l360-radius-pill);
	background: var(--l360-w-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.l360-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 20px;
	flex: 1;
}
.l360-card__brand {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--l360-muted);
}
.l360-card__title {
	margin: 0;
	font-family: var(--l360-font-display, inherit);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--l360-ink);
}
.l360-card__price {
	margin: 6px 0 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.l360-card__price strong {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--l360-w-accent);
}
.l360-card__price span { font-size: 12px; color: var(--l360-muted); }

.l360-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.l360-card__meta li {
	padding: 3px 10px;
	border-radius: var(--l360-radius-pill);
	background: var(--l360-brand-soft);
	color: var(--l360-muted);
	font-size: 11px;
	font-weight: 600;
}

.l360-card__cta {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--l360-w-accent);
	transition: gap var(--l360-dur) var(--l360-ease);
}
.l360-card:hover .l360-card__cta { gap: 12px; }

.l360-card.is-hidden { display: none; }

.l360-cars__empty {
	margin: 24px 0 0;
	color: var(--l360-muted);
	font-size: 15px;
}

@media (max-width: 1024px) { .l360-cars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .l360-cars__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   3. PORÓWNANIE DWÓCH KOLUMN
   ========================================================================= */
.l360-compare {
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	overflow: hidden;
}
.l360-compare__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--l360-brand-soft);
	border-bottom: 1px solid var(--l360-border);
}
.l360-compare__head > div {
	padding: 16px 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.l360-compare__head-a { color: var(--l360-muted); }
.l360-compare__head-b { color: var(--l360-w-accent); border-left: 1px solid var(--l360-border); }

.l360-compare__rows { margin: 0; padding: 0; list-style: none; }
.l360-compare__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--l360-border);
}
.l360-compare__row:last-child { border-bottom: 0; }
.l360-compare__row:nth-child(even) { background: #FBFDFF; }

.l360-compare__cell {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px 22px;
	font-size: 15px;
	line-height: 1.5;
}
.l360-compare__cell--a { color: var(--l360-muted); }
.l360-compare__cell--b { color: var(--l360-ink); font-weight: 600; border-left: 1px solid var(--l360-border); }

.l360-compare__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.l360-compare__icon svg { width: 100%; height: 100%; }
.l360-compare__cell--a .l360-compare__icon { color: #9AA6B8; }
.l360-compare__cell--b .l360-compare__icon { color: var(--l360-success); }

/* Etykiety widoczne tylko na mobile (nagłówek tabeli znika) */
.l360-compare__label {
	display: none;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .7;
}

.l360-compare__footnote {
	margin: 0;
	padding: 18px 22px;
	background: var(--l360-brand-soft);
	color: var(--l360-ink);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 767px) {
	.l360-compare__head { display: none; }
	.l360-compare__row { grid-template-columns: 1fr; }
	.l360-compare__cell { flex-wrap: wrap; padding: 14px 18px; }
	.l360-compare__cell--b { border-left: 0; border-top: 1px dashed var(--l360-border); }
	.l360-compare__label { display: block; width: 100%; }
}

/* =========================================================================
   4. KROKI PROCESU
   ========================================================================= */
.l360-steps--grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.l360-steps--timeline { display: flex; flex-direction: column; gap: 0; }

.l360-step {
	position: relative;
	padding: 26px 22px;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	transition: transform var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease), border-color var(--l360-dur) var(--l360-ease);
}
.l360-step:hover { transform: translateY(-4px); border-color: var(--l360-w-accent); box-shadow: var(--l360-shadow-hover); }

.l360-step__num {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	margin-bottom: 14px;
	border-radius: var(--l360-radius);
	background: var(--l360-w-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.l360-step__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--l360-ink); }
.l360-step__desc  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--l360-muted); }

/* Oś pionowa */
.l360-steps--timeline .l360-step {
	border: 0; border-radius: 0; box-shadow: none; background: transparent;
	padding: 0 0 32px 62px;
}
.l360-steps--timeline .l360-step:hover { transform: none; box-shadow: none; }
.l360-steps--timeline .l360-step__num { position: absolute; left: 0; top: 0; margin: 0; }
.l360-steps--timeline .l360-step::before {
	content: "";
	position: absolute;
	left: 19px; top: 46px; bottom: 6px;
	width: 2px;
	background: linear-gradient(var(--l360-border), transparent);
}
.l360-steps--timeline .l360-step:last-child { padding-bottom: 0; }
.l360-steps--timeline .l360-step:last-child::before { display: none; }

@media (max-width: 1024px) { .l360-steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .l360-steps--grid { grid-template-columns: 1fr; } }

/* =========================================================================
   5. CASE STUDIES
   ========================================================================= */
.l360-cases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.l360-case {
	padding: 26px;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	transition: transform var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease), border-color var(--l360-dur) var(--l360-ease);
}
.l360-case:hover { transform: translateY(-4px); border-color: var(--l360-w-accent); box-shadow: var(--l360-shadow-hover); }
.l360-case__title { margin: 0 0 18px; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--l360-ink); }
.l360-case__list { margin: 0; display: grid; gap: 14px; }
.l360-case__item { display: grid; gap: 3px; padding-left: 14px; border-left: 2px solid var(--l360-brand-soft); }
.l360-case__item dt {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--l360-w-accent);
}
.l360-case__item dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--l360-muted); }

@media (max-width: 767px) { .l360-cases { grid-template-columns: 1fr; } }

/* =========================================================================
   6. FAQ — akordeon na <details>
   ========================================================================= */
.l360-faq { display: grid; gap: 10px; }

.l360-faq__item {
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease);
}
.l360-faq__item[open] { border-color: var(--l360-w-accent); box-shadow: var(--l360-shadow-card); }

.l360-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--l360-ink);
	transition: color var(--l360-dur) var(--l360-ease);
}
.l360-faq__q::-webkit-details-marker { display: none; }
.l360-faq__q:hover { color: var(--l360-w-accent); }
.l360-faq__q:focus-visible { outline: 3px solid var(--l360-w-accent); outline-offset: -3px; }

.l360-faq__chevron {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	color: var(--l360-w-accent);
	transition: transform .25s var(--l360-ease);
}
.l360-faq__chevron svg { width: 100%; height: 100%; }
.l360-faq__item[open] .l360-faq__chevron { transform: rotate(180deg); }

.l360-faq__a {
	padding: 0 20px 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--l360-muted);
}
.l360-faq__a > *:first-child { margin-top: 0; }
.l360-faq__a > *:last-child  { margin-bottom: 0; }

/* Płynne rozwijanie tam, gdzie przeglądarka to wspiera */
@supports (interpolate-size: allow-keywords) {
	.l360-faq__item { interpolate-size: allow-keywords; }
	.l360-faq__item::details-content {
		height: 0;
		overflow: hidden;
		transition: height .3s var(--l360-ease), content-visibility .3s allow-discrete;
	}
	.l360-faq__item[open]::details-content { height: auto; }
}

/* =========================================================================
   7. OPINIE
   ========================================================================= */
.l360-opinie {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.l360-opinia {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 26px 24px 24px;
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	transition: transform var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease), border-color var(--l360-dur) var(--l360-ease);
}
.l360-opinia:hover { transform: translateY(-4px); border-color: var(--l360-w-accent); box-shadow: var(--l360-shadow-hover); }
.l360-opinia__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: .6;
	color: var(--l360-w-accent);
	opacity: .28;
}
.l360-opinia__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--l360-ink);
	flex: 1;
}
.l360-opinia__author {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--l360-muted);
}

@media (max-width: 1024px) { .l360-opinie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .l360-opinie { grid-template-columns: 1fr; } }

/* =========================================================================
   8. MOBILNY PASEK CTA
   ========================================================================= */
.l360-stickybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 998;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	border-top: 1px solid var(--l360-border);
	background: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	box-shadow: var(--l360-shadow-bar);
	padding-bottom: env(safe-area-inset-bottom);
}
.l360-stickybar__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 6px;
	color: var(--l360-ink);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--l360-dur) var(--l360-ease), color var(--l360-dur) var(--l360-ease);
}
.l360-stickybar__btn + .l360-stickybar__btn { border-left: 1px solid var(--l360-border); }
.l360-stickybar__btn svg { width: 20px; height: 20px; }
.l360-stickybar__btn.is-primary { color: var(--l360-brand); }
.l360-stickybar__btn:hover,
.l360-stickybar__btn:active { background: var(--l360-brand-soft); color: var(--l360-brand); }

@media (min-width: 1025px) { .l360-stickybar { display: none; } }
/* Miejsce na pasek, żeby nie zasłaniał stopki */
@media (max-width: 1024px) { body.l360-has-stickybar { padding-bottom: 64px; } }

/* =========================================================================
   9. SIATKA WPISÓW BLOGA — shortcode [l360_wpisy]
   ========================================================================= */
.l360-posts {
	display: grid;
	grid-template-columns: repeat(var(--l360-posts-cols, 3), minmax(0, 1fr));
	gap: 20px;
}
.l360-post {
	border: 1px solid var(--l360-border);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	overflow: hidden;
	transition: transform var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease), border-color var(--l360-dur) var(--l360-ease);
}
.l360-post:hover { transform: translateY(-4px); border-color: var(--l360-brand); box-shadow: var(--l360-shadow-hover); }
.l360-post__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.l360-post__media { aspect-ratio: 16 / 10; background: linear-gradient(140deg, var(--l360-brand-soft), #fff); overflow: hidden; }
.l360-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--l360-ease); }
.l360-post:hover .l360-post__media img { transform: scale(1.04); }
.l360-post__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px; flex: 1; }
.l360-post__date { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--l360-muted); }
.l360-post__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--l360-ink); }
.l360-post__excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--l360-muted); }
.l360-post__cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--l360-brand); transition: gap var(--l360-dur) var(--l360-ease); }
.l360-post:hover .l360-post__cta { gap: 12px; }

@media (max-width: 1024px) { .l360-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .l360-posts { grid-template-columns: 1fr; } }

/* =========================================================================
   Nagłówek — sticky + blur (Astra / Hello, bez Elementor Pro)
   ========================================================================= */
.l360-sticky-header,
body.l360-sticky-header .ast-main-header-wrap,
body.l360-sticky-header .site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--l360-border);
}
/* Pasek administratora nie może przykrywać nagłówka */
body.admin-bar.l360-sticky-header .ast-main-header-wrap,
body.admin-bar.l360-sticky-header .site-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar.l360-sticky-header .ast-main-header-wrap,
	body.admin-bar.l360-sticky-header .site-header { top: 46px; }
}

/* Podkreślenie aktywnej pozycji menu — jak w prototypie */
.l360-nav .menu-item > a { position: relative; }
.l360-nav .menu-item > a::after {
	content: "";
	position: absolute;
	left: 0; bottom: -6px;
	width: 100%; height: 2px;
	border-radius: 2px;
	background: var(--l360-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--l360-dur) var(--l360-ease);
}
.l360-nav .menu-item > a:hover::after,
.l360-nav .current-menu-item > a::after,
.l360-nav .current_page_parent > a::after { transform: scaleX(1); }

/* =========================================================================
   Drobne poprawki dla Elementora
   ========================================================================= */
/* Kontener „boxed” zgodny z max-w-7xl prototypu */
.e-con.l360-container > .e-con-inner { max-width: var(--l360-container); }

/* Pole formularza w stylu prototypu (Fluent Forms / WPForms / CF7) */
.l360-form input[type="text"],
.l360-form input[type="email"],
.l360-form input[type="tel"],
.l360-form input[type="number"],
.l360-form select,
.l360-form textarea {
	width: 100%;
	border: 1px solid var(--l360-border) !important;
	border-radius: var(--l360-radius-sm) !important;
	background: #fff !important;
	padding: 9px 12px !important;
	font-size: 14px !important;
	color: var(--l360-ink) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
	transition: border-color var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease);
}
.l360-form input:focus,
.l360-form select:focus,
.l360-form textarea:focus {
	border-color: var(--l360-brand) !important;
	box-shadow: 0 0 0 3px rgba(12, 37, 236, .12) !important;
	outline: none !important;
}
.l360-form label { font-size: 12px !important; font-weight: 500 !important; color: var(--l360-ink) !important; }
.l360-form button[type="submit"],
.l360-form input[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: var(--l360-radius) !important;
	background: var(--l360-brand) !important;
	color: #fff !important;
	padding: 11px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background var(--l360-dur) var(--l360-ease), box-shadow var(--l360-dur) var(--l360-ease), transform var(--l360-dur) var(--l360-ease);
}
.l360-form button[type="submit"]:hover,
.l360-form input[type="submit"]:hover {
	background: var(--l360-brand-600) !important;
	box-shadow: var(--l360-shadow-hover);
	transform: translateY(-1px);
}

/* Karta z formularzem w hero */
.l360-form-card {
	border: 1px solid rgba(12, 37, 236, .15);
	border-radius: var(--l360-radius-lg);
	background: #fff;
	box-shadow: var(--l360-shadow-card);
	padding: 26px;
}
@media (min-width: 768px) { .l360-form-card { padding: 28px; } }

/* Dostępność: widoczny focus w całym serwisie */
a:focus-visible,
button:focus-visible,
.l360-chip:focus-visible {
	outline: 3px solid rgba(12, 37, 236, .45);
	outline-offset: 2px;
	border-radius: 4px;
}