/* --- ZÁKLADNÍ NASTAVENÍ A BARVY --- */
:root {
    --text-color: #333333; /* Hlavní barva textu */
    --white-text: #ffffff; /* Bílé písmo pro zelený banner */
    --green-line-color: #355230; /* Vaše zelená linka barvy #355230 */
    --bg-color: #ffffff;
    --placeholder-bg: #e6e6e6; /* Šedá pro placeholdery */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif; /* Hlavní moderní písmo */
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

/* Pomocné třídy */
.container {
    width: 90%;
    max-width: 1100px; /* Maximální šířka webu na desktopu */
    margin: 0 auto;
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.text-white {
    color: var(--white-text);
}

/* Zelená linka podle popisu a obrázků */
.green-line {
    border: none;
    border-bottom: 5px solid var(--green-line-color); /* Silnější zelená linka */
    width: 100%;
    margin-bottom: 20px;
}

/* Placeholdery pro obrázky */
.image-placeholder {
    background-color: var(--placeholder-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    font-weight: bold;
    border-radius: 8px;
}

/* Ozdobné jméno (Logo) */
.name-logo {
    display: block; /* Umožní obrázek vycentrovat */
    width: 100%; /* Zajistí, že na mobilu nepřečouhne přes okraj */
    max-width: 400px; /* Maximální šířka jména na velkém monitoru - můžeš si číslo libovolně upravit */
    margin: 40px auto; /* 40px mezera nahoře a dole, "auto" obrázek vycentruje na střed doprava i doleva */
}


/* --- 1. HLAVIČKA A MENU --- */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid #000; /* Tenká černá linka nahoře podle popisu */
    padding: 15px 0;
}

.flex-header {
    display: flex;
    justify-content: center; /* Menu vycentrované na střed */
}

.nav a {
    text-decoration: none;
    color: var(--text-color);
    margin: 0 15px; /* Mezery mezi odkazy */
    font-size: 0.9rem;
    font-weight: 500;
}


/* --- 2. ÚVODNÍ HERO SEKCE --- */
.hero {
    padding-bottom: 80px;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 60px;
}

/* Grid pro 3 stejné obrázky */
.hero-images-grid {
    display: flex;
    gap: 30px; /* Mezery mezi obrázky */
}

.hero-image {
    flex: 1; /* Všechny obrázky mají stejnou šířku */
    height: 350px; /* Výška obrázků na desktopu */
}


/* --- 3. O MNĚ SEKCE --- */
.about-grid {
    display: flex;
    align-items: center; /* Zarovná text a fotku na střed na výšku */
    gap: 60px; /* Mezera mezi textem a fotkou */
}

.about-text {
    flex: 1.2; /* Text dostane o trochu více prostoru než fotka */
}

.about-image {
    flex: 1; /* Fotka zabírá zbytek prostoru */
    height: 450px;
    background-color: var(--placeholder-bg);
    border-radius: 12px;
}


/* --- 4. SLUŽBY SEKCE (Zelený banner) --- */
.services {
    background-color: var(--green-line-color); /* Zelené pozadí podle popisu */
}

.services h2 {
    font-size: 2.2rem;
    margin-bottom: 60px;
}

/* Grid pro 4 služby */
.services-grid {
    display: flex;
    gap: 30px; /* Mezery mezi službami */
}

.service-item {
    flex: 1; /* Všechny služby mají stejnou šířku */
    text-align: center;
}

.service-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    
    /* Smaž height: 40px; a nahraď ho tímto: */
    min-height: 75px; 
}

/* Ilustrace u služeb */
.service-icon {
    width: 150px; /* Nastaví šířku obrázků (číslo můžeš zvětšit nebo zmenšit podle libosti) */
    height: 150px; /* Přidáme i pevnou výšku, aby byly všechny stejné */
    object-fit: contain; /* Magické pravidlo: obrázek se úměrně zmenší tak, aby se do té 130x130 krabičky přesně vešel celý a nedeformoval se */
    margin: 0 auto; /* Vycentruje obrázek přímo doprostřed */
    display: block; /* Důležité, aby zafungovalo to vycentrování */
}

/* --- GLOBÁLNÍ ÚPRAVY PRO ELEGANTNÍ NADPISY --- */
.elegant-heading {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--text-color);
}
.text-white .elegant-heading {
    color: var(--white-text);
}

