/* ==========================================================================
   WOH GROUP — Divi Child — woh-responsive.css
   Autor: WOH GROUP LTD

   BREAKPOINTY (ustalone z klientem):
     Desktop:  min-width 981px  (styl bazowy, bez media query)
     Tablet:   768px – 980px
     Mobile:   max-width 767px
   ========================================================================== */

/* ==========================================================================
   ≤ 980px — TABLET + MOBILE (wspólne reguły dla obu)
   ========================================================================== */
@media (max-width: 980px) {

	.woh-regulamin-layout {
		grid-template-columns: 1fr !important;
	}

	.woh-regulamin-toc {
		order: -1;
	}

	.woh-regulamin-toc .woh-card {
		max-width: 100%;
	}

	.woh-grid-4,
	.woh-grid-3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.woh-split-2,
	.woh-compare-grid,
	.woh-contact-layout {
		grid-template-columns: 1fr !important;
	}

	.woh-hero-grid {
		grid-template-columns: 1fr !important;
	}

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

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

	.woh-step-arrow {
		display: none !important;
	}

	.woh-tech-bar {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 18px;
		justify-content: initial;
		padding: 24px !important;
		border-radius: 18px;
	}

	.woh-tech-bar .woh-tech-item {
		gap: 10px;
	}

	.woh-panel [data-r="eco-line"],
	.woh-eco-line {
		display: none !important;
	}

	.woh-cta-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.woh-footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 36px;
	}
}

/* ==========================================================================
   ≤ 767px — MOBILE
   ========================================================================== */
