/* ============================================================
   RESPONSIVE - globalne fixy mobile + tablet.
   Ladowany OSTATNI (po main.css i sekcjach) zeby wygrywac specyficznosc.
   Breakpoints:
     - do 480px  = mobile portrait (telefon pionowo)
     - do 767px  = mobile landscape / small
     - do 899px  = tablet portrait
     - do 1099px = tablet landscape / small laptop
   ============================================================ */

/* ============================================
   TABLET PORTRAIT + MOBILE (<= 899px)
   Uniwersalne: stack layouty, mniejszy typography
   REGULA: w splitach - najpierw TRESC, potem GRAFIKA (order flex/grid)
   ============================================ */
@media (max-width: 899px) {

	/* SPLIT LAYOUTS - odwroc kolejnosc: tresc PIERWSZE, grafika DRUGA */
	.o-firmie__grid { display: flex !important; flex-direction: column; }
	.o-firmie__content { order: 1; }
	.o-firmie__media { order: 2; }

	.proces__split { display: flex !important; flex-direction: column; }
	.proces__content { order: 1; }
	.proces__media { order: 2; }

	.sprzet-lp__intro-split,
	.sprzet-lp__intro > .container > .sprzet-lp__intro-split { display: flex !important; flex-direction: column; }
	.sprzet-lp__intro-body { order: 1; }
	.sprzet-lp__intro-media { order: 2; }

	.miejsce-lp__intro-grid { display: flex !important; flex-direction: column; }
	.miejsce-lp__intro-body { order: 1; }
	.miejsce-lp__intro-media { order: 2; }

	/* O nas Story - grafika PIERWSZA (portret Artura na gorze), tresc pod */
	.o-nas-story__grid { display: flex !important; flex-direction: column; }
	.o-nas-story__media { order: 1; }
	.o-nas-story__content { order: 2; }

	.o-nas-sprzet__grid { display: flex !important; flex-direction: column; }
	.o-nas-sprzet__content { order: 1; }
	.o-nas-sprzet__media { order: 2; }

	.realizacja-hero__grid { display: flex !important; flex-direction: column; }
	.realizacja-hero__content { order: 1; }
	.realizacja-hero__media { order: 2; }

	/* Chipy miast (obszar dzialania) - mniejsze na mobile */
	.o-nas-obszar__cities {
		gap: var(--s-2) !important;
		flex-wrap: wrap;
		justify-content: center;
	}
	.o-nas-obszar__cities span {
		padding: 6px 14px !important;
		font-size: 0.78rem !important;
		border-radius: 999px;
	}
	.o-nas-obszar__cta,
	.o-nas-obszar .btn {
		font-size: 0.85rem !important;
		padding: 12px 20px !important;
	}


	/* Container - mniejszy padding */
	.container {
		padding-left: var(--s-5);
		padding-right: var(--s-5);
	}

	/* Typography scale down */
	h1 { font-size: clamp(1.75rem, 6vw + 0.5rem, 2.5rem) !important; }
	h2 { font-size: clamp(1.5rem, 5vw + 0.5rem, 2rem) !important; }
	h3 { font-size: clamp(1.15rem, 3vw + 0.5rem, 1.5rem) !important; }

	/* ============================================
	   SEKCJE HOMEPAGE - split layouty stack
	   ============================================ */

	/* O firmie - portrait + tekst -> stack */
	.o-firmie__grid {
		grid-template-columns: 1fr !important;
		gap: var(--s-8) !important;
	}
	.o-firmie__media { max-width: 500px; margin: 0 auto; }

	/* Uslugi preview grid - 1 kolumna */
	.usługi-preview__grid,
	.uslugi-preview__grid {
		grid-template-columns: 1fr !important;
		gap: var(--s-5) !important;
	}

	/* Powiat map - stack */
	.powiat-map__grid {
		grid-template-columns: 1fr !important;
	}

	/* Realizacje bento grid - 1 kolumna */
	.realizacje-bento,
	.realizacje-grid {
		grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important;
	}
	.realizacje-bento__card,
	.realizacje-bento__card--featured,
	.realizacje-bento__card:nth-child(n) {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}
	.realizacje-card__link { max-width: 100%; }

	/* Trust bar - stack */
	.trust-bar__grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--s-5) !important;
	}

	/* Proces steps timeline - stack */
	.proces__timeline .proces__steps {
		grid-template-columns: 1fr !important;
	}
	.proces__split {
		grid-template-columns: 1fr !important;
		gap: var(--s-8) !important;
	}
	.proces__media { position: static !important; }

	/* Google reviews split */
	.google-reviews {
		grid-template-columns: 1fr !important;
	}

	/* FAQ - single column */
	.faq { max-width: 100%; }

	/* ============================================
	   PODSTRONY - split layouty
	   ============================================ */

	/* Kontakt */
	.kontakt__grid { grid-template-columns: 1fr !important; gap: var(--s-8) !important; }

	/* Realizacja single - hero split */
	.realizacja-hero__grid,
	.realizacja-hero__inner {
		grid-template-columns: 1fr !important;
		gap: var(--s-6) !important;
	}

	/* Sprzet LP - split intro + item split */
	.sprzet-lp__grid { grid-template-columns: 1fr !important; }

	/* Usluga single */
	.usluga-single__grid { grid-template-columns: 1fr !important; gap: var(--s-8) !important; }

	/* Miejscowosc split intro */
	.miejsce-lp__intro-grid { grid-template-columns: 1fr !important; gap: var(--s-8) !important; }
	.miejsce-lp__intro-media { max-width: 500px; margin: 0 auto; }

	/* O nas story + terenowka + sprzet + obszar */
	.o-nas-story__grid,
	.o-nas-sprzet__grid {
		grid-template-columns: 1fr !important;
		gap: var(--s-8) !important;
	}

	/* ============================================
	   SEKCJE UNIWERSALNE
	   ============================================ */

	/* Section padding vertical */
	section {
		padding-top: var(--s-12);
		padding-bottom: var(--s-12);
	}

	/* Buttons - full width w stackach akcji */
	.hero__actions .btn,
	.miejsce-lp__cta-actions .btn,
	.sprzet-lp__cta .btn,
	.proces__cta .btn,
	.realizacje-archive__cta .btn,
	.miejsce-lp__intro-actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   MOBILE PORTRAIT (<= 767px)
   Bardziej agresywne
   ============================================ */
