/* ===================================================================
   LAYOUT/POSITIONING.CSS
   Column Positioning, Transforms, and Position Utilities
   =================================================================== */
/* ===== 15. COLUMN POSITIONING ===== */

/* ----- 15.1 Column Pull (Move Left) ----- */
.col-pull-0 { margin-left: 0; }
.col-pull-6 { margin-left: -50%; }
.col-pull-12 { margin-left: -100%; }

/* ----- 15.2 Column Push (Move Right) ----- */
.col-push-0 { margin-left: 0; }
.col-push-6 { margin-left: 50%; }
.col-push-12 { margin-left: 100%; }


/* ===== 16. TRANSFORM UTILITIES ===== */

/* ----- 16.1 Left Rotation ----- */
.rotate-l-45 { transform: rotate(-45deg); }
.rotate-l-90 { transform: rotate(-90deg); }
.rotate-l-180 { transform: rotate(-180deg); }

/* ----- 16.2 Right Rotation ----- */
.rotate-r-45 { transform: rotate(45deg); }
.rotate-r-90 { transform: rotate(90deg); }
.rotate-r-180 { transform: rotate(180deg); }


/* ===== 17. RESPONSIVE COLUMN POSITIONING ===== */

/* ----- 17.1 Small Devices (≥576px) ----- */
@media (min-width: 576px) {
    /* Pull */
    .col-sm-pull-0 { margin-left: 0; }
    .col-sm-pull-6 { margin-left: -50%; }
    .col-sm-pull-12 { margin-left: -100%; }
    
    /* Push */
    .col-sm-push-0 { margin-left: 0; }
    .col-sm-push-6 { margin-left: 50%; }
    .col-sm-push-12 { margin-left: 100%; }
}

/* ----- 17.2 Medium Devices (≥768px) ----- */
@media (min-width: 768px) {
    /* Pull */
    .col-md-pull-0 { margin-left: 0; }
    .col-md-pull-6 { margin-left: -50%; }
    .col-md-pull-12 { margin-left: -100%; }
    
    /* Push */
    .col-md-push-6 { margin-left: 50%; }
    .col-md-push-12 { margin-left: 100%; }
}

@media (min-width: 768px) {
    /* ----- 17.3 Medium Device Rotations ----- */
    .rotate-md-r-45 { transform: rotate(45deg); }
    .rotate-md-r-90 { transform: rotate(90deg); }
}

/* ----- 17.4 Large Devices (≥992px) ----- */
@media (min-width: 992px) {
    /* Pull */
    .col-lg-pull-0 { margin-left: 0; }
    .col-lg-pull-6 { margin-left: -50%; }
    .col-lg-pull-12 { margin-left: -100%; }
    
    /* Push */
    .col-lg-push-0 { margin-left: 0; }
    .col-lg-push-6 { margin-left: 50%; }
    .col-lg-push-12 { margin-left: 100%; }
    
    /* Rotations */
    .rotate-lg-r-45 { transform: rotate(45deg); }
    .rotate-lg-r-90 { transform: rotate(90deg); }
}

/* ----- 17.5 Extra Large Devices (≥1200px) ----- */
@media (min-width: 1200px) {
    /* Pull */
    .col-xl-pull-0 { margin-left: 0; }
    .col-xl-pull-6 { margin-left: -50%; }
    .col-xl-pull-12 { margin-left: -100%; }
    
    /* Push */
    .col-xl-push-0 { margin-left: 0; }
    .col-xl-push-6 { margin-left: 50%; }
    .col-xl-push-12 { margin-left: 100%; }
    
    /* Rotations */
    .rotate-xl-r-45 { transform: rotate(45deg); }
    .rotate-xl-r-90 { transform: rotate(90deg); }
}

/* ----- 17.6 Extra Extra Large Devices (≥1400px) ----- */
@media (min-width: 1400px) {
    /* Pull */
    .col-xxl-pull-0 { margin-left: 0; }
    .col-xxl-pull-6 { margin-left: -50%; }
    .col-xxl-pull-12 { margin-left: -100%; }
    
    /* Push */
    .col-xxl-push-6 { margin-left: 50%; }

    .col-xxl-push-12 {
        margin-left: 100%;
    }

    .col-xxl-push-0 {
        margin-left: 0;
    }
}

@media (min-width: 1400px) {
    /* Rotation utilities for xxl breakpoint - simplified */
    .rotate-xxl-r-45 {
        transform: rotate(45deg);
    }

    .rotate-xxl-r-90 {
        transform: rotate(90deg);
    }
}


/* ===== POSITIONING UTILITIES ===== */

/* Position Types */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}