/**
 * Trek Navigators Responsive Styles
 *
 * Responsive styles for Trek Navigators plugin templates
 *
 * Breakpoint Structure:
 * - Desktop: 850px and above (3+ columns)
 * - Tablet: 550px to 849px (always 2 columns)
 * - Mobile: 549px and below (always 1 column)
 * 
 * This file controls how the Trek Navigators cards display at different screen sizes:
 * - On desktop (850px+): Cards display according to the columns attribute in shortcode
 * - On tablet (550px-849px): Cards always display in 2 columns regardless of shortcode setting
 * - On mobile (549px and below): Cards always display in 1 column (stacked vertically)
 */

/* ----------------------------------------
   1. GENERAL RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 1140px) {
    .trek-navigators-single .container {
        max-width: 95%;
    }

    /* Adjust size of images on large screens but below 1140px */
    :root {
        --trek-navigators-archive-image-size: 300px;
        --trek-navigators-shortcode-image-size: 230px;
    }
}

/* ----------------------------------------
   2. MEDIUM DEVICES (TABLETS, 850px AND DOWN)
   ---------------------------------------- */
@media (max-width: 850px) {
    /* Adjust image sizes for medium screens */
    :root {
        --trek-navigators-archive-image-size: 250px;
        --trek-navigators-shortcode-image-size: 200px;
    }

    /* Main layout adjustments - convert to single column */
    .trek-navigators-two-column-layout {
        flex-direction: column;
        align-items: center;
    }

    .trek-navigators-column-left {
        /*flex: 0 0 66.666%;*/
        max-width: 100% !important;
    }
    .trek-navigators-column-right {
        flex: 0 0 100% !important;
    	max-width: 100% !important;
    }
    
    /* Move right column content after left column content */
    .trek-navigators-column-right {
        order: 2; /* Display after left column */
    }
    
    .trek-navigators-column-left {
        order: 1; /* Display before right column */
    }
    
    /* Center specific elements that might need additional alignment */
    .trek-navigators-section-title,
    .trek-navigators-section-content,
    .trek-navigators-content-section,
    .trek-navigators-main-content,
    .trek-navigators-single-title,
    .trek-navigators-start-date-wrapper {
        text-align: center;
    }
    
    /* For lists and other elements that should remain left-aligned for readability */
    .trek-navigators-section-content ul,
    .trek-navigators-section-content ol {
        display: inline-block;
        text-align: left;
    }

    /* Text size adjustments */
    .trek-navigators-section-title {
        font-size: 18px;
    }

    .trek-navigators-single-title {
        font-size: 28px;
    }

    /* Grid adjustments for both archive and shortcodes */
    .trek-navigators-archive .trek-navigators-grid-item {
        width: 50%; /* 2 columns on medium devices */
    }

    /* Shortcode column adjustments - force 2 columns on tablets */
    .trek-navigators-container .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="1"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="2"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="3"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="4"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="5"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="6"] .trek-navigators-grid-item {
        width: 50% !important; /* Force 2 columns on tablets with !important to override specific settings */
        float: left !important;
    }

    /* Image size adjustments for 2-column tablet layout */
    .trek-navigators-container[data-columns="3"] .trek-navigators-grid-image,
    .trek-navigators-container[data-columns="3"] .trek-navigators-no-image,
    .trek-navigators-container[data-columns="4"] .trek-navigators-grid-image,
    .trek-navigators-container[data-columns="4"] .trek-navigators-no-image,
    .trek-navigators-container[data-columns="5"] .trek-navigators-grid-image,
    .trek-navigators-container[data-columns="5"] .trek-navigators-no-image,
    .trek-navigators-container[data-columns="6"] .trek-navigators-grid-image,
    .trek-navigators-container[data-columns="6"] .trek-navigators-no-image {
        width: var(--trek-navigators-shortcode-image-size);
        height: var(--trek-navigators-shortcode-image-size);
    }
    
    /* Force grid structure to 2 columns on tablets */
    .trek-navigators-grid,
    .trek-navigators-container .trek-navigators-grid,
    .trek-navigators-archive .trek-navigators-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
    }
    
    /* Ensure all grid items are properly sized for 2 columns */
    .trek-navigators-grid-item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------
   3. SMALL DEVICES (LANDSCAPE PHONES, 550px AND DOWN)
   ---------------------------------------- */