/* --- 5. DETAIL SLUŽEB --- */
.services-detail-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.services-text {
    flex: 2;
}

.service-desc-item {
    margin-bottom: 40px;
}

.highlight {
    display: inline-block;
    padding: 2px 15px;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--text-color);
    text-decoration: underline; /* Dočasně, pokud nemáš přesné barvy */
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* Zvýraznění pozadí pod textem (dle screenů) */
.highlight-green {
    /* background-color: rgba(169, 209, 161, 0.4);
    text-decoration: none; */
    /* Vložíme obrázek štětce */
    background-image: url('images/stetec_zeleny.png');
    background-repeat: no-repeat; /* Zabrání tomu, aby se štětec "kachličkoval" */
    background-position: center;  /* Zarovná štětec přesně na střed textu */
    background-size: 100% 100%;   /* Roztáhne štětec přesně podle délky a výšky textu */
    
    text-decoration: none;
    padding: 10px 25px; /* Tímto přidáš textu kolem sebe prostor, aby "nevykukoval" ven ze štětce */
}

.highlight-pink {
    /* background-color: rgba(244, 204, 204, 0.6);
    text-decoration: none; */
    background-image: url('images/stetec_ruzovy.png');
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100% 100%; 
    
    text-decoration: none;
    padding: 10px 25px;

}
.highlight-orange {
    /* background-color: rgba(250, 222, 186, 0.7);
    text-decoration: none; */
    background-image: url('images/stetec_oranzovy.png');
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100% 100%; 
    
    text-decoration: none;
    padding: 10px 25px;

}

.services-illustrations {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sjednocený styl pro ilustrace ve službách */
.illustr-1, .illustr-2, .illustr-large {
    width: 100%;
    height: auto; /* Výška se přizpůsobí obrázku */
    display: block;
    object-fit: contain; /* Ilustrace se nedeformuje a zobrazí se celá */
    border: none; /* Odstraní tu přerušovanou čáru placeholderu */
    background-color: transparent; /* Odstraní šedé pozadí */
}

/* Zachování konkrétních výšek pro desktop, aby se nerozhodil grid */
.illustr-1, .illustr-2 { max-height: 250px; }
.illustr-large { max-height: 450px; }


/* --- 6. CENÍK SLUŽEB --- */
/* --- DEKORACE V CENÍKU --- */

/* 1. Nástěnka: Říkáme, že sekce ceníku je hlavní prostor pro pozicování */
.pricing {
    background-color: var(--green-line-color); /* Tímto vrátíme zpět to ztracené zelené pozadí */
    position: relative; /* Nutné pro obrázky */
    overflow: hidden; /* Nutné pro obrázky */
}

/* 2. Zajištění, aby byl text VŽDY nad obrázky (kdyby se překryly) */
.pricing .container {
    position: relative;
    z-index: 2;
}

/* 3. Umístění hrášku (Vpravo nahoře) */
.decor-hrasek {
    position: absolute;
    top: 40px; /* Vzdálenost odshora */
    right: 10%; /* Vzdálenost zprava (10% vypadá lépe než fixní pixely na různých monitorech) */
    width: 80px; /* Velikost obrázku - klidně si uprav podle potřeby */
    z-index: 1; /* Zůstane v pozadí pod textem */
}

/* 4. Umístění jahod (Vpravo dole) */
.decor-jahody {
    position: absolute;
    bottom: 20px; /* Vzdálenost odspodu */
    right: 8%; /* Vzdálenost zprava */
    width: 120px; /* Velikost obrázku - klidně si uprav podle potřeby */
    z-index: 1; /* Zůstane v pozadí pod textem */
}

.pricing-content {
    max-width: 800px;
}

.price-list {
    margin-bottom: 50px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
}

.pricing-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 400;
}

