/**
 * Experiture Help System - Utility Classes
 * Utility classes for common inline style patterns
 * Use these classes instead of inline styles for better maintainability
 */

/* ===== IMAGE POSITIONING ===== */
/* Left-floated images with standard styling */
.img-float-left {
    float: left;
    margin: 20px 40px 10px 15px;
    width: 600px;
    border: none;
    box-shadow: 0 6px 20px rgba(18, 170, 226, 0.4), 0 2px 8px rgba(18, 170, 226, 0.2);
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

.img-float-left-tight {
    float: left;
    margin: 20px 40px 15px 15px;
    width: 600px;
    border: none;
    box-shadow: 0 6px 20px rgba(18, 170, 226, 0.4), 0 2px 8px rgba(18, 170, 226, 0.2);
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

/* Right-floated images with standard styling */
.img-float-right {
    float: right;
    margin: 20px 15px 15px 40px;
    width: 600px;
    border: none;
    box-shadow: 0 6px 20px rgba(18, 170, 226, 0.4), 0 2px 8px rgba(18, 170, 226, 0.2);
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

/* Smaller images */
.img-float-left-small {
    float: left;
    margin: 10px 40px 10px 15px;
    width: 600px;
    border: none;
    box-shadow: 0 6px 20px rgba(18, 170, 226, 0.4), 0 2px 8px rgba(18, 170, 226, 0.2);
    cursor: pointer;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== IMAGE CAPTIONS ===== */
/* Left-aligned captions */
.caption-left {
    text-align: center;
    font-style: italic;
    color: #666;
    font-size: 12px;
    float: left;
    clear: left;
    width: 600px;
    margin: 0 40px 5px 15px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Right-aligned captions */
.caption-right {
    text-align: center;
    font-style: italic;
    color: #666;
    font-size: 12px;
    float: right;
    clear: right;
    width: 600px;
    margin: 0 15px 5px 40px;
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== TEXT INDENTATION ===== */
/* Step indentation (margin-left: 20px) */
.step-indent {
    margin-left: 20px;
}

/* List indentation (margin-left: 60px) */
.list-indent {
    margin-left: 60px;
}

/* Custom numbered list style with negative indent */
.list-custom-bullet {
    list-style: none;
    padding-left: 0;
}

.list-custom-bullet li {
    text-indent: -18px;
    padding-left: 18px;
    margin-bottom: 15px;
}

/* ===== CLEARING DIVS ===== */
.clear-float {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

/* ===== SPACING UTILITIES ===== */
.margin-top-lg {
    margin-top: 30px;
}

/* ===== TEXT STYLING UTILITIES ===== */
.text-italic {
    font-style: italic;
}

/* ===== TEXT STYLING ===== */
.text-bold-color {
    font-weight: bold;
    color: #0C3D62;
}

/* ===== HERO TITLE/SUBTITLE VARIATIONS ===== */
/* Remove redundant inline styles - these are already in common-styles.css */
.hero-title {
    /* font-weight: 200 is already set in common-styles.css - no need for inline override */
}

.hero-subtitle {
    /* font-weight: bold is already set in common-styles.css - no need for inline override */
}

/* Bold text within hero titles */
.hero-title-bold {
    font-weight: bold;
}

/* ===== SCREENSHOT PLACEHOLDER VARIATIONS ===== */
/* Standard screenshot placeholder with float left */
.screenshot-placeholder.float-left {
    float: left;
    margin: 20px 40px 15px 15px;
    width: 600px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
}

/* Standard screenshot placeholder with float right */
.screenshot-placeholder.float-right {
    float: right;
    margin: 20px 15px 15px 40px;
    width: 600px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
}

/* Medium height (350px) - for smaller screenshots */
.screenshot-placeholder.float-left.medium,
.screenshot-placeholder.float-right.medium {
    height: 350px;
}

/* Small height (300px) - for compact screenshots */
.screenshot-placeholder.float-left.small,
.screenshot-placeholder.float-right.small {
    height: 300px;
}

/* Extra small height (280px) - for very compact screenshots */
.screenshot-placeholder.float-left.xsmall,
.screenshot-placeholder.float-right.xsmall {
    height: 280px;
}

/* Large height (450px) - default, already set above */
.screenshot-placeholder.float-left.large,
.screenshot-placeholder.float-right.large {
    height: 450px;
}

/* ===== STANDARDIZED WIDTHS ===== */
/* Standard width (600px) - default */
.screenshot-placeholder.float-left,
.screenshot-placeholder.float-right {
    width: 600px;
}

/* Medium width (500px) - standardized from various non-standard widths */
.screenshot-placeholder.float-left.medium-width,
.screenshot-placeholder.float-right.medium-width {
    width: 500px;
}

/* Small width (480px) - standardized from various non-standard widths */
.screenshot-placeholder.float-left.small-width,
.screenshot-placeholder.float-right.small-width {
    width: 480px;
}

/* Extra small width (400px) - for very compact layouts */
.screenshot-placeholder.float-left.xsmall-width,
.screenshot-placeholder.float-right.xsmall-width {
    width: 400px;
}

/* Full width screenshot placeholder (no float) */
.screenshot-placeholder.full-width {
    width: 100%;
    height: 300px;
    margin: 20px 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* No top margin variant */
.screenshot-placeholder.float-left.no-top-margin,
.screenshot-placeholder.float-right.no-top-margin {
    margin-top: 0;
}

/* ===== BRANDED COLORED DIVS (Screenshot Placeholders with Brand Colors) ===== */
/* Primary brand color (#12AAE2) - used for screenshot placeholders */
.brand-placeholder {
    background-color: #12AAE2;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Combine with screenshot-placeholder classes */
.screenshot-placeholder.brand-placeholder {
    background-color: #12AAE2;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* Dark brand color (#0C3D62) - for alternative branded elements */
.brand-placeholder-dark {
    background-color: #0C3D62;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screenshot-placeholder.brand-placeholder-dark {
    background-color: #0C3D62;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

/* ===== RESPONSIVE IMAGES ===== */
@media (max-width: 768px) {
    .img-float-left,
    .img-float-left-tight,
    .img-float-left-small,
    .img-float-right {
        float: none;
        margin: 20px 0 15px 0;
        width: 100%;
        max-width: 100%;
    }
    
    .caption-left,
    .caption-right {
        float: none;
        width: 100%;
        margin: 0 0 5px 0;
    }
    
    .screenshot-placeholder.float-left,
    .screenshot-placeholder.float-right {
        float: none;
        margin: 20px 0 15px 0;
        width: 100%;
        max-width: 100%;
    }
}

/* ===== LAYOUT UTILITIES ===== */
/* Two-column layout with image on the left */
.layout-container-left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
}

.layout-container-left .layout-image {
    flex: 0 1 600px;
    max-width: 600px;
    min-width: 0;
    box-sizing: border-box;
}

.layout-container-left .layout-text {
    flex: 1 1 300px;
    min-width: 0;
    box-sizing: border-box;
}

/* Two-column layout with image on the right */
.layout-container-right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
}

.layout-container-right .layout-image {
    order: 2;
    flex: 0 1 600px;
    max-width: 600px;
    min-width: 0;
    box-sizing: border-box;
}

.layout-container-right .layout-text {
    order: 1;
    flex: 1 1 300px;
    min-width: 0;
    box-sizing: border-box;
}

.layout-image {
    box-sizing: border-box;
}

.layout-image .caption {
    text-align: center;
    font-style: italic;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}

.card-image {
    width: 100%;
    height: auto;
    border: none;
    box-shadow: 0 6px 20px rgba(18, 170, 226, 0.4), 0 2px 8px rgba(18, 170, 226, 0.2);
    cursor: pointer;
    border-radius: 8px;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
}

/* Centered image container */
.image-center-container {
    text-align: center;
    margin: 30px 0;
}

/* Centered image with border */
.image-center {
    max-width: 100%;
    height: auto;
    border: 2px solid #12AAE2;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(18, 170, 226, 0.15);
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Image placeholder fallback */
.image-placeholder {
    display: none;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #12AAE2;
    border-radius: 8px;
    color: #0C3D62;
}

.image-placeholder h3 {
    margin-bottom: 10px;
}

.image-placeholder p {
    font-size: 12px;
    color: #666;
    margin-top: 20px;
}

.image-placeholder.image-placeholder-visible {
    display: block;
}

/* ===== RESPONSIVE LAYOUT ===== */
@media (max-width: 768px) {
    .layout-container-left,
    .layout-container-right {
        flex-direction: column;
        gap: 20px;
    }

    .layout-container-left .layout-image,
    .layout-container-right .layout-image {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0;
        order: 1;
    }

    .layout-container-left .layout-text,
    .layout-container-right .layout-text {
        flex: 1 1 100%;
        width: 100%;
        margin: 0;
        order: 2;
    }
    
    .card-image {
        width: 100%;
        max-width: 100%;
    }
}