/* Global Responsive Styles for All Frontend Pages */

/* Tablet Landscape (1024px and below) */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }

    /* Typography */
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    /* Grids */
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 15px;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    
    /* Grids */
    .grid-4,
    .grid-3,
    .grid-2 { 
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Buttons */
    .btn,
    .button {
        width: 100%;
        max-width: 100%;
        padding: 12px 20px;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Forms */
    .form-row {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.15rem; }
    
    body {
        font-size: 14px;
    }

    /* Spacing */
    .section {
        padding: 30px 0;
    }

    /* Buttons */
    .btn,
    .button {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Utility Classes */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}