/**
 * RESPONSIVE WEB / PROGRESSIVE WEB APPLICATION STYLES
 * Ensures all components work seamlessly across mobile, tablet, and desktop
 * Mobile-first approach with progressive enhancement
 */

/* ===========================================
   MOBILE FIRST - BASE STYLES (320px+)
   =========================================== */

/* Ensure body and html handle overflow properly */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

/* Fluid Typography - scales with viewport */
html {
    font-size: 14px;
    /* Base for mobile */
}

/* Fix for cards on mobile - ensure proper spacing */
.grid {
    width: 100%;
    overflow-x: hidden;
}

/* ===========================================
   CONTENT GRID RESPONSIVE OVERRIDES
   =========================================== */

/* Mobile: Single column for better readability */
#content-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 !important;
}

/* Ensure all cards stack properly on mobile */
#content-grid article {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Video cards: Maintain aspect ratio but single column */
#content-grid article.col-span-2,
#content-grid article.col-span-4 {
    grid-column: 1 / -1 !important;
}

/* Series and Blueprint cards: Don't span multiple rows on mobile */
#content-grid article.row-span-2 {
    grid-row: auto !important;
}

/* ===========================================
   CARD CONTENT RESPONSIVE ADJUSTMENTS
   =========================================== */

/* Ensure card content is readable on mobile */
#content-grid article h3 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

#content-grid article p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Adjust padding for mobile cards */
#content-grid article>div {
    padding: 1rem !important;
}

/* Video cards - adjust content positioning */
#content-grid article[class*="col-span"] .absolute.bottom-8 {
    bottom: 1rem !important;
    padding: 1rem !important;
}

/* ===========================================
   HEADER / HERO SECTION RESPONSIVE
   =========================================== */

#header {
    min-height: auto !important;
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
}

.hero-container {
    flex-direction: column !important;
    gap: 2rem !important;
}

/* Logo scaling */
#site-logo {
    font-size: clamp(2rem, 8vw, 6rem) !important;
    line-height: 1 !important;
}

/* Dashboard/Featured post container */
.dashboard-container {
    width: 100% !important;
    max-width: 100% !important;
}

#featured-post {
    height: 400px !important;
    max-height: 60vh !important;
}

/* ===========================================
   FILTER BAR / TUNER UI RESPONSIVE
   =========================================== */

#filter-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tuner-bar {
    display: flex;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.filter-btn {
    white-space: nowrap;
    font-size: 0.75rem !important;
    padding: 0.5rem 1rem !important;
}

/* ===========================================
   CONTEXT STRIP RESPONSIVE
   =========================================== */

.context-strip {
    height: auto !important;
    min-height: 32px;
    padding: 0.5rem !important;
    flex-wrap: wrap;
}

.context-icon {
    font-size: 14px !important;
}

/* ===========================================
   TICKER RESPONSIVE
   =========================================== */

.ticker-container {
    padding: 0.5rem 0 !important;
    margin: 1rem 0 !important;
}

.ticker-item {
    padding: 0 1.5rem !important;
    font-size: 8px !important;
}

/* ===========================================
   TABLET (640px - 1024px)
   =========================================== */

@media (min-width: 640px) {
    html {
        font-size: 15px;
    }

    /* 2 columns for tablets */
    #content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Allow video cards to span 2 columns on tablet */
    #content-grid article.col-span-2,
    #content-grid article.col-span-4 {
        grid-column: 1 / -1 !important;
    }

    /* Series/Blueprint can span properly */
    #content-grid article.row-span-2 {
        grid-row: span 2 !important;
    }

    #content-grid article h3 {
        font-size: 1.125rem !important;
    }

    #content-grid article>div {
        padding: 1.25rem !important;
    }

    #header {
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
        min-height: 60vh !important;
    }

    #featured-post {
        height: 500px !important;
    }
}

/* ===========================================
   LARGE TABLET / SMALL DESKTOP (768px+)
   =========================================== */

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    /* 3 columns for large tablets */
    #content-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    /* Video cards span 3 cols */
    #content-grid article.col-span-4 {
        grid-column: 1 / -1 !important;
    }

    /* Medium video cards span 2 */
    #content-grid article.col-span-2 {
        grid-column: span 2 !important;
    }

    .hero-container {
        gap: 3rem !important;
    }

    .filter-btn {
        font-size: 0.875rem !important;
    }

    #content-grid article>div {
        padding: 1.5rem !important;
    }
}

/* ===========================================
   DESKTOP (1024px+)
   =========================================== */

@media (min-width: 1024px) {

    /* 4 columns for desktop - original design */
    #content-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }

    /* Video cards can span full width */
    #content-grid article.col-span-4 {
        grid-column: span 4 !important;
        grid-row: span 2 !important;
    }

    /* Medium video span 2 */
    #content-grid article.col-span-2 {
        grid-column: span 2 !important;
    }

    /* Blueprint and Series span 1 col, 2 rows */
    #content-grid article.row-span-2 {
        grid-row: span 2 !important;
    }

    /* Restore hero flex direction for desktop */
    .hero-container {
        flex-direction: row !important;
        gap: 3rem !important;
    }

    #header {
        min-height: 80vh !important;
        padding-top: 6rem !important;
        padding-bottom: 3rem !important;
    }

    #featured-post {
        height: 600px !important;
    }

    #content-grid article>div {
        padding: 1.5rem !important;
    }

    .context-strip {
        padding: 0.75rem 1.25rem !important;
    }
}

/* ===========================================
   LARGE DESKTOP (1280px+)
   =========================================== */

@media (min-width: 1280px) {
    #content-grid {
        gap: 2.5rem !important;
    }

    #content-grid article h3 {
        font-size: 1.25rem !important;
    }

    #content-grid article>div {
        padding: 2rem !important;
    }
}

/* ===========================================
   EXTRA LARGE DESKTOP (1536px+)
   =========================================== */

@media (min-width: 1536px) {
    /* Optional: Can increase to 5 or 6 columns for very large screens */
    /* Keeping at 4 for consistency, but adding option */

    .max-w-7xl {
        max-width: 1400px !important;
    }
}

/* ===========================================
   PROGRESSIVE WEB APP ENHANCEMENTS
   =========================================== */

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    #header {
        padding-top: max(4rem, calc(4rem + env(safe-area-inset-top)));
    }
}

/* Touch-friendly interactive elements */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets on touch devices */
    button,
    a,
    .filter-btn,
    .context-icon {
        min-height: 44px;
        min-width: 44px;
    }

    /* Disable hover effects on touch devices */
    .glass-card:hover,
    .card-content:hover,
    article:hover {
        transform: none !important;
    }

    /* Enable active state for feedback */
    button:active,
    a:active,
    article:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ===========================================
   LANDSCAPE ORIENTATION ON MOBILE
   =========================================== */

@media (max-width: 1023px) and (orientation: landscape) {
    #header {
        min-height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #featured-post {
        height: 300px !important;
    }

    #site-logo {
        font-size: clamp(1.5rem, 5vw, 3rem) !important;
    }
}

/* ===========================================
   ACCESSIBILITY & PERFORMANCE
   =========================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

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

/* High contrast mode support */
@media (prefers-contrast: high) {
    .border-custom {
        border-color: currentColor !important;
    }

    .text-secondary {
        color: #ffffff !important;
    }
}

/* ===========================================
   UTILITY OVERRIDES FOR MOBILE
   =========================================== */

/* Ensure images don't break layout */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll */
* {
    max-width: 100vw;
}

/* Container padding adjustments */
@media (max-width: 639px) {
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}