/* Pros and Cons Component - Mobile-First Responsive Design */
/* Design tokens loaded globally via functions.php */

/* ========================================
   BASE STYLES (Mobile-First, NO Media Query)
   Mobile: 375px - 767px
   ======================================== */

/* Container - Mobile First */
.pros-cons-container {
    background-color: var(--color-base-ghost-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    max-width: 100%;
    margin: var(--spacing-5);
    font-family: var(--font-family-paragraph);
}

/* Hide title section - not part of Figma design */
.pros-cons-title {
    display: none;
}

.pros-cons-title h3 {
    display: none;
}

/* Mobile: Stack pros and cons vertically */
.pros-cons-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    position: relative;
    min-height: auto;
}

/* Divider - Mobile: Horizontal line */
.pros-cons-divider {
    width: 100%;
    height: var(--border-width-thin);
    background-color: var(--color-base-mid-gray);
    order: 2; /* Positioned between pros and cons */
}

/* Section styling - Mobile */
.pros-section,
.cons-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: 0;
    background: transparent;
}

.pros-section {
    order: 1;
}

.cons-section {
    order: 3;
}

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

/* Section title - Mobile */
.section-title {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h6);
    line-height: 1.3;
    color: var(--color-primary-dark);
    margin: 0;
}

/* Lists styling */
.pros-list,
.cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* List items - Mobile */
.pros-item,
.cons-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-p2-base);
    line-height: 1.5;
    color: var(--color-base-dark);
    min-height: var(--spacing-6);
}

/* Icons using pseudo-elements with SVG masks */
.pros-item::before,
.cons-item::before {
    content: '';
    flex-shrink: 0;
    width: 16px;  /* Mobile icon size - component-specific */
    height: 16px; /* Mobile icon size - component-specific */
    margin-top: 2px; /* Fine-tuning for visual alignment */
}

.pros-item::before {
    background-color: var(--color-semantic-success);
    mask: url('../svg/pros-icon.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../svg/pros-icon.svg') no-repeat center;
    -webkit-mask-size: contain;
}

.cons-item::before {
    background-color: var(--color-semantic-error);
    mask: url('../svg/cons-icon.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../svg/cons-icon.svg') no-repeat center;
    -webkit-mask-size: contain;
}

/* Item text */
.item-text {
    flex: 1;
    min-width: 0; /* Allow text to shrink and wrap */
}

/* Hide legacy icon elements */
.item-icon {
    display: none;
}

/* ========================================
   TABLET STYLES
   768px - 1279px
   ======================================== */

@media (min-width: 768px) {
    /* Container - Tablet */
    .pros-cons-container {
        padding: var(--spacing-5);
        gap: var(--spacing-2);
        margin: var(--spacing-7) 0 0 0;
    }

    /* Tablet: Side-by-side layout with divider */
    .pros-cons-content {
        display: grid;
        grid-template-columns: 1fr var(--border-width-thin) 1fr;
        gap: 0;
        min-height: 182px; /* Component-specific for tablet layout */
    }

    /* Divider - Tablet: Vertical line */
    .pros-cons-divider {
        width: var(--border-width-thin);
        height: auto;
        grid-column: 2;
        grid-row: 1;
    }

    /* Section positioning - Tablet */
    .pros-section {
        grid-column: 1;
        grid-row: 1;
        padding: 0 var(--spacing-6) 0 0;
    }

    .cons-section {
        grid-column: 3;
        grid-row: 1;
        padding: 0 0 0 var(--spacing-6);
    }

    /* Section header - Tablet */
    .section-header {
        margin-bottom: var(--spacing-4);
    }

    /* Section title - Tablet */
    .section-title {
        font-size: var(--font-size-h5);
    }

    /* Lists - Tablet */
    .pros-list,
    .cons-list {
        gap: var(--spacing-4);
    }

    /* List items - Tablet */
    .pros-item,
    .cons-item {
        gap: var(--spacing-3);
    }

    /* Icons - Tablet */
    .pros-item::before,
    .cons-item::before {
        width: 18px;  /* Tablet icon size - component-specific */
        height: 18px; /* Tablet icon size - component-specific */
        margin-top: 1.5px;
    }
}

/* ========================================
   DESKTOP STYLES
   1280px+
   ======================================== */

@media (min-width: 1280px) {
    /* Container - Desktop */
    .pros-cons-container {
        padding: var(--spacing-6) var(--spacing-12);
        max-width: 1018px; /* Desktop container max-width */
    }

    /* Section positioning - Desktop */
    .pros-section {
        padding: 0 var(--spacing-8) 0 0;
    }

    .cons-section {
        padding: 0 0 0 var(--spacing-16);
    }

    /* Icons - Desktop */
    .pros-item::before,
    .cons-item::before {
        width: 21px;  /* Desktop icon size - component-specific */
        height: 21px; /* Desktop icon size - component-specific */
    }

    /* List items - Desktop */
    .pros-item,
    .cons-item {
        gap: var(--spacing-4);
    }
}

/* ========================================
   SEMANTIC HTML EXAMPLE
   ======================================== */

/*
Example HTML Structure:

<div class="pros-cons-container">
    <div class="pros-cons-title">
        <h3>Pros and Cons</h3>
    </div>
    <div class="pros-cons-content">
        <section class="pros-section" aria-label="Pros">
            <header class="section-header">
                <h4 class="section-title">PROS</h4>
            </header>
            <ul class="pros-list" role="list">
                <li class="pros-item" role="listitem">
                    <span class="item-text">Great welcome bonus offer</span>
                </li>
                <li class="pros-item" role="listitem">
                    <span class="item-text">Wide variety of games</span>
                </li>
                <li class="pros-item" role="listitem">
                    <span class="item-text">24/7 customer support</span>
                </li>
            </ul>
        </section>
        <div class="pros-cons-divider" role="separator" aria-hidden="true"></div>
        <section class="cons-section" aria-label="Cons">
            <header class="section-header">
                <h4 class="section-title">CONS</h4>
            </header>
            <ul class="cons-list" role="list">
                <li class="cons-item" role="listitem">
                    <span class="item-text">Limited payment methods</span>
                </li>
                <li class="cons-item" role="listitem">
                    <span class="item-text">Slow withdrawal process</span>
                </li>
            </ul>
        </section>
    </div>
</div>
*/

/* ========================================
   ACCESSIBILITY & BROWSER SUPPORT
   ======================================== */

/* Focus states for keyboard navigation */
.pros-cons-container:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .pros-cons-container {
        background-color: white;
        border: 1px solid var(--color-base-mid-gray);
    }

    .pros-cons-divider {
        background-color: var(--color-base-dark);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .pros-cons-container {
        border: 2px solid var(--color-base-dark);
    }

    .pros-cons-divider {
        background-color: var(--color-base-dark);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide elements visually but keep accessible */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}