/*
Theme Name: ALEE Bistro
Theme URI: https://aleebistro.pl
Description: Motyw strony ALEE Bistro w Jagiellońskim Centrum Innowacji w Krakowie (kierunek „Trzy kropki”). Menu tygodnia, zdjęcia, teksty, godziny i kontakt zmienia się w panelu, w zakładce „ALEE Bistro”.
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aleebistro
*/

/* ---------- Czcionka (hostowana lokalnie, bez Google Fonts) ---------- */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(assets/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Podstawy ---------- */

:root {
	--alee-orange: #F36621;
	--alee-pad: clamp(20px, 4vw, 40px);
	--alee-max: 1280px;

	/* Wersja szałwiowa (jasna). Wersję śliwkową nadpisuje klasa na <body> niżej. */
	--alee-ground: #EEF2EA;
	--alee-ink: #14352C;
	--alee-muted: #3E5A50;
	--alee-rule: #D5E0D6;
	--alee-hover: #B8430E;
	--alee-focus: #14352C;

	/* Talerze: „kropki” w nagłówku i duże zdjęcie przy imprezach. */
	--alee-plate: #FFFFFF;
	--alee-plate-empty: #DDE6D7;
	--alee-ring: #14352C;

	/* Jasne powierzchnie: ramka z menu i stopka. */
	--alee-surface: #FFFFFF;
	--alee-surface-ink: #14352C;
	--alee-surface-muted: #3E5A50;
	--alee-surface-rule: #EEF2EA;
	--alee-surface-sub: #EEF2EA;
	--alee-surface-hover: #B8430E;

	/* Blok „Ale blisko.” */
	--alee-block: #14352C;
	--alee-block-ink: #EEF2EA;
	--alee-block-soft: #D5E0D6;
	--alee-block-rule: #3E5A50;
	--alee-block-dash: #6F8A7E;

	/* Skróty „Zmień…” dla zalogowanej obsługi. */
	--alee-edit-bg: #1D2327;
	--alee-edit-ink: #FFFFFF;
	--alee-edit-hover: #000000;

	/* Okno z powiększonym zdjęciem dania. */
	--alee-zoom-bg: rgba(12, 31, 26, 0.96);
	--alee-zoom-ink: #EEF2EA;
}

/* Wersja śliwkowa (ciemna): Wygląd → Dostosuj → Kolorystyka strony. */
body.alee-scheme-plum {
	--alee-ground: #2C1830;
	--alee-ink: #F1E9F5;
	--alee-muted: #D9C7E6;
	--alee-rule: #5A3B62;
	--alee-hover: #FF9A66;
	--alee-focus: #F1E9F5;

	--alee-plate: #FFFFFF;
	--alee-plate-empty: #E9DDF1;
	--alee-ring: #CDB7E0;

	--alee-surface: #E9DDF1;
	--alee-surface-ink: #2C1830;
	--alee-surface-muted: #5A3B62;
	--alee-surface-rule: #CDB7E0;
	--alee-surface-sub: #F6F0FA;
	--alee-surface-hover: #9C3608;

	--alee-block: #3A2140;
	--alee-block-ink: #F1E9F5;
	--alee-block-soft: #D9C7E6;
	--alee-block-rule: #6E4D77;
	--alee-block-dash: #8E6F99;

	--alee-edit-bg: #FFFFFF;
	--alee-edit-ink: #1D2327;
	--alee-edit-hover: #F1E9F5;

	--alee-zoom-bg: rgba(27, 14, 30, 0.96);
	--alee-zoom-ink: #F1E9F5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--alee-ground);
	color: var(--alee-ink);
	font-family: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-underline-offset: 3px;
}

h1,
h2,
h3 {
	overflow-wrap: break-word;
}

:focus-visible {
	outline: 3px solid var(--alee-focus);
	outline-offset: 3px;
}

.alee-panel :focus-visible,
.alee-footer :focus-visible {
	outline-color: var(--alee-surface-ink);
}

.alee-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.alee-wrap {
	width: 100%;
	max-width: var(--alee-max);
	margin-inline: auto;
	padding-inline: var(--alee-pad);
}

.alee-skip {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--alee-ink);
	color: var(--alee-ground);
	font-weight: 700;
}

