/* HERO SEKCE */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    width: 75%;
    padding: 8rem 0;
}

.hero h3 {
    color: #ff6600;
    padding-bottom: 1rem;
    font-size: 0.95rem;
}

.hero h2 {
    font-size: 4rem;
    font-weight: 600;
    padding-bottom: 2rem;
    line-height: 1;
    width: 36rem;
}

.hero p {
    font-size: 1rem;
}

/* KONTAKTNÍ INFORMACE */
.contact-info {
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    background-color: #f3f1ee;
    display: flex;
    width: 100%;
    justify-content: center;
}

.wrapper {
    display: flex;
    width: 75%;
}

.contact-info .card {
    width: 25%;
}

.contact-info .card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition-duration: 0.2s;
    padding: 1.5rem 0.5rem;
}

.contact-info .card a:hover {
    background-color: #e4e2df;
}

.contact-info .card a img {
    width: 2rem;
    padding-bottom: 0.5rem;
}

.contact-info .card a h4 {
   color: #000;
   font-weight: 500;
   font-size: 0.8rem;
}

.contact-info .card a p {
    color: #000;
    font-weight: 600;
}

/* NA LIDI */

.people {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
    gap: 10rem;
}

.people .card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.people .card a {
    color: #000;
    text-decoration: none;
}

/* SEKCE POPTÁVKA (50/50 ROZDĚLENÍ) */

.poptavka {
    display: flex;
    justify-content: center;
    width: 75%;
    margin: 0 auto;
    padding: 5rem 0;
    gap: 4rem; /* Mezera mezi formulářem a pravou částí */
}

.poptavka .left, 
.poptavka .right {
    /* Přesné rozdělení na polovinu minus polovina mezery */
    width: calc(50% - 2rem); 
}

/* FORMULÁŘ A LABELY */
.poptavka form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1rem; /* Větší vertikální mezera pro labely */
    margin-top: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* Šířka polí ve formuláři */
.form-group.half {
    width: calc(50% - 0.5rem);
}

.form-group.full {
    width: 100%;
}

.poptavka form label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

/* Vzhled inputů */
.poptavka form input, 
.poptavka form select, 
.poptavka form textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    font-family: inherit;
}

/* Fixní výška pro zprávu */
.poptavka form textarea {
    height: 150px;
    resize: vertical;
}

/* Odesílací tlačítko */
.poptavka form input[type="submit"] {
    width: 100%;
    background-color: #ff6600;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s;
    margin-top: 0.5rem;
    padding: 1.2rem;
}

.poptavka form input[type="submit"]:hover {
    background-color: #e65c00;
}

/* Podmínky pod formulářem */
#podminky {
    font-size: 0.85rem;
    color: #666;
    margin-top: 1rem;
}

/* STYL PRO MAPU */
.map-container {
    margin-top: 2rem;
    width: 100%;
    height: 100%;
    min-height: 450px;
}

.map-container iframe {
    width: 90%;
    height: 90%;
    border-radius: 8px; /* Zaoblení rohů ladící s inputy */
    border: 1px solid #c7c7c7 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Jemný stín pro hloubku */
}

/* Úprava nadpisu v pravé části, aby lícoval s levou */
.poptavka .right h3 {
    margin-bottom: 0;
}

/* --- KOMPLETNÍ RESPONZIVITA --- */

/* 1. DESKTOP / TABLET (přechod na 2 sloupce u karet a 1 sloupec u poptávky) */
@media (max-width: 1400px) {
    /* Hlavní kontejnery */
    .hero-content, 
    .wrapper, 
    .poptavka {
        width: 90%;
    }

    /* KONTAKTNÍ INFORMACE: Z 4 na 2 sloupce */
    .wrapper {
        flex-wrap: wrap;
    }

    .contact-info .card {
        width: 50%; /* 2 sloupce */
        border-bottom: 1px solid #c7c7c7;
    }

    /* Odstranění spodního rámu u posledních dvou (volitelné) */
    .contact-info .card:nth-child(3),
    .contact-info .card:nth-child(4) {
        border-bottom: none;
    }

    .people {
        flex-wrap: wrap;
    }

    /* POPTÁVKA: Formář a mapa pod sebe */
    .poptavka {
        flex-direction: column;
        gap: 2rem;
        padding: 4rem 0;
    }

    .poptavka .left, 
    .poptavka .right {
        width: 100%;
    }

    /* MAPA: Úprava výšky (zmenšení cca o polovinu oproti původním 450px) */
    .map-container {
        min-height: auto; /* Zrušíme původní min-height */
    }

    .map-container iframe {
        width: 100%;
        height: 250px; /* Snížená výška pro kompaktnější vzhled */
    }
}

/* 2. MOBILY (přechod na 1 sloupec u všeho) */
@media (max-width: 600px) {
    /* KONTAKTNÍ INFORMACE: Z 2 na 1 sloupec */
    .contact-info .card {
        width: 100%;
    }

    .contact-info .card:nth-child(3) {
        border-bottom: 1px solid #c7c7c7;
    }

    /* HERO: Přizpůsobení textu */
    .hero h2 {
        font-size: 2.5rem;
        width: 100%;
    }

    /* FORMULÁŘ: Všechna pole na celou šířku */
    .form-group.half {
        width: 100%;
    }

    .poptavka form {
        gap: 1rem;
    }
}