.pricing-info p {
    margin-bottom: 25px;
}

.thin-white-line {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin: 30px 0;
}


/* Styl pro odkazy v ceníku */
.price-link {
    color: #ffffff; /* Písmo zůstane bílé */
    text-decoration: none; /* Odstraníme výchozí podtržení */
    transition: opacity 0.3s ease; /* Jemný efekt pro najetí myší */
}

.price-link:hover {
    text-decoration: underline; /* Při najetí myší se text podtrhne */
    opacity: 0.8; /* Lehce zprůhlední, aby bylo vidět, že na to klikáš */
}


/* --- 7. RECEPTY --- */
.recipes-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.recipes-image {
    width: 100%;       /* Obrázek vyplní celou šířku svého sloupce v gridu */
    max-width: 300px;
    height: 600px;      /* Nastav si výšku, která ti pasuje k textu vedle */
    object-fit: cover;  /* Zabrání deformaci – obrázek se v případě potřeby jemně ořízne */
    border-radius: 12px; /* Zaoblené rohy, aby to ladilo se zbytkem webu */
    display: block;
}

.recipes-text {
    flex: 1;
}

.bold-link {
    font-weight: bold;
    color: var(--text-color);
    text-decoration: underline;
}

/* --- 8. KONTAKTY --- */
.contact-wrapper {
    background-color: #faf9f5; /* Velmi jemný, teplý tón pro oživení bloku */
    padding: 80px 0;
}

.contact-wrapper .elegant-heading {
    margin-bottom: 50px; /* Větší prostor mezi nadpisem a tlačítky dýchá luxusem */
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* Na mobilech se automaticky zalomí pod sebe */
}

.contact-pill {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffffff; /* Bílé tlačítko hezky vystoupí na béžovém pozadí */
    border: 1px solid var(--green-line-color); /* Zelená linka ladí s webem */
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Minimalistický neviditelný stín */
    transition: all 0.3s ease; /* Plynulá animace */
}

/* Efekt při najetí myší (Hover) */
.contact-pill:hover {
    transform: translateY(-4px); /* Tlačítko lehce "povyskočí" směrem nahoru */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Stín se prohloubí */
    background-color: var(--green-line-color); /* Vyplní se zeleně */
    color: var(--white-text); /* Písmo zbělá */
}

/* Ikonka Instagramu v kontaktech */
.insta-icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.icon-placeholder-small {
    width: 30px;
    height: 30px;
    background-color: var(--placeholder-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}

/* --- STYLY PRO PODSTRÁNKY SLUŽEB --- */
.service-page-grid {
    display: flex;
    gap: 60px;
    margin-top: 40px;
}

.service-page-content {
    flex: 1.5;
}

.service-page-image {
    flex: 1;
}

/* Odrážky (seznamy) v textu */
.service-page-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
    list-style-type: disc; /* Vytvoří klasické tečky */
}

.service-page-content li {
    margin-bottom: 8px;
    padding-left: 10px;
}

/* Nová barva zvýraznění (modrá) pro "Jak se připravit" */
.highlight-blue {
    /* background-color: rgba(173, 216, 230, 0.6);
    text-decoration: none; */
    background-image: url('images/stetec_modry.png');
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100% 100%; 
    
    text-decoration: none;
    padding: 10px 25px;
}

/* --- STRÁNKA SEZNAMU RECEPTŮ --- */
.recipes-banner {
    background-color: var(--green-line-color);
    border-radius: 20px; /* Zaoblené rohy pruhu */
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 60px;
}

.recipes-banner .elegant-heading {
    color: var(--white-text);
    margin-bottom: 0;
    font-size: 3.5rem;
}

/* Zarovnání seznamu receptů na střed stránky */
.recipes-list {
    max-width: 800px;
    margin: 0 auto 80px auto; 
    display: flex;
    flex-direction: column;
    gap: 60px; /* Mezery mezi jednotlivými recepty */
}