.alee-skip:focus {
	top: 12px;
}

/* ---------- Przyciski i linki ---------- */

.alee-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--alee-orange);
	color: #000000;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.alee-btn:hover {
	background: #FF8040;
}

.alee-btn--small {
	min-height: 48px;
	padding: 0 24px;
}

.alee-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.alee-link:hover {
	color: var(--alee-hover);
}

/* ---------- Nagłówek strony ---------- */

.alee-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-block: 20px;
}

.alee-logo {
	display: flex;
}

.alee-logo img {
	display: block;
	width: auto;
	height: 84px;
}

.alee-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 28px;
	font-weight: 600;
}

.alee-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	text-decoration: none;
}

.alee-nav__link::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--alee-orange);
}

.alee-nav__link:hover {
	color: var(--alee-hover);
}

/* ---------- Hero: „Ale ●●● smacznie.” ---------- */

.alee-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 40px 96px;
}

/* --alee-chars ustawia PHP: im dłuższe słowo w nagłówku, tym mniejsza czcionka. */
.alee-hero__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.04em;
	font-weight: 800;
	font-size: clamp(40px, min(17.5vw, calc(165vw / var(--alee-chars, 9))), min(184px, calc(2200px / var(--alee-chars, 9))));
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.alee-hero__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.08em 0.2em;
}

.alee-dots {
	display: flex;
	gap: 0.12em;
}

.alee-dot {
	flex: none;
	display: flex;
	width: 0.925em;
	height: 0.925em;
	padding: 0.065em;
	border-radius: 50%;
	background: var(--alee-plate);
	box-shadow: 0 0 0 2px var(--alee-ring);
}

.alee-dot__in {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: var(--alee-plate-empty);
}

.alee-dot__in img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zmieniające się zdjęcia: kolejne leżą jedno na drugim i przenikają (assets/js/site.js). */
.alee-dot__in[data-alee-rotor] {
	position: relative;
}

.alee-dot__in .alee-rotor__img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.alee-dot__in .alee-rotor__img.is-on {
	opacity: 1;
}

.alee-dot__in .alee-rotor__img.is-top {
	z-index: 1;
}

.alee-dot__in--empty img {
	width: 58%;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.alee-dots .alee-dot {
		animation: alee-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
	}

	.alee-dots .alee-dot:nth-child(2) {
		animation-delay: 0.12s;
	}

	.alee-dots .alee-dot:nth-child(3) {
		animation-delay: 0.24s;
	}

	@keyframes alee-pop {
		from {
			transform: scale(0.4);
			opacity: 0;
		}
	}
}

.alee-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
}

.alee-hero__intro {
	margin: 0;
	max-width: 33em;
	font-size: clamp(19px, 1.7vw, 22px);
	line-height: 1.4;
	text-wrap: pretty;
}

.alee-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

/* ---------- Ramka „Dziś w miskach” ---------- */

.alee-panel {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 24px 32px;
	align-items: start;
	padding: 28px 32px;
	border-radius: 28px;
	background: var(--alee-surface);
	color: var(--alee-surface-ink);
	scroll-margin-top: 24px;
}

.alee-panel__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.alee-panel__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.alee-panel__date {
	color: var(--alee-surface-muted);
}

.alee-panel__empty {
	grid-column: span 2;
	margin: 0;
	font-size: 20px;
	font-weight: 600;
}

.alee-dish {
	display: flex;
	gap: 14px;
}

.alee-dish::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--alee-orange);
}

.alee-dish__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.alee-dish__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--alee-surface-muted);
}

.alee-dish__name {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
}

.alee-week {
	grid-column: 1 / -1;
	border-top: 2px solid var(--alee-surface-rule);
	padding-top: 8px;
}

.alee-week__summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}

.alee-week__summary::-webkit-details-marker {
	display: none;
}

