/* =============================================================
   REDIZAJN — vizuálna vrstva                     11. 8. 2026
   -------------------------------------------------------------
   Načítava sa AŽ ZA style.css, takže len prepisuje vzhľad.
   NEMENÍ HTML, text, nadpisy ani odkazy — všetko, čo drží
   pozície #1 a #2, zostáva nedotknuté.

   Vypnutie: zmazať jeden <link> v head.php. Nič iné netreba.

   Čo rieši (z auditu 20-AUDIT-PRED-REDIZAJNOM.html):
     U1  cena bola nenápadná, hoci je to najhľadanejší údaj
     U2  plochá hierarchia — 38× H3 bez rytmu
     U3  tlačidlá bez poradia dôležitosti
     +   nadmerné prázdne plochy medzi sekciami
   ============================================================= */

:root {
    --zp-zelena:        #3F7A34;
    --zp-zelena-tmava:  #2E5A26;
    --zp-zelena-svetla: #EDF4EB;
    --zp-text:          #1F2620;
    --zp-text-tlmeny:   #5C665E;
    --zp-linka:         #E2E8E0;
    --zp-papier:        #FFFFFF;
    --zp-podklad:       #F7F9F6;
    --zp-tien:          0 1px 2px rgba(31,38,32,.05), 0 4px 16px rgba(31,38,32,.06);
    --zp-tien-hover:    0 2px 4px rgba(31,38,32,.06), 0 12px 32px rgba(31,38,32,.10);
    --zp-radius:        10px;
}

/* ---------- 1. RYTMUS: skrotiť prázdne plochy ----------
   Sekcie mali tak veľké odsadenie, že medzi obsahom vznikali
   celé prázdne obrazovky. Znižujeme, na mobile výraznejšie. */
.templateux-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
@media (max-width: 767px) {
    .templateux-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}
.mb-5 { margin-bottom: 2.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

/* ---------- 2. TYPOGRAFIA ---------- */
body { color: var(--zp-text); }
p { line-height: 1.7; }
.heading, h2.heading { letter-spacing: -.01em; }
h2, h3 { text-wrap: balance; }
/* Čitateľná dĺžka riadku v textových blokoch */
.about-cellar p, .templateux-section > .container > .row > [class*="col-md-8"] p { max-width: 68ch; }

/* ---------- 3. KARTY PRODUKTOV ----------
   Predtým splývali s pozadím. Teraz majú vlastnú plochu,
   jemný rám a reakciu na kurzor. */
.offer-card .card {
    background: var(--zp-papier);
    border: 1px solid var(--zp-linka);
    border-radius: var(--zp-radius);
    box-shadow: var(--zp-tien);
    overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
    height: 100%;
}
.offer-card .card:hover,
.offer-card .card:focus-within {
    box-shadow: var(--zp-tien-hover);
    border-color: rgba(63,122,52,.35);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .offer-card .card { transition: none; }
    .offer-card .card:hover { transform: none; }
}
.offer-card .card-img-top {
    background: var(--zp-podklad);
    padding: .5rem;
}

/* ---------- 4. CENA — najdôležitejší údaj na stránke ----------
   Otázka „koľko to stojí" bola najčastejším komentárom pod
   platenou reklamou. Cena preto musí byť vidieť na prvý pohľad. */
.card-price {
    display: block;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--zp-zelena-tmava);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin: .35rem 0 .15rem;
}
@media (max-width: 575px) { .card-price { font-size: 1.45rem; } }

/* V .card-price je okrem ceny aj <span>s doručením do 1-2 týždňov</span>.
   Ten musí zostať malý — inak sa zväčší spolu s cenou a zaberie tri riadky. */
.card-price br { display: none; }
.card-price span {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--zp-text-tlmeny);
    margin-top: .35rem;
}

/* „s DPH": potvrdene majitelom 11. 8. 2026 („Ano su ceny je s dph"),
   dovtedy sa zamerne neuvadzalo. */
