/* =============================================================================
   WEB PIATOCEK (Vojto 11. 10. 2026) - len projekt piatocek
   -----------------------------------------------------------------------------
   Vzhľad webu podľa piatocek.agpartneri.sk: zelená #61CE70, červená #FF0000,
   písmo Helvetica / Arial. Načítava ho layouts/web ako posledný štýl.

   PÍSMO: zdrojový web má v štýloch Montserrat, ale jeho súbory písma sa
   nenačítajú (odkazujú na nefunkčnú adresu), takže ho návštevník vidí
   v systémovom bezpätkovom písme. Web piatocek drží tento skutočný vzhľad;
   na Montserrat sa prepne zmenou --pt-pismo (a Nastavenia → Písma).

   Šírka stránky na počítači je 1400 px (--pt-sirka) na stred; pozadia pásov
   (hlavička, pätička, vzor obsahu) idú na celú šírku okna.

   1. Základ stránky
   2. Hlavička   - logo, druhé logo (pevná grafika), ikona menu
   3. Úvod       - nadpis H1 a dlaždice letákov (widget Kategórie Vizuálneho
                   editora; počet v riadku sa nastavuje v jeho Lište)
   4. Leták      - hlavička ponuky s tlačidlom PDF a karty produktov
   5. Pätička    - web a kontakt firmy, copyright a zámok z Backendu
   6. Užšie obrazovky
   ============================================================================= */

:root {
    --pt-zelena: #61CE70;
    --pt-cervena: #FF0000;
    --pt-siva: #CCCCCC;
    --pt-sirka: 1400px;        /* šírka stránky na počítači */
    --pt-okraj: 20px;          /* bočný okraj stránky na užšej obrazovke */
    --pt-hlavicka: 114px;      /* výška pásu hlavičky */
    --pt-pismo: Helvetica, Arial, sans-serif;
    --pt-zavoj-hore: 0.95;     /* biely závoj nad vzorom pozadia - hore */
    --pt-zavoj-dole: 0.86;     /* ... a dole (leták ho má slabší) */
}

/* --- 1. Základ stránky ------------------------------------------------------- */
body.pt {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: #FFFFFF;
}

.pt img {
    max-width: 100%;
}

/* Vzor na pozadí obsahu zosvetlený bielym závojom - adresu obrázka dáva
   layouts/web (--pt-pozadie). */
.pt-main {
    flex: 1 0 auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, var(--pt-zavoj-hore)) 0%, rgba(255, 255, 255, var(--pt-zavoj-dole)) 100%),
        var(--pt-pozadie, none) repeat top center / 22%,
        #FFFFFF;
}

.pt-main--letak {
    --pt-zavoj-hore: 0.79;
    --pt-zavoj-dole: 0.71;
}

.pt-stranka {
    box-sizing: content-box;
    max-width: var(--pt-sirka);
    margin: 0 auto;
    padding: 0 var(--pt-okraj) 60px;
}

/* Projekt agmailer (Vojto 30. 10. 2026): úvod = len nadpis na stred obsahu. */
.pt-main--stred {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-stranka--stred {
    padding-bottom: 0;
    text-align: center;
}

.pt-stranka--letak {
    padding-bottom: 80px;
}

/* --- 2. Hlavička ------------------------------------------------------------- */
.pt-hlavicka {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 0 max(var(--pt-okraj), 5%);
    background: var(--pt-zelena);
}

.pt-hlavicka-obal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--pt-sirka);
    min-height: var(--pt-hlavicka);
    margin: 0 auto;
}

.pt-logo,
.pt-logo2,
.pt-menu {
    display: block;
    flex: none;
    text-decoration: none;
}

.pt-logo {
    color: #FFFFFF;
    font: 700 28px/1 var(--pt-pismo);
}

.pt-logo img {
    display: block;
    width: auto;
    height: 104px;
}

.pt-hlavicka-vpravo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pt-logo2 img {
    display: block;
    width: auto;
    height: 97px;
}

.pt-menu img {
    display: block;
    width: 30px;
    height: 30px;
}

/* --- 3. Úvod: archív letákov -------------------------------------------------- */
.pt .pt-nadpis {
    margin: 0;
    padding: 20px 0;
    font-family: var(--pt-pismo);
    font-size: 50px;
    line-height: 50px;
    font-weight: 600;
    color: #000000;
    text-align: center;
}

.pt-obsah--text {
    padding: 20px;
    border-radius: 10px;
    background: #FFFFFF;
}

/* Dlaždice letákov = widget Kategórie (stranky/widget-kategorie): obrázok
   kategórie a pod ním jej názov v bielej karte so sivým rámikom. Tlačidlo
   dlaždice z jadra sa tu nezobrazuje - klikateľná je celá karta. */