.alee-week__summary::after {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.alee-week[open] .alee-week__summary::after {
	margin-top: 4px;
	transform: rotate(225deg);
}

.alee-week__summary:hover {
	color: var(--alee-surface-hover);
}

.alee-week__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 16px;
	padding-block: 12px 4px;
}

.alee-week__day {
	padding: 16px 18px;
	border-radius: 18px;
	background: var(--alee-surface-sub);
}

.alee-week__day.is-current {
	box-shadow: inset 0 0 0 2px var(--alee-surface-ink);
}

.alee-week__name {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	text-transform: capitalize;
}

.alee-week__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 16px;
	line-height: 1.3;
}

.alee-week__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--alee-surface-muted);
}

.alee-week__price {
	white-space: nowrap;
	font-weight: 700;
}

.alee-week__none {
	margin: 0;
	font-size: 16px;
	color: var(--alee-surface-muted);
}

/* ---------- Galeria dań: obrotowy stół ---------- */

.alee-galeria {
	margin-bottom: 96px;
	scroll-margin-top: 24px;
}

.alee-galeria__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 36px;
}

.alee-galeria__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 40px;
}

/* Bez JavaScriptu: zwykły pasek talerzy przewijany w bok. */
.alee-stol__blat,
.alee-stol__panel {
	display: none;
}

.alee-stol__list {
	margin: 0;
	padding: 8px var(--alee-pad) 20px;
	list-style: none;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--alee-pad);
}

.alee-stol__item {
	flex: none;
	width: min(62vw, 260px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	scroll-snap-align: start;
	text-align: center;
	font-weight: 700;
}

.alee-stol__plate,
.alee-siatka__plate {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 1;
	padding: 6%;
	border-radius: 50%;
	background: var(--alee-plate);
	box-shadow: 0 0 0 2px var(--alee-ring);
	color: inherit;
	text-decoration: none;
	cursor: zoom-in;
}

/* Znaczek „powiększ”: widać go tylko na talerzu na szczycie stołu. */
.alee-plate-zoom {
	position: absolute;
	right: 7%;
	bottom: 7%;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--alee-surface);
	border-radius: 50%;
	background: var(--alee-surface-ink);
	color: var(--alee-surface);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.is-live .alee-plate-zoom {
	display: flex;
}

.is-live .is-active .alee-plate-zoom {
	opacity: 1;
}

/*
 * Z JavaScriptem (assets/js/stol.js dodaje klasę is-live).
 * --d: średnica talerza na szczycie, --r: promień stołu liczony do środków talerzy.
 * Każdy talerz obraca się wokół środka stołu o kąt --a, a sam talerz o ten sam kąt
 * w drugą stronę, żeby zdjęcie zawsze stało prosto.
 */
.alee-stol.is-live {
	--d: clamp(170px, 50vw, 360px);
	--r: calc(var(--d) * 1.95);
	position: relative;
	height: calc(var(--d) * 1.14 + 150px);
	padding-top: calc(var(--d) * 0.14);
	overflow: hidden;
	color: var(--alee-surface-ink);
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* Na szerokim ekranie widać też drugie talerze z każdej strony, więc stół sięga niżej. */
@media (min-width: 1180px) {
	.alee-stol.is-live {
		height: calc(var(--d) * 1.64);
	}
}

.alee-stol.is-dragging {
	cursor: grabbing;
}

.alee-stol.is-live :focus-visible {
	outline-color: var(--alee-surface-ink);
}

.is-live .alee-stol__blat {
	display: block;
	position: absolute;
	top: calc(var(--d) * 0.02);
	left: 50%;
	width: calc(var(--d) * 5.14);
	aspect-ratio: 1;
	margin-left: calc(var(--d) * -2.57);
	border-radius: 50%;
	background: var(--alee-surface);
	transform: rotate(var(--turn, 0deg));
}

.alee-stol__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--alee-orange);
	transform: rotate(var(--at, 0deg)) translateY(calc(var(--r) * -1));
}

.is-live .alee-stol__list {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: visible;
}

.is-live .alee-stol__item {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: var(--d);
	height: var(--d);
	margin-left: calc(var(--d) / -2);
	transform: rotate(var(--a, 0deg));
	transform-origin: 50% calc(var(--d) / 2 + var(--r));
	pointer-events: none;
	will-change: transform;
}

