/* =====================================================
   MOBILE & TABLET RESPONSIVE FIXES - numericky.cz
   Mobile = max-width: 767px  |  Tablet = 768px-1024px
   ===================================================== */

/* ===== MOBILE (up to 767px) ===== */
@media (max-width: 767px) {

    /* HERO: compact */
    .hero {
        padding-top: 80px !important;
        padding-bottom: 30px !important;
    }

    .hero h1.text-huge {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    .hero p[data-i18n="hero_desc"] {
        font-size: 0.95rem !important;
        margin-bottom: 1.25rem !important;
    }

    .hero .btn {
        padding: 0.9rem 2rem !important;
        font-size: 0.75rem !important;
    }

    /* CASH FLOW: Full width chart, table + 2 boxes below */
    .bento-grid {
        gap: 1rem !important;
    }

    .col-span-8 {
        grid-column: span 1 !important;
        min-height: 350px !important;
    }

    .col-span-4 {
        grid-column: span 1 !important;
    }

    /* Remove forced min-height on mobile */
    section[style*="min-height: 100vh"] {
        min-height: auto !important;
    }

    /* Tighter section spacing */
    .section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section[style*="padding: 6rem"],
    section[style*="padding-top: 6rem"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ===== TABLET (768px to 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {

    .hero {
        padding-top: 100px !important;
        padding-bottom: 50px !important;
    }

    /* DATA & TECH + WHY US: 3 columns on tablet */
    .tech-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* HOW IT WORKS: 3 columns on tablet */
    #proces .container>div[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Remove forced min-height on tablet */
    section[style*="min-height: 100vh"] {
        min-height: auto !important;
    }

    /* Tech dark cards: compact for tablet fit */
    .tech-col {
        padding: 1.5rem 1rem !important;
    }

    .tech-col h3 {
        font-size: 1.15rem !important;
    }

    .tech-col p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    .tech-carousel {
        height: 60px !important;
    }

    /* How It Works cards: compact for tablet */
    #proces .studio-card {
        padding: 1.5rem 1rem !important;
    }

    #proces .studio-card h4 {
        font-size: 1.1rem !important;
    }

    #proces .studio-card p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }
}