@media (max-width: 550px) {
    /* Adjust image sizes for small screens */
    :root {
        --trek-navigators-archive-image-size: 200px;
        --trek-navigators-shortcode-image-size: 180px;
    }

    /* Header adjustments */
    .trek-navigators-header-image {
        margin-top: 15px;
    }

    .trek-navigators-start-date-wrapper {
        text-align: center;
    }

    /* Content adjustments */
    .trek-navigators-main-content {
        padding: 0 10px;
    }

    /* Button adjustments */
    .trek-navigators-digital-badges-button {
        padding: 8px 15px;
        font-size: 14px;
    }

    /* Archive and shortcode grid adjustments */
    .trek-navigators-grid {
        margin: -10px;
    }

    .trek-navigators-grid-item {
        padding: 10px;
    }

    /* Force 2 columns on small devices */
    .trek-navigators-archive .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="3"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="4"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="5"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="6"] .trek-navigators-grid-item {
        width: 50%;
    }

    /* Single column layout for 1-column shortcodes */
    .trek-navigators-container[data-columns="1"] .trek-navigators-grid-item {
        width: 100%;
    }

    /* Title size adjustments */
    .trek-navigators-single-title {
        font-size: 24px;
    }
}

/* ----------------------------------------
   4. EXTRA SMALL DEVICES (PORTRAIT PHONES, 549px AND DOWN)
   ---------------------------------------- */
@media (max-width: 549px) {
    /* Adjust image sizes for extra small screens */
    :root {
        --trek-navigators-archive-image-size: 170px;
        --trek-navigators-shortcode-image-size: 150px;
    }

    /* Single post adjustments */
    .trek-navigators-section-title {
        font-size: 16px;
    }

    .trek-navigators-section-content {
        font-size: 14px;
    }

    .trek-navigators-single-title {
        font-size: 20px;
    }

    /* CRITICAL: Force 1 column on mobile devices for ALL grid items */
    .trek-navigators-archive .trek-navigators-grid-item,
    .trek-navigators-container .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="2"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="3"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="4"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="5"] .trek-navigators-grid-item,
    .trek-navigators-container[data-columns="6"] .trek-navigators-grid-item {
        width: 100% !important; /* Force 1 column with !important */
        float: none !important; /* Prevent floating */
        max-width: 100% !important; /* Ensure full width */
        flex: 0 0 100% !important; /* For flex layouts */
    }
    
    /* Force grid to single column */
    .trek-navigators-grid,
    .trek-navigators-container .trek-navigators-grid,
    .trek-navigators-archive .trek-navigators-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    /* Ensure single row display also shows as column on mobile */
    .trek-navigators-container.single-row-display .trek-navigators-grid {
        flex-direction: column !important;
        display: flex !important;
    }
    
    .trek-navigators-container.single-row-display .trek-navigators-grid-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-right: 0 !important;
    }

    /* Center images in mobile view */
    .trek-navigators-grid-image-wrapper {
        text-align: center;
    }

    .trek-navigators-grid-image,
    .trek-navigators-no-image {
        margin: 0 auto;
    }

    /* Spacing adjustments */
    .trek-navigators-content-section {
        margin-bottom: 25px;
    }

    .trek-navigators-badges-wrapper,
    .trek-navigators-digital-badges-wrapper,
    .trek-navigators-more-about-wrapper,
    .trek-navigators-learn-more-trek-wrapper {
        margin-bottom: 20px;
    }

    /* Content spacing */
    .trek-navigators-section-content ul,
    .trek-navigators-section-content ol {
        margin-left: 1rem;
        margin-bottom: 1.2rem;
    }

    .trek-navigators-section-content li {
        margin-bottom: 0.5em;
    }
}

/* ----------------------------------------
   5. ARCHIVE PAGE SPECIFIC RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 850px) {
    /* Archive page title */
    .trek-navigators-archive .page-title {
        font-size: 24px;
        text-align: center;
    }
}

@media (max-width: 549px) {
    .trek-navigators-archive .page-title {
        font-size: 20px;
    }

    .trek-navigators-none {
        padding: 15px 10px;
    }
}

/* ----------------------------------------
   6. SINGLE POST SPECIFIC RESPONSIVE STYLES
   ---------------------------------------- */
@media (max-width: 992px) {
    /* Video container */
    .trek-navigators-video-wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media (max-width: 576px) {
    .trek-navigators-article {
        margin-bottom: 20px;
    }

    /* Image adjustments */
    .trek-navigators-header-image-wrapper {
        margin-bottom: 15px;
    }
}

/* ----------------------------------------
   7. PRINT STYLES
   ---------------------------------------- */
@media print {
    .trek-navigators-single {
        font-size: 12pt;
    }

    .trek-navigators-navigator-header,
    .trek-navigators-digital-badges-wrapper,
    .trek-navigators-learn-more-trek-wrapper,
    .trek-navigators-video-wrapper {
        display: none !important;
    }

    .trek-navigators-two-column-layout {
        display: block;
    }

    .trek-navigators-column-left,
    .trek-navigators-column-right {
        width: 100%;
        max-width: 100%;
    }

    .trek-navigators-header-image {
        max-width: 300px;
    }
}