.is-live .alee-stol__item[hidden] {
	display: none;
}

/* Klikalny jest sam okrągły talerz, nie cały kwadrat wokół niego. */
.is-live .alee-stol__plate {
	height: 100%;
	transform: rotate(calc(var(--a, 0deg) * -1)) scale(var(--s, 1));
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.alee-stol.is-dragging .alee-stol__plate {
	cursor: grabbing;
}

.is-live .alee-stol__plate img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.is-live .alee-stol__name {
	display: none;
}

.is-live .alee-stol__panel {
	position: absolute;
	top: calc(var(--d) * 1.14 + 26px);
	left: 50%;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(100% - 32px, 640px);
	transform: translateX(-50%);
	cursor: default;
}

.alee-stol__caption {
	flex: 1;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}

.alee-stol__title {
	font-size: clamp(21px, 2.4vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.alee-stol__title[hidden],
.alee-stol__count[hidden],
.alee-stol__nav[hidden] {
	display: none;
}

.alee-stol.is-live:has(.alee-stol__nav[hidden]) {
	cursor: default;
}

.alee-stol__count {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--alee-surface-muted);
}

.alee-stol__nav {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.alee-stol__nav:hover:not(:disabled) {
	border-color: var(--alee-surface-ink);
	background: var(--alee-surface-ink);
	color: var(--alee-surface);
}

.alee-stol__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Podpowiedź dla obsługi, gdy galeria jest pusta (goście jej nie widzą). */
.alee-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 20px 24px;
	border: 2px dashed var(--alee-rule);
	border-radius: 24px;
}

.alee-note p {
	margin: 0;
	max-width: 40em;
}

/* ---------- Osobna strona ze wszystkimi daniami (template-galeria.php) ---------- */

.alee-dania-page {
	padding-block: 40px 96px;
}

.alee-dania-page__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-bottom: 56px;
}

.alee-dania-page__head .alee-content > :first-child {
	margin-top: 0;
}

.alee-dania-page__head .alee-content > :last-child {
	margin-bottom: 0;
}

.alee-siatka {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 40vw), 1fr));
	gap: 44px 36px;
}

.alee-siatka__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.alee-siatka__name {
	max-width: 14em;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

@media (prefers-reduced-motion: no-preference) {
	.alee-siatka__plate {
		transition: transform 0.2s ease;
	}

	.alee-siatka__plate:hover {
		transform: scale(1.04);
	}
}

.alee-dania-page__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 72px;
}

/* ---------- Powiększone zdjęcie dania (assets/js/galeria.js) ---------- */

html.alee-zoom-open {
	overflow: hidden;
}

.alee-zoom {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 20px clamp(16px, 4vw, 40px) 24px;
	border: 0;
	background: var(--alee-zoom-bg);
	color: var(--alee-zoom-ink);
	font: inherit;
}

.alee-zoom[open] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.alee-zoom::backdrop {
	background: transparent;
}

.alee-zoom :focus-visible {
	outline-color: var(--alee-zoom-ink);
}

.alee-zoom__figure {
	flex: 1;
	min-height: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
	cursor: zoom-out;
}

.alee-zoom__img {
	display: block;
	width: auto;
	max-width: min(100%, 1200px);
	height: auto;
	max-height: 100%;
	border-radius: 18px;
	object-fit: contain;
	opacity: 0;
	cursor: default;
	-webkit-user-drag: none;
	user-select: none;
}

.alee-zoom__img.is-ready {
	opacity: 1;
}

.alee-zoom__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: min(100%, 640px);
	margin-inline: auto;
}

.alee-zoom__caption {
	flex: 1;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}

