/* =====================================================================
   KATERING BAZYLIA
   Komponenty sekcji. Ladowane globalnie.

   Wczesniej te reguly byly rozbite na trzy arkusze ladowane warunkowo
   po slugu podstrony. Poniewaz te same komponenty wracaja na wielu
   podstronach, taki podzial zostawial czesc stron bez stylow.
   ===================================================================== */

/* ==== z pliku home.css ==== */

/* =====================================================================
   KATERING BAZYLIA
   Strona glowna. Ladowana wylacznie na froncie.

   Rytm sekcji jest wzorowany na serwisie referencyjnym: jasne tlo,
   biale zaokraglone karty z miekkim cieniem, pelnoszerokosciowe pasy
   kontrastowe. Kolory podmienione na brandbook Bazylii: zamiast zieleni
   szalwiowej oliwka #496433, zamiast pomaranczu miedz #B87333.
   ===================================================================== */

.home { --section-y: clamp(88px, 8vw, 136px); }

/* ---------------------------------------------------------------------
   1. HERO
   Zdjecie w zaokraglonym panelu, nie na cale tlo. Tekst siedzi w srodku
   panelu na scrimie, dokladnie jak w referencji.
   --------------------------------------------------------------------- */

/* Hero idzie na prawie pelna szerokosc okna: kontener traci limit
   szerokosci i zostaje mu tylko waski margines, zeby zaokraglone
   rogi panelu nie stykaly sie z krawedzia ekranu. Tresc w srodku
   wraca na wspolna siatke, wiec lewa krawedz naglowka nadal stoi
   w jednej linii z sekcjami ponizej. */
.bz-hero { padding-top: 0; padding-bottom: var(--section-y); }

.bz-hero > .bz-shell {
	max-width: none;
	padding-inline: clamp(0.5rem, 1.2vw, 1rem);
}

/* Panel dostaje zapas u gory, zeby plywajaca wyspa naglowka
   nie naklada sie na chip zaufania. */
.bz-hero__inner {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bz-hero__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 82vh, 880px);
	padding-block: clamp(6rem, 10vw, 8rem) clamp(3.5rem, 7vw, 6rem);
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--bg-alt);
	isolation: isolate;
}

.bz-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* Warstwa pelnoekranowa omija globalna proporcje 4/5. */
.bz-hero__layer {
	width: 100%; height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 40%;
}

/* Scrim kierunkowy, mocniejszy po lewej, gdzie siedzi tekst.
   Plaskie przyciemnienie zabiloby zdjecie po prawej stronie kadru. */
.bz-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(20, 14, 6, 0.86) 0%,
		rgba(20, 14, 6, 0.66) 42%,
		rgba(20, 14, 6, 0.18) 78%,
		rgba(20, 14, 6, 0.34) 100%
	);
}

.bz-hero__panel > .bz-shell { position: relative; width: 100%; }
.bz-hero__col { max-width: 44rem; }
.bz-hero__col > * + * { margin-top: 1.5rem; }

/* Tekst hero lezy na zdjeciu, wiec caly idzie w kremie. */
.bz-hero .bz-h1,
.bz-hero .bz-h1 em { color: var(--color-cream); }
.bz-hero .bz-h1 em { opacity: 0.92; }
.bz-hero .bz-lede { color: rgba(249, 241, 232, 0.88); }

/* Chip zaufania. Kremowa pigulka na zdjeciu daje pewny kontrast
   niezaleznie od tego, jaki kadr wejdzie w tlo. */
.bz-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 8px 20px 8px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--color-cream);
	color: var(--color-black);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
}

.bz-chip__mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background-color: var(--accent);
	color: var(--color-cream);
}

.bz-chip__mark svg { width: 17px; height: 17px; }

.bz-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

/* Przycisk poboczny lezy na zdjeciu, wiec potrzebuje kremowego konturu. */
.bz-hero .bz-cta--outline {
	border-color: rgba(249, 241, 232, 0.55);
	color: var(--color-cream);
}