.recipe-item {
    display: flex;
    gap: 40px;
    align-items: center; 
    margin-bottom: 60px; /* TÍMTO PŘIDÁME KRÁSNOU MEZERU POD KAŽDÝ RECEPT */
}

/* Toto zruší mezeru pod úplně posledním receptem na stránce, aby patička nebyla moc nízko */
.recipe-item:last-child {
    margin-bottom: 20;
}

.recipe-thumb {
    width: 250px;
    height: 250px;
    flex-shrink: 0;
    border-radius: 8px; /* Jemně zaoblené rohy zůstávají */
    object-fit: cover;  /* DŮLEŽITÉ: Fotka vyplní čtverec a nezkroutí se */
    display: block;
}

.recipe-content {
    flex: 1;
}

.recipe-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 6px; /* Posune podtržení kousek níž */
    text-decoration-thickness: 2px;
    display: inline-block;
    margin-bottom: 15px;
    transition: color 0.3s;
}

.recipe-title:hover {
    color: var(--green-line-color); /* Při najetí myší zezelená */
}

.recipe-date {
    font-size: 0.85rem;
    color: #999999;
    margin-bottom: 15px;
    font-style: italic;
}

.recipe-excerpt {
    font-family: 'Playfair Display', serif; /* Podle screenu je to patkové písmo */
    font-size: 1.1rem;
    line-height: 1.5;
}

/* --- DETAIL RECEPTU --- */
.recipe-detail-card {
    background-color: #ffffff;
    max-width: 850px;
    margin: 0 auto;
    padding: 60px 80px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Jemný, ale široký stín pro efekt vystoupení */
}

.recipe-detail-images {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

.detail-img {
    flex: 1;
    height: 350px;
    width: 100%; /* Přidáno pro správné roztažení */
    border-radius: 8px;
    object-fit: cover; /* Přidáno, aby se fotky nedeformovaly */
}

/* Nadpisy s tlustou čárou (Ingredience, Postup) */
.title-with-line {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 25px;
}

.title-with-line h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap; /* Zabrání zalomení nadpisu na více řádků */
}

.thick-line {
    flex: 1; /* Čára vyplní zbytek volného prostoru */
    height: 3px;
    background-color: var(--text-color);
}

.recipe-ingredients {
    margin-left: 25px;
    margin-bottom: 40px;
    list-style-type: disc;
}

.recipe-ingredients li {
    margin-bottom: 8px;
}

.recipe-instructions p {
    margin-bottom: 20px;
}

/* Tlačítko zpět */
.btn-back {
    display: inline-block;
    background-color: #c9c5b9; /* Barva z vašeho screenu */
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 8px 25px;
    border-radius: 30px;
    margin-top: 40px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.3s;
}

.btn-back:hover {
    background-color: #b5b1a5;
}

/* --- NÁVOD K ZÁPISU JÍDELNÍČKU --- */
.instructions-layout {
    display: flex;
    gap: 40px;
    align-items: flex-end; /* Zaručí, že obrázek bude zarovnaný k dolnímu okraji textu */
}

.instructions-text {
    flex: 2; /* Text dostane více místa */
}

.custom-list {
    margin-left: 25px;
    list-style-type: disc;
}

.custom-list li {
    margin-bottom: 15px; /* Větší mezery mezi odrážkami pro lepší čitelnost */
    line-height: 1.6;
}

.instructions-image {
    flex: 1; /* Obrázek dostane zbytek místa */
    display: flex;
    justify-content: flex-end; /* Zarovnání obrázku doprava */
}

.illustr-clipboard {
    width: 100%;
    max-width: 350px;
    height: 350px;
    background-color: transparent;
    border: 2px dashed #ccc;
}

/* --- 9. PATIČKA (FOOTER) --- */

.footer {
    background-color: var(--green-line-color);
    color: var(--white-text);
    padding: 15px 0; /* ZÚŽENÍ: Snížili jsme padding ze 40px na 15px */
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Tři sloupce: levý a pravý berou zbytek, prostřední se přizpůsobí textu */
    align-items: center; /* ZAROVNÁNÍ DO ROVINY: Všechny prvky budou v jedné horizontální ose */
}

