/**
 * Creative Blocks System
 * Styles for creative content blocks in product grids
 */

/* ============================================================================
   CREATIVE BLOCK BASE
   ============================================================================ */

.tld-creative-block {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f0e8;
    transition: transform 300ms ease, box-shadow 300ms ease;
}

.tld-creative-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   CREATIVE LINK WRAPPER
   ============================================================================ */

.tld-creative-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.tld-creative-link:hover {
    text-decoration: none;
}

/* ============================================================================
   IMAGE TYPE
   ============================================================================ */

.tld-creative-block[data-type="image"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tld-creative-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms ease;
}

.tld-creative-block:hover .tld-creative-image {
    transform: scale(1.05);
}

/* ============================================================================
   VIDEO TYPE
   ============================================================================ */

.tld-creative-block[data-type="video"] {
    padding: 0;
}

.tld-creative-video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.tld-creative-video iframe,
.tld-creative-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================================
   GRID INTEGRATION
   ============================================================================ */

/* WooCommerce Products Grid Integration */
.products .tld-creative-block,
.woocommerce .products .tld-creative-block {
    /* Inherit grid item sizing from product cards */
    aspect-ratio: 1;
}

/* Ensure creative blocks fit in grid */
.products.columns-3 .tld-creative-block,
.products.columns-4 .tld-creative-block {
    margin-bottom: 30px;
}

/* Match product card heights */
@media (min-width: 768px) {
    .tld-creative-block {
        min-height: 400px;
    }

    .tld-creative-video {
        min-height: 400px;
    }
}

@media (min-width: 1024px) {
    .tld-creative-block {
        min-height: 450px;
    }

    .tld-creative-video {
        min-height: 450px;
    }
}

/* ============================================================================
   GREENSHIFT QUERY LOOP INTEGRATION
   ============================================================================ */

/* Greenshift Loop Builder styles */
.greenshift-query-loop .tld-creative-block {
    border-radius: var(--gs-border-radius, 8px);
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.tld-creative-block.is-loading {
    background: linear-gradient(
        90deg,
        #f5f0e8 0%,
        #e8e0d4 50%,
        #f5f0e8 100%
    );
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    .tld-creative-block {
        min-height: 280px;
        border-radius: 6px;
    }

    .tld-creative-video {
        min-height: 280px;
    }

    .tld-creative-block:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .tld-creative-block {
        min-height: 250px;
    }

    .tld-creative-video {
        min-height: 250px;
    }

    .products .tld-creative-block,
    .woocommerce .products .tld-creative-block {
        margin-bottom: 20px;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

.tld-creative-block:focus-within {
    outline: 2px solid #1a4a5e;
    outline-offset: 2px;
}

.tld-creative-link:focus {
    outline: none;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .tld-creative-block {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .tld-creative-video {
        display: none;
    }
}