.bz-hero .bz-cta--outline:hover,
.bz-hero .bz-cta--outline:focus-visible {
	background-color: var(--color-cream);
	border-color: var(--color-cream);
	color: var(--color-black);
}

/* ---------------------------------------------------------------------
   2. PAS ZAUFANIA
   Rzad kart o roznej zawartosci: lista cech, dwa kadry i licznik.
   Rozna tresc w kazdym kaflu, wiec nie czyta sie jak trzy te same karty.
   --------------------------------------------------------------------- */

.bz-trust { padding-bottom: var(--section-y); }

.bz-trust__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 1.15fr;
	gap: 1.25rem;
	align-items: stretch;
}

.bz-trust__card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.bz-trust__card--pad { padding: clamp(1.75rem, 2.5vw, 2.25rem); }

.bz-trust__title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.15;
}

.bz-checks { margin-top: 1.5rem; }

.bz-checks li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--hairline);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.bz-checks li:last-child { border-bottom: 0; padding-bottom: 0; }

.bz-checks__mark {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background-color: var(--bg-alt);
	color: var(--accent-ink);
}

.bz-checks__mark svg { width: 15px; height: 15px; }

/* Kadr wypelnia caly kafel, wiec omija proporcje 4/5. */
.bz-trust__photo { position: relative; min-height: 320px; }

.bz-trust__photo img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* Licznik limitu. Jedyne miejsce, gdzie liczba dostaje skale display. */
.bz-trust__meter {
	justify-content: center;
	background-color: var(--band);
	color: var(--color-cream);
}

.bz-trust__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(249, 241, 232, 0.65);
}

.bz-trust__count {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	/* Cyfry stalej szerokosci: bez tego licznik skacze przy odliczaniu. */
	font-variant-numeric: tabular-nums;
}

.bz-trust__num {
	font-size: clamp(3.25rem, 2rem + 4vw, 5rem);
	color: var(--color-cream);
}

.bz-trust__unit {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(249, 241, 232, 0.7);
}

.bz-trust__track {
	position: relative;
	height: 4px;
	margin-top: 1.5rem;
	border-radius: 4px;
	overflow: hidden;
	background-color: rgba(249, 241, 232, 0.2);
}

/* Animowany jest transform, nigdy width: nie przelicza sie layout. */
.bz-trust__fill {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	background-color: var(--accent);
	will-change: transform;
}

html:not(.bz-js) .bz-trust__fill { transform: scaleX(1); }

.bz-trust__note {
	margin-top: 1rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-cream);
}

/* ---------------------------------------------------------------------
   3. PAS OLIWKOWY: DLACZEGO BAZYLIA
   Trzy powody z numerowanymi kolkami. Numeracja niesie tu kolejnosc
   argumentow, a nie ozdobnik.
   --------------------------------------------------------------------- */

.bz-why__head { max-width: 46rem; }

.bz-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-why__col { padding-top: 2rem; border-top: 1px solid rgba(249, 241, 232, 0.25); }
.bz-why__col > * + * { margin-top: 1rem; }

.bz-why__num {
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(249, 241, 232, 0.4);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-cream);
	font-variant-numeric: tabular-nums;
}

.bz-why__col h3 { font-size: 1.375rem; max-width: 18ch; }

/* ---------------------------------------------------------------------
   5. MENU
   --------------------------------------------------------------------- */

.bz-menu__head {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: var(--gap);
	align-items: end;
}

.bz-menu__rail {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-dish {
	display: flex;
	flex-direction: column;
	padding: 1rem 1rem 1.75rem;
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.bz-dish:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.bz-dish .bz-figure { border-radius: var(--radius-sm); }

.bz-dish__body { padding: 1.5rem 0.75rem 0; }
.bz-dish__body > * + * { margin-top: 0.75rem; }

.bz-dish__name {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.25;
}

.bz-dish__desc { font-size: 0.9375rem; color: var(--ink-soft); }

.bz-dish__macros {
	display: inline-block;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--bg-alt);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-ink);
}

