/* ============================================================
   GLOBAL DESIGN VARIABLES — ÚPLNÉ OVLÁDÁNÍ BAREV NA JEDNOM MÍSTĚ
   ============================================================ */

:root {
    --landing-bg-main: #f6f3ec;
    --landing-section-bg: rgba(246, 243, 236, 0.55); /* průsvitné sekce */
    --landing-section-border: rgba(200, 190, 180, 0.45);

    --landing-card-bg: rgba(245, 234, 189, 0.85);
    --landing-card-border: rgba(172, 138, 96, 0.7);
}

/* ============================================================
   BACKGROUND PATTERN (PUNTÍKY) — teď budou vidět
   ============================================================ */

body {
    background: linear-gradient(45deg,
        #f7daa8 0%,
        #f5e7a8 20%,
        #c4f5a2 40%,
        #f7d9a7 60%,
        #faeba7 80%,
        #daa8f7 100%
    ) !important;
}


/* ============================================================
   SECTION STYLE — jednotný vzhled (bez barev v HTML)
   ============================================================ */

.section {
    background: var(--landing-section-bg);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--landing-section-border);
    padding-top: 6rem;
    padding-bottom: 6rem;
}


/* ============================================================
   CARD STYLE — jednotné dlaždice
   ============================================================ */

.card {
    background: var(--landing-card-bg);
    border: 2px solid var(--landing-card-border);
    border-radius: 1.4rem;
    padding: 2.5rem;
    box-shadow: 0 6px 18px rgba(150,135,120,0.08);
    transition: 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(150,135,120,0.12);
}

.section {
    border-top: none;
    box-shadow: 0 -1px 0 rgba(170, 146, 121, 0.1);
}

.slideshow-frame {
    width: 100%;
    max-height: 280px; /* nízké na výšku, široké na šířku */
    border-radius: 1.7rem;
    overflow: hidden;
    border: 3px solid #588737;
    background: rgba(255, 253, 245, 0.85);
    box-shadow:
        0 8px 22px rgba(50, 40, 30, 0.08),
        0 2px 4px rgba(50, 40, 30, 0.10);
}

.slideshow-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* NE fill — cover drží široké */
}

@media (max-width: 768px) {
    .slideshow-frame {
        max-height: 180px; /* mobil: ještě víc wide */
    }
}

header, footer {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

footer {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(150, 130, 110, 0.25) !important;
    box-shadow: 0 -2px 6px rgba(80, 60, 40, 0.08) !important;
}

.form-input {
    background-color: #f1faeb !important; /* světle fialová od začátku */
    border: 1px solid rgba(140, 120, 100, 0.35) !important;
    color: #2A2623 !important;
    padding: 0.9rem 1rem !important;
    border-radius: 0.9rem !important;
    width: 100% !important;
    transition: 0.25s !important;
}

.form-input:focus {
    background-color: #f2eaff !important; /* světlejší fialová při kliknutí */
    border-color: #bca2e6 !important;
    box-shadow: 0 0 0 3px rgba(188, 162, 230, 0.25) !important;
    outline: none !important;
}

.form-input::placeholder {
    color: #8C847B !important;
}

/* další společné styly budeme přidávat pak */