/**
 * Luvia Child – style widgetów Elementor (Hero, Slider, Listing)
 * Używają zmiennych z theme-colors.css (luvia-theme).
 */

/* ==========================================================================
   Hero – tytuł, podtytuł, 2 przyciski, tło jasne/ciemne (Zgaś światło)
   ========================================================================== */

.luvia-hero__wrap {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: var(--luvia-theme-bg, #F5F1EF);
	padding: 3rem 2rem;
	overflow: hidden;
}

@media (min-width: 768px) {
	.luvia-hero__wrap {
		min-height: 520px;
		padding: 4rem 3rem;
	}
}

/* Warstwy tła – wersja jasna domyślnie, ciemna gdy html.luvia-light-off */
.luvia-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: opacity 0.4s ease;
}

.luvia-hero__bg--light {
	opacity: 1;
}

.luvia-hero__bg--dark {
	opacity: 0;
}

html.luvia-light-off .luvia-hero__bg--light {
	opacity: 0;
}

html.luvia-light-off .luvia-hero__bg--dark {
	opacity: 1;
}

/* Warstwa wideo – te same zasady (jasna/ciemna w jednym momencie co motyw) */
.luvia-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease;
}

.luvia-hero__video--light {
	opacity: 1;
}

.luvia-hero__video--dark {
	opacity: 0;
}

html.luvia-light-off .luvia-hero__video--light {
	opacity: 0;
}

html.luvia-light-off .luvia-hero__video--dark {
	opacity: 1;
}

/* Delikatna ciemna winieta po lewej, żeby tekst był czytelny na tle zdjęcia */
.luvia-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
	pointer-events: none;
}

.luvia-hero__inner {
	position: relative;
	z-index: 1;
	text-align: left;
	max-width: 520px;
}

.luvia-hero__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.85rem, 4.5vw, 3rem);
	font-weight: 700;
	color: var(--hero-title-color, #fff);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.luvia-hero__subtitle {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--hero-subtitle-color, #fff);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.luvia-hero__cta-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.luvia-hero__cta {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	font-weight: 600;
	border-radius: 8px;
	border: 2px solid transparent;
	transition: opacity 0.2s, transform 0.2s, border-color 0.2s;
}

.luvia-hero__cta:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}