/* ---------------------------------------------------------------------
   6. SZEF KUCHNI
   --------------------------------------------------------------------- */

.bz-chef__grid {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: var(--gap);
	align-items: center;
}

.bz-chef__body > * + * { margin-top: 1.5rem; }
.bz-chef__body .bz-h2 { margin-top: 0.5rem; }

/* Cytat szefa kuchni: gruba miedziana linia zamiast cudzyslowu-ozdobnika. */
.bz-quote {
	padding-left: 1.75rem;
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--ink);
}

/* ---------------------------------------------------------------------
   7. PROCES
   --------------------------------------------------------------------- */

.bz-process__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-step {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

.bz-step > * + * { margin-top: 1rem; }

.bz-step__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -2px;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.bz-step__title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------
   9. DOMKNIECIE
   --------------------------------------------------------------------- */

.bz-final { text-align: center; }

.bz-final__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.bz-final__title {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.08;
	max-width: 18ch;
	text-wrap: balance;
	color: var(--color-cream);
}

.bz-final .bz-lede { margin-inline: auto; }

.bz-final__spots {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(249, 241, 232, 0.75);
}

/* Puls w czystym CSS. Skala 1.025 i wolne tempo: mocniejszy ruch
   na przycisku tej wielkosci wyglada jak baner reklamowy.
   Animowany jest wylacznie transform. */
@keyframes bz-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.025); }
}

.bz-cta--pulse { animation: bz-pulse 2.4s ease-in-out infinite; }

/* Hover przejmuje transform, wiec petla musi ustapic, inaczej
   przycisk drgalby pod kursorem. */
