/* ==========================================================================
   SWÓJ KĄT — warstwa responsywna
   Ładowana jako ostatnia, więc doprecyzowuje reguły z poprzednich arkuszy
   bez użycia !important. Punkty łamania: 1100 / 900 / 640 / 400 px.
   ========================================================================== */

/* --- Zabezpieczenie przed poziomym przewijaniem --------------------------
   Najczęstsza przyczyna „rozjechanej” strony na telefonie: jeden element
   szerszy niż ekran. Te reguły domykają wszystkie znane źródła. */

html, body { max-width: 100%; overflow-x: clip; }

img, svg, video, iframe, table, pre { max-width: 100%; }

/* Długie adresy e-mail i URL-e w treści nie mogą rozpychać kontenera. */
.sk-prose a, .sk-footer a, .sk-contact__item dd { overflow-wrap: anywhere; }

/* ========================================================================= */
/* ≤ 1100 px — tablet poziomo, wejście menu mobilnego                        */
/* ========================================================================= */

@media (max-width: 1100px) {

	/* Header: logo + burger, nawigacja wjeżdża z prawej. */
	.sk-header__inner { gap: var(--sk-sp-4); justify-content: space-between; }

	.sk-logo { margin-right: 0; }

	.sk-header__actions { gap: var(--sk-sp-2); }

	/* Cele dotykowe w menu — układ panelu definiuje layout.css. */
	.sk-nav__list > li:last-child { border-bottom: 0; }

	.sk-nav__list > li > a {
		min-height: 52px;
		display: flex;
		align-items: center;
	}
}

/* ========================================================================= */
/* ≤ 900 px — tablet pionowo                                                 */
/* ========================================================================= */

@media (max-width: 900px) {

	/* Wyszukiwarka pod hero: pola jedno pod drugim, przycisk na pełną szerokość. */
	.sk-search__panel { padding: var(--sk-sp-4); gap: var(--sk-sp-3); }

	.sk-search__panel .sk-btn { width: 100%; min-height: 56px; }

	.sk-search__field { min-height: 60px; }

	/* Sekcja „Dlaczego SWÓJ KĄT?” — tekst nad kartami, nie obok. */
	.sk-feature { padding: var(--sk-sp-5); gap: var(--sk-sp-4); }
	.sk-feature__icon { width: 44px; height: 44px; }
	.sk-feature__icon svg { width: 32px; height: 32px; }

	/* Pasek nad wynikami zawija się czytelnie. */
	.sk-results__bar { gap: var(--sk-sp-3); }
	.sk-results__tools { width: 100%; justify-content: space-between; gap: var(--sk-sp-3); }
}

/* ========================================================================= */
/* ≤ 640 px — telefon                                                        */
/* ========================================================================= */