@media (max-width: 767px) {

	/* Container - jeszcze mniejszy padding */
	.container {
		padding-left: var(--s-4);
		padding-right: var(--s-4);
	}

	/* Section padding wieksze zmniejszenie */
	section {
		padding-top: var(--s-10);
		padding-bottom: var(--s-10);
	}

	/* Typography - final scale */
	h1 { font-size: clamp(1.5rem, 7vw + 0.3rem, 2.25rem) !important; line-height: 1.15 !important; }
	h2 { font-size: clamp(1.35rem, 5.5vw + 0.3rem, 1.85rem) !important; line-height: 1.2 !important; }
	h3 { font-size: 1.15rem !important; line-height: 1.3 !important; }

	/* Trust bar - 1 kolumna */
	.trust-bar__grid { grid-template-columns: 1fr !important; }

	/* Facts sekcje - 1 kolumna */
	.miejsce-lp__facts-grid { grid-template-columns: 1fr !important; }

	/* Card grids all - 1 kolumna */
	.miejsce-lp__uslugi-grid,
	.miejsce-lp__dlaczego-grid,
	.miejsce-lp__realizacje-grid,
	.miejsce-lp__related-grid,
	.miejsce-lp__list-grid,
	.realizacje-archive__grid,
	.sprzet-lp__grid {
		grid-template-columns: 1fr !important;
	}

	/* Footer - stack columns + centered */
	.site-footer__grid {
		grid-template-columns: 1fr !important;
		gap: var(--s-8) !important;
		text-align: center;
	}
	.site-footer__grid > * {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Kontakt column - centered z wiekszym logo na gorze */
	.site-footer__contact {
		align-items: center !important;
		padding-top: var(--s-4);
	}
	.site-footer__logo {
		max-width: 220px;
		margin: 0 auto var(--s-6) !important;
	}
	.site-footer__logo img {
		width: 100%;
		height: auto;
		display: block;
	}
	.site-footer__contact-item,
	.site-footer__contact address {
		justify-content: center;
		text-align: center;
	}

	/* Nav columns headings + links centered */
	.site-footer__nav h3,
	.site-footer__nav-title,
	.site-footer__nav ul,
	.site-footer__nav li,
	.site-footer__nav a {
		text-align: center !important;
		justify-content: center !important;
	}
	.site-footer__nav ul {
		list-style: none;
		padding: 0;
	}

	/* Bar - stack elementow copyright + legal + by */
	.site-footer__bar-inner {
		flex-direction: column;
		gap: var(--s-4) !important;
		text-align: center;
	}
	.site-footer__legal {
		justify-content: center;
	}
	.site-footer__by {
		justify-content: center;
	}

	/* Section CTA - padding wokol */
	.realizacje-section__cta,
	.usługi-preview__cta,
	.uslugi-preview__cta {
		padding: 0 var(--s-4) !important;
		margin-top: var(--s-10) !important;
	}
	.realizacje-section__cta .btn,
	.usługi-preview__cta .link-arrow,
	.uslugi-preview__cta .link-arrow {
		max-width: 100%;
	}

	/* Header - hamburger menu (motyw uzywa .burger + .mobile-menu) */
	.nav-primary { display: none !important; }
	.header-cta { display: none !important; }
	.burger {
		display: inline-flex !important;
		position: relative;
		z-index: 220;
	}

	/* Mobile menu - force styles zeby zadzialalo niezaleznie od main.css */
	.mobile-menu {
		position: fixed !important;
		inset: 0 !important;
		background: var(--c-white) !important;
		z-index: 210 !important;
		transform: translateX(100%) !important;
		transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		pointer-events: none;
	}
	.mobile-menu--active {
		transform: translateX(0) !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
	.mobile-menu__inner {
		padding: 90px var(--s-6) var(--s-8) !important;
		text-align: left;
	}
	.mobile-menu__close {
		position: absolute;
		top: 18px;
		right: 18px;
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--c-neutral-100);
		border: 0;
		border-radius: 50%;
		color: var(--c-neutral-800);
		cursor: pointer;
		z-index: 5;
	}
	.mobile-menu__close:hover { background: var(--c-primary); color: var(--c-white); }

	/* Section header - center + reduce margins */
	.miejsce-lp__section-head,
	.proces__header,
	.realizacje-section__header,
	.o-firmie__head,
	.sprzet-lp__grid-head {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: var(--s-8);
	}

	/* CTA sections - center align content */
	.miejsce-lp__cta-actions,
	.sprzet-lp__cta-actions,
	.realizacje-archive__cta-actions {
		flex-direction: column;
		width: 100%;
	}

	/* Breadcrumbs - single line, overflow scroll */
	.crumbs {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--s-1);
	}
	.crumbs::-webkit-scrollbar { display: none; }
}

/* ============================================
   MOBILE SMALL (<= 480px)
   Najagresywniejsze
   ============================================ */
@media (max-width: 480px) {

	.container {
		padding-left: var(--s-3);
		padding-right: var(--s-3);
	}

	/* Section padding minimum */
	section {
		padding-top: var(--s-8);
		padding-bottom: var(--s-8);
	}

	/* Buttons row - stack + full width */
	.btn { width: 100%; justify-content: center; }
	.btn-group,
	.actions,
	.cta-row {
		flex-direction: column;
		gap: var(--s-3);
	}

	/* CTA card padding zmniejsz */
	.miejsce-lp__cta { padding: var(--s-10) 0 !important; }
	.realizacje-archive__cta { padding: var(--s-10) 0 !important; }

	/* Card wider padding zmniejsz */
	.miejsce-lp__intro-media-badge,
	.sprzet-lp__item {
		padding: var(--s-4) !important;
	}

	/* Hide dekoracyjne elementy */
	.miejsce-lp__intro-split::before,
	.sprzet-lp__intro::before,
	.realizacje-section::before,
	.realizacje-section::after {
		display: none !important;
	}
}