/* ==========================================
   MARTIN FLEGL - DEDIKOVANÝ MOBILNÍ STYLESHEET
   Aktivuje se automaticky na mobilních zařízeních (max-width: 768px)
   ========================================== */

@media screen and (max-width: 768px) {
    /* 1. Základní nastavení a typografie pro mobily */
    html, body {
        font-size: 15px;
        line-height: 1.6;
        overflow-x: hidden;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .section {
        padding: 45px 0 !important;
    }

    .section-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .section-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 1.5px !important;
    }

    /* 2. Hlavička a Mobilní Navigace */
    .header {
        padding: 12px 0 !important;
    }

    .header-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-logo-img {
        height: 40px !important;
    }

    .theme-selector {
        transform: scale(0.9);
    }

    .logo-text {
        font-size: 1.3rem !important;
    }

    .nav-links {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        padding: 8px 0;
        gap: 15px;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 5px;
    }

    .nav-links a {
        font-size: 0.85rem !important;
        padding: 4px 8px;
    }

    .header .btn-primary {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    /* 3. Hero Sekce */
    .hero {
        padding-top: 120px !important;
        padding-bottom: 50px !important;
        text-align: center;
    }

    .hero-title {
        font-size: 2.1rem !important;
        line-height: 1.25 !important;
    }

    .hero-description {
        font-size: 1rem !important;
        margin: 15px 0 25px 0 !important;
    }

    .hero-cta {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .hero-cta .btn-primary,
    .hero-cta .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        box-sizing: border-box;
    }

    /* 4. Statistiky (2x2 Grid pro mobily) */
    .stats-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }

    .stat-number {
        font-size: 1.8rem !important;
    }

    .stat-label {
        font-size: 0.8rem !important;
    }

    /* 5. Sekce O mně */
    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: left;
    }

    .about-photo {
        max-width: 220px !important;
        margin: 0 auto;
        display: block;
    }

    /* 6. 10 Kroků Spolupráce */
    .process-timeline {
        padding-left: 0 !important;
    }

    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .timeline-dot {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }

    .timeline-content {
        width: 100% !important;
        padding: 18px !important;
        box-sizing: border-box;
    }

    /* 7. Služby, Nábor a Recenze (Jednosloupcový rozklad) */
    .services-grid,
    .cooperation-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .service-card,
    .glass-card {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    /* 8. Hypoteční Kalkulačka */
    .calculator-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding: 20px !important;
    }

    .result-price {
        font-size: 2.2rem !important;
    }

    /* 9. Případová Studie */
    .case-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .case-results {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .result-badge {
        width: 100% !important;
        box-sizing: border-box;
    }

    .chart-svg {
        width: 100% !important;
        height: auto !important;
    }

    /* 10. Kontaktní Formulář a QR kód */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .contact-info {
        order: 1;
    }

    .contact-form-wrapper {
        order: 2;
        padding: 22px 18px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Prevence automatického zoomování iOS při kliknutí na vstupní pole (min 16px) */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
    }

    .btn-primary.w-full {
        min-height: 52px !important;
        font-size: 1rem !important;
    }

    /* Mobilní QR Kód Card - Vycentrováno a přizpůsobeno displeji */
    .qr-container {
        flex-direction: column !important;
        text-align: center !important;
        width: 100% !important;
        padding: 20px 15px !important;
        gap: 15px !important;
        box-sizing: border-box;
    }

    .qr-image {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto;
    }

    .qr-text {
        max-width: 100% !important;
        font-size: 1.05rem !important;
    }

    /* 11. Patička */
    .footer-top {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center;
    }

    /* 12. Admin Modal na mobilu */
    .admin-modal-card {
        width: 92% !important;
        padding: 20px !important;
    }
}