.card-price::after {
    content: "s DPH";
    display: block;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zp-text-tlmeny);
    margin-top: .1rem;
}
/* ked je v .card-price aj span s dorucenim, "s DPH" ide tesne pod cenu */
.card-price span { margin-top: .1rem; }

/* ---------- 5. PARAMETRE V KARTE ---------- */
.offer-card .list-group-item {
    border-color: var(--zp-linka);
    font-size: .93rem;
    padding: .6rem .9rem;
}
.offer-card .list-group-item strong,
.offer-card .list-group-item .primary-color { color: var(--zp-text-tlmeny); font-weight: 600; }

/* ---------- 6. TLAČIDLÁ ----------
   Predtým boli všetky rovnako výrazné a neúmerne vysoké.
   Teraz: „Mám záujem" je hlavná akcia, „zistiť viac" vedľajšia. */
.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-primary {
    background-color: var(--zp-zelena);
    border-color: var(--zp-zelena);
    padding: .8rem 1.5rem;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--zp-zelena-tmava);
    border-color: var(--zp-zelena-tmava);
}
/* „zistiť viac" v karte — vedľajšia akcia, nižšia váha */
.offer-card .btn-primary {
    padding: .85rem 1rem;
    font-size: .95rem;
}
/* „Mám záujem" — hlavná konverzná akcia, musí vyčnievať */
.im-interested {
    box-shadow: 0 2px 10px rgba(63,122,52,.28);
}
.im-interested:hover { box-shadow: 0 4px 16px rgba(63,122,52,.38); }

/* Viditeľné zameranie klávesnicou — chýbalo úplne */
a:focus-visible, .btn:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(63,122,52,.55);
    outline-offset: 2px;
}

/* ---------- 7. NAVIGÁCIA ---------- */
.templateux-navbar { border-bottom: 1px solid var(--zp-linka); }
.templateux-menu a:hover { color: var(--zp-zelena-tmava); }
.contact-btn {
    background: var(--zp-zelena);
    color: #fff !important;
    padding: .5rem 1.1rem;
    border-radius: 7px;
    border: 0;
    font-weight: 600;
    transition: background-color .18s ease;
}
.contact-btn:hover { background: var(--zp-zelena-tmava); color: #fff !important; text-decoration: none; }

/* ---------- 8. FORMULÁR ---------- */
.form-control {
    border: 1px solid var(--zp-linka);
    border-radius: 8px;
    padding: .7rem .9rem;
}
.form-control:focus {
    border-color: var(--zp-zelena);
    box-shadow: 0 0 0 3px rgba(63,122,52,.14);
}

/* ---------- 9. DROBNOSTI ---------- */
img { max-width: 100%; height: auto; }
/* Tabuľky a široký obsah nesmú roztiahnuť stránku do strán */
.table-responsive, .offer-card .table { overflow-x: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Kotva #kontakt sa nesmie schovať pod lepkavou hlavičkou */
#kontakt, #ponuka { scroll-margin-top: 120px; }

/* ---------- 10. HERO — nález U1 z auditu ----------
   Doplnené 11. 8. 2026 spolu so zmenou v index.php.
   Hero dovtedy nepovedal, čo sa predáva ani za koľko, a jediné
   tlačidlo viedlo na scroll namiesto na dopyt. */
.hero-fakty {
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--zp-text);
    max-width: 34em;
    margin-top: -.25rem;
}
.hero-fakty strong {
    color: var(--zp-zelena-tmava);
    font-weight: 700;
    white-space: nowrap;
}
/* Dve akcie vedľa seba, na úzkom displeji pod sebou */
.hero-akcie {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.hero-akcie .btn { margin: 0; }
.hero-cta {
    box-shadow: 0 2px 12px rgba(63,122,52,.30);
}
.hero-cta:hover { box-shadow: 0 4px 18px rgba(63,122,52,.40); }
@media (max-width: 575px) {
    .hero-akcie { flex-direction: column; align-items: stretch; }
    .hero-akcie .btn { width: 100%; text-align: center; }
    .hero-fakty { font-size: 1rem; }
}

/* ---------- 11. Dekoratívny duplikát nadpisu ----------
   Šablóna kreslí za nadpismi sekcií obrovskú kópiu textu.
   Na mobile pretečie a zostane orezaná uprostred slova.
   Nescrolluje stránku do strán, ale vyzerá to ako chyba. */
@media (max-width: 767px) {
    .heading::before, .heading::after { display: none !important; }
}

/* ---------- 12. OPRAVA HERO NA MOBILE (11. 8. 2026 vecer) ----------
   NAHLASENA CHYBA z realneho telefonu: sablona dava hero riadku pevnu
   vysku 600 px a coveru 840 px. Po doplneni hero faktov a druheho
   tlacidla obsah tuto vysku prerastol a pretiekol cez obrazok pivnice
   (je to background-image #first-capitol na mobile z vlny 1).
   Riesenie: na mobile vysky uvolnit a pre obrazok pozadia vyhradit
   miesto pod obsahom cez padding-bottom. */
@media (max-width: 767px) {
    #first-capitol,
    #first-capitol .row,
    #first-capitol .row > [class*="col-"] {
        height: auto !important;
        min-height: 0 !important;
    }
    #first-capitol {
        padding-top: 1.25rem;
        /* miesto pre obrazok pozadia POD obsahom */
        padding-bottom: min(96vw, 460px);
        background-size: min(88vw, 400px) auto !important;
        background-repeat: no-repeat !important;
        background-position: center bottom 0.5rem !important;
    }
    /* hlavickovy pas email/telefon — na uzkych displejoch sa lamal
       cez ikony; jemnejsie pismo a zakaz lamania cisla */
    .templateux-navbar a[href^="tel:"],
    .templateux-navbar .phone { white-space: nowrap; }
}