.pt .ve-kategorie .kt-mriezka {
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt .ve-kategorie .kt-mriezka > li {
    display: flex;
    min-width: 0;
}

.pt .kt-dlazdica {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 5px 7px;
    border: 2px solid var(--pt-siva);
    border-radius: 10px;
    background: #FFFFFF;
    color: #000000;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pt .kt-dlazdica:hover,
.pt .kt-dlazdica:focus-visible {
    border-color: var(--pt-zelena);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
    text-decoration: none;
}

.pt .kt-dlazdica img {
    display: block;
    width: 100%;
    height: auto;
}

.pt .kt-nazov {
    font-family: var(--pt-pismo);
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #000000;
}

.pt .kt-dlazdica .btn {
    display: none;
}

/* --- 4. Leták: hlavička ponuky a produkty ------------------------------------- */
/* Tlačidlo PDF je vysoké ako hlavička s platnosťou (align-items: stretch);
   bez tlačidla hlavička vyplní celú šírku. */
.pt-ponuka {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    padding: 50px 0 40px;
}

.pt .pt-ponuka-nadpis {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-family: var(--pt-pismo);
    font-size: 36px;
    line-height: 36px;
    font-weight: 600;
    color: #000000;
    text-align: center;
}

.pt-ponuka-nadpis span {
    color: var(--pt-zelena);
    white-space: nowrap;
}

.pt-pdf {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 22px 0;
    border-radius: 10px;
    background: var(--pt-cervena);
    color: #FFFFFF;
    font-family: var(--pt-pismo);
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pt-pdf img {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -4px;
}

a.pt-pdf:hover,
a.pt-pdf:focus-visible {
    background: #D40000;
    color: #FFFFFF;
    text-decoration: none;
}

.pt-produkty {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-produkty > li {
    display: flex;
    min-width: 0;
}

.pt-produkt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.23);
    font-family: var(--pt-pismo);
    color: #000000;
}

.pt-produkt-hlava {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 50px;
}

/* Vlajka štátu: len rámik tesne okolo vlajky, bez medzier (Trello ltYGW8jM). */
.pt-vlajka {
    display: block;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--pt-siva);
    border-radius: 5px;
    line-height: 0;
}

.pt-vlajka img {
    display: block;
    width: auto;
    height: 36px;
}

.pt-znacka {
    display: flex;
    align-items: center;
    padding: 4px;
}

.pt-znacka img {
    display: block;
    width: auto;
    max-width: 120px;
    height: 40px;
    object-fit: contain;
}

.pt-produkt-obrazok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    max-width: 100%;
    aspect-ratio: 1;
}

.pt-produkt-obrazok img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pt-produkt-telo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 10px;
    padding-top: 10px;
    text-align: center;
}

.pt-produkt-kod {
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    color: #7A7A7A;
}

.pt .pt-produkt-nazov {
    margin: 0;
    font-family: var(--pt-pismo);
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    color: #000000;
}

.pt-produkt-cena {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 10px;
    border-radius: 10px;
    background: rgba(97, 206, 112, 0.21);
}

.pt-produkt-cena strong {
    font-size: 26px;
    line-height: 26px;
    font-weight: 800;
    color: var(--pt-zelena);
}

.pt-produkt-cena span {
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: #000000;
}

/* Odkaz na produkt cez celú kartu (keď ho karta dostane). */
.pt-produkt-odkaz {
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

/* --- 5. Pätička ---------------------------------------------------------------- */
/* Rozloženie je pevné, údaje (web, kontakt firmy, copyright) sú z Backendu -
   viď components/web/paticka. */
.pt-paticka {
    flex: none;
    font-family: var(--pt-pismo);
}

.pt-paticka-pas {
    padding: 0 max(var(--pt-okraj), 5%);
    border-top: 3px dashed #000000;
    background: linear-gradient(90deg, #FFFFFF 0%, var(--pt-zelena) 32%);
}

.pt-paticka-obal {
    display: flex;
    align-items: center;
    gap: 5%;
    max-width: var(--pt-sirka);
    margin: 0 auto;
}

/* Monitor vyčnieva nad horný okraj pätičky. */
.pt-paticka-web {
    flex: none;
    width: 183px;
    margin-top: -42px;
    padding-bottom: 5px;
    text-align: center;
}

.pt-paticka-web a {
    display: block;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    text-decoration: none;
}

.pt-paticka-web img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.pt-paticka-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 25px 0;
}

.pt-paticka-text p {
    margin: 0 0 14px;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 33px;
    font-weight: 600;
}

.pt-paticka-dph {
    color: var(--pt-cervena);
}

.pt-paticka-archiv {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #FFFFFF;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.pt-paticka-archiv img {
    display: block;
    width: 16px;
    height: 16px;
}

/* Úvod: text o archíve, pod ním kontakt firmy a odkaz na archív na stred. */
.pt-paticka-text--uvod {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.pt-paticka-text--uvod p {
    align-self: stretch;
    font-size: 20px;
    line-height: 30px;
}

.pt-paticka-kontakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    color: #000000;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 18px;
    line-height: 20px;
}

.pt-paticka-kontakt li {
    display: flex;
    align-items: center;
    gap: 11px;
}

.pt-paticka-kontakt img {
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
}

.pt-paticka-kontakt a {
    color: inherit;
    text-decoration: none;
}

.pt-paticka-web a:hover,
.pt-paticka-web a:focus-visible,
.pt-paticka-archiv:hover,
.pt-paticka-archiv:focus-visible,
.pt-paticka-kontakt a:hover,
.pt-paticka-kontakt a:focus-visible {
    text-decoration: underline;
}

.pt-paticka-web a:hover,
.pt-paticka-web a:focus-visible,
.pt-paticka-archiv:hover,
.pt-paticka-archiv:focus-visible {
    color: #FFFFFF;
}

/* Čierny pás: zámok (prihlásenie do Backendu) a copyright. */
.pt-paticka-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 18px;
    padding: 10px var(--pt-okraj);
    background: #000000;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 18px;
    font-weight: 300;
    text-align: center;
}