.bz-cta--pulse:hover,
.bz-cta--pulse:focus-visible { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   RESPONSYWNOSC
   --------------------------------------------------------------------- */

@media (max-width: 1100px) {

	.bz-trust__grid { grid-template-columns: 1fr 1fr; }
	.bz-trust__card--wide { grid-column: 1 / -1; }

	.bz-menu__rail { grid-template-columns: repeat(2, 1fr); }

	.bz-why__grid,
	.bz-process__list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {


	.bz-chef__grid,
	.bz-menu__head { grid-template-columns: 1fr; }

	.bz-chef__portrait { order: -1; }
	.bz-menu__head { gap: 1.5rem; }
}

@media (max-width: 700px) {

	.bz-trust__grid { grid-template-columns: 1fr; }
	.bz-trust__photo { min-height: 0; aspect-ratio: 4 / 3; }

	.bz-why__grid,
	.bz-process__list { grid-template-columns: 1fr; gap: 1.25rem; }

	.bz-why__col { padding-top: 1.5rem; }

	/* Menu zmienia sie w poziomy slider ze snapem zamiast w kolumne
	   czterech ogromnych kafli wymagajacych dlugiego scrolla. */
	.bz-menu__rail {
		display: flex;
		gap: 1rem;
		margin-inline: calc(var(--gutter) * -1);
		padding: 0.5rem var(--gutter) 1.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.bz-menu__rail::-webkit-scrollbar { display: none; }

	.bz-dish { flex: 0 0 78%; scroll-snap-align: start; }
	.bz-dish:hover { transform: none; }

	.bz-hero__panel { min-height: 0; padding-inline: 0; }
	.bz-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bz-trust__fill { transform: scaleX(1); }
	.bz-cta--pulse { animation: none; }
}

/* Kotwica "Zobacz menu" celuje w sekcje przykryta lepkim naglowkiem,
   wiec cel scrolla musi zejsc o jego wysokosc. */
.home section[id] { scroll-margin-top: 96px; }


/* =====================================================================
   NOWE SEKCJE WEDLUG DOKUMENTU KLIENTA
   ===================================================================== */

/* --- USP pod hero: piec pozycji, nie cztery. Auto-fit zamiast
   sztywnych kolumn, wiec piata nie zostaje sama w rzedzie. --- */
.bz-usp { padding-bottom: var(--section-y); }

.bz-usp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2rem;
}

.bz-usp__col { padding-top: 1.5rem; border-top: 2px solid var(--accent); }

.bz-usp__title {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin-bottom: 0.6rem;
}

.bz-usp__col .bz-prose { font-size: 0.875rem; }

/* --- Szesc powodow na pasie oliwkowym --- */
.bz-why__grid--six { grid-template-columns: repeat(3, 1fr); row-gap: clamp(2.5rem, 4vw, 3.5rem); }

.bz-why__grid--six .bz-why__num {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	place-items: start;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

/* --- Lista pozostalych dan tygodnia --- */
.bz-dishlist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.bz-dishlist li {
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--hairline);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* --- Dwa spojrzenia --- */
.bz-two__head { max-width: 46rem; }
.bz-two__head > * + * { margin-top: 1.25rem; }

.bz-two__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-person > * + * { margin-top: 1rem; }
.bz-person__photo { margin-bottom: 1.75rem; }

/* Brak zdjecia: monogram na kremowym tle zamiast pustej ramki. */
.bz-person__photo--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background-color: var(--bg-card);
}

.bz-person__photo--empty span {
	font-family: var(--font-display);
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 700;
	letter-spacing: -2px;
	color: var(--accent);
	opacity: 0.35;
}

.bz-person__name {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.15;
}

/* --- Detal robi roznice / okres zamowienia --- */
.bz-detail__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-detail { padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.bz-detail > * + * { margin-top: 0.75rem; }

.bz-detail h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.bz-detail .bz-prose { font-size: 0.9375rem; }

/* Wariant kartowy: uzywany tam, gdzie kafle stoja na tle bg-alt
   i sama linia by sie na nim zgubila. */
.bz-detail--card {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border-top: 0;
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

@media (max-width: 1000px) {
	.bz-why__grid--six { grid-template-columns: repeat(2, 1fr); }
	.bz-detail__grid { grid-template-columns: repeat(2, 1fr); }
	.bz-two__grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 700px) {
	.bz-why__grid--six { grid-template-columns: 1fr; }
	.bz-detail__grid { grid-template-columns: 1fr; }
	.bz-usp__grid { gap: 1.75rem; }
}


/* ==== z pliku about.css ==== */

/* =====================================================================
   KATERING BAZYLIA
   Podstrona "O Bazylii". Ładowana wyłącznie na tej podstronie.

   Rytm wzorowany na podstronie "Dlaczego My" z serwisu referencyjnego,
   kolory z brandbooka.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. OTWARCIE
   Wycentrowany nagłówek nad pełnoszerokościowym kadrem.
   --------------------------------------------------------------------- */

.bz-about-hero { padding-bottom: 0; }

.bz-about-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
}

.bz-about-hero__head .bz-h1 { max-width: 20ch; }
.bz-about-hero__head .bz-lede { max-width: 52ch; }

/* Kadr wychodzi poza kontener na całą szerokość okna. calc z 50vw
   działa niezależnie od tego, jak szeroki jest shell. */
.bz-about-hero__media {
	position: relative;
	width: 100vw;
	margin-top: clamp(3rem, 5vw, 4.5rem);
	margin-left: calc(50% - 50vw);
	height: clamp(360px, 46vw, 620px);
	overflow: hidden;
	background-color: var(--bg-alt);
}

/* Kadr pełnoekranowy, więc omija globalną proporcję 4/5. */
.bz-about-hero__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 45%;
	/* Zapas na ruch paralaksy. */
	scale: 1.1;
	will-change: transform;
}

/* ---------------------------------------------------------------------
   2. SIATKA BENTO
   Kafle tekstowe przemieszane ze zdjęciami. Liczba komórek odpowiada
   liczbie treści: nie ma pustych kafli dosypanych dla symetrii.
   --------------------------------------------------------------------- */

.bz-bento__head {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--gap);
	align-items: end;
}

.bz-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.bz-bento__cell {
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

.bz-bento__cell--text { padding: clamp(1.75rem, 2.6vw, 2.25rem); }

.bz-bento__cell--text h3 {
	font-size: 1.375rem;
	line-height: 1.2;
	max-width: 16ch;
}

.bz-bento__cell--text .bz-prose {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

/* Kafel ze zdjęciem wypełnia komórkę, więc omija proporcję 4/5. */
.bz-bento__cell--photo { position: relative; min-height: 300px; }

.bz-bento__cell--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

/* Jeden kafel na dwa wiersze łamie regularność siatki. To jedyne
   miejsce, gdzie rytm zostaje celowo zaburzony. */
.bz-bento__cell--tall { grid-row: span 2; }

/* ---------------------------------------------------------------------
   3. PAS OLIWKOWY: CZEGO NIE MA
   Cztery kolumny z ikoną w kółku. Na oliwce wszystko idzie w kremie:
   miedź na tym tle daje 1.76:1 i jest nieczytelna.
   --------------------------------------------------------------------- */

.bz-without { text-align: center; }

.bz-without__head { margin-inline: auto; max-width: 24ch; }

.bz-without__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
	margin-top: clamp(3rem, 5vw, 4.5rem);
	text-align: left;
}

.bz-without__col > * + * { margin-top: 1rem; }

.bz-without__mark {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border: 1px solid rgba(249, 241, 232, 0.35);
	color: var(--color-cream);
}

.bz-without__mark svg { width: 30px; height: 30px; }

.bz-without__col h3 { font-size: 1.25rem; line-height: 1.25; max-width: 14ch; }

.bz-without__col .bz-prose { font-size: 0.9375rem; }

/* ---------------------------------------------------------------------
   4. SZEF KUCHNI
   Portret i biała karta, która nachodzi na zdjęcie.
   --------------------------------------------------------------------- */

.bz-chefpage__name {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.15;
	/* Kursywa z zejściami potrzebuje zapasu, inaczej ogonki się przycinają. */
	padding-bottom: 0.1em;
	text-align: center;
	color: var(--accent-ink);
}

.bz-chefpage__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	margin-top: clamp(2.5rem, 4vw, 4rem);
}

.bz-chefpage__portrait {
	position: relative;
	z-index: 2;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--bg-alt);
}

