/**
 * Skehans — wspólny stylesheet (design tokens + UI components).
 *
 * Port 1:1 z Next.js: src/app/globals.css + src/components/ui/*\/styles.module.css.
 * Custom media (@custom-media z src/app/media.css) rozwinięte do konkretnych
 * breakpointów. CSS Modules scoped classes → klasy `.skehans-*`.
 *
 *   --big-mobile     → 480px
 *   --tablet         → 768px
 *   --desktop        → 1024px
 *   --desktop-medium → 1200px
 *   --desktop-large  → 1440px
 *   --desktop-xlarge → 1800px
 */

/* ── Reset box-sizing (port z Next.js globals.css) ──
   Bez tego .skehans-container (max-width 1800 + padding 100) liczył
   szerokość jako content-box → kontener o 200px szerszy niż
   .skehans-header__inner (border-box). Reset ujednolica szerokości. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ── Design tokens (z globals.css; --font-* z next/font → tu z theme.json) ── */
:root {
	--background: #ffffff;
	--foreground: #171717;
	--dark-green: #08612d;
	/* --color-asul: brak definicji w Next.js — mapujemy na brand green */
	--color-asul: #08612d;
	--font-asul: var( --wp--preset--font-family--asul, 'Asul', Georgia, serif );
	--font-roboto: var( --wp--preset--font-family--roboto, 'Roboto', system-ui, sans-serif );
}

/* ════════ Container ════════ */
.skehans-container {
	padding: 40px 20px;
}
.skehans-container.is-compact {
	padding-left: 10px;
	padding-right: 10px;
}
.skehans-container.is-small {
	padding: 20px 20px;
}
@media ( min-width: 1024px ) {
	.skehans-container {
		padding: 60px 100px;
		max-width: 1800px;
		margin: 0 auto;
	}
	.skehans-container.is-compact {
		padding-left: 90px;
		padding-right: 90px;
	}
	.skehans-container.is-small {
		padding: 40px 100px;
		padding-bottom: 0;
	}
}

