/**
 * Card Magnification Styles
 * 
 * This stylesheet provides styles for the card magnification feature
 * allowing users to tap/click cards to view them in detail.
 */

/* Overlay for magnification effect */
.magnification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1049; /* Just below the magnified card */
    cursor: pointer;
}

/* Styles for the magnified card */
.card-magnified {
    cursor: zoom-out;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    border-radius: 16px;
}

/* Pulsing effect for cards that can be magnified */
.card-image:not(.card-magnified),
.reading-card:not(.card-magnified) {
    transition: transform 0.2s ease;
    cursor: zoom-in;
}

.card-image:not(.card-magnified):hover,
.reading-card:not(.card-magnified):hover {
    transform: scale(1.03);
}

/* Close button hover effect */
.magnification-close-btn:hover {
    background-color: rgba(255, 0, 0, 0.5) !important;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .card-magnified {
        max-width: 90vw !important;
        max-height: 90vh !important;
    }
    
    .magnification-close-btn {
        font-size: 1.5rem !important;
        width: 36px !important;
        height: 36px !important;
    }
}

/* Smooth transitions */
.card-image, .reading-card {
    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}

/* Improve handling for touch events */
.card-image, .reading-card {
    touch-action: manipulation;
}

/* Making sure the close button is accessible */
.magnification-close-btn {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Visual indicator that a card is tappable */
.reading-card::after,
.card-image::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M13.28 11.47l-1.29 1.29c-.3.3-.77.3-1.06 0L8.75 10.3a.75.75 0 010-1.06l1.29-1.29a.75.75 0 011.06 0l2.18 2.18c.3.3.3.77 0 1.06z'/%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

/* Hide the indicator when card is magnified */
.card-magnified::after {
    display: none;
}

/* Timed reading specific styles */
.timed-reading-container .card-image,
.timed-reading-container .reading-card {
    transition: all 0.5s ease;
}