@media (max-width: 767px) {

	/* Nagłówki: nieco lżejszy H1 na mobile */
	.woh-h1--home,
	.woh-h1--sub {
		font-size: 32px !important;
		line-height: 1.2 !important;
		margin-bottom: 20px !important;
	}

	.woh-h1--case {
		font-size: 34px !important;
		line-height: 1.14 !important;
	}

	.woh-h2 {
		font-size: 27px !important;
		line-height: 1.24 !important;
	}

	/* --- HERO: 1 kolumna, dużo oddechu, osobno zaprojektowana wersja mobile --- */
	.et_pb_row:has(.woh-hero-marker) {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
	}

	.woh-hero-content {
		padding: 36px 22px 32px !important;
	}

	.woh-hero-text {
		font-size: 15.5px !important;
		line-height: 1.65 !important;
		margin-bottom: 28px !important;
	}

	.woh-hero-media {
		border-radius: 0 0 22px 22px !important;
		padding: 0 !important;
		height: 210px !important;
	}

	.woh-hero-media > img {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-width: none !important;
		object-fit: cover !important;
	}

	/* ---------------------------------------------------------------
	   GLOBALNA ZASADA HERO NA MOBILE (< 768px)
	   Prawa karta / mockup / dashboard w hero to element DEKORACYJNY.
	   Na mobile wygląda jak wąski, wysoki placeholder i psuje pierwsze
	   wrażenie — dlatego go UKRYWAMY. Lepsze czyste hero (breadcrumb →
	   nadtytuł → H1 → lead → CTA) niż długa atrapa UI.
	   Hero ze ZDJĘCIEM (.woh-hero-media > img) zostaje — wygląda dobrze.
	   --------------------------------------------------------------- */

	/* Dekoracyjne mocki/karty w hero — ukryte na mobile. */
	.woh-seo-hero-mock,
	.woh-wycena-hero-mock,
	.woh-hero-mock,
	.woh-hero-dashboard,
	.woh-hero-card--decorative {
		display: none !important;
	}

	/* Kolumna media, która zawiera TYLKO dekoracyjną kartę (a nie <img>),
	   nie powinna rezerwować miejsca ani tła — zwijamy ją całkowicie.
	   Wersja jawna (klasa --decorative) działa we wszystkich przeglądarkach;
	   wariant z :has() to dodatkowe zabezpieczenie dla innych hero. */
	.woh-hero-media--decorative,
	.woh-hero-media:not(:has(> img)) {
		display: none !important;
		height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.woh-cta-group {
		flex-direction: column !important;
		gap: 12px !important;
	}

	.woh-cta-group a {
		width: 100%;
		justify-content: center;
		text-align: center;
		height: 48px;
		font-size: 15.5px;
		box-sizing: border-box;
	}

	.woh-cta-group .woh-btn-primary {
		box-shadow: 0 12px 28px rgba(235, 29, 36, .32) !important;
	}

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

	.woh-meta-bar {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Karty — większy padding, bardziej premium na mobile */
	.woh-services-grid,
	.woh-cards-grid,
	.woh-takeover-grid,
	.woh-process-grid,
	.woh-realizacje-grid {
		gap: 18px !important;
	}

	.woh-service-card,
	.woh-process-card {
		padding: 26px !important;
	}

	.woh-service-card > div,
	.woh-process-card > div:first-child {
		gap: 16px !important;
	}

	.woh-service-card .woh-card-text,
	.woh-process-card .woh-card-text {
		font-size: 14.5px !important;
		line-height: 1.6 !important;
	}

	/* Subtelny active (dotyk) na kartach procesu — bez przesady */
	.woh-process-card {
		transition: border-color .18s ease, box-shadow .18s ease;
	}

	.woh-process-card:active {
		border-color: #F1CDD1 !important;
		box-shadow: 0 10px 26px rgba(17, 17, 17, .08);
	}

	.woh-card-icon,
	.woh-service-card-icon {
		flex: none;
	}

	.woh-project-card > div:last-child {
		padding: 24px !important;
	}

	.woh-project-card > div:last-child > div:first-child {
		align-items: center !important;
	}

	/* Ekosystem — większy padding boxa, lepsze odstępy, ikony wyrównane */
	.woh-panel {
		padding: 30px 22px !important;
	}

	.woh-ecosystem-flex {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.woh-ecosystem-flex > .woh-ecosystem-item {
		flex-direction: row !important;
		text-align: left !important;
		justify-content: flex-start;
		gap: 16px !important;
		padding: 16px !important;
	}

	.woh-ecosystem-icon {
		flex: none;
	}

	.woh-ecosystem-item div:last-child {
		font-size: 14px !important;
	}

	/* Pasek technologii — elegancki grid 2 kolumny, box wyraźnie widoczny */
	.woh-tech-bar {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
		padding: 22px !important;
		border-radius: 18px;
	}

	.woh-tech-bar .woh-tech-item {
		gap: 10px;
	}

	.woh-tech-bar .woh-tech-name {
		font-size: 14.5px;
	}

	/* Footer — największe dopracowanie: więcej oddechu, czytelność, hierarchia */
	.woh-footer-grid {
		grid-template-columns: 1fr !important;
		text-align: center;
		gap: 48px !important;
		padding-top: 56px !important;
		padding-bottom: 44px !important;
	}

	.woh-footer-desc {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		font-size: 15.5px !important;
		line-height: 1.65 !important;
	}

	.woh-footer-heading {
		font-size: 13px !important;
		letter-spacing: .1em !important;
		margin-bottom: 18px !important;
	}

	.woh-footer-text,
	.woh-footer-text a {
		font-size: 16px !important;
		line-height: 2.1 !important;
	}

	.woh-footer-social {
		justify-content: center;
		gap: 14px !important;
		margin-top: 8px;
	}

	.woh-footer-social a {
		width: 42px !important;
		height: 42px !important;
	}

	/* Dolny pasek stopki — uporządkowany, wyśrodkowany, oddech */
	.woh-footer-bottom-inner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	/* CTA banner — więcej oddechu, czytelniejszy tekst, przyciski pełnej szerokości */
	.woh-cta-banner {
		text-align: center;
		align-items: center;
		padding: 36px 26px !important;
		gap: 26px !important;
	}

	.woh-cta-banner h2 {
		font-size: 24px !important;
		line-height: 1.32 !important;
	}

	.woh-cta-banner .woh-cta-actions {
		flex-direction: column;
		width: 100%;
		gap: 12px !important;
	}

	.woh-cta-banner .woh-cta-actions a {
		justify-content: center;
		width: 100%;
		height: 48px;
		box-sizing: border-box;
	}

	.woh-quote {
		padding: 22px 18px;
	}

	/* --- Podstrony O nas / Kontakt: drobny szlif mobile --- */

	/* Więcej oddechu pod breadcrumb w hero podstron */
	.woh-breadcrumb {
		margin-bottom: 4px;
	}

	/* Siatka kompetencji (O nas) — nieco większy padding kafelków */
	.woh-competency-grid > div {
		padding: 20px 16px !important;
	}

	/* Karty danych kontaktowych/firmowych (Kontakt) — większy padding */
	.woh-contact-layout > div > .woh-card {
		padding: 28px !important;
	}

	/* Formularz pełnej szerokości, wygodny na mobile */
	.woh-panel form {
		width: 100%;
	}

	/* Sekcja "Wybrane realizacje" (Home) ORAZ "Powiązane realizacje"
	   (podstrony usług) — na mobile wyglądają identycznie: mniejszy padding,
	   tylko 2 pierwsze karty + link "Zobacz wszystkie realizacje". */
	.et_pb_row:has(.woh-realizacje-marker),
	.woh-realizacje-panel-wrap {
		padding: 28px 20px 32px !important;
		border-radius: 22px !important;
		margin-bottom: 24px !important;
	}

	.et_pb_row:has(.woh-realizacje-marker) > div > div:first-child {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
	}

	/* Podstrony usług: nagłówek "Powiązane realizacje" w pionie, a link
	   "Zobacz wszystkie →" po prawej znika — zastępuje go przycisk pod kartami
	   (dokładnie jak na stronie głównej). */
	.woh-realizacje-head {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
	}

	.woh-realizacje-head .woh-realizacje-link {
		display: none !important;
	}

	.et_pb_row:has(.woh-realizacje-marker) .woh-services-grid > a:nth-child(n+3),
	.woh-realizacje-panel-wrap .woh-services-grid > a:nth-child(n+3) {
		display: none !important;
	}

	.woh-realizacje-mobile-cta {
		display: block !important;
	}

	.woh-home-realizacja-desc {
		-webkit-line-clamp: 2 !important;
	}

	.woh-home-realizacja-tags .woh-badge:nth-child(n+3) {
		display: none !important;
	}

	/* Treść wpisu — lżejsza typografia na mobile */
	.et_pb_post_content,
	.woh-post-prose {
		font-size: 16px;
		line-height: 1.7;
	}

	.et_pb_post_content h2,
	.woh-post-prose h2 {
		font-size: 24px;
		margin: 34px 0 14px;
	}

	.et_pb_post_content h3,
	.woh-post-prose h3 {
		font-size: 19px;
		margin: 26px 0 10px;
	}

	/* Hero wpisu — kolumna, obraz pod tekstem na mobile */
	.woh-post-hero-grid {
		flex-direction: column !important;
	}

	.woh-post-hero-text {
		padding: 34px 22px 28px !important;
		order: 1;
	}

	.woh-post-hero-media {
		order: 2;
		height: auto !important;
		min-height: 200px;
		padding: 0 !important;
	}

	.woh-post-hero-img {
		min-height: 200px !important;
		max-height: 300px;
	}

	/* Wycena — karta hero (mockup formularza) jest dekoracyjna, więc na mobile
	   jest ukryta globalną regułą wyżej (.woh-wycena-hero-mock display:none).
	   Hero pokazuje wtedy tylko treść: breadcrumb → nadtytuł → H1 → lead → CTA. */
}