/* ============================================================
   GLOBÁLNÍ RESPONSIVE SYSTÉM PRO CELÝ WEB
   Platí pro: .section-container + všechny sekce webu
   Funguje na HERO, O NÁS, BENEFITY, SLIDER, UKÁZKY, POPTÁVKA,
   KONTAKT, THANK YOU, FOOTER i další sekce.
============================================================== */

.section-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

/* 🖥 Ultra-wide screens (1600px+) */
@media (min-width: 1900px) {
	.section-container {
		max-width: 50vw;
	}
}

/* 🖥 Large Desktop (1200–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
	.section-container {
		max-width: 70vw;
	}
}

/* 💻 Medium Desktop (900–1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
	.section-container {
		max-width: 85vw;
	}
}

/* 📱 Tablets (700–899px) */
@media (min-width: 700px) and (max-width: 899px) {
	.section-container {
		max-width: 90vw;
	}
}

/* 📱 Mobile L (530–699px) */
@media (min-width: 530px) and (max-width: 699px) {
	.section-container {
		max-width: 92vw;
	}
}

/* 📱 Mobile S (0–529px) */
@media (max-width: 529px) {
	.section-container {
		max-width: 95vw;
	}
}
/* =============================================
   NAVIGACE – stejné breakpointy jako sekce
   (zarovnání s obsahem při změně šířky okna)
============================================= */

/* Výchozí stav */
.navigace {
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

/* 🖥 Ultra-wide screens (1900px+) */
@media (min-width: 1900px) {
	.navigace {
		max-width: 50vw;
	}
}

/* 🖥 Large Desktop (1200–1599px) */
@media (min-width: 1200px) and (max-width: 1599px) {
	.navigace {
		max-width: 70vw;
	}
}

/* 💻 Medium Desktop (900–1199px) */
@media (min-width: 900px) and (max-width: 1199px) {
	.navigace {
		max-width: 85vw;
	}
}

/* 📱 Tablets (700–899px) */
@media (min-width: 700px) and (max-width: 899px) {
	.navigace {
		max-width: 90vw;
	}
}

/* 📱 Mobile L (530–699px) */
@media (min-width: 530px) and (max-width: 699px) {
	.navigace {
		max-width: 92vw;
	}
}

/* 📱 Mobile S (0–529px) */
@media (max-width: 529px) {
	.navigace {
		max-width: 95vw;
	}
}

/* ============================================================
   NAV – zobrazení menu vs. hamburger
============================================================== */

/* 📱 Mobilní režim – hamburger aktivní */
@media (max-width: 860px) {
	.links {
		display: none;
	}
	.toggle-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}
	/* Dropdown může být zobrazitelný, ale otevírá ho JS */
	.dropdown-menu {
		display: none; /* výchozí stav, přepíná se třídou .open */
	}
}

/* 🖥 Desktop režim – vždy plná navigace */
@media (min-width: 861px) {
	.links {
		display: flex;
	}
	.toggle-btn {
		display: none;
	}
	.dropdown-menu {
		display: none !important;
	}
}

/* ============================================================
   HERO
============================================================== */

@media (max-width: 980px) {
	.hero-mřížka {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1000px) {
	.piliny-img {
		display: none;
	}

	.hero-wood__inner {
		flex-direction: column;
		gap: 20px;
		margin-top: 80px; /* můžeš upravit podle potřeby */
	}

	.hero-wood {
		height: auto; /* hero může být vyšší u mobilů */
		padding-bottom: 40px;
	}
}
@media (min-width: 2200px) {
    .o-nas__image img {
        max-height: 700px;   /* obrázek nepřesáhne výšku 700 px */
        height: 700px;       /* drží pevnou výšku */
        width: auto;         /* šířka se dopočítá podle poměru stran */
        object-fit: contain; /* zajistí, že se obrázek nepřetáhne nebo nedeformuje */
    }
}

@media (min-width: 2200px) {
    .piliny-img img {
        width: 600px;        /* nebo konkrétní velikost, kterou chceš držet */
        max-width: 600px;    /* zabrání dalšímu zvětšování */
        height: auto;        /* zachová poměr stran */
    }
}

/* ============================================================
   O NÁS
============================================================== */

@media (max-width: 700px) {
	.o-nas__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.o-nas__image img {
		max-width: 90%;
		margin: 0 auto;
	}
	.o-nas__list {
		padding-left: 0;
		list-style-position: inside;
	}
}

/* ============================================================
   BENEFITY
============================================================== */

@media (max-width: 768px) {
	.benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 530px) {
	.benefits__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* ============================================================
   SLIDER / UKÁZKY – karty + galerie
============================================================== */

@media (max-width: 699px) and (min-width: 530px) {
	.galerie {
		grid-template-columns: repeat(2, 1fr);
	}
	.slider-section {
		padding: 0;
	}
}

@media (max-width: 529px) {
	.galerie {
		grid-template-columns: 1fr;
	}
	.galerie img {
		height: 200px;
	}
}

/* =============================================
   KONTAKT + POPTÁVKA – RESPONSIVE
============================================= */

/* Tablet – 900 px a méně → 1 sloupec */
@media (max-width: 900px) {
	.kontakt-poptavka-grid {
		grid-template-columns: 1fr;
		gap: 50px;
	}
	.kontakt-form-box {
		max-width: 600px;
		margin: 0 auto;
		padding: 0;
	}
	.kontakt-info-box {
		align-items: center;
	}
	.slider-section {
		padding: 0;
	}
}

/* Mobile L – 700 px a méně */
@media (max-width: 700px) {
	.formular {
		padding: 24px;
	}
}

/* Mobile S – 500 px a méně */
@media (max-width: 500px) {
	.formular {
		padding: 10px;
	}
	.radka {
		grid-template-columns: 1fr; /* jméno + email pod sebe */
	}
}

/* ============================================================
   FOOTER
============================================================== */

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
}

@media (max-width: 700px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.footer-buttons {
		flex-wrap: wrap;
	}
}

/* ============================================================
   THANK YOU PAGE
============================================================== */

@media (max-width: 700px) {
	.thankyou-box {
		padding: 28px 24px;
	}
	.thankyou-box h1 {
		font-size: 26px;
	}
	.thankyou-text {
		font-size: 16px;
	}
	.thankyou-icon {
		width: 64px;
		height: 64px;
		font-size: 28px;
	}
}