/* ==========================================================================
   STRONA GŁÓWNA - STYLIZACJA (wzór: hyta.pl)
   ========================================================================== */

/* Zmienne i ustawienia bazowe */
:root {
	--gl-bg: #F5F1E4;
	--gl-text: #474747;
	--gl-gold: #9D7539;
	--gl-gold-hover: #b08a4f;
	--gl-white: #ffffff;
}

body.page-template-template-glowna {
	background-color: var(--gl-bg);
	color: var(--gl-text);
	font-family: 'Inter', sans-serif; /* lub dziedziczone z Astry */
	margin: 0;
	padding: 0;
}

/* Usuwamy górny pasek jeśli jest (zależnie od ustawień Astry) */
.ast-container { max-width: 100% !important; padding: 0 !important; }
.site-content { padding: 0 !important; margin: 0 !important; }

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.text-center { text-align: center; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

h1, h2, h3, h4, h5, h6 { color: var(--gl-text); margin-top: 0; }

.gl-section-title {
	font-size: 2.5rem;
	font-weight: 500;
	margin-bottom: 3rem;
}
.gl-section-subtitle {
	display: block;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666;
	margin-bottom: 0.5rem;
}

/* Przyciski */
.gl-btn {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
	cursor: pointer;
}
.gl-btn.btn-primary {
	background-color: var(--gl-text);
	color: var(--gl-bg);
}
.gl-btn.btn-primary:hover {
	background-color: var(--gl-gold);
	color: var(--gl-white);
}
.gl-btn.btn-outline {
	border: 1px solid var(--gl-text);
	color: var(--gl-text);
	background: transparent;
}
.gl-btn.btn-outline:hover {
	background-color: var(--gl-text);
	color: var(--gl-bg);
}
.gl-btn.btn-text {
	color: var(--gl-text);
	padding: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--gl-text);
}
.gl-btn.btn-text:hover {
	color: var(--gl-gold);
	border-color: var(--gl-gold);
}


/* =========================================
   1. HERO
   ========================================= */
.gl-hero {
	position: relative;
	height: calc(100vh + 100px);
	height: calc(100dvh + 100px); /* nowoczesne jednostki viewport dla mobile */
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
	/* Fix for headers */
	margin-top: -100px;
	padding-top: 100px;
}
.gl-hero-bg-video, .gl-hero-bg-image {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 1;
}
.gl-hero-bg-image {
	background-size: cover;
	background-position: center;
}
.gl-hero-overlay {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 2;
}
.gl-hero-content {
	position: relative;
	z-index: 3;
	text-align: center;
	color: var(--gl-white);
}
.gl-hero-title {
	font-size: 3.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--gl-white);
}
.gl-hero-desc {
	font-size: 1.25rem;
	max-width: 600px;
	margin: 0 auto;
}


/* =========================================
   2. CYTAT
   ========================================= */
.gl-quote {
	padding: 6rem 0;
	text-align: center;
}
.gl-quote-text {
	font-size: 2rem;
	font-weight: 500;
	font-style: italic;
	margin-bottom: 1rem;
	color: var(--gl-gold);
}
.gl-quote-author {
	font-size: 1.1rem;
	font-weight: 600;
}


/* =========================================
   3. 9 KART
   ========================================= */