.alee-zoom__name {
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.alee-zoom__count {
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.alee-zoom__btn {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.alee-zoom__btn:hover {
	border-color: var(--alee-zoom-ink);
	background: var(--alee-zoom-ink);
	color: #000000;
}

.alee-zoom__close {
	align-self: flex-end;
}

.alee-zoom__name[hidden],
.alee-zoom__count[hidden],
.alee-zoom__btn[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.alee-zoom[open] {
		animation: alee-zoom-in 0.2s ease;
	}

	.alee-zoom__img {
		transition: opacity 0.25s ease;
	}

	@keyframes alee-zoom-in {
		from {
			opacity: 0;
		}
	}
}

/* ---------- Sekcja „Ale blisko.” (dla firm) ---------- */

.alee-section-title {
	margin: 0;
	font-weight: 800;
	font-size: clamp(44px, 7.6vw, 104px);
	line-height: 0.92;
	letter-spacing: -0.035em;
}

.alee-lead {
	margin: 0;
	max-width: 34em;
	font-size: 20px;
	line-height: 1.45;
	text-wrap: pretty;
}

.alee-firmy {
	scroll-margin-top: 24px;
}

.alee-block {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: clamp(32px, 6vw, 80px);
	border-radius: 40px;
	background: var(--alee-block);
	color: var(--alee-block-ink);
}

.alee-block :focus-visible {
	outline-color: #FFFFFF;
}

.alee-block__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.alee-path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px clamp(8px, 1.6vw, 20px);
}

.alee-path__line {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.6vw, 20px);
}

.alee-path__pill {
	flex: none;
	padding: 10px 20px;
	border: 2px solid var(--alee-block-ink);
	border-radius: 999px;
	font-weight: 600;
}

.alee-path__dash {
	flex: 1;
	min-width: 6px;
	border-top: 2px dashed var(--alee-block-dash);
}

.alee-path__dot {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--alee-orange);
}

.alee-path__bowl {
	flex: none;
	height: 76px;
}

/* Miska z logo: para to trzy osobne warstwy, które lekko falują. */
.alee-bowl {
	position: relative;
	display: block;
	aspect-ratio: 574 / 601;
}

.alee-bowl img {
	display: block;
	width: 100%;
	height: 100%;
}

.alee-bowl__steam {
	position: absolute;
	inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.alee-bowl__steam {
		animation: alee-steam 3.4s ease-in-out infinite;
	}

	.alee-bowl__steam--2 {
		animation-delay: -1.1s;
	}

	.alee-bowl__steam--3 {
		animation-delay: -2.2s;
	}

	@keyframes alee-steam {
		0%,
		100% {
			transform: translateY(5%);
			opacity: 0.25;
		}

		50% {
			transform: translateY(-5%);
			opacity: 1;
		}
	}
}

.alee-path__time {
	flex: none;
	font-weight: 700;
}

.alee-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 32px 40px;
}

.alee-feature {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 20px;
	border-top: 2px solid var(--alee-block-rule);
}

.alee-feature__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.alee-feature__text {
	margin: 0;
	color: var(--alee-block-soft);
	text-wrap: pretty;
}

.alee-block .alee-btn {
	align-self: flex-start;
}

/* ---------- Sekcja „Ale impreza.” ---------- */

.alee-impreza {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: 48px 72px;
	align-items: center;
	padding-block: 104px;
	scroll-margin-top: 0;
}

.alee-impreza__visual {
	display: flex;
	align-items: flex-end;
	gap: 18px;
}

.alee-plate {
	flex: 1;
	display: flex;
	max-width: 460px;
	aspect-ratio: 1;
	padding: 14px;
	border-radius: 50%;
	background: var(--alee-plate);
	box-shadow: 0 0 0 2px var(--alee-ring);
}

.alee-plate .alee-dot__in--empty img {
	width: 46%;
}

.alee-impreza__dot {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--alee-orange);
}

.alee-impreza__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.alee-impreza__body .alee-lead {
	max-width: 30em;
}

.alee-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 600;
}

.alee-bullets li {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.alee-bullets li::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--alee-orange);
}

/* ---------- Dodatkowa treść ze strony głównej (edytor WordPressa) ---------- */

.alee-extra {
	padding-bottom: 96px;
}

/* ---------- Stopka ---------- */

