/* Mobile overrides for AI Agency — deterministic mobile layout */
@media (max-width: 600px) {
    body {
        padding: 12px 10px 24px;
    }

    .site {
        border-radius: 12px;
        margin: 0;
    }

    .topline {
        padding: 8px 12px;
        font-size: 0.78rem;
    }

    .hero-header {
        padding: 16px 14px 12px;
    }

    .hero-header-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .brand-logo {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        object-fit: contain;
    }

    .brand-copy h1 {
        font-size: 1.1rem;
    }

    .hero-image img {
        max-height: 220px;
        object-fit: cover;
    }

    .hero-actions {
        justify-content: flex-start;
        gap: 8px;
    }

    .site-nav-inner {
        padding: 8px 10px;
    }

    .page-main {
        padding: 12px;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    .side-panel {
        position: static;
        top: auto;
        max-height: none;
        box-shadow: none;
        padding: 12px;
        border-radius: 12px;
    }

    /* Ensure tables wrap to container width on small screens */
    .table-wrap table,
    table {
        min-width: 0;
        font-size: 0.85rem;
    }

    .table-wrap {
        -webkit-overflow-scrolling: touch;
    }

    .btn {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.86rem;
    }

    .badge {
        font-size: 0.72rem;
        padding: 5px 10px;
    }
}