/* --- ZÁKLADNÍ NASTAVENÍ --- */
.atelier-wrapper { font-family: sans-serif; color: #24221f; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 0; }
.section-title { text-align: center; font-size: 38px; margin-bottom: 40px; }
.btn { padding: 15px 30px; border-radius: 4px; font-weight: 600; text-decoration: none; display: inline-block; }
.primary { background: #c8915f; color: #fff; }

/* --- GRID A FLEX ROZVRŽENÍ --- */
.hero-grid { display: flex; align-items: center; gap: 50px; }
.hero-image { flex: 1; height: 400px; background: #ddd; border-radius: 8px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { background: #fffdfa; padding: 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); text-align: center; }

/* --- MARQUEE (FILM) --- */
.marquee { overflow: hidden; width: 100%; }
.marquee-inner { display: flex; gap: 20px; animation: scroll 40s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-inner img { width: 300px; height: 200px; object-fit: cover; }

/* --- STEPS --- */
.steps-row { display: flex; justify-content: space-between; gap: 20px; }
.step { text-align: center; flex: 1; }
.step span { display: block; width: 50px; height: 50px; border: 2px solid #c8915f; border-radius: 50%; margin: 0 auto 10px; line-height: 50px; font-weight: bold; }
.step .heart { border: none; font-size: 24px; color: #c8915f; }

/* --- CTA ROW --- */
.cta-section { background: #f5f1ea; padding: 60px 0; border-top: 1px solid #e5ded4; }
.cta-row { display: flex; justify-content: space-between; align-items: center; gap: 30px; }

/* --- RESPONSIVITA (PRO MOBILY) --- */
@media (max-width: 900px) {
    .hero-grid, .grid-4, .cta-row, .steps-row { flex-direction: column !important; display: flex !important; }
    .grid-4 { grid-template-columns: 1fr !important; }
    .hero-image { display: none; }
    .cta-row { text-align: center; }
}