/* Palette AI - Responsive Utilities */
/* Fluid typography, spacing helpers, show/hide utilities */

/* ============================================================================
   FLUID TYPOGRAPHY - Scales smoothly between breakpoints
   ============================================================================ */

   :root {
    /* Fluid font sizes using clamp() */
    --font-xs: clamp(10px, 2vw, 11px);
    --font-sm: clamp(12px, 2.5vw, 13px);
    --font-base: clamp(14px, 3vw, 15px);
    --font-lg: clamp(16px, 3.5vw, 18px);
    --font-xl: clamp(18px, 4vw, 20px);
    
    /* Responsive spacing */
    --space-xs: clamp(4px, 1vw, 6px);
    --space-sm: clamp(8px, 2vw, 12px);
    --space-md: clamp(12px, 3vw, 16px);
    --space-lg: clamp(16px, 4vw, 24px);
    --space-xl: clamp(24px, 5vw, 32px);
}

/* ============================================================================
   RESPONSIVE SPACING UTILITIES
   ============================================================================ */

/* Padding utilities */
.p-responsive-sm { padding: var(--space-sm); }
.p-responsive-md { padding: var(--space-md); }
.p-responsive-lg { padding: var(--space-lg); }

.px-responsive-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.py-responsive-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* Margin utilities */
.m-responsive-sm { margin: var(--space-sm); }
.m-responsive-md { margin: var(--space-md); }
.mt-responsive-md { margin-top: var(--space-md); }
.mb-responsive-lg { margin-bottom: var(--space-lg); }

/* Gap utilities for flex/grid */
.gap-responsive-sm { gap: var(--space-sm); }
.gap-responsive-md { gap: var(--space-md); }

/* ============================================================================
   SHOW/HIDE BY BREAKPOINT
   ============================================================================ */

/* Mobile only (< 768px) */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

/* Tablet and up (>= 768px) */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* Desktop only (>= 1024px) */
@media (max-width: 1023px) {
    .show-desktop-only { display: none !important; }
}

/* Tablet only (768px - 1023px) */
@media (max-width: 767px), (min-width: 1024px) {
    .show-tablet-only { display: none !important; }
}

/* ============================================================================
   RESPONSIVE CONTAINER WIDTHS
   ============================================================================ */

.container-responsive {
    width: 100%;
    max-width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

@media (min-width: 768px) {
    .container-responsive {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    .container-responsive {
        max-width: 960px;
    }
}

@media (min-width: 1280px) {
    .container-responsive {
        max-width: 1200px;
    }
}

/* ============================================================================
   TOUCH-FRIENDLY UTILITIES
   ============================================================================ */

/* Minimum touch target size (44px x 44px per WCAG) */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Larger tap target for important actions */
.touch-target-lg {
    min-width: 56px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   RESPONSIVE FLEX UTILITIES
   ============================================================================ */

.flex-responsive {
    display: flex;
}

/* Stack on mobile */
@media (max-width: 767px) {
    .flex-responsive {
        flex-direction: column;
    }
}

/* Two columns on tablet+ */
.grid-responsive-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .grid-responsive-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Three columns on desktop */
.grid-responsive-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .grid-responsive-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .grid-responsive-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ============================================================================
   RESPONSIVE TEXT UTILITIES
   ============================================================================ */

.text-responsive-sm { font-size: var(--font-sm); }
.text-responsive-base { font-size: var(--font-base); }
.text-responsive-lg { font-size: var(--font-lg); }

/* Center text on mobile only */
@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center;
    }
}

/* ============================================================================
   SCROLLABLE CONTAINERS
   ============================================================================ */

/* Horizontal scroll with momentum */
.scroll-x-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scrollbar-width: thin;
}

.scroll-x-responsive::-webkit-scrollbar {
    height: 4px;
}

.scroll-x-responsive::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 2px;
}

/* ============================================================================
   SAFE AREA INSETS (iOS notch/home indicator)
   ============================================================================ */

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right);
}

.safe-area-all {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ============================================================================
   OVERFLOW HELPERS
   ============================================================================ */

/* Prevent horizontal overflow on mobile */
.overflow-x-hidden-mobile {
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .overflow-x-hidden-mobile {
        overflow-x: visible;
    }
}

/* ============================================================================
   ASPECT RATIO UTILITIES
   ============================================================================ */

.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

/* ============================================================================
   VISIBILITY UTILITIES
   ============================================================================ */

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================================
   PRINT UTILITIES
   ============================================================================ */

@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

.print-only {
    display: none;
}