.pt-paticka-copyright span a {
    color: inherit;
    text-decoration: none;
}

.pt-paticka-copyright span a:hover,
.pt-paticka-copyright span a:focus-visible {
    text-decoration: underline;
}

/* Zámok je čierny na čiernom, ukáže sa pri prechode myšou alebo zameraní -
   ako v pätičke e-shopu (css/paticka.css). */
.pt-paticka-zamok {
    flex: none;
    width: 16px;
    height: 16px;
    background: #000000;
    -webkit-mask: var(--pt-zamok) center / contain no-repeat;
    mask: var(--pt-zamok) center / contain no-repeat;
    transition: background-color 0.2s ease;
}

.pt-paticka-zamok:hover,
.pt-paticka-zamok:focus-visible {
    background: #CCCCCC;
}

/* --- 6. Užšie obrazovky -------------------------------------------------------- */
/* Šesť dlaždíc letákov v užšom okne: názov („9.10. - 19.10.2026“) menším
   písmom, aby ostal v jednom riadku. */
@media (max-width: 1180px) {
    .pt .kt-nazov {
        font-size: 16px;
        line-height: 18px;
    }
}

/* Tablet: produkty po dvoch. */
@media (max-width: 1024px) {
    .pt-logo img {
        height: 72px;
    }

    .pt-logo2 img {
        height: 68px;
    }

    :root {
        --pt-hlavicka: 86px;
    }

    .pt .pt-nadpis {
        font-size: 40px;
        line-height: 42px;
    }

    .pt .pt-ponuka-nadpis {
        font-size: 26px;
        line-height: 30px;
    }

    .pt-produkty {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pt-paticka-text p,
    .pt-paticka-text--uvod p {
        font-size: 18px;
        line-height: 27px;
    }
}

/* Mobil: produkty pod sebou, hlavička ponuky a pätička pod sebou na stred. */
@media (max-width: 767px) {
    .pt-hlavicka {
        padding: 0 12px;
    }

    .pt-hlavicka-obal,
    .pt-hlavicka-vpravo {
        gap: 12px;
    }

    .pt-logo img {
        height: 44px;
    }

    .pt-logo2 img {
        height: 40px;
    }

    .pt-menu img {
        width: 26px;
        height: 26px;
    }

    :root {
        --pt-hlavicka: 60px;
        --pt-okraj: 12px;
    }

    .pt .pt-nadpis {
        font-size: 30px;
        line-height: 34px;
    }

    .pt .ve-kategorie .kt-mriezka {
        gap: 8px;
    }

    .pt .kt-dlazdica {
        gap: 8px;
        padding: 4px 4px 6px;
    }

    .pt .kt-nazov {
        font-size: 12px;
        line-height: 14px;
    }

    .pt-ponuka {
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;
    }

    /* Pod sebou: tlačidlo PDF na celú šírku s vlastnou výškou. */
    .pt-pdf {
        padding: 14px 22px 10px;
    }

    .pt .pt-ponuka-nadpis {
        align-self: stretch;
        font-size: 20px;
        line-height: 26px;
    }

    .pt-produkty {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-paticka-pas {
        background: linear-gradient(180deg, #FFFFFF 0%, var(--pt-zelena) 38%);
    }

    .pt-paticka-obal {
        flex-direction: column;
        gap: 0;
    }

    .pt-paticka-text {
        padding: 10px 0 24px;
        text-align: center;
    }

    .pt-paticka-text p,
    .pt-paticka-text--uvod p {
        font-size: 16px;
        line-height: 24px;
    }

    .pt-paticka-kontakt {
        font-size: 16px;
    }

    .pt-paticka-copyright {
        font-size: 15px;
    }
}