.gl-cards9 {
	padding: 4rem 0;
	position: relative;
}
.swiper-cards9 {
	padding-bottom: 3rem;
}
.gl-card9-item {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	aspect-ratio: 3/4;
	cursor: pointer;
}
.gl-card9-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.gl-card9-item:hover img {
	transform: scale(1.05);
}
.gl-card9-overlay {
	position: absolute;
	bottom: 0; left: 0; width: 100%;
	padding: 40px 20px 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.gl-card9-title {
	color: var(--gl-white);
	margin: 0;
	font-size: 1.5rem;
}

/* Dialog Popup */
.gl-popup {
	border: none;
	border-radius: 15px;
	padding: 0;
	max-width: 600px;
	width: 90%;
	background: var(--gl-bg);
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.gl-popup::backdrop {
	background: rgba(0,0,0,0.6);
}
.gl-popup-inner {
	padding: 40px;
	position: relative;
}
.gl-popup-close {
	position: absolute;
	top: 15px; right: 20px;
	background: none; border: none;
	font-size: 2rem; cursor: pointer;
	color: var(--gl-text);
	transition: color 0.3s ease;
	outline: none;
}
.gl-popup-close:hover,
.gl-popup-close:focus {
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--gl-gold);
}
.gl-popup-title {
	margin-bottom: 1rem;
	color: var(--gl-text);
}
.gl-popup-content {
	line-height: 1.6;
}


/* =========================================
   4. WYBRANE PROJEKTY
   ========================================= */
.gl-projects {
	padding: 6rem 0;
}
.gl-project-item {
	display: flex;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.gl-project-text {
	flex: 1;
	padding: 60px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.gl-project-image {
	flex: 1;
}
.gl-project-image img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.gl-project-name {
	font-size: 2.5rem;
	margin-bottom: 10px;
}
.gl-project-desc {
	font-size: 1.1rem;
	color: #666;
	margin-bottom: 2rem;
}
.gl-project-specs {
	list-style: none; padding: 0; margin: 0 0 2rem 0;
	display: flex; flex-wrap: wrap; gap: 10px;
}
.gl-project-specs li {
	background: var(--gl-bg);
	padding: 8px 15px;
	border-radius: 30px;
	font-size: 0.9rem;
	font-weight: 500;
}
.gl-project-actions {
	display: flex; gap: 15px; align-items: center;
}


/* =========================================
   5. NASZE WARTOŚCI
   ========================================= */
.gl-values {
	padding: 6rem 0;
}
.gl-values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 3rem;
}
.gl-value-card {
	text-align: center;
}
.gl-value-img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 15px;
	margin-bottom: 20px;
}
.gl-value-title {
	font-size: 1.5rem;
	margin-bottom: 15px;
}
.gl-value-desc {
	color: #555;
	line-height: 1.6;
}


/* =========================================
   6. WIDEO SEKCYJNE
   ========================================= */
.gl-video-section {
	padding: 6rem 0;
}
.gl-video-container {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16/9;
	background: #000;
}
.gl-video-container video, .gl-video-embed iframe {
	width: 100%; height: 100%; border: none;
}


/* =========================================
   7. 3 KARTY INTERAKTYWNE
   ========================================= */
.gl-inter {
	padding: 6rem 0;
}
.gl-inter-tabs {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 3rem;
}
.gl-inter-tab {
	background: transparent;
	color: var(--gl-text);
	border: 1px solid var(--gl-text);
	padding: 10px 30px;
	border-radius: 30px;
	cursor: pointer;
	font-size: 1rem;
	transition: all 0.3s ease;
}
.gl-inter-tab:hover,
.gl-inter-tab.active {
	background: var(--gl-text);
	color: var(--gl-bg);
	border-color: var(--gl-text);
}
.gl-inter-content {
	position: relative;
	min-height: 500px; /* adjust based on video aspect */
}
.gl-inter-pane {
	position: absolute;
	top: 0; left: 0; width: 100%;
	opacity: 0; pointer-events: none;
	transition: opacity 0.5s ease;
}
.gl-inter-pane.active {
	opacity: 1; pointer-events: auto;
	position: relative;
}
.gl-inter-video-wrap {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16/9;
	margin-bottom: 20px;
	position: relative;
}
.gl-inter-video, .gl-inter-video-wrap img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.gl-inter-desc-overlay {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 800px;
	background: rgba(20, 20, 20, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--gl-gold);
	border-radius: 15px;
	padding: 25px 30px;
	box-sizing: border-box;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.gl-inter-desc {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: #fff;
}

@media (max-width: 767px) {
	.gl-desktop-only { display: none !important; }
	.gl-inter-desc-overlay {
		padding: 15px 20px;
		bottom: 15px;
		width: 95%;
	}
	.gl-inter-desc {
		font-size: 1rem;
	}
}
@media (min-width: 768px) {
	.gl-mobile-only { display: none !important; }
}


/* =========================================
   8. OŚ CZASU
   ========================================= */
.gl-timeline {
	padding: 6rem 0;
}
.gl-timeline-list {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
}
.gl-timeline-line {
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 2px;
	background: var(--gl-gold);
	transform: translateX(-50%);
}
.gl-timeline-item {
	position: relative;
	margin-bottom: 60px;
	display: flex;
	justify-content: center;
}
.gl-timeline-marker {
	width: 40px; height: 40px;
	background: var(--gl-gold);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: bold;
	position: absolute;
	left: 50%; transform: translateX(-50%);
	z-index: 2;
}
.gl-timeline-content {
	width: 45%;
	background: #fff;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	position: relative;
}
.gl-timeline-content.even {
	margin-right: auto;
}
.gl-timeline-content.odd {
	margin-left: auto;
}
.gl-timeline-img img {
	width: 100%; border-radius: 10px; margin-bottom: 15px;
}


/* =========================================
   9. OPINIE
   ========================================= */
.gl-testi {
	padding: 6rem 0;
}
.gl-testi-card {
	display: flex;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	margin: 20px; /* for shadow */
}
.gl-testi-img {
	flex: 0 0 40%;
}
.gl-testi-img img {
	width: 100%; height: 100%; object-fit: cover;
}
.gl-testi-content {
	flex: 1;
	padding: 40px;
	display: flex; flex-direction: column; justify-content: center;
	background: #fff;
}
.gl-testi-quote {
	font-style: italic;
	font-size: 1.1rem;
	margin-bottom: 20px;
}
.gl-testi-author {
	font-weight: bold;
	font-size: 1.1rem; margin: 0;
}
.gl-testi-author-desc {
	font-size: 0.9rem; color: #666; margin: 5px 0 0 0;
}

/* =========================================
   10. BLOG
   ========================================= */
.gl-blog {
	padding: 6rem 0;
}
.gl-blog-card {
	display: block;
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	transition: transform 0.3s;
}
.gl-blog-card:hover {
	transform: translateY(-5px);
}
.gl-blog-img {
	aspect-ratio: 16/9;
}
.gl-blog-img img {
	width: 100%; height: 100%; object-fit: cover;
}
.gl-blog-placeholder {
	width: 100%; height: 100%; background: #ddd;
}
.gl-blog-content {
	padding: 25px;
}
.gl-blog-date {
	font-size: 0.85rem; color: #888; margin-bottom: 10px;
}
.gl-blog-title {
	font-size: 1.25rem; margin-bottom: 10px;
}
.gl-blog-excerpt {
	font-size: 0.95rem; color: #555; margin-bottom: 20px;
}
.gl-blog-readmore {
	font-weight: 600; color: var(--gl-gold);
}


/* =========================================
   NAV STRZAŁKI SWIPER (Globalne nadpisanie)
   ========================================= */
.swiper-button-next, .swiper-button-prev {
	color: var(--gl-text);
	background: #fff;
	width: 50px; height: 50px;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.swiper-button-next:after, .swiper-button-prev:after {
	font-size: 1.2rem;
}


/* =========================================
   RESPONSYWNOŚĆ (MEDIA QUERIES)
   ========================================= */
@media (max-width: 992px) {
	.gl-section-title { font-size: 2rem; margin-bottom: 2rem; }
	.gl-hero-title { font-size: 2.5rem; }
	.gl-values-grid { grid-template-columns: 1fr; gap: 30px; }
	.gl-project-item { flex-direction: column-reverse; }
	.gl-project-text, .gl-project-image { flex: auto; }
	.gl-project-image { aspect-ratio: 16/9; }
	.gl-project-text { padding: 40px 30px; }
	
	.gl-timeline-line { left: 30px; transform: none; }
	.gl-timeline-marker { left: 30px; transform: translateX(-50%); }
	.gl-timeline-content { width: calc(100% - 80px); margin-left: auto !important; margin-right: 0 !important; }
	
	.gl-testi-card { flex-direction: column; margin: 10px; }
	.gl-testi-img { aspect-ratio: 16/9; }
	.gl-testi-content { padding: 30px; }
	
	/* Zmniejszenie paddingów sekcji */
	.gl-quote, .gl-projects, .gl-values, .gl-video-section, .gl-inter, .gl-timeline, .gl-testi, .gl-blog { padding: 4rem 0; }
}

@media (max-width: 768px) {
	.wrapper {
		padding: 0 30px;
	}
	.gl-section-title { font-size: 1.75rem; }
	.gl-hero-title { font-size: 2rem; }
	.gl-hero-desc { font-size: 1.1rem; }
	
	.gl-quote-text { font-size: 1.5rem; }
	.gl-inter-tabs { flex-direction: column; }
	
	.gl-popup-inner { padding: 25px 20px; }
	.gl-project-name { font-size: 2rem; }
	.gl-project-text { padding: 30px 20px; }
	
	.gl-timeline-item { margin-bottom: 40px; }
	.gl-timeline-marker { width: 30px; height: 30px; font-size: 0.9rem; left: 20px; }
	.gl-timeline-line { left: 20px; }
	.gl-timeline-content { width: calc(100% - 50px); padding: 15px; }
	
	/* Zmniejszenie paddingów sekcji na telefonach */
	.gl-quote, .gl-projects, .gl-values, .gl-video-section, .gl-inter, .gl-timeline, .gl-testi, .gl-blog { padding: 3rem 0; }
	.gl-cards9 { padding: 2rem 0; }
}

@media (max-width: 480px) {
	.gl-hero-title { font-size: 1.75rem; }
	.gl-project-actions { flex-direction: column; align-items: stretch; }
	.gl-btn { text-align: center; }
	.gl-testi-content { padding: 20px; }
	.gl-testi-quote { font-size: 1rem; }
}