/* Responsive Utilities - Mobile-First Approach
 * Purpose: Reusable responsive utility classes and media query helpers
 * Pattern: Base styles for mobile, progressive enhancement via media queries
 */

/* === Container Utilities === */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--container-padding-tablet);
        padding-right: var(--container-padding-tablet);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: var(--max-content-width);
        padding-left: var(--container-padding-desktop);
        padding-right: var(--container-padding-desktop);
    }
}

/* === Responsive Grid === */
.responsive-grid {
    display: grid;
    gap: var(--grid-gap-mobile);
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
}

@media (min-width: 768px) {
    .responsive-grid {
        gap: var(--grid-gap-tablet);
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
    }
}

@media (min-width: 1280px) {
    .responsive-grid {
        gap: var(--grid-gap-desktop);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* === Flexible Grid === */
/* For dynamic column counts based on content */
.flex-grid {
    display: grid;
    gap: var(--grid-gap-mobile);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 768px) {
    .flex-grid {
        gap: var(--grid-gap-tablet);
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

@media (min-width: 1280px) {
    .flex-grid {
        gap: var(--grid-gap-desktop);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* === Display Utilities === */
/* Hide/show elements based on viewport size */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

.show-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none;
    }
}

.hide-tablet {
    display: block;
}

@media (min-width: 768px) and (max-width: 1279px) {
    .hide-tablet {
        display: none;
    }
}

.show-tablet {
    display: none;
}

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

.hide-desktop {
    display: block;
}

@media (min-width: 1280px) {
    .hide-desktop {
        display: none;
    }
}

.show-desktop {
    display: none;
}

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

/* === Touch Target Utilities === */
/* Ensure minimum tap target size (WCAG 2.1 AA) */
.touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--touch-target-spacing);
}

/* === Focus Utilities === */
/* Accessible focus indicators */
.focus-visible:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Remove default focus for mouse users, keep for keyboard */
.focus-visible:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* === Text Utilities === */
/* Responsive typography */
.text-responsive {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

@media (min-width: 768px) {
    .text-responsive {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 1280px) {
    .text-responsive {
        font-size: var(--font-size-xl);
    }
}

/* Text overflow handling */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Line length limit for readability (WCAG 2.1 - FR-008) */
.text-readable {
    max-width: 75ch;
}

/* === Spacing Utilities === */
/* Responsive padding */
.p-responsive {
    padding: var(--spacing-sm);
}

@media (min-width: 768px) {
    .p-responsive {
        padding: var(--spacing-md);
    }
}

@media (min-width: 1280px) {
    .p-responsive {
        padding: var(--spacing-lg);
    }
}

/* Responsive margin */
.m-responsive {
    margin: var(--spacing-sm);
}

@media (min-width: 768px) {
    .m-responsive {
        margin: var(--spacing-md);
    }
}

@media (min-width: 1280px) {
    .m-responsive {
        margin: var(--spacing-lg);
    }
}

/* === Stack Utilities === */
/* Vertical stacking with responsive gaps */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .stack {
        gap: var(--spacing-md);
    }
}

@media (min-width: 1280px) {
    .stack {
        gap: var(--spacing-lg);
    }
}

/* === Horizontal Layout === */
/* Switch from vertical to horizontal at larger screens */
.h-stack-tablet {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (min-width: 768px) {
    .h-stack-tablet {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
    }
}

.h-stack-desktop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

@media (min-width: 1280px) {
    .h-stack-desktop {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-lg);
    }
}

/* === Image Utilities === */
/* Responsive images */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === Orientation Utilities === */
/* Mobile landscape adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .landscape-compact {
        padding-top: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
    }
}

/* === Hover Utilities === */
/* Only apply hover styles on devices that support hover */
@media (hover: hover) {
    .hover-scale:hover {
        transform: scale(1.05);
        transition: transform var(--transition-fast);
    }

    .hover-lift:hover {
        box-shadow: var(--shadow-lg);
        transition: box-shadow var(--transition-fast);
    }

    .hover-opacity:hover {
        opacity: 0.8;
        transition: opacity var(--transition-fast);
    }
}

/* === Skip to Main Content === */
/* Accessibility: Skip navigation for keyboard users */
.skip-to-main {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-to-main:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: var(--z-index-fixed);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    outline: var(--focus-outline-width) solid var(--focus-outline-color);
}

/* === Screen Reader Only === */
/* Accessible content for screen readers 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;
}

/* === CSS Grid Fallback for Older Browsers === */
/* Progressive enhancement with flexbox fallback */
@supports not (display: grid) {
    .responsive-grid,
    .flex-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .responsive-grid > *,
    .flex-grid > * {
        flex: 1 1 auto;
        min-width: 280px;
    }
}