/* ==========================================================================
   1. GLOBÁLNÍ NASTAVENÍ
   ========================================================================== */
* {
    box-sizing: border-box; /* Zajišťuje, že padding neovlivní šířku prvků */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    color: #000;
}

/* ==========================================================================
   2. HLAVIČKA (HEADER)
   ========================================================================== */
.hlavni-header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #333;
    padding: 40px 0;
    width: 100%;
}

.header-kontejner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-img {
    height: auto;
    max-width: 400px;
    display: block;
}

/* ==========================================================================
   3. HLAVNÍ OBSAH (ZÁKLADNÍ SADA)
   ========================================================================== */
.zakladni-sada {
    padding: 50px 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.obsah-kontejner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.textova-cast {
    flex: 1;
}

/* Typografie */
.textova-cast h1 { font-size: 68px; font-weight: 900; margin-bottom: 5px; }
.podnadpis { font-size: 40px; line-height: 1.2; display: inline; padding-bottom: 5px; }

.priklad-pouziti { margin-top: 80px; }
.priklad-pouziti h2 { font-size: 60px; font-weight: 800; margin-bottom: 20px; }
.priklad-pouziti h3 { font-size: 50px; font-weight: 800; margin-bottom: 15px; }
.priklad-pouziti p { font-size: 40px; line-height: 1.4; padding-bottom: 40px; }
.priklad-pouziti li { font-size: 40px; max-width: 800px;}
.priklad-pouziti ul {padding-left: 20px;}

/* Obrázková část */
.obrazkova-cast {
    flex: 1;
    display: flex;
    justify-content: center;
}

.obrazkova-cast img {
    max-width: 100%;
    height: auto;
    transform: rotate(5deg);
}

/* Utility pro pozicování (původní layout) */
.wrap-dolu      { margin-top: 120px; }
.wrap-nahoru    { margin-top: -230px; }
.wrap-nahoru-min { margin-top: -130px; }

/* ==========================================================================
   4. KONTAKTNÍ FORMULÁŘ
   ========================================================================== */
.section-contact {
    background-color: #f0f0f0;
    border-top: 1px solid #333;
}
.container { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.contact-form { max-width: 800px; margin: 0 auto; text-align: center; }
.contact-form h1 { font-size: 50px; font-weight: 800; }

input, textarea {
    width: 100%;
    padding: 20px;
    margin-bottom: 15px;
    background: #e6e6e6;
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: 2rem;
}

button {
    background: #ff7373;
    color: white;
    padding: 15px 60px;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    font-size: 2rem;
    cursor: pointer;
    transition: 0.3s;
}

button:hover { background: #ff5252; }

.form-message {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: bold;
  transition: opacity 0.3s ease;
}

.form-message.success {
  color: rgb(160, 160, 160);
  font-style: italic;
}

.form-message.error {
  color: red;
  font-style: italic;
}

/* ==========================================================================
   5. RESPONZIVITA (Media Queries)
   ========================================================================== */
@media (max-width: 900px) {
    /* Přechod na sloupcový layout */
    .obsah-kontejner { flex-direction: column; }
    
    /* Vynulování negativních marginů pro mobilní zobrazení */
    .wrap-nahoru, .wrap-nahoru-min, .wrap-dolu { margin-top: 20px !important; }
    
    /* Úprava velikostí fontů */
    .textova-cast h1 { font-size: 36px; }
    .podnadpis {font-size: 20px; }
    .priklad-pouziti h2 { font-size: 32px; }
    .priklad-pouziti h3 { font-size: 28px; }
    .priklad-pouziti p, .priklad-pouziti li { font-size: 20px; }
    
    /* Narovnání obrázků */
    .obrazkova-cast img { transform: rotate(0deg) !important; }
    
    /* Formulář */
    input, textarea, button { font-size: 1.5rem; }
}