/**
 * ═══════════════════════════════════════════════════════════════════════════
 * LAYER 75: MOBILE RESPONSIVENESS - STYLING
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ========== CSS CUSTOM PROPERTIES ========== */
:root {
    --vw: 100vw;
    --vh: 100vh;
    --vh-unit: 1vh;

    /* Responsive spacing */
    --spacing-mobile: 1rem;
    --spacing-tablet: 1.5rem;
    --spacing-desktop: 2rem;

    /* Responsive font sizes */
    --font-size-base: 16px;
    --font-size-mobile: 14px;
    --font-size-tablet: 15px;
    --font-size-desktop: 16px;
}

/* ========== MOBILE SMALL (< 480px) ========== */
@media (max-width: 479px) {
    :root {
        --font-size-base: var(--font-size-mobile);
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Hide on mobile-small */
    .hide-mobile-small {
        display: none !important;
    }

    /* Stack everything */
    .row,
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Full width buttons */
    .btn {
        width: 100%;
        justify-content: center;
    }

    /* Smaller headings */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }
}

/* ========== MOBILE (480px - 640px) ========== */
@media (min-width: 480px) and (max-width: 639px) {
    :root {
        --font-size-base: var(--font-size-mobile);
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .hide-mobile {
        display: none !important;
    }

    /* 2-column grid on larger mobiles */
    .grid-auto {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== MOBILE LANDSCAPE (640px - 768px) ========== */
@media (min-width: 640px) and (max-width: 767px) {
    .hide-mobile-landscape {
        display: none !important;
    }

    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ========== TABLET (768px - 1024px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --font-size-base: var(--font-size-tablet);
    }

    .hide-tablet {
        display: none !important;
    }

    .container {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Show more columns on tablet */
    .grid-auto {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== TABLET LANDSCAPE (1024px - 1280px) ========== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hide-tablet-landscape {
        display: none !important;
    }

    .container {
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }

    .grid-auto {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== DESKTOP (1280px - 1440px) ========== */
@media (min-width: 1280px) and (max-width: 1439px) {
    :root {
        --font-size-base: var(--font-size-desktop);
    }

    .hide-desktop {
        display: none !important;
    }

    .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========== DESKTOP LARGE (1440px - 1920px) ========== */
@media (min-width: 1440px) and (max-width: 1919px) {
    .hide-desktop-large {
        display: none !important;
    }

    .container {
        max-width: 1340px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========== DESKTOP XL (1920px+) ========== */
@media (min-width: 1920px) {
    .hide-desktop-xl {
        display: none !important;
    }

    .container {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========== ORIENTATION-SPECIFIC ========== */
@media (orientation: portrait) {
    .hide-portrait {
        display: none !important;
    }

    .show-landscape {
        display: none !important;
    }
}

@media (orientation: landscape) {
    .hide-landscape {
        display: none !important;
    }

    .show-portrait {
        display: none !important;
    }
}

/* ========== TOUCH DEVICE STYLES ========== */
.touch-enabled {

    /* Larger touch targets */
    button,
    .btn,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

.no-touch {

    /* Enable smooth hover effects */
    * {
        transition: all 0.3s ease;
    }
}

.hover-enabled button:hover,
.hover-enabled .btn:hover {
    transform: translateY(-2px);
}

.no-hover button:active,
.no-hover .btn:active {
    transform: scale(0.98);
}

/* ========== RETINA DISPLAY ========== */
.retina img {
    image-rendering: -webkit-optimize-contrast;
}

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

/* Show/Hide utilities */
.show-mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .show-mobile-only {
        display: block;
    }
}

.show-tablet-only {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet-only {
        display: block;
    }
}

.show-desktop-only {
    display: none;
}

@media (min-width: 1024px) {
    .show-desktop-only {
        display: block;
    }
}

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

    .text-mobile-left {
        text-align: left;
    }
}

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

    .flex-mobile-wrap {
        flex-wrap: wrap;
    }
}

/* Grid utilities */
@media (max-width: 767px) {
    .grid-mobile-1 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-tablet-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .grid-desktop-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .grid-desktop-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Spacing utilities */
@media (max-width: 767px) {
    .p-mobile-1 {
        padding: 1rem !important;
    }

    .p-mobile-2 {
        padding: 1.5rem !important;
    }

    .m-mobile-1 {
        margin: 1rem !important;
    }

    .m-mobile-2 {
        margin: 1.5rem !important;
    }
}

/* Font size utilities */
@media (max-width: 767px) {
    .text-mobile-sm {
        font-size: 0.875rem !important;
    }

    .text-mobile-base {
        font-size: 1rem !important;
    }

    .text-mobile-lg {
        font-size: 1.125rem !important;
    }
}

/* ========== RESPONSIVE IMAGES ========== */
img {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

picture {
    display: block;
}

/* ========== RESPONSIVE TABLES ========== */
@media (max-width: 767px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 600px;
    }
}

/* ========== RESPONSIVE NAVIGATION ========== */
@media (max-width: 767px) {
    .nav-mobile-stacked {
        flex-direction: column;
    }

    .nav-mobile-stacked li {
        width: 100%;
    }
}

/* ========== VIEWPORT HEIGHT FIX (iOS) ========== */
.full-height {
    height: 100vh;
    height: calc(var(--vh-unit) * 100);
}

/* ========== SAFE AREA INSETS (iOS Notch) ========== */
@supports (padding: env(safe-area-inset-top)) {
    .safe-top {
        padding-top: env(safe-area-inset-top);
    }

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

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

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

/* ========== DEVICE-SPECIFIC STYLES ========== */
.device-mobile {
    /* Mobile-specific adjustments */
}

.device-mobile .header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.device-tablet {
    /* Tablet-specific adjustments */
}

.device-desktop {
    /* Desktop-specific adjustments */
}

/* ========== PRINT STYLES ========== */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== DARK MODE (if enabled) ========== */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        /* Dark mode styles */
    }
}

/* ========== HIGH CONTRAST ========== */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }
}

/* ========== LANDSCAPE-SPECIFIC ADJUSTMENTS ========== */
@media (max-height: 500px) and (orientation: landscape) {

    /* Compact layout for short landscape screens */
    .header {
        padding: 0.5rem 0;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    .section {
        padding: 2rem 0;
    }
}

/* ========== CONTAINER QUERIES (Modern browsers) ========== */
@supports (container-type: inline-size) {
    .container-query {
        container-type: inline-size;
    }
}