/**
 * MTG Card Responsive Styles
 * 
 * Mobile-first approach for all card displays.
 * Uses relative units (%, em, rem) for scalable layouts.
 *
 * @package MTG_Engine
 * @version 6.1.0
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Card dimensions - based on standard MTG ratio 5:7 (63mm x 88mm) */
    --mtg-card-ratio: 5 / 7;

    /* Mobile-first sizing */
    --mtg-card-width-mobile: 100%;
    --mtg-card-max-width-mobile: 18rem;
    /* ~288px */
    --mtg-card-max-width-tablet: 15rem;
    /* ~240px in grid */
    --mtg-card-max-width-desktop: 17rem;
    /* ~272px */
    --mtg-card-max-width-single: 22rem;
    /* ~352px for single card view */

    /* Spacing */
    --mtg-gap-mobile: 0.75rem;
    --mtg-gap-tablet: 1rem;
    --mtg-gap-desktop: 1.25rem;

    /* Typography */
    --mtg-font-size-base: 1rem;
    --mtg-font-size-small: 0.875rem;
    --mtg-font-size-xs: 0.75rem;

    /* Border radius */
    --mtg-card-radius: 0.75rem;
    --mtg-card-radius-inner: 4.75% / 3.5%;
    /* Proportional to card size */
}

/* ==========================================================================
   Single Card Display (Mobile-First)
   ========================================================================== */

/* Base container for single cards */
.mtg-card-wrapper,
.mtg-dfc-wrapper,
.mtg-single-card {
    display: block;
    width: 100%;
    max-width: var(--mtg-card-max-width-mobile);
    margin: 0 auto 1.5rem auto;
}

/* Card image container */
.mtg-card-wrapper img,
.mtg-dfc-wrapper img,
.mtg-single-card img,
.mtg-card-flipper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--mtg-card-radius);
}

/* DFC (Double-Faced Cards) specific */
.mtg-card-flipper {
    width: 100%;
    max-width: var(--mtg-card-max-width-single);
    margin: 0 auto;
}

.mtg-card-flipper-inner {
    aspect-ratio: var(--mtg-card-ratio);
}

/* ==========================================================================
   Gallery Grid (Mobile-First)
   ========================================================================== */

/* Cards in gallery context */
.mtg-gallery .mtg-card-item,
.mtg-set-gallery .mtg-card,
.mtg-cards-gallery .mtg-card-item,
.cards-container .mtg-card-item {
    width: 100%;
    max-width: var(--mtg-card-max-width-mobile);
    margin: 0 auto;
}

/* Gallery grid */
.mtg-gallery,
.mtg-cards-gallery,
.mtg-set-gallery__grid,
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: var(--mtg-gap-mobile);
    padding: var(--mtg-gap-mobile);
    width: 100%;
}

/* ==========================================================================
   Price Display - Skeleton Loader for Lazy Loading
   ========================================================================== */

.mtg-prices {
    font-size: var(--mtg-font-size-small);
    line-height: 1.4;
    padding: 0.5em;
}

/* Price skeleton loader */
.mtg-price-skeleton {
    display: inline-block;
    min-width: 3rem;
    height: 1em;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.08) 25%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(0, 0, 0, 0.08) 75%);
    background-size: 200% 100%;
    animation: mtg-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 0.25em;
}

@keyframes mtg-skeleton-pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Price fade-in animation */
.mtg-price-loaded {
    animation: mtg-price-fade-in 0.3s ease-out forwards;
}

@keyframes mtg-price-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.25em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Tablet Breakpoint (min-width: 480px)
   ========================================================================== */

@media (min-width: 480px) {

    .mtg-gallery,
    .mtg-cards-gallery,
    .mtg-set-gallery__grid,
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: var(--mtg-gap-tablet);
        padding: var(--mtg-gap-tablet);
    }

    .mtg-gallery .mtg-card-item,
    .mtg-set-gallery .mtg-card,
    .mtg-cards-gallery .mtg-card-item,
    .cards-container .mtg-card-item {
        max-width: var(--mtg-card-max-width-tablet);
    }
}

/* ==========================================================================
   Desktop Breakpoint (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {

    .mtg-gallery,
    .mtg-cards-gallery,
    .mtg-set-gallery__grid,
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: var(--mtg-gap-desktop);
        padding: var(--mtg-gap-desktop);
    }

    .mtg-gallery .mtg-card-item,
    .mtg-set-gallery .mtg-card,
    .mtg-cards-gallery .mtg-card-item,
    .cards-container .mtg-card-item {
        max-width: var(--mtg-card-max-width-desktop);
    }

    /* Single card on desktop - side by side with info */
    .mtg-card-wrapper,
    .mtg-dfc-wrapper {
        max-width: var(--mtg-card-max-width-single);
    }
}

/* ==========================================================================
   Large Desktop Breakpoint (min-width: 1200px)
   ========================================================================== */

@media (min-width: 1200px) {

    .mtg-gallery,
    .mtg-cards-gallery,
    .mtg-set-gallery__grid,
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

/* ==========================================================================
   Card Info Text - Responsive Typography
   ========================================================================== */

.mtg-card-name,
.mtg-card-title {
    font-size: clamp(0.875rem, 2vw + 0.5rem, 1.125rem);
    font-weight: 600;
    line-height: 1.3;
    margin: 0.5em 0 0.25em;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.mtg-card-type {
    font-size: var(--mtg-font-size-small);
    color: #666;
    text-align: center;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

/* ==========================================================================
   Card Actions (Legality & Prints)
   ========================================================================== */

.mtg-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    justify-content: center;
}

.mtg-btn-legality,
.mtg-btn-prints {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    flex: 1;
    min-width: 120px;
    /* Ensure they don't get too small */
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mtg-btn-legality {
    background-color: #f5f5f5;
    color: #444;
    border: 1px solid #ddd;
}

.mtg-btn-legality:hover {
    background-color: #e9e9e9;
    border-color: #ccc;
    transform: translateY(-1px);
}

.mtg-btn-prints {
    background-color: #dfe6e9;
    color: #2d3436;
    border: 1px solid #b2bec3;
}

.mtg-btn-prints:hover {
    background-color: #b2bec3;
    color: #fff;
    border-color: #636e72;
    transform: translateY(-1px);
}

.mtg-token-link {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.8em;
    color: #0066cc;
    text-decoration: none;
    background: #f0f7ff;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #cce5ff;
}

.mtg-token-link:hover {
    background: #e6f2ff;
    text-decoration: none;
}

@media print {

    .mtg-flip-button,
    .mtg-price-skeleton {
        display: none !important;
    }

    .mtg-card-wrapper,
    .mtg-dfc-wrapper {
        max-width: 3in;
        page-break-inside: avoid;
    }
}