/* ════════ SectionTitle ════════ */
.skehans-section-title {
	font-family: var( --font-roboto );
	letter-spacing: 5px;
	font-size: 14px;
	font-weight: 400;
	color: var( --dark-green );
	text-transform: uppercase;
	padding-bottom: 20px;
	margin: 0;
}
.skehans-section-title.is-white { color: #ffffff; }
.skehans-section-title.is-black { color: var( --dark-green ); }
.skehans-section-title.is-left { text-align: left; }
.skehans-section-title.is-center { text-align: center; }
@media ( min-width: 480px ) {
	.skehans-section-title { font-size: 18px; }
}

/* ════════ ArticleTitle ════════ */
.skehans-article-title {
	font-family: var( --font-asul );
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.6;
	margin: 0;
}
.skehans-article-title.is-black { color: #000000; }
.skehans-article-title.is-white { color: #ffffff; }
.skehans-article-title.is-left { text-align: left; }
.skehans-article-title.is-center { text-align: center; }
.skehans-article-title.is-right { text-align: right; }
.skehans-article-title.has-spacing { margin-bottom: 2rem; }
.skehans-article-title.has-underline::after {
	content: "";
	display: block;
	width: 50px;
	height: 1px;
	background-color: var( --dark-green );
	margin-top: 10px;
}
.skehans-article-title.is-center.has-underline::after { margin-left: auto; margin-right: auto; }
.skehans-article-title.is-right.has-underline::after { margin-left: auto; }
@media ( min-width: 480px ) {
	.skehans-article-title { font-size: 34px; }
}
@media ( min-width: 768px ) {
	.skehans-article-title { font-size: 40px; line-height: 1.3; }
}
@media ( min-width: 1440px ) {
	.skehans-article-title { font-size: 48px; }
}

/* ════════ TextContent ════════ */
.skehans-text-content {
	font-size: 17px;
	line-height: 1.65;
	margin: 1rem 0;
}
.skehans-text-content.is-asul {
	font-family: var( --font-asul );
	font-weight: 700;
}
.skehans-text-content.is-roboto {
	font-family: var( --font-roboto );
}
.skehans-text-content h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; }
.skehans-text-content h2 { font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
.skehans-text-content h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px; }
.skehans-text-content h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 2.5px; }
.skehans-text-content h5 { font-size: 1rem; font-weight: 700; margin-bottom: 1.25px; }
.skehans-text-content h6 { font-size: 0.875rem; font-weight: 700; margin-bottom: 0.625px; }
.skehans-text-content p { margin-bottom: 10px; }
.skehans-text-content ul { list-style-type: disc; margin-bottom: 10px; }
.skehans-text-content li { margin-bottom: 5px; list-style-type: disc; margin-left: 20px; }
.skehans-text-content a { color: var( --color-asul ); }
.skehans-text-content strong { font-weight: 600; }
.skehans-text-content em { font-style: italic; }

/* ════════ Button ════════ */
.skehans-button {
	background-color: var( --dark-green );
	border-radius: 8px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	outline: none;
	transition: background-color 0.3s ease;
	text-align: center;
	display: inline-block;
	box-shadow: none;
	margin: 0;
	text-decoration: none;
	font-family: inherit;
	color: #fff !important;
	font-size: 20px;
	text-transform: uppercase;
	padding: 10px 20px;
	min-width: 150px;
}
.skehans-button:hover { background-color: #007a00; }
.skehans-button:focus { outline: none; }
.skehans-button:active { transform: translateY( 1px ); }

/* ════════ Underlined ════════ */
.skehans-underlined::after {
	content: "";
	display: block;
	width: 50px;
	height: 1px;
	background-color: var( --dark-green );
	margin-top: 10px;
}

/* ════════ FadeUp (Next.js react-awesome-reveal → IntersectionObserver) ════════ */
/* Stan ukryty TYLKO gdy JS potwierdzony (html.skehans-js) — bez JS / przy awarii
   treść jest widoczna (SEO, no-JS, dostępność). */
.skehans-js .skehans-fade-up {
	opacity: 0;
	transform: translate3d( 0, 100px, 0 );
}
.skehans-js .skehans-fade-up.is-revealed {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
	transition: opacity 0.6s ease, transform 0.6s ease;
}
@media ( prefers-reduced-motion: reduce ) {
	.skehans-js .skehans-fade-up,
	.skehans-js .skehans-fade-up.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ════════ Carousel (port z Next.js src/components/ui/Carousel) ════════ */
/* Next.js używa embla-carousel — tu vanilla JS (assets/js/carousel.js). */
.skehans-carousel {
	position: relative;
}
.skehans-carousel__viewport {
	overflow: hidden;
	margin: 0 auto;
}
.skehans-carousel__container {
	display: flex;
	-webkit-tap-highlight-color: transparent;
	align-items: stretch;
	transition: transform 0.4s ease;
}
.skehans-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	user-select: none;
	-webkit-user-select: none;
	height: auto;
	display: flex;
}
.skehans-carousel__slide > * {
	width: 100%;
	height: 100%;
}
.skehans-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 800px;
	margin: 10px auto 0;
}
.skehans-carousel__button {
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: all 0.3s ease;
	background: transparent;
	padding: 0;
	flex-shrink: 0;
	flex-grow: 0;
	min-width: 40px;
}
.skehans-carousel__button:hover {
	transform: scale( 1.2 );
	background: transparent;
	box-shadow: none;
}
.skehans-carousel--dark .skehans-carousel__button {
	color: #000;
}
.skehans-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 1rem;
	flex-wrap: wrap;
	max-width: 80%;
}
.skehans-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	background: rgba( 255, 255, 255, 0.3 );
	cursor: pointer;
	transition: all 0.3s ease;
}
.skehans-carousel--dark .skehans-carousel__dot {
	background: rgba( 0, 0, 0, 0.3 );
}
.skehans-carousel__dot.is-selected {
	background: #fff;
	transform: scale( 1.2 );
}
.skehans-carousel--dark .skehans-carousel__dot.is-selected {
	background: var( --dark-green );
}
@media ( min-width: 1024px ) {
	.skehans-carousel__nav {
		margin-top: 20px;
	}
}
/* slides-per-view — breakpointSlides. Mobile zawsze 1. */
@media ( min-width: 768px ) {
	.skehans-carousel--slides-tablet-2 .skehans-carousel__slide { flex: 0 0 50%; }
	.skehans-carousel--slides-tablet-3 .skehans-carousel__slide { flex: 0 0 33.3333%; }
}
@media ( min-width: 1024px ) {
	.skehans-carousel--slides-desktop-2 .skehans-carousel__slide { flex: 0 0 50%; }
	.skehans-carousel--slides-desktop-3 .skehans-carousel__slide { flex: 0 0 33.3333%; }
	.skehans-carousel--slides-desktop-4 .skehans-carousel__slide { flex: 0 0 25%; }
}

/* ════════ Navigation — desktop responsive ════════ */
/* Bump linków do 17px na ≥1200px (port z Next.js --desktop-medium). */
@media ( min-width: 1200px ) {
	.skehans-header .wp-block-navigation a { font-size: 17px; }
}
/* Desktop nav widoczny dopiero od 1024px (port z Next.js --desktop). */
@media ( max-width: 1023px ) {
	.skehans-header__nav { display: none !important; }
}

/* ════════ Page banner — baner podstron (port z Next.js common/Navigation) ════════ */
/* 500px baner pod nawigacją na podstronach (page.html). Logo jest wtopione
   w og-poster.webp. Nav-clearance robi padding-top na .wp-site-blocks. */
