/* ==========================================================================
   WOH GROUP — Divi Child — woh-responsive.css
   Autor: WOH GROUP LTD
   Breakpointy: ≤860px (tablet/mobile), ≤560px (mobile).
   Zgodne ze specyfikacją wdrożeniową, sekcja 10 "Responsive".
   ========================================================================== */

/* ==========================================================================
   ≤ 860px — TABLET / MOBILE
   menu → hamburger + drawer; hero 1 kolumna; siatki 4-kol → 2-kol;
   procesy w pionie; footer 2 kolumny; sticky bottom CTA on.
   ========================================================================== */
@media (max-width: 860px) {

	/* Header: ukryj menu desktopowe + CTA + lang switcher, pokaż hamburger */
	#woh-header .woh-main-nav,
	#woh-header .woh-header-cta,
	#woh-header .woh-lang-switcher {
		display: none !important;
	}

	.woh-hamburger {
		display: flex !important;
	}

	/* Sticky bottom CTA widoczny tylko na mobile/tablet */
	#woh-sticky-cta {
		display: block;
	}

	/* Hero: 2 kolumny -> 1 kolumna, media pod tekstem (lub ukryta wg wariantu strony) */
	.woh-hero-grid {
		grid-template-columns: 1fr !important;
	}

	.woh-hero-grid .woh-hero-media {
		order: 2;
	}

	.woh-hero-grid .woh-hero-content {
		order: 1;
	}

	/* Siatki kart: 4 kolumny -> 2 kolumny */
	.woh-grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Siatki 3 kolumny (realizacje, case parts) -> 2 kolumny */
	.woh-grid-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Strzałki między krokami procesu — ukryte na mobile/tablet (kolumny i tak się składają w pionie) */
	.woh-step-arrow {
		display: none !important;
	}

	/* Ekosystem (ikony na osi) -> pion, bez linii łączącej */
	.woh-ecosystem-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.woh-ecosystem-row [data-r="eco-line"] {
		display: none;
	}

	/* Split 2 kolumny (dla kogo / korzyści, wyzwanie / zakres) -> 1 kolumna */
	.woh-split-2 {
		grid-template-columns: 1fr !important;
	}

	/* Porównanie 2 kolumny -> 1 kolumna */
	.woh-compare-grid {
		grid-template-columns: 1fr !important;
	}

	/* Kontakt: formularz + sidebar -> 1 kolumna, formularz pierwszy */
	.woh-contact-layout {
		grid-template-columns: 1fr !important;
	}

	/* CTA banner: pion, wyśrodkowane już od 860px zaczyna się zawijać */
	.woh-cta-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	/* Footer: 4 kolumny -> 2 kolumny */
	.woh-footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 32px;
	}
}

/* ==========================================================================
   ≤ 560px — MOBILE
   siatki -> 1 kolumna; footer 1 kolumna; CTA banner pionowo wyśrodkowane;
   H1 hero ~32px, H2 ~24px.
   ========================================================================== */
@media (max-width: 560px) {

	.woh-h1--home,
	.woh-h1--sub {
		font-size: 32px !important;
	}

	.woh-h1--case {
		font-size: 28px !important;
	}

	.woh-h2 {
		font-size: 24px !important;
	}

	/* Wszystkie siatki kart -> 1 kolumna */
	.woh-grid-4,
	.woh-grid-3,
	.woh-grid-2 {
		grid-template-columns: 1fr !important;
	}

	/* Meta bar (case study: Klient/Zakres/Technologia/Rok) 4 kol -> 2 kol */
	.woh-meta-bar {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Footer -> 1 kolumna, wyśrodkowany */
	.woh-footer-grid {
		grid-template-columns: 1fr !important;
		text-align: center;
	}

	.woh-footer-col .woh-footer-desc {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	.woh-footer-social {
		justify-content: center;
	}

	.woh-footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	/* CTA banner: pion, wyśrodkowany */
	.woh-cta-banner {
		text-align: center;
		align-items: center;
	}

	.woh-cta-banner .woh-cta-actions {
		flex-direction: column;
		width: 100%;
	}

	.woh-cta-banner .woh-cta-actions a {
		justify-content: center;
		width: 100%;
	}

	/* Kontakt hero card / formularz: padding mniejszy na wąskich ekranach */
	.woh-panel,
	.woh-quote {
		padding: 24px 20px;
	}
}