/* 
 * PromptifyArt - Global Responsive Styles
 * Contains utility classes for responsive visibility and layout adjustments
 */

/* ===== Visibility Utilities ===== */

/* Desktop only */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* Mobile only */
@media (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* Tablet only */
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-only {
        display: block !important;
    }
}

@media (max-width: 768px) or (min-width: 1025px) {
    .visible-tablet {
        display: none !important;
    }
}

/* ===== Typography Adjustments ===== */
@media (max-width: 640px) {
    h1 {
        font-size: var(--font-size-2xl-plus);
    }
    
    h2 {
        font-size: var(--font-size-2xl);
    }
    
    h3 {
        font-size: var(--font-size-xl);
    }
    
    .text-xl {
        font-size: var(--font-size-lg);
    }
    
    .text-2xl {
        font-size: var(--font-size-xl); /* Adjusted from 1.25rem to match h3 logic if needed, but original was 1.25rem which is xl */
    }
}

/* ===== Layout Adjustments ===== */
@media (max-width: 768px) {
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Reverse column order on mobile if needed */
    .flex-col-reverse-mobile {
        flex-direction: column-reverse;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Spacing Adjustments ===== */
@media (max-width: 640px) {
    .section-padding {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
    
    .gap-6, .gap-8 {
        gap: var(--spacing-4);
    }
}