/* Levá strana */
.footer-left {
    text-align: left;
}

/* Střední strana */
.footer-center p {
    margin: 0; /* Odstranili jsme mezery mezi řádky IČO */
    font-size: 0.75rem; /* O malinko menší písmo pro decentní vzhled */
    opacity: 0.8;
    line-height: 1.3;
}

/* Pravá strana */
.footer-right {
    text-align: right;
}

.footer-policy-link {
    color: var(--white-text);
    text-decoration: underline;
    font-size: 0.85rem;
    transition: opacity 0.3s;
}

.footer-policy-link:hover {
    opacity: 0.7;
}

/* Šipka nahoru */
.back-to-top {
    color: var(--white-text);
    text-decoration: none;
    font-size: 1.8rem; /* Trochu jsme zmenšili šipku, aby nenatahovala výšku patičky */
    display: inline-block;
    transition: transform 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-5px);
}

/* Responzivita pro mobily - na malém displeji je dáme pod sebe */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Na mobilu jen jeden sloupec */
        gap: 15px;
        text-align: center;
    }
    .footer-left, .footer-right {
        text-align: center;
    }
}

/* --- MAGIE PRO MOBILNÍ TELEFONY (Responzivita) --- */
@media (max-width: 768px) {
    /* Menu pod sebou */
    .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .nav a {
        margin: 0;
    }

    /* 3 obrázky v hero sekci pod sebou */
    .hero-images-grid {
        flex-direction: column;
        gap: 20px;
    }

    .hero-image {
        height: 250px;
    }

    /* O mně se přeskládá: text nahoru, fotka pod něj */
    .about {
        flex-direction: column;
        gap: 30px;
    }

    .about-image {
        width: 100%;
        height: 350px;
    }

    /* O mně na mobilu pod sebe */
    .about-grid {
        flex-direction: column;
        gap: 30px;
    }

    /* 4 služby v zeleném banneru pod sebou */
    .services-grid {
        flex-direction: column;
        gap: 50px;
    }

    .service-title {
        height: auto;
    }

    /* Detail služeb pod sebe */
    .services-detail-grid {
        flex-direction: column;
    }
    
    .services-illustrations {
        width: 100%;
        flex-direction: row; /* Ilustrace vedle sebe na mobilu */
    }

    .illustr-1, .illustr-2 {
        flex: 1;
        height: 150px;
    }

    /* Ceník úprava pro mobil */
    .price-row {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    /* Recepty fotka a text pod sebe */
    .recipes-grid {
        flex-direction: column;
    }

    .recipes-image {
        width: 100%;
        max-width: 100%;
        height: 300px;
    }

    /* Nadpisy na mobilu o kousek menší */
    .elegant-heading {
        font-size: 2.2rem;
    }

    /* Přeskládání podstránky služeb na mobilu */
    .service-page-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .illustr-large {
        height: 300px;
        width: 100%;
    }

    /* Přeskládání receptů na mobilu */
    .recipes-banner {
        padding: 30px 15px;
    }
    
    .recipes-banner .elegant-heading {
        font-size: 2.5rem;
    }

    .recipe-item {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .recipe-thumb {
        width: 100%;
        max-width: 300px;
        height: 250px;
        margin: 0 auto;
    }

    /* Úpravy pro detail receptu na mobilu */
    .recipe-detail-card {
        padding: 40px 20px; /* Menší okraje uvnitř karty na mobilu */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    }

    .recipe-detail-images {
        flex-direction: column;
        gap: 15px;
    }

    .detail-img {
        height: 250px;
    }
    
    .title-with-line h2 {
        font-size: 1.1rem;
    }

    /* Úprava návodu na mobilu */
    .instructions-layout {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    /* Úprava dekorací v ceníku na mobilech */
    .decor-hrasek, .decor-jahody {
        opacity: 0.2; /* Obrázky vyblednou a nebudou rušit čtení textu */
    }


}