/**
 * Axis Two Column Content Component Styles
 * 
 * Flexible two-column layout with text + media/component
 * Responsive with mobile stacking
 */

/* Component Container */
.axis-two-col {
    width: 100%;
}

/* Text Content Column */
.axis-two-col__text-content {
    display: flex;
    flex-direction: column;
    gap: var(--axis-space-6);
    justify-content: center;
}

.axis-two-col__text-content .section-heading {
    margin-bottom: var(--axis-space-4);
}

.axis-two-col__text-content p {
    line-height: 1.7;
    color: var(--axis-text-body);
}

.axis-two-col__text-content ul,
.axis-two-col__text-content ol {
    padding-left: var(--axis-space-6);
    margin: var(--axis-space-4) 0;
}

.axis-two-col__text-content li {
    margin-bottom: var(--axis-space-3);
    line-height: 1.6;
}

/* Media Column */
.axis-two-col__media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.axis-two-col__image {
    width: 100%;
    height: auto;
    border-radius: var(--axis-radius-lg);
    box-shadow: var(--axis-shadow-md);
}

/* Reverse Column Order Variant */
.axis-grid-2-auto--reverse {
    direction: rtl;
}

.axis-grid-2-auto--reverse > * {
    direction: ltr;
}

/* Responsive Behavior */
@media (max-width: 991px) {
    .axis-two-col__text-content {
        gap: var(--axis-space-5);
    }
    
    .axis-two-col__image {
        margin-top: var(--axis-space-6);
    }
    
    /* Reset reverse on mobile */
    .axis-grid-2-auto--reverse {
        direction: ltr;
    }
}

@media (max-width: 767px) {
    .axis-two-col__text-content {
        gap: var(--axis-space-4);
    }
    
    .axis-two-col__text-content .section-heading {
        font-size: var(--axis-text-xl);
    }
}