/* Przycisk 1 – primary (tło, ramka, tekst – z panelu lub domyślne) */
.luvia-hero__cta--primary {
	background-color: var(--hero-btn1-bg, rgba(255, 255, 255, 0.95));
	color: var(--hero-btn1-color, #5c4a3a);
	border-color: var(--hero-btn1-border, rgba(0, 0, 0, 0.08));
}

.luvia-hero__cta--primary:hover {
	color: var(--hero-btn1-color, #5c4a3a);
}

/* Przycisk 2 – secondary (tło, ramka, tekst) */
.luvia-hero__cta--secondary {
	background-color: var(--hero-btn2-bg, transparent);
	color: var(--hero-btn2-color, rgba(255, 255, 255, 0.95));
	border-color: var(--hero-btn2-border, rgba(255, 255, 255, 0.6));
}

.luvia-hero__cta--secondary:hover {
	color: var(--hero-btn2-color, #fff);
	border-color: var(--hero-btn2-border, #fff);
}

/* Gdy hero bez obrazu tła – tekst w kolorze motywu */
.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__overlay {
	display: none;
}

.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__title {
	color: var(--hero-title-color, var(--luvia-theme-text));
	text-shadow: none;
}

.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__subtitle {
	color: var(--hero-subtitle-color, var(--luvia-theme-text-muted));
	text-shadow: none;
}

.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__cta--primary {
	background-color: var(--hero-btn1-bg, var(--luvia-theme-bg-elevated));
	color: var(--hero-btn1-color, var(--luvia-theme-text));
	border-color: var(--hero-btn1-border, var(--luvia-theme-border));
}

.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__cta--secondary {
	color: var(--hero-btn2-color, var(--luvia-theme-accent));
	border-color: var(--hero-btn2-border, var(--luvia-theme-accent));
}

.luvia-hero__wrap:not(:has(.luvia-hero__bg)) .luvia-hero__cta--secondary:hover {
	color: var(--hero-btn2-color, var(--luvia-theme-text));
	border-color: var(--hero-btn2-border, var(--luvia-theme-border-strong));
}

/* ==========================================================================
   Slider
   ========================================================================== */

.luvia-slider__wrap {
	position: relative;
	overflow: hidden;
	padding: 2rem 3rem;
}

.luvia-slider__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.luvia-slider__slide {
	flex: 0 0 min(300px, 85vw);
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	overflow: hidden;
	background: var(--luvia-theme-bg-elevated, #FDFDFC);
}

.luvia-slider__img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.luvia-slider__title {
	display: block;
	padding: 0.75rem 1rem;
	font-weight: 600;
}

.luvia-slider__prev,
.luvia-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--luvia-theme-bg-elevated);
	color: var(--luvia-theme-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: background 0.2s, color 0.2s;
	z-index: 2;
}

.luvia-slider__prev { left: 0.5rem; }
.luvia-slider__next { right: 0.5rem; }

.luvia-slider__prev:hover,
.luvia-slider__next:hover {
	background: var(--luvia-theme-accent);
	color: var(--luvia-theme-accent-text);
}

.luvia-slider__empty {
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: var(--luvia-theme-text-muted);
}

/* ==========================================================================
   Listing
   ========================================================================== */

.luvia-listing__wrap {
	padding: 2rem 0;
}

.luvia-listing__items {
	display: grid;
	gap: 1.5rem;
}

.luvia-listing--grid .luvia-listing__items {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.luvia-listing--list .luvia-listing__items {
	grid-template-columns: 1fr;
}

.luvia-listing__item {
	background: var(--luvia-theme-bg-elevated, #FDFDFC);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--luvia-theme-border, #e5e0d8);
}

.luvia-listing__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.luvia-listing__link:hover .luvia-listing__title {
	color: var(--luvia-theme-accent);
}

.luvia-listing__thumb {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--luvia-theme-border);
}

.luvia-listing__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.luvia-listing__content {
	padding: 1rem;
}

.luvia-listing__title {
	margin: 0 0 0.25rem;
	font-size: 1.1rem;
	font-weight: 600;
	transition: color 0.2s;
}

.luvia-listing__excerpt {
	margin: 0;
	font-size: 0.9rem;
	color: var(--luvia-theme-text-muted);
}

.luvia-listing__empty {
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: var(--luvia-theme-text-muted);
}

/* ==========================================================================
   Listing kategorii – karta: nazwa, podtytuł, zdjęcie, przycisk, ikony kolorów
   1 na pełną szer. lub 2 obok siebie
   ========================================================================== */

.luvia-cat-listing__wrap {
	padding: 2rem 0;
}

.luvia-cat-listing__grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

.luvia-cat-listing--col-1 .luvia-cat-listing__grid {
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
}

.luvia-cat-listing--col-2 .luvia-cat-listing__grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 767px) {
	.luvia-cat-listing--col-2 .luvia-cat-listing__grid {
		grid-template-columns: 1fr;
	}
}

.luvia-cat-listing__card {
	background: var(--luvia-theme-bg-elevated, #FDFDFC);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--luvia-theme-border, #e5e0d8);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.luvia-cat-listing__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--luvia-theme-text);
	letter-spacing: 0.02em;
}

.luvia-cat-listing__img-wrap {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 12px;
	overflow: hidden;
	background: var(--luvia-theme-border);
	margin-bottom: 1rem;
}

.luvia-cat-listing__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.luvia-cat-listing__subtitle {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--luvia-theme-text-muted);
}

.luvia-cat-listing__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

.luvia-cat-listing__btn {
	display: inline-block;
	padding: 0.6rem 1.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--luvia-theme-text);
	background: var(--luvia-theme-bg-elevated);
	border: 2px solid var(--luvia-theme-border-strong);
	border-radius: 8px;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.luvia-cat-listing__btn:hover {
	color: var(--luvia-theme-accent);
	border-color: var(--luvia-theme-accent);
}

.luvia-cat-listing__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
}

.luvia-cat-listing__swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--luvia-theme-border);
	flex-shrink: 0;
}

.luvia-cat-listing__empty {
	margin: 0;
	padding: 2rem;
	text-align: center;
	color: var(--luvia-theme-text-muted);
}