@media (max-width: 640px) {

	/* Hero: niższy, bez sztucznie dużego minimum. */
	.sk-hero {
		min-height: auto;
		padding-block: var(--sk-sp-9) var(--sk-sp-8);
	}

	.sk-hero--compact { min-height: auto; }

	.sk-hero__title { font-size: var(--sk-fs-5xl); }

	.sk-hero__subtitle { font-size: var(--sk-fs-base); }

	/* Mocniejsze przyciemnienie: na wąskim ekranie tekst leży na środku zdjęcia,
	   a nie na ciemniejszej lewej krawędzi gradientu. */
	.sk-hero__media::after {
		background: linear-gradient(
			180deg,
			rgba(23, 20, 21, 0.55) 0%,
			rgba(23, 20, 21, 0.78) 100%
		);
	}

	/* Wyszukiwarka przestaje nachodzić na hero — na telefonie to tylko ścisk.
	   Układ zakładek (segmentowany przełącznik) definiuje components.css. */
	.sk-search { margin-top: var(--sk-sp-6); margin-bottom: var(--sk-sp-7); }

	/* Nagłówki sekcji: link „zobacz wszystkie” pod tytułem. */
	.sk-section-head { gap: var(--sk-sp-3); margin-bottom: var(--sk-sp-6); }

	/* Karty ofert — mniejszy padding, ale czytelna cena. */
	.sk-card__body { padding: var(--sk-sp-4); }
	.sk-card__price { font-size: var(--sk-fs-lg); }

	/* Pasek parametrów zawija się zamiast wychodzić poza kartę. */
	.sk-card__meta { flex-wrap: wrap; gap: var(--sk-sp-2) var(--sk-sp-3); }
	.sk-card__meta-item + .sk-card__meta-item { padding-left: 0; border-left: 0; }
	.sk-card__meta-item { font-size: var(--sk-fs-xs); }

	/* Liczniki: dwie kolumny, mniejsze liczby. */
	.sk-stat__value { font-size: var(--sk-fs-2xl); }

	/* Kafle kategorii: dwie kolumny zamiast jednej — cztery pełnoekranowe
	   zdjęcia pod sobą to niepotrzebne przewijanie. */
	.sk-section .sk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-4); }
	.sk-tile__title { font-size: var(--sk-fs-base); }

	/* Zespół i opinie zostają jednokolumnowe. */
	.sk-grid--4:has(.sk-person) { grid-template-columns: minmax(0, 1fr); }

	/* Baner CTA */
	.sk-cta-band__title { font-size: var(--sk-fs-2xl); }
	.sk-cta-band .sk-btn { align-self: stretch; }

	/* Pojedyncza oferta */
	.sk-property__title { font-size: var(--sk-fs-2xl); }
	.sk-property__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-spec { padding: var(--sk-sp-4); }
	.sk-details th, .sk-details td { display: block; width: auto; padding: var(--sk-sp-2) 0; }
	.sk-details th { border-bottom: 0; padding-bottom: 0; font-size: var(--sk-fs-sm); }
	.sk-details tr { display: block; padding-block: var(--sk-sp-3); border-bottom: 1px solid var(--sk-border); }
	.sk-details td { border-bottom: 0; }

	.sk-price-box, .sk-agent-box, .sk-form-card { padding: var(--sk-sp-5); }

	/* Formularze: jedno pole w rzędzie, większe cele dotykowe. */
	.sk-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sk-input, .sk-select, .sk-textarea { padding: 0.95em 1em; }
	.sk-btn { padding: 1.05em 1.5em; }
	.sk-btn--block { width: 100%; }

	/* Panel filtrów na pełnym ekranie musi mieć oddech na przycisk zamknięcia. */
	.sk-filters { padding-top: var(--sk-sp-5); }
	.sk-filters__close { margin-bottom: var(--sk-sp-4); }
	.sk-filter-group { padding: var(--sk-sp-4); }

	/* Checkboxy filtrów — minimum 44 px wysokości celu dotykowego (WCAG 2.5.8). */
	.sk-check { padding: var(--sk-sp-3) 0; min-height: 44px; align-items: center; }
	.sk-check input { width: 1.3em; height: 1.3em; margin-top: 0; }

	/* Paginacja */
	.sk-pagination { flex-wrap: wrap; gap: var(--sk-sp-1); }
	.sk-pagination .page-numbers { min-width: 40px; height: 40px; }

	/* Stopka */
	.sk-footer__bottom { gap: var(--sk-sp-3); }
	.sk-footer__legal { gap: var(--sk-sp-3) var(--sk-sp-4); }
}

/* ========================================================================= */
/* ≤ 400 px — małe telefony (iPhone SE i podobne)                            */
/* ========================================================================= */

@media (max-width: 400px) {

	.sk-hero__title { font-size: 2.125rem; }

	/* Nawet na 360 px trzy segmenty mieszczą się w jednym rzędzie — wystarczy
	   skrócić odstępy. Zawijanie ich w kolumnę robiło z tego trzy osobne guziki. */
	.sk-search__tab { padding-inline: 2px; font-size: 11px; letter-spacing: 0; }

	.sk-section .sk-grid--4 { grid-template-columns: minmax(0, 1fr); }

	.sk-property__specs { grid-template-columns: minmax(0, 1fr); }

	.sk-logo img, .sk-header.is-stuck .sk-logo img { height: 40px; }
}

/* ========================================================================= */
/* Druk — klient drukuje karty ofert na prezentacje                          */
/* ========================================================================= */

@media print {

	.sk-header, .sk-footer, .sk-search, .sk-filters, .sk-fav-btn,
	.sk-cta-band, .sk-pagination, .sk-cookie, .sk-agent-box form {
		display: none !important;
	}

	body { font-size: 11pt; color: #000; background: #fff; }

	.sk-section { padding-block: 0.5cm; }

	.sk-property__layout { display: block; }

	.sk-property__gallery { aspect-ratio: auto; height: 8cm; }

	/* Adresy linków przydają się na wydruku. */
	.sk-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

	a, .sk-card { break-inside: avoid; }
}