.bz-chefpage__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	scale: 1.08;
	will-change: transform;
}

/* Karta wchodzi pod portret ujemnym marginesem i dostaje zapas
   z lewej, żeby tekst nie zaczynał się pod zdjęciem. */
.bz-chefpage__card {
	position: relative;
	z-index: 1;
	margin-left: -4rem;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) calc(4rem + clamp(2rem, 4vw, 3.5rem));
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow-lg);
}

.bz-chefpage__card > * + * { margin-top: 1.25rem; }

.bz-chefpage__h { font-size: 1.375rem; line-height: 1.2; }

.bz-chefpage__h + .bz-prose { margin-top: 0.75rem; }
.bz-prose + .bz-chefpage__h { margin-top: 2rem; }

.bz-chefpage__card .bz-quote { margin-top: 2rem; }

/* ---------------------------------------------------------------------
   RESPONSYWNOŚĆ
   --------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.bz-without__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {

	.bz-bento__head { grid-template-columns: 1fr; gap: 1.5rem; }

	.bz-bento { grid-template-columns: repeat(2, 1fr); }

	/* Komórka na dwa wiersze traci sens przy dwóch kolumnach. */
	.bz-bento__cell--tall { grid-row: auto; min-height: 340px; }

	.bz-chefpage__grid { grid-template-columns: 1fr; }

	/* Nachodzenie karty na portret nie działa w jednej kolumnie:
	   zamiast tego karta wjeżdża lekko od dołu. */
	.bz-chefpage__card {
		margin-left: 0;
		margin-top: -3rem;
		margin-inline: clamp(0px, 3vw, 2rem);
		padding: clamp(2rem, 5vw, 3rem);
	}
}

