/**
 * Steps Item Element Styles
 * 
 * CSS Grid layout with same-height items
 * Two columns on desktop (column-first), one column on mobile
 * Accessible: semantic list with visual enhancements
 *
 * @package CustomVCElements
 * @since 1.0.0
 */

/* 
   Base Steps Item Container - CSS Grid Layout (Semantic <ol>)
   Column-first ordering: 1,2,3,4 left / 5,6,7,8 right
   */

.cvc-steps-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column; /* Fill columns first, then rows */
    width: 100%;
    list-style: none; /* Hide default list numbers */
    margin: 0;
    padding: 0;
}

/* 
   Individual Step - Same Height via Grid (Semantic <li>)
   */

.cvc-steps-item__step {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--oku-spacing-xs);
}

/* 
   Number - Outline Text Style
   */

.cvc-steps-item__number {
    flex-shrink: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--oku-color-white);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--oku-color-orange);
    line-height: 1;
}

/* 
   Label
   */

.cvc-steps-item__label {
    flex: 1;
    min-width: 0; /* Prevent flex item from overflowing */
    margin-left: var(--oku-spacing-md);
    font-weight: 700;
}

/* 
   Screen Reader Only (Accessibility)
   */

.cvc-steps-item .cvc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 
   Responsive - Mobile: Single Column
   */

@media (max-width: 959px) {
    .cvc-steps-item {
        grid-template-columns: 1fr;
        grid-auto-flow: row; /* Back to row flow for single column */
    }
}

/* 
   Accessibility - High Contrast Mode
   */

@media (prefers-contrast: high) {
    .cvc-steps-item__number {
        color: CanvasText;
        -webkit-text-stroke-width: 3px;
        -webkit-text-stroke-color: CanvasText;
    }
    
    .cvc-steps-item__step {
        border: 2px solid CanvasText;
    }
}

/* Windows High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
    .cvc-steps-item__number {
        color: windowText;
        -webkit-text-stroke-color: windowText;
    }
    
    .cvc-steps-item__step {
        border: 2px solid windowText;
    }
}

/* 
   Accessibility - Reduced Motion
   */

@media (prefers-reduced-motion: reduce) {
    .cvc-steps-item,
    .cvc-steps-item__step,
    .cvc-steps-item__number,
    .cvc-steps-item__label {
        transition: none;
    }
}