/**
 * Mobile Optimizations
 * Comprehensive mobile fixes across all templates
 * Breakpoint: 850px (higher than traditional 768px for better tablet experience)
 *
 * @package Dagora_Theme
 * @version 1.1.0
 */

/* ==========================================================================
   GLOBAL HEADER FIXES - Logo & Hamburger Menu

   Be careful NOT to break GeneratePress's mobile nav toggle mechanism.
   GP uses .toggled class on .main-navigation to show/hide menu.
   ========================================================================== */

@media (max-width: 850px) {
    /* Reset excessive header padding for dark-bg single templates */
    .single-event .inside-header.grid-container,
    .single-company .inside-header.grid-container,
    .single-space .inside-header.grid-container,
    .single-report .inside-header.grid-container,
    .single-insight .inside-header.grid-container {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }

    /* Ensure logo is visible */
    .single-event .site-logo,
    .single-company .site-logo,
    .single-space .site-logo,
    .single-report .site-logo,
    .single-insight .site-logo {
        display: block !important;
    }

    .single-event .site-logo img,
    .single-company .site-logo img,
    .single-space .site-logo img,
    .single-report .site-logo img,
    .single-insight .site-logo img {
        max-height: 40px;
        width: auto;
    }
}


/* ==========================================================================
   SINGLE TEMPLATES - Reduce Top Padding (ALL)
   ========================================================================== */

@media (max-width: 850px) {
    /* Aggressive reduction of top padding for single templates
       Note: single-event is handled in event-template-styles.css */
    .single-company .hero-colorblock,
    .single-space .hero-colorblock,
    .single-report .hero-colorblock,
    .single-insight .hero-colorblock {
        padding-top: var(--space-lg) !important;
        padding-bottom: var(--space-xl);
        min-height: auto;
    }

    /* Hero content padding (non-event templates) */
    .single-company .hero-colorblock__content,
    .single-space .hero-colorblock__content,
    .single-report .hero-colorblock__content,
    .single-insight .hero-colorblock__content {
        padding: 0 var(--space-md) !important;
    }
}

/* Note: Single event mobile styles moved to event-template-styles.css for consistency */


/* ==========================================================================
   EVENTS ARCHIVE - Card Date Container
   ========================================================================== */

@media (max-width: 850px) {
    /* Add subtle background to date container for better visual alignment */
    .event-card .event-date {
        background: var(--color-light, #f5f5f7);
        padding: var(--space-sm);
        border-radius: var(--radius-sm);
        margin-bottom: var(--space-sm);
    }
}


/* ==========================================================================
   SPACES ARCHIVE PAGE
   ========================================================================== */

@media (max-width: 850px) {
    /* CRITICAL: Force intro section to column layout */
    .spaces-intro-grid {
        display: block !important;
    }

    .intro-text-column,
    .intro-images-column {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
    }

    /* Images/slider first visually */
    .intro-images-column {
        margin-bottom: var(--space-xl);
    }

    .spaces-swiper {
        height: 280px;
    }

    /* Intro section padding */
    .spaces-intro-section {
        padding: var(--space-xl) var(--space-md);
    }
}


/* ==========================================================================
   SINGLE SPACE PAGE
   ========================================================================== */

@media (max-width: 850px) {
    /* Gallery: better aspect ratio with object-fit cover */
    .space-gallery-main {
        height: 280px;
    }

    .space-gallery-main .swiper-slide img,
    .space-gallery-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .space-gallery-main .swiper-slide {
        background: var(--color-dark-2);
    }

    .space-gallery-thumbs {
        height: 60px;
    }

    /* Reduce spacing between benefit/feature items */
    .space-features-grid {
        gap: var(--space-md);
    }

    .feature-card {
        padding: var(--space-md);
        margin-bottom: 0;
    }

    .space-features-section {
        padding-bottom: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    /* Content container */
    .space-content-container {
        padding: 0 var(--space-md);
    }

    .space-details-container {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-md);
    }
}


/* ==========================================================================
   COMMUNITY/COMPANIES ARCHIVE PAGE
   ========================================================================== */

@media (max-width: 850px) {
    /* Hero section - proper padding inside colored box */
    .page-template-companies-template .hero-colorblock,
    .companies-hero {
        padding: var(--space-xl) var(--space-md) !important;
    }

    .page-template-companies-template .hero-colorblock__content {
        padding: 0 !important;
    }

    /* Constrain all elements to same width */
    .ai-business-matcher,
    .companies-filter-bar,
    .companies-results-summary,
    .companies-grid {
        margin-left: var(--space-md) !important;
        margin-right: var(--space-md) !important;
        width: calc(100% - var(--space-md) * 2) !important;
        max-width: calc(100% - var(--space-md) * 2) !important;
    }

    /* Cards grid */
    .companies-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Cards don't overflow */
    .company-card {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }

    /* Filter bar */
    .companies-filter-bar {
        padding: var(--space-md);
        position: static !important;
    }
}


/* ==========================================================================
   SINGLE COMPANY PAGE
   ========================================================================== */

@media (max-width: 850px) {
    /* Hide industry in pre-header tagline - show only "Community Member" */
    .single-company .hero-colorblock__tagline svg,
    .single-company .hero-colorblock__tagline span:nth-child(2),
    .single-company .hero-colorblock__tagline span:last-child {
        display: none !important;
    }

    .single-company .hero-colorblock__tagline span:first-child {
        display: inline !important;
    }

    /* Layout - stack columns */
    .company-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-xl);
    }

    /* Main content first */
    .company-main {
        order: 1;
    }

    /* Contact card LAST (below location/map) */
    .company-sidebar {
        order: 2;
        position: static;
    }

    /* Content wrapper padding */
    .company-content-wrapper {
        padding: var(--space-xl) var(--space-md);
    }

    /* White info boxes - add border radius and proper padding */
    .company-section,
    .company-logo-card {
        background: var(--color-light-3, white);
        border-radius: var(--radius-md, 8px);
        padding: var(--space-lg);
    }

    .company-logo-card {
        padding: var(--space-xl);
        max-width: none;
    }

    /* Contact card full width */
    .company-contact-card {
        width: 100%;
        border-radius: var(--radius-md, 8px);
    }

    .company-contact-card__header,
    .company-contact-card__body {
        padding: var(--space-lg);
    }

    /* Industry tag */
    .company-industry-tag {
        width: 100%;
    }
}