@media (max-width: 700px) {

	.bz-bento { grid-template-columns: 1fr; }
	.bz-bento__cell--photo, .bz-bento__cell--tall { min-height: 0; aspect-ratio: 4 / 3; }

	.bz-without__grid { grid-template-columns: 1fr; gap: 2.5rem; }

	.bz-about-hero__media { height: clamp(300px, 70vw, 420px); }
}

/* ---------------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bz-about-hero__media img,
	.bz-chefpage__portrait img { scale: 1; }
}


/* ==== z pliku pricing.css ==== */

/* =====================================================================
   KATERING BAZYLIA
   Podstrona "Cennik". Ładowana wyłącznie na tej podstronie.
   ===================================================================== */

.bz-price-intro > .bz-shell > * + * { margin-top: 1.5rem; }

/* ---------------------------------------------------------------------
   SIATKA PAKIETÓW
   Trzy równe kolumny są tu poprawne: porównywalne oferty muszą stać
   obok siebie w tej samej ramie, żeby dały się zestawić wzrokiem.
   --------------------------------------------------------------------- */

.bz-price__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch;
}

.bz-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

/* Pakiet z największą oszczędnością dostaje oliwkowe tło zamiast samej
   obwódki: różnica ma być widoczna od razu, bez czytania. */
.bz-tier--best {
	background-color: var(--band);
	color: var(--color-cream);
	box-shadow: var(--shadow-lg);
}

.bz-tier--best .bz-tier__name,
.bz-tier--best .bz-tier__amount { color: var(--color-cream); }

.bz-tier--best .bz-tier__unit,
.bz-tier--best .bz-tier__desc,
.bz-tier--best .bz-tier__facts dt { color: rgba(249, 241, 232, 0.7); }

.bz-tier--best .bz-tier__facts dd { color: var(--color-cream); }
.bz-tier--best .bz-tier__facts > div { border-color: rgba(249, 241, 232, 0.2); }

/* Etykieta wyróżnienia. Miedź na oliwce daje 1.76:1, więc tło musi być
   miedziane, a tekst czarny: to daje 5.5:1 i przechodzi AA. */
.bz-tier__flag {
	position: absolute;
	top: 0;
	left: clamp(1.75rem, 3vw, 2.5rem);
	transform: translateY(-50%);
	padding: 7px 16px;
	border-radius: var(--radius-pill);
	background-color: var(--accent);
	color: var(--color-black);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bz-tier__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.bz-tier__price {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1.25rem;
}

.bz-tier__amount {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	/* Cyfry stałej szerokości: kolumny mają się zgadzać w pionie. */
	font-variant-numeric: tabular-nums;
}

.bz-tier__unit {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* ---------------------------------------------------------------------
   OSZCZĘDNOŚĆ
   --------------------------------------------------------------------- */



.bz-tier__save strong {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--accent-ink);
}

.bz-tier__save span {
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

/* W wyróżnionym pakiecie tło jest oliwkowe, więc ramka oszczędności
   musi się od niego odciąć jasnym polem. */
.bz-tier--best .bz-tier__save {
	background-color: rgba(249, 241, 232, 0.12);
	color: var(--color-cream);
}

.bz-tier--best .bz-tier__save strong { color: var(--color-cream); }
.bz-tier--best .bz-tier__save span { color: rgba(249, 241, 232, 0.75); }

/* Stawka wyjściowa nie ma czym się chwalić, więc dostaje samą linię
   zamiast wypełnionego pola: inaczej wyglądałaby na promocję. */
.bz-tier__save--base {
	background-color: transparent;
	padding: 1rem 0;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
	border-radius: 0;
}

/* ---------------------------------------------------------------------
   DANE PAKIETU
   --------------------------------------------------------------------- */

.bz-tier__facts { margin-top: 1.5rem; }

.bz-tier__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--hairline);
}

