/* =========================================================
   MOBILE

   Ekran startowy to siatka ikon jak w telefonie, a strona otwiera się
   „nad" nią. Powrót: gest od lewej krawędzi, przycisk w pasku albo
   sprzętowy Back.
   ========================================================= */

/* Ekran ikon — domyślnie schowany, na desktopie nieużywany. */
.pandos-home {
	display: none;
}

@media (max-width: 768px) {

	/* Rozmiary ikon paska są wspólne dla wszystkich ekranów
	   (patrz components.css) — tutaj zostaje tylko to, co naprawdę
	   różni telefon od desktopu. */
	.pandos-apps-btn {
		display: inline-flex;
	}

	.pandos-menubar {
		padding: 0 6px;
	}

	.pandos-menubar__brand span {
		display: none;
	}

	.pandos-status {
		gap: 2px;
	}

	.pandos-clock {
		font-size: 13px;
	}

	/* Kalendarz nie mieści się już pod wąskim paskiem. */
	.pandos-calendar {
		position: fixed;
		top: calc(var(--pandos-chrome-top) + 4px);
		right: 6px;
		left: auto;
		width: min(300px, calc(100vw - 12px));
	}

	/* Menu górne ustępuje miejsca siatce ikon — pozostaje dostępne
	   przez przycisk aplikacji, więc nawigacja nie znika (bug 4). */
	.pandos-menu {
		display: none;
	}

	.pandos-home {
		display: block;
		position: absolute;
		inset: 0;
		z-index: var(--z-desktop-icons);
		padding: 28px 18px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.pandos-home__section + .pandos-home__section {
		margin-top: 26px;
	}

	/* Sekcja bez nagłówka: kreska w miejscu, gdzie byłby nagłówek,
	   żeby nie czytała się jako ciąg dalszy poprzedniej grupy. */
	.pandos-home__section--plain + .pandos-home__section,
	.pandos-home__section + .pandos-home__section--plain {
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* Nagłówek sekcji — odpowiednik pozycji "#" z menu. */
	.pandos-home__heading {
		margin-bottom: 12px;
		padding-bottom: 8px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.85);
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.pandos-home__heading a {
		text-decoration: none;
	}

	.pandos-home__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px 10px;
	}

	.pandos-home__app {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 7px;
		text-decoration: none;
	}

	.pandos-home__tile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 58px;
		font-size: 24px;
		color: #fff;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 15px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
	}

	.pandos-home__app:active .pandos-home__tile {
		transform: scale(0.94);
	}

	.pandos-home__label {
		font-size: 11.5px;
		line-height: 1.25;
		text-align: center;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	}

	/* Okno wjeżdża znad siatki. Selektor celowo obejmuje .is-maximized,
	   bo ta klasa ustawia transform: none o tej samej specyficzności. */
	.pandos-window,
	.pandos-window.is-maximized {
		transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	}

	.pandos-mobile-home .pandos-window,
	.pandos-mobile-home .pandos-window.is-maximized {
		transform: translateX(100%);
	}

	.pandos-mobile-home .pandos-dock {
		opacity: 0;
		pointer-events: none;
	}

	/* Panel boczny nie ma sensu na telefonie — jego rolę pełni
	   siatka ikon i pasek ścieżki. */
	.pandos-window__sidebar {
		display: none;
	}

	/* Pasek tytułu jest tu czystą dekoracją: okno zawsze wypełnia ekran,
	   więc maksymalizacja jest wyłączona, zamknij/minimalizuj nigdy nic
	   nie robiły, a przeciągania na dotyku nie ma. Kontekst niesie pasek
	   ścieżki, który staje się teraz nagłówkiem okna.
	   Tytuł zostaje w DOM — nawigacja AJAX go aktualizuje, a czytnik
	   ekranu i tak dostaje komunikat przez #pandos-announcer. */
	.pandos-window__titlebar {
		display: none;
	}

	.pandos-window__crumbbar {
		padding: 10px 12px;
	}

	.pandos-window__body {
		flex-direction: column;
	}

	.pandos-window__main {
		padding: 20px;
		padding-bottom: calc(var(--pandos-dock-h) + 16px);
	}

	.pandos-pane__title {
		font-size: 24px;
	}

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

	/* Miniaturka nad tekstem — 160px kolumny nie mieszczą się na telefonie. */
	.pandos-card-entry {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.pandos-card-entry__thumb {
		aspect-ratio: 16 / 9;
	}

	/* Cennik: miniatura nad treścią przy wąskim oknie. */
	.pandos-prose .pandos-price {
		flex-direction: column;
	}

	.pandos-prose .pandos-price__media,
	.pandos-prose .pandos-price__media img {
		width: 100%;
		flex-basis: auto;
	}

	.pandos-prose .pandos-price__media img {
		height: 150px;
	}

	.pandos-postnav {
		flex-direction: column;
	}

	.pandos-postnav__link,
	.pandos-postnav__link--next {
		max-width: none;
		margin-left: 0;
	}

	.pandos-dock {
		transition: opacity 0.2s ease;
	}

	.pandos-dock__item {
		width: 66px;
	}

	.pandos-dock__icon {
		width: 46px;
		height: 46px;
		font-size: 20px;
	}

	/* Dock może mieć więcej ikon niż zmieści ekran — pozwalamy przewijać
	   poziomo zamiast ściskać etykiety. */
	.pandos-dock {
		max-width: calc(100vw - 16px);
	}

	.pandos-dock__list {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pandos-dock__list::-webkit-scrollbar {
		display: none;
	}

	/* backdrop-filter na pełnym ekranie mocno tnie klatki
	   na słabszych urządzeniach — zastępujemy płaskim tłem. */
	.pandos-window,
	.pandos-menu__dropdown {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(28, 28, 30, 0.96);
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.pandos-window {
		transition: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.pandos-window,
	.pandos-menubar,
	.pandos-menu__dropdown,
	.pandos-dock__list {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: rgba(24, 24, 26, 0.97);
	}
}