/**
 * iPad Card Position Fixes
 * 
 * This CSS file addresses the issue with cards appearing too low on iPad screens.
 * It adjusts the card positioning to appear higher on the screen, especially
 * important for iPad Pro and iPad Air devices.
 *
 * Version 2.0 - Enhanced for better iPad/tablet experience with improved layout
 * for both portrait and landscape orientations.
 */

/* iPad-specific card positioning fixes */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px),
only screen 
and (min-width: 768px) 
and (max-width: 1024px) {
    /* Adjust main card container positioning */
    .card-container {
        margin-top: -20px !important;
        padding-bottom: 120px !important;
    }
    
    /* Move reading cards higher on iPad */
    .reading-cards {
        margin-top: -15px !important;
        padding-top: 15px !important;
    }
    
    /* Adjust individual card positioning */
    .card {
        margin-bottom: 30px !important;
    }
    
    /* Fix for 3-card reading row */
    .reading-row {
        margin-top: -10px !important;
        padding-bottom: 100px !important;
    }
    
    /* Ensure guided practice cards are positioned correctly */
    .practice-card {
        margin-top: -15px !important;
    }
    
    /* Adjust celestial background position to accommodate cards */
    .celestial-background {
        /* Move celestial elements up slightly */
        transform: translateY(-30px);
    }
    
    /* Create more space for content layout */
    .reading-content,
    .practice-content,
    .card-detail-content {
        padding-bottom: 150px !important;
        margin-bottom: 30px !important;
    }
    
    /* Move the card detail view higher */
    .card-detail-container {
        margin-top: -30px !important;
    }
    
    /* Adjust card animations to start higher */
    .card-animate-in {
        transform: translateY(-30px) scale(0.85) !important;
    }
    
    /* Fix for header/content spacing */
    .content-container {
        padding-top: 50px !important;
    }
    
    /* ENHANCED IPAD SPECIFIC IMPROVEMENTS */
    
    /* Make main container wider to use space better */
    .container {
        max-width: 95% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Improve layout for two-column content */
    .row:not(.reading-row) {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
    }
    
    /* Make card images more visible */
    .card-image {
        max-height: 360px !important;
        object-fit: cover !important;
    }
    
    /* Improve text spacing and readability */
    p, .card-text {
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Make buttons and interactive elements more finger-friendly */
    .btn {
        padding: 0.5rem 1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Adjust column layout specifically for the homepage */
    body:not(.reading-page):not(.card-detail-page) .col-lg-6 {
        padding: 0 10px !important;
    }
    
    /* Create proper card separation in grid layouts */
    .card-grid {
        gap: 15px !important;
    }
    
    /* Make headers more visually appealing */
    h1, h2, h3 {
        margin-bottom: 0.75rem !important;
    }
    
    /* Improve spacing in card footers */
    .card-footer {
        padding: 1rem !important;
    }
    
    /* Improve layout for iPad in portrait orientation */
    @media (orientation: portrait) {
        .homepage-card {
            max-width: 280px !important;
            margin: 0 auto !important;
        }
        
        .col-lg-6 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }
    }
    
    /* Improve layout for iPad in landscape orientation */
    @media (orientation: landscape) {
        .homepage-card {
            max-width: 240px !important;
            margin: 0 auto !important;
        }
        
        .col-lg-6 {
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }
}

/* iPad Pro (12.9") specific adjustments */
@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (-webkit-min-device-pixel-ratio: 2) {
    .card-container {
        margin-top: -60px !important;
    }
    
    .reading-cards {
        margin-top: -40px !important;
    }
    
    /* Move celestial background up more for larger iPad Pro */
    .celestial-background {
        transform: translateY(-60px);
    }
    
    /* Add even more bottom space for larger screen */
    .reading-content,
    .practice-content {
        padding-bottom: 240px !important;
    }
    
    /* ENHANCED IPAD PRO IMPROVEMENTS */
    
    /* Optimize container width */
    .container {
        max-width: 90% !important;
    }
    
    /* Make card images larger */
    .card-image {
        max-height: 420px !important;
    }
    
    /* Better column layout for iPad Pro */
    .col-lg-6 {
        padding: 0 15px !important;
    }
    
    /* Increase card size */
    .homepage-card {
        max-width: 340px !important;
    }
    
    /* Increase heading sizes */
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    /* Larger buttons for larger screen */
    .btn {
        padding: 0.6rem 1.2rem !important;
    }
}