.bz-tier__facts dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.bz-tier__facts dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.bz-tier__desc {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* margin-top auto dosuwa przycisk do dołu karty, więc wszystkie trzy
   CTA stoją w jednej linii niezależnie od długości opisu. */
.bz-tier__cta { margin-top: auto; padding-top: 2rem; }
.bz-tier__cta .bz-cta { width: 100%; }

.bz-tier--best .bz-cta {
	background-color: var(--color-cream);
	color: var(--color-black);
}

.bz-tier--best .bz-cta:visited { color: var(--color-black); }

.bz-tier--best .bz-cta:hover,
.bz-tier--best .bz-cta:focus-visible {
	background-color: #FFFFFF;
	color: var(--color-black);
}

.bz-price__note {
	max-width: 62ch;
	margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------------
   RESPONSYWNOŚĆ
   --------------------------------------------------------------------- */

@media (max-width: 1000px) {

	.bz-price__grid { grid-template-columns: 1fr; gap: 2.5rem; }

	/* Etykieta wyjeżdża poza kartę, więc w układzie jednokolumnowym
	   karta potrzebuje zapasu, żeby etykieta nie nachodziła na sąsiada. */
	.bz-tier--best { margin-top: 0.5rem; }
}

/* --- Kaloryka nad nazwa wariantu --- */
.bz-tier__kcal {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.5rem;
}

.bz-tier--best .bz-tier__kcal { color: rgba(249, 241, 232, 0.75); }

/* --- Rachunek: kazda linia to jeden krok wyliczenia --- */
.bz-tier__save {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-sm);
	background-color: var(--bg-alt);
}

.bz-tier__saveline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.bz-tier__saveline s { color: var(--ink-mute); }

/* Kwota po rabacie jest tym, co klient faktycznie zaplaci,
   wiec dostaje najwiekszy stopien pisma w calym rachunku. */
.bz-tier__saveline--strong { color: var(--ink); }

.bz-tier__saveline--strong strong {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	color: var(--accent-ink);
}

.bz-tier__saveline em {
	font-style: normal;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-ink);
	text-align: right;
}

/* Na oliwce miedziany tekst daje 1.76:1, wiec wszystko idzie w kremie. */
.bz-tier--best .bz-tier__save { background-color: rgba(249, 241, 232, 0.12); }
.bz-tier--best .bz-tier__saveline { color: rgba(249, 241, 232, 0.78); }
.bz-tier--best .bz-tier__saveline s { color: rgba(249, 241, 232, 0.5); }
.bz-tier--best .bz-tier__saveline--strong { color: var(--color-cream); }
.bz-tier--best .bz-tier__saveline--strong strong,
.bz-tier--best .bz-tier__saveline em { color: var(--color-cream); }

/* --- Odbior i dostawa --- */
.bz-extra {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--radius);
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

.bz-extra__title {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.5px;
}

.bz-extra__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.bz-extra__grid > div { padding-top: 1rem; border-top: 1px solid var(--hairline); }

.bz-extra dt {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.bz-extra dd {
	margin: 0.4rem 0 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
}

@media (max-width: 760px) {
	.bz-extra__grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   SPLIT 50/50 W JEDNEJ KARCIE
   Uzywany w sekcji narracyjnej na stronie glownej. Zdjecie wypelnia
   polowe karty, tekst druga polowe.
   --------------------------------------------------------------------- */

.bz-box__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--bg-card);
	box-shadow: var(--shadow);
}

.bz-box__media {
	position: relative;
	min-height: clamp(400px, 46vw, 640px);
	background-color: var(--bg-alt);
}

/* Kadr wypelnia polowe karty, wiec omija globalna proporcje 4/5. */
.bz-box__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	/* Zapas na ruch paralaksy. */
	scale: 1.1;
	will-change: transform;
}

.bz-box__body {
	display: flex;
	align-items: center;
	padding: clamp(2.5rem, 5vw, 4.5rem);
}

.bz-box__inner > * + * { margin-top: 1.75rem; }

@media (max-width: 1000px) {
	.bz-box__grid { grid-template-columns: 1fr; }
	.bz-box__media { min-height: 0; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
	.bz-box__media img { scale: 1; }
}