/* Get Started Section Fixes 
 * This file fixes the layout issues with the Get Started section
 * particularly on tablets like iPad where the text appears squished
 */

/* Default styles to ensure proper layout */
.get-started-section {
    margin: 20px 0;
    width: 100%;
}

.get-started-section .card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.get-started-section .card-body {
    padding: 25px;
}

.get-started-section .card-text {
    max-width: 100%;
    margin-bottom: 20px;
}

/* iPad and tablet-specific fixes */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px),
only screen 
and (min-width: 768px) 
and (max-width: 1024px) {
    /* Make sure the row takes up proper space */
    .row {
        display: flex;
        flex-direction: column;
    }
    
    /* Make each column take up full width */
    .col-lg-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0 15px;
        margin-bottom: 30px;
    }
    
    /* Force the Get Started section to take up full width */
    .col-lg-6 .page-section {
        width: 100%;
        max-width: 100%;
    }
    
    /* Adjust card layout */
    .col-lg-6 .page-section .card {
        width: 100%;
        min-height: unset;
    }
    
    /* Text should be wide, not squished */
    .col-lg-6 .page-section .card-text {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* Card bodies should have enough padding */
    .col-lg-6 .page-section .card-body {
        padding: 25px;
    }
    
    /* Card grid items should be properly sized */
    .col-md-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: 15px;
    }
}

/* Landscape orientation on iPad */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    /* Return to two-column layout in landscape */
    .row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .col-lg-6 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
    
    /* Card grid should be two columns */
    .col-md-6 {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
}

/* iPad Pro specific fixes */
@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (-webkit-min-device-pixel-ratio: 2) {
    .col-lg-6 {
        width: 50%;
        padding: 0 20px;
    }
    
    .col-lg-6 .page-section .card-text {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

/* Fix nested cards in the get started section */
.get-started-card .row .card {
    height: auto !important;
    min-height: auto !important;
}

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px),
only screen 
and (min-width: 768px) 
and (max-width: 1024px) {
    /* Fix card types layout */
    .get-started-card .row {
        display: flex;
        flex-direction: row;
    }
    
    .get-started-card .col-md-6 {
        width: 50%;
        padding: 0 10px;
    }
    
    .get-started-card .card-text {
        font-size: 0.9rem;
    }
}