/* ---------- 13. KONTAKTNY PAS POD HLAVICKOU NA MOBILE ----------
   (11. 8. 2026 vecer, nahlasene z realneho telefonu)
   Povodne dva stlpce po 50 %: dlhy e-mail pretekal cez ikonu telefonu
   a cislo sa zalamovalo na tri riadky. Novy tvar: dva cisto zarovnane
   riadky na celu sirku, nadpisy "Email/Telefon" su skryte (nic nehovoria),
   cislo sa nesmie zalomit. */
@media (max-width: 767px) {
    .desktop-none .address_menu {
        flex-direction: column;
        gap: 2px;
        margin: 0;
    }
    .desktop-none .address_menu .single_address {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 10px;
        padding: 6px 4px;
        min-height: 44px;             /* dotykovy ciel */
    }
    .desktop-none .address_menu .single_address .icon { flex: 0 0 auto; }
    .desktop-none .address_menu .single_address .icon i { font-size: 1.35rem; }
    .desktop-none .address_menu .address_info { text-align: left !important; }
    .desktop-none .address_menu .address_info h3 { display: none; }
    .desktop-none .address_menu .address_info p {
        margin: 0;
        font-size: 16px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- 14. TVRDY STROP PRE PRELOADER (K2 z auditu) ----------
   Animsition overlay sa odstranuje az pri window.load. Ak lubovolny
   zdroj (napr. hotlinkovany obrazok z quatro.sk) visi, navstevnik
   pozera na biely spinner donekonecna. CSS strop: po 2,5 s overlay
   zmizne bez ohladu na JS. Obsah je v HTML od zaciatku. */
.animsition-loading {
    animation: zpSpinnerAway .4s ease 2.5s forwards;
}
@keyframes zpSpinnerAway {
    to { opacity: 0; visibility: hidden; }
}
/* ... a obal .animsition drzi CELY obsah na opacity:0 do window.load.
   Po 2,6 s ho zobrazime nasilu - CSS animacia ma prednost aj pred
   inline stylom, forwards ju podrzi. Ked load pribehne skor, animsition
   prida fade-in a tato poistka sa nicoho nedotkne. */
.js-animsition.animsition {
    animation: zpForceIn .5s ease 2.6s forwards;
}
@keyframes zpForceIn {
    to { opacity: 1; }
}