/* ============================================================
   DobreZiola — home.css
   Strona główna: hero (pełnoekranowe zdjęcie + tekst) + pasek cech.
   ============================================================ */

/* ============================================================
   HERO — pełnoekranowe zdjęcie, tekst nałożony na kremową lewą stronę
   ============================================================ */
.dz-hero {
	position: relative;
	background: var(--dz-cream);
}

/* Zdjęcie */
.dz-hero-media { position: relative; }
.dz-hero-img {
	width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block;
}

/* Treść */
.dz-hero-content { max-width: 540px; }
.dz-hero-label {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: var(--dz-green-light); margin-bottom: 1.1rem;
}
.dz-hero-label-deco { display: inline-flex; color: var(--dz-gold); }
.dz-hero-label-deco .dz-leaf { transform: rotate(-8deg); }
.dz-hero-title {
	font-size: clamp(2.4rem, 5.5vw, 4.2rem);
	line-height: 1.05; margin: 0 0 1.15rem;
	color: var(--dz-green-dark); letter-spacing: -0.02em;
}
.dz-hero-text {
	font-size: clamp(1.02rem, 1.6vw, 1.22rem); line-height: 1.65;
	color: var(--dz-text-soft); margin: 0 0 1.9rem; max-width: 46ch;
}
.dz-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.dz-hero-cta { font-size: 1rem; padding: .95rem 1.85rem; }

/* --- Desktop: zdjęcie na całą szerokość, tekst nałożony --- */
@media (min-width: 980px) {
	.dz-hero { overflow: hidden; min-height: clamp(480px, 64vh, 660px); }
	.dz-hero-media { position: absolute; inset: 0; z-index: 0; }
	/* Gradient w kolorze tła: pełny krem po lewej, płynnie znika ku prawej —
	   gwarantuje idealną zgodność koloru i bezszwowe wtopienie tekstu w zdjęcie. */
	.dz-hero::after {
		content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(90deg,
			rgb(250,247,242) 0%,
			rgb(250,247,242) 48%,
			rgba(250,247,242,.92) 58%,
			rgba(250,247,242,0) 80%);
	}
	.dz-hero-inner {
		position: relative; z-index: 2;
		max-width: var(--dz-max); margin: 0 auto;
		min-height: clamp(480px, 64vh, 660px);
		display: flex; align-items: center;
		padding: clamp(2rem, 5vw, 4rem) var(--dz-pad);
	}
	.dz-hero-content { max-width: 520px; }
}

/* --- Tablet/mobile: stack — tekst na kremie, pod nim zdjęcie jako baner --- */
@media (max-width: 979px) {
	.dz-hero { display: flex; flex-direction: column-reverse; }
	.dz-hero-media {
		aspect-ratio: 16 / 10;
		border-radius: var(--dz-r-lg); overflow: hidden;
		margin: 0 var(--dz-pad) clamp(2rem, 6vw, 3rem);
		box-shadow: var(--dz-shadow-md);
	}
	.dz-hero-inner { padding: clamp(2.5rem, 7vw, 3.75rem) var(--dz-pad) clamp(.5rem, 3vw, 1rem); }
}

/* --- Animacja wejścia --- */
@media (prefers-reduced-motion: no-preference) {
	.dz-hero-label   { animation: dz-rise .6s .05s both; }
	.dz-hero-title   { animation: dz-rise .6s .15s both; }
	.dz-hero-text    { animation: dz-rise .6s .25s both; }
	.dz-hero-actions { animation: dz-rise .6s .35s both; }
	.dz-hero-img     { animation: dz-fade-in 1s .05s both; }
}
@keyframes dz-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dz-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   PASEK CECH
   ============================================================ */
.dz-features { background: var(--dz-white); border-bottom: 1px solid var(--dz-border); }
.dz-features-inner {
	max-width: var(--dz-max); margin: 0 auto;
	padding: clamp(1.5rem,3vw,2.25rem) var(--dz-pad);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2.5vw,2rem);
}
.dz-feature { display: flex; align-items: flex-start; gap: .85rem; }
.dz-feature:not(:last-child) { border-right: 1px solid var(--dz-border); padding-right: clamp(1rem,2.5vw,2rem); }
.dz-feature-icon {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; flex-shrink: 0;
	background: var(--dz-green-pale); color: var(--dz-green-mid);
	border-radius: var(--dz-r-md);
}
.dz-feature-title { font-size: .96rem; margin: 0 0 .15rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.dz-feature-desc { font-size: .85rem; line-height: 1.45; color: var(--dz-text-muted); margin: 0; }

/* ============================================================
   NAJNOWSZE
   ============================================================ */
.dz-latest { background: var(--dz-cream); }

/* Responsywność paska cech */
@media (max-width: 900px) {
	.dz-features-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.dz-feature { border-right: none !important; padding-right: 0 !important; }
}
@media (max-width: 480px) {
	.dz-features-inner { grid-template-columns: 1fr; }
}