.skehans-page-banner {
	width: 100%;
	height: 500px;
	background-image: url( "../images/og-poster.webp" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ════════ MobileNavigation (port 1:1 z Next.js MobileNavigation) ════════ */
/* Linki ładowane z menu WP (lokalizacja "mobile" — Wygląd → Menu),
   render w functions.php na wp_body_open. */
.skehans-mobile-nav {
	display: none;
}

.skehans-mobile-nav__toggle {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 102;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2 );
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.skehans-mobile-nav.is-open .skehans-mobile-nav__toggle {
	background: transparent;
	box-shadow: none;
}
.skehans-mobile-nav__icon {
	display: flex;
	transition: transform 0.3s ease;
}
.skehans-mobile-nav__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}
.skehans-mobile-nav__icon--bars { color: #000000; }
.skehans-mobile-nav__icon--close { display: none; color: #ffffff; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__icon--bars { display: none; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__icon--close {
	display: flex;
	transform: rotate( 180deg );
}

.skehans-mobile-nav__panel {
	position: fixed;
	top: 0;
	right: 0;
	width: min( 480px, 100% );
	height: 100vh;
	height: 100dvh;
	z-index: 101;
	box-sizing: border-box;
	padding: 24px;
	display: flex;
	flex-direction: column;
	color: #ffffff;
	background-color: var( --dark-green );
	background-image: url( "../images/pattern.webp" );
	background-repeat: repeat;
	background-size: 500px;
	box-shadow: -4px 0 16px rgba( 0, 0, 0, 0.1 );
	clip-path: circle( 0% at calc( 100% - 36px ) 36px );
	transition: clip-path 0.55s cubic-bezier( 0.4, 0, 0.2, 1 );
	pointer-events: none;
}
.skehans-mobile-nav.is-open .skehans-mobile-nav__panel {
	clip-path: circle( 150% at calc( 100% - 36px ) 36px );
	pointer-events: auto;
}

.skehans-mobile-nav__logo {
	margin-bottom: 40px;
	padding-top: 16px;
	display: flex;
	justify-content: center;
}
.skehans-mobile-nav__logo img {
	display: block;
	height: 45px;
	width: auto;
}

.skehans-mobile-nav__links {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-family: var( --font-asul );
}
.skehans-mobile-nav__link {
	display: block;
	padding: 12px 0;
	color: #ffffff;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 2px solid rgba( 255, 255, 255, 0.1 );
	opacity: 0;
	transform: translateX( 20px );
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}
.skehans-mobile-nav__link:last-child { border-bottom: none; }
.skehans-mobile-nav__link:hover { color: rgba( 255, 255, 255, 0.8 ); }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link {
	opacity: 1;
	transform: translateX( 0 );
}
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 1 ) { transition-delay: 0.20s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 2 ) { transition-delay: 0.26s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 3 ) { transition-delay: 0.32s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 4 ) { transition-delay: 0.38s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 5 ) { transition-delay: 0.44s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 6 ) { transition-delay: 0.50s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 7 ) { transition-delay: 0.56s; }
.skehans-mobile-nav.is-open .skehans-mobile-nav__link:nth-child( 8 ) { transition-delay: 0.62s; }

body.skehans-mobile-nav-open {
	overflow: hidden;
}

@media ( max-width: 1023px ) {
	.skehans-mobile-nav { display: block; }
}
@media ( prefers-reduced-motion: reduce ) {
	.skehans-mobile-nav__panel { transition-duration: 0.001s; }
	.skehans-mobile-nav__link {
		transition-duration: 0.001s;
		transition-delay: 0s !important;
	}
}

/* ════════ Footer (port 1:1 z Next.js common/Footer) ════════ */
.skehans-footer {
	background-color: #17221c;
	color: #ffffff;
	padding-top: 30px;
	padding-bottom: 30px;
}

.skehans-footer__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.skehans-footer__logo {
	margin-bottom: 40px;
	width: 193px;
	height: auto;
}

.skehans-footer__title {
	font-family: var( --font-roboto );
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
	text-transform: uppercase;
	color: #ffffff;
}

.skehans-footer__desc {
	max-width: 500px;
	margin: 0 0 15px;
	font-size: 16px;
	line-height: 1.6;
}

.skehans-footer__cta {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 700;
}

.skehans-footer__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.skehans-footer__social-link {
	display: inline-flex;
	transition: transform 0.3s ease;
}

.skehans-footer__social-link:hover {
	transform: scale( 1.1 );
}

.skehans-footer__social-link img {
	display: block;
	width: 80px;
	height: 80px;
}

.skehans-footer__copyright {
	width: 100%;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

@media ( min-width: 1024px ) {
	.skehans-footer {
		padding-top: 0;
		padding-bottom: 0;
	}

	.skehans-footer__content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
	}

	.skehans-footer__logo {
		margin-bottom: 0;
	}

	.skehans-footer__social {
		margin-top: 0;
	}
}