.alee-footer {
	position: relative;
	margin-top: auto;
	border-radius: 40px 40px 0 0;
	background: var(--alee-surface);
	color: var(--alee-surface-ink);
	scroll-margin-top: 24px;
}

.alee-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 32px 48px;
	align-items: start;
	padding-block: 56px 32px;
}

.alee-footer__logo {
	justify-self: start;
	width: auto;
	height: 120px;
}

.alee-footer__col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.alee-footer__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.alee-footer__col p {
	margin: 0;
}

.alee-footer__col a:hover {
	color: var(--alee-surface-hover);
}

.alee-hours {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 14px;
}

.alee-hours dt,
.alee-hours dd {
	margin: 0;
}

.alee-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px 28px;
	border-top: 2px solid var(--alee-surface-rule);
	font-size: 15px;
	color: var(--alee-surface-muted);
}

/* ---------- Skróty „Zmień” dla zalogowanej obsługi ---------- */

.alee-edit {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--alee-edit-bg);
	color: var(--alee-edit-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.alee-edit:hover {
	background: var(--alee-edit-hover);
	color: var(--alee-edit-ink);
}

.alee-edit:focus-visible {
	outline-color: var(--alee-orange);
}

.alee-hero > .alee-edit {
	right: var(--alee-pad);
}

/* Na ramce z menu skrót siedzi na górnej krawędzi, żeby nie zasłaniał dań. */
.alee-panel > .alee-edit {
	top: -20px;
	right: 24px;
}

/* ---------- Zwykłe podstrony (np. polityka prywatności) ---------- */

.alee-page {
	max-width: 860px;
	padding-block: 40px 96px;
}

.alee-page__title {
	margin: 0 0 32px;
	font-size: clamp(38px, 6vw, 68px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}

.alee-content > * {
	max-width: 100%;
}

.alee-content h2 {
	margin: 1.6em 0 0.5em;
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.alee-content h3 {
	margin: 1.4em 0 0.4em;
	font-size: 23px;
	line-height: 1.2;
}

.alee-content a {
	color: var(--alee-hover);
}

.alee-content img {
	border-radius: 20px;
}

.alee-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.alee-content th,
.alee-content td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--alee-rule);
	text-align: left;
}

.alee-post + .alee-post {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--alee-rule);
}

.alee-post__title {
	margin: 0 0 8px;
	font-size: 30px;
	line-height: 1.15;
}

.alee-post__title a {
	text-decoration: none;
}

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
	.alee-logo img {
		height: 64px;
	}

	.alee-nav {
		gap: 0 20px;
		font-size: 16px;
	}

	.alee-nav .alee-btn {
		display: none;
	}

	.alee-hero {
		gap: 32px;
		padding-block: 24px 64px;
	}

	.alee-panel {
		padding: 24px 22px;
	}

	.alee-panel__empty {
		grid-column: auto;
	}

	.alee-block {
		gap: 40px;
		border-radius: 28px;
	}

	.alee-path__pill {
		padding: 8px 12px;
		font-size: 15px;
	}

	.alee-path__dot {
		width: 12px;
		height: 12px;
	}

	.alee-path__bowl {
		height: 54px;
	}

	.alee-galeria {
		margin-bottom: 64px;
	}

	.alee-galeria__head {
		padding-bottom: 28px;
	}

	.alee-stol__nav,
	.alee-zoom__btn {
		width: 48px;
		height: 48px;
	}

	.alee-plate-zoom {
		width: 38px;
		height: 38px;
	}

	.alee-dania-page {
		padding-block: 24px 64px;
	}

	.alee-dania-page__head {
		padding-bottom: 36px;
	}

	.alee-siatka {
		gap: 32px 20px;
	}

	.alee-siatka__name {
		font-size: 17px;
	}

	.alee-dania-page__foot {
		margin-top: 48px;
	}

	.alee-impreza {
		padding-block: 64px;
	}

	.alee-impreza__dot {
		width: 28px;
		height: 28px;
	}

	.alee-footer {
		border-radius: 28px 28px 0 0;
	}

	.alee-footer__logo {
		height: 96px;
	}

	.alee-edit {
		min-height: 36px;
		padding: 0 12px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}