/* ==========================================================================
   SINGLE REPORT & INSIGHT PAGES
   (Background colors already correctly set in their respective stylesheets:
    - Reports: var(--color-brutalist-purple)
    - Insights: var(--color-brutalist-teal)
   ========================================================================== */


/* ==========================================================================
   DESIGN SYSTEM OVERRIDES AT 850PX
   ========================================================================== */

@media (max-width: 850px) {
    /* Hero colorblock text sizing */
    .hero-colorblock__title {
        font-size: var(--text-3xl);
    }

    .hero-colorblock__subtitle {
        font-size: var(--text-base);
    }

    .hero-colorblock__tagline {
        font-size: 0.7rem;
        letter-spacing: 2px;
        margin-bottom: var(--space-md);
    }

    /* Grid systems */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Container padding */
    .container,
    .container-narrow,
    .container-text {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Filter bars */
    .filter-bar,
    .events-filter-bar,
    .spaces-filter-bar {
        flex-direction: column;
        position: static !important;
    }

    .filter-group {
        min-width: 100%;
        width: 100%;
    }

    /* Typography scale */
    :root {
        --text-8xl: 2.5rem;
        --text-7xl: 2.25rem;
        --text-6xl: 2rem;
        --text-5xl: 1.75rem;
        --text-4xl: 1.5rem;
        --text-3xl: 1.25rem;
    }
}


/* ==========================================================================
   SMALLER MOBILE (480px and below)
   ========================================================================== */

/* ==========================================================================
   SUB-MENU STYLING
   ========================================================================== */

.sub-menu.toggled-on .menu-item {
    position: relative;
    padding: 15px 10px 10px 0;
    background: var(--color-light-3);
    top: 20px;
    border-radius: 0 0 3px 3px;
}

.sub-menu.toggled-on .menu-item a {
    font-size: 15px;
    margin-left: 15px;
}

/* ==========================================================================
   SLIDEOUT MOBILE NAV (GeneratePress)
   ========================================================================== */

@media screen and (max-width: 850px) {
    #generate-slideout-menu.is-open {
        background: var(--color-dark);
    }

    #generate-slideout-menu.is-open .inside-navigation {
        position: relative;
        padding-top: 280px;
    }

    #generate-slideout-menu.is-open .inside-navigation::before {
        display: block;
        content: '';
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
        background: var(--color-light-2);
    }

    #generate-slideout-menu.is-open .inside-navigation::after {
        display: block;
        content: '';
        position: absolute;
        top: 50px;
        width: 60%;
        height: 50vw;
        background-image: url('/wp-content/uploads/Dagora_Lifestyle_innovation_hub_BLU.svg');
        background-size: contain;
        background-repeat: no-repeat;
    }

    #generate-slideout-menu.is-open button.slideout-exit {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 0;
        background: var(--color-light-2);
        color: var(--color-dark);
        width: 45px;
        height: 45px;
    }

    #generate-slideout-menu.is-open button.slideout-exit svg {
        margin-top: -4px;
    }

    #generate-slideout-menu.is-open li a {
        display: block;
        max-width: 80%;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        background: none;
    }

    .nav-cta-mobile a {
        background: var(--color-light-3) !important;
        color: var(--color-dark) !important;
        border-radius: 5px;
    }
}

/* ==========================================================================
   SPACES PAGE FIXES
   ========================================================================== */

@media screen and (max-width: 850px) {
    /* Fix gap above swiper on spaces page */
    .page-template-spaces-template-php .intro-slider {
        margin-top: 4rem;
    }
}

/* ==========================================================================
   SINGULAR TEMPLATES - EXCESS PADDING FIX
   ========================================================================== */

@media screen and (max-width: 850px) {
    .wp-singular.single-space #content.site-content,
    .wp-singular.single-company #content.site-content,
    .wp-singular.single-report #content.site-content,
    .wp-singular.single-insight #content.site-content {
        padding: 20px 0;
    }
}

/* ==========================================================================
   SMALLER MOBILE (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
    /* Tighter spacing */
    .hero-colorblock {
        padding: var(--space-lg) var(--space-sm) !important;
    }

    .hero-colorblock__title {
        font-size: var(--text-2xl);
    }

    /* Event page */
    .event-content,
    .event-program-section {
        padding: var(--space-lg) var(--space-sm);
    }

    /* Company page */
    .company-content-wrapper {
        padding: var(--space-lg) var(--space-sm);
    }

    .company-section,
    .company-logo-card {
        padding: var(--space-md);
    }

    .company-contact-card__header,
    .company-contact-card__body {
        padding: var(--space-md);
    }

    /* Space page */
    .space-gallery-main {
        height: 220px;
    }

    .space-details-container {
        padding: var(--space-md) var(--space-sm);
    }

    /* Companies archive */
    .ai-business-matcher,
    .companies-filter-bar,
    .companies-results-summary,
    .companies-grid {
        margin-left: var(--space-sm) !important;
        margin-right: var(--space-sm) !important;
        width: calc(100% - var(--space-sm) * 2) !important;
        max-width: calc(100% - var(--space-sm) * 2) !important;
    }
}