/* 
* Card Image Quality Fix
* Improves display of card images to prevent blurry rendering
*/

/* Fix card image containers to maintain proper aspect ratio */
.card-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* For card detail page */
.card-detail .card-image-container {
    padding-bottom: 140%; /* Fixed aspect ratio for cards (10:14) */
    height: 0;
}

/* Ensure images maintain proper aspect ratio and don't get stretched */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover ensures the image fills the container without stretching */
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

/* Specific fix for the cards in the side menu and daily card view */
.daily-card-container .card-image,
.side-menu-card .card-image {
    object-fit: contain;
    background-color: rgba(0, 0, 0, 0.2);
}

/* High quality rendering for card images */
.card-image, 
.card-image-container img {
    image-rendering: -webkit-optimize-contrast; /* For Webkit browsers */
    image-rendering: crisp-edges; /* For Firefox */
    -ms-interpolation-mode: nearest-neighbor; /* For IE */
    will-change: transform; /* Improve performance on animations */
    backface-visibility: hidden; /* Prevent blurry text during animations */
    transform: translateZ(0); /* Force GPU acceleration */
    -webkit-font-smoothing: subpixel-antialiased; /* Better text rendering */
}

/* Ensure card background color provides contrast for light colored cards */
.card-container {
    background-color: rgba(20, 20, 30, 0.4);
}

/* For gallery cards */
.cards-grid .card-image-container {
    padding-top: 140%; /* 10:14 aspect ratio */
}

/* Fix for card flips to maintain aspect ratio */
.card-flip-front, 
.card-flip-back {
    width: 100%;
    height: 0;
    padding-bottom: 140%; /* Maintain card aspect ratio */
    position: absolute;
}

/* Specific fix for Body-Mind-Spirit reading cards */
.reading-container .card-wrapper .card-image {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    position: relative;
}

/* Prevent overflow in card descriptions */
.card-description {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure high-quality display for NFT cards */
.nft-card .card-image {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Card image wrapper to handle clean separation between image and title */
.card-image-wrapper {
    position: relative;
    margin-bottom: 2rem; /* Space between card and title */
    border-radius: 12px;
    overflow: hidden; /* Prevent blurry overflow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Clean separation for card titles */
.card-title-container {
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* High DPI screen optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    .card-image {
        transform: translateZ(0) scale(1.0);
    }
    
    /* Force sharper edges on high DPI displays */
    .card-image-container {
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
}