/* image-modules-styles.css */
/* Styles for image modules and social adverts */
/* Created by Grok (xAI) on May 24, 2025 */
/* Purpose: Ensure image modules (e.g., Buy Me a Coffee, Welcome) and social adverts (e.g., X advert) have correct border spacing, image ratios, alignment, and float stability on mobile (≤629px) and desktop; reduce extra space in Welcome module on mobile */
/* Compatibility: Works with styles.css, thesitewizard.com Layout Wizard */

/* Base styles for image modules and social adverts */
.image-module,
.social-advert {
    font-family: 'Atkinson Hyperlegible', Arial, Helvetica, sans-serif;
    padding: 10px 10px 20px; /* 10px sides/top, 20px bottom for green border */
    border: 2px solid lime;
    text-align: center !important; /* Reinforce centering */
    display: block; /* Stack vertically */
    width: 100%; /* Full width of parent */
    max-width: 200px; /* Fit sidebar */
    min-height: 300px; /* Align borders */
    box-sizing: border-box; /* Include padding/border in width */
    margin: 5px auto; /* Center with vertical spacing */
    clear: both; /* Clear floats */
    position: relative; /* Prevent absolute positioning issues */
}

/* Image container within modules */
.image-module .image-container {
    display: block; /* Remove flex to prevent compression */
    text-align: center;
}

/* Images in modules and adverts */
.image-module img,
.social-advert img {
    max-width: 200px; /* Larger images */
    width: 95%; /* Fill module */
    height: auto;
    border: 1px solid #e09248; /* Orange border */
    border-radius: 5px;
    padding: 6px; /* Even spacing for orange border */
    margin: 0 auto 5px; /* Reduced bottom margin */
    display: block; /* Ensure centering */
    box-sizing: border-box;
    object-fit: contain; /* Preserve ratio */
}

/* Specific ratios for coffee adverts */
.image-module img[src*="coffee"] {
    aspect-ratio: 180/400; /* 2.22:1 for Buy-Me-A-Coffee images */
}

/* X advert uses native ratio */
.social-advert img[src*="x-logo-white"] {
    aspect-ratio: auto; /* Preserve native ratio */
}

/* Non-coffee images in Welcome section and others */
.image-module img[src*="RQB"], .image-module img[src*="Clean-180"] {
    aspect-ratio: auto; /* Use native ratio for Horse, Mushroom, Clean logos */
}

/* Headings in modules */
.image-module h3,
.social-advert h3 {
    margin: 0 0 8px; /* Reduced bottom margin */
    font-size: 16px;
    color: lime;
}

/* Paragraphs in modules */
.image-module p {
    margin: 5px 0; /* Reduced vertical spacing */
    font-size: 14px;
    color: lime;
}

/* Container for multiple modules (if used) */
.image-module-container {
    display: block; /* Default for sidebars */
    width: 100%;
    box-sizing: border-box;
}

/* Reset structural elements to prevent layout issues */
.image-module + div,
.social-advert + div,
hr,
br {
    clear: both;
    margin: 5px 0;
}

/* Mobile-specific styles (≤629px, aligned with styles.css) */
@media screen and (max-width: 629px) {
    .image-module,
    .social-advert,
    .image-container {
        max-width: 95%; /* Match May the Quarks section */
        width: 100%;
        height: auto;
        padding: 10px 10px 15px; /* Reduced bottom padding */
        margin: 8px auto; /* Reduced vertical margin */
        float: none;
        position: static;
    }

    /* Welcome module with Grok credit */
    .image-module:has(img[src*="RQB"]) {
        min-height: auto; /* Remove fixed height to fit content */
        padding: 8px 8px 12px; /* Slightly less padding */
    }

    .image-module img,
    .social-advert img {
        max-width: 200px;
        width: 95%;
        height: auto;
        padding: 6px;
        margin: 0 auto 5px;
    }

    .image-module h3 {
        margin: 0 0 5px; /* Further reduced */
    }

    .image-module p {
        margin: 3px 0; /* Further reduced */
    }

    #tswsidecol,
    #tswothersidecol {
        width: 100%; /* Reinforce styles.css */
        float: none;
        clear: both;
        padding: 0 15px; /* Edge spacing */
        box-sizing: border-box;
        text-align: center !important; /* Reinforce centering */
    }
}

/* Desktop styles (≥630px) */
@media screen and (min-width: 630px) {
    .image-module,
    .social-advert {
        width: 100%;
        max-width: 200px;
        min-height: 300px; /* Keep for desktop */
        margin: 5px auto;
        padding: 10px 10px 20px;
    }

    .image-module img,
    .social-advert img {
        max-width: 200px;
        width: 95%;
    }

    #tswsidecol {
        width: 20%; /* Match styles.css */
        float: right !important; /* Reinforce float */
        box-sizing: border-box;
        overflow: hidden; /* Prevent overflow */
        padding: 0 5px;
        text-align: center !important; /* Center content */
    }

    #tswcontent {
        width: 75%; /* Match styles.css */
        float: left !important;
        box-sizing: border-box;
        padding: 0 5px;
    }

    #tswothersidecol {
        width: 25%; /* Match styles.css */
        float: left !important;
        box-sizing: border-box;
        padding: 0 5px;
        text-align: center !important; /* Center X advert */
    }
}

/* Override conflicting inline styles */
div[style*="text-align"] {
    text-align: center !important;
    width: 100%;
    box-sizing: border-box;
}