/* --- ZÁKLADNÍ KOSTRA A GLOBÁLNÍ STYLY --- */
* { box-sizing: border-box; }
body { text-align: left; margin: 0 auto; background-color: #253B4A; }

p, .text, h3, h4, h6, ul { 
    font-size: 100%; 
    font-family: 'Tahoma CE', Tahoma, 'Arial CE', Arial, sans-serif; 
    line-height: 130%; 
    color: #333300; 
}
.text { margin: 15px 4% 5px 4%; text-align: justify; }

h3 { font-weight: bold; text-align: left; margin: 30px 4% 15px 4%; line-height: 100%; }
h6 { font-size: 11px; margin-top: 4px; line-height: 100%; }

ul { margin: 0; padding-left: 6%; }
li { margin: 0 2% 5px 2%; }

a.n { color: black; text-decoration: underline; }
a.n:hover { color: #663; }

/* --- STRUKTURA STRÁNKY (Layout) --- */
#celek { position: relative; margin: 0 auto; max-width: 1200px; }
#head { position: relative; width: 100%; height: 260px; margin-top: 0px; background: #7F805F url('headbg_puj.jpg') no-repeat left; }
#obsah { width: 100%; background-color: #B7D5E8; padding-top: 1px; padding-bottom: 40px; }

#pata { width: 100%; padding: 15px 4% 0 4%; border-top: 1px dashed #666633; margin-top: 30px; }
a.pata { text-decoration: none; font-weight: 100; font-size: 11px; color: #333300; }
a.pata:hover { color: #663; text-decoration: underline; }

.obr { border: 0.5px solid #333300; width: 48%; height: auto; float: right; margin: 5px 0 10px 3.5%; }

/* --- SPECIFICKÉ STYLY PRO CENA/PŮJČOVNA --- */
.puj-kontejner {
    width: 92%;
    margin: 15px 4% 5px 4%;
}

.puj-tabulka {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border-left: 1px solid #666633;
    border-right: 1px solid #666633;
    border-bottom: 1px solid #666633;
    table-layout: fixed; /* Fixní šířky sloupců */
}
.puj-tabulka:first-child {
    border-top: 1px solid #666633;
}

/* Vaše vyzkoušené optimální šířky sloupců */
.puj-tabulka th:nth-child(1), .puj-tabulka td.puj-foto { width: 25%; }
.puj-tabulka th:nth-child(2), .puj-tabulka td.puj-popis { width: 53%; }
.puj-tabulka th:nth-child(3), .puj-tabulka td:not(.puj-foto):not(.puj-popis):not(.puj-cena) { width: 10%; }
.puj-tabulka th:nth-child(4), .puj-tabulka td.puj-cena { width: 12%; }

.puj-tabulka th {
    background-color: white; 
    color: white;
    padding: 10px;
    text-align: left;
}
.puj-tabulka td {
    padding: 10px;
    border-bottom: 0.5px solid #666633;
    vertical-align: top;
}
.puj-foto img {
    width: 100%;
    max-width: 200px;
    height: auto;
    border: none;
}
.puj-popis h3 { margin: 0 0 5px 0 !important; text-align: left !important; }
.puj-popis p { margin: 5px 0 !important; }
.puj-kapacita { font-size: 85%; font-weight: bold; color: #666633; }
.puj-cena { font-weight: bold; white-space: nowrap; }
.puj-kauce td { font-size: 90%; color: #666633; background-color: #eeeeee; }

/* --- RESPONSIVITA (Karty pod 720px) --- */
@media screen and (max-width: 720px) {
    .puj-tabulka {
        display: block;
        border: 1px solid #666633 !important;
        margin-bottom: 25px; 
        padding: 5px;
        table-layout: auto;
    }
    .puj-tabulka tbody, .puj-tabulka tr, .puj-tabulka td {
        display: block;
    }
    .puj-tabulka thead {
        display: none;
    }
    .puj-tabulka tr {
        border-bottom: none !important;
    }
    .puj-tabulka td.puj-foto, 
    .puj-tabulka td.puj-popis, 
    .puj-tabulka td.puj-cena,
    .puj-tabulka td { 
        width: auto !important; 
        border-bottom: 0.5px solid #666633;
        padding: 8px 10px;
    }
    tr:not(.puj-kauce) td:not(.puj-foto):not(.puj-popis), .puj-kauce td {
        display: inline-block !important;
        width: 48% !important;
    }
    .puj-foto img {
        width: 100%;
        max-width: 200px;
        margin: 0 auto 10px auto;
        display: block;
    }
}