/**
 * Zero-Waste Interlinking Engine - Frontend Styles
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --zwie-front-primary: #2d5016;
    --zwie-front-secondary: #8bc34a;
    --zwie-front-accent: #4a7c2a;
    --zwie-front-bg: #f8faf6;
    --zwie-front-border: #c3d9b8;
    --zwie-front-text: #333;
    --zwie-front-text-light: #666;
    --zwie-front-shadow: 0 2px 8px rgba(0,0,0,0.08);
    --zwie-front-radius: 8px;
}

/* ==========================================================================
   Main Container
   ========================================================================== */

.zwie-interlinks {
    margin: 30px 0;
    padding: 25px;
    background: var(--zwie-front-bg);
    border: 1px solid var(--zwie-front-border);
    border-radius: var(--zwie-front-radius);
    clear: both;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .zwie-interlinks {
        --zwie-front-bg: #1a2214;
        --zwie-front-border: #3d5a2d;
        --zwie-front-text: #e0e0e0;
        --zwie-front-text-light: #a0a0a0;
    }
}

/* ==========================================================================
   Title & Subtitle
   ========================================================================== */

.zwie-interlinks-title {
    margin: 0 0 8px;
    font-size: 1.4em;
    color: var(--zwie-front-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.zwie-interlinks-title::before {
    content: "♻️";
    font-size: 0.9em;
}

.zwie-interlinks-subtitle {
    margin: 0 0 20px;
    font-size: 0.95em;
    color: var(--zwie-front-text-light);
}

/* ==========================================================================
   Cards Grid
   ========================================================================== */

.zwie-interlinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ==========================================================================
   Individual Card
   ========================================================================== */

.zwie-interlink-card {
    background: #fff;
    border-radius: var(--zwie-front-radius);
    overflow: hidden;
    box-shadow: var(--zwie-front-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.zwie-interlink-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

@media (prefers-color-scheme: dark) {
    .zwie-interlink-card {
        background: #242e1c;
    }
}

/* ==========================================================================
   Card Image
   ========================================================================== */

.zwie-interlink-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.zwie-interlink-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.zwie-interlink-card:hover .zwie-interlink-image img {
    transform: scale(1.05);
}

.zwie-interlink-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Card Content
   ========================================================================== */

.zwie-interlink-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zwie-interlink-title {
    margin: 0 0 10px;
    font-size: 1.1em;
    line-height: 1.3;
}

.zwie-interlink-title a {
    color: var(--zwie-front-text);
    text-decoration: none;
    transition: color 0.2s;
}

.zwie-interlink-title a:hover {
    color: var(--zwie-front-primary);
}

/* ==========================================================================
   Reason Badge
   ========================================================================== */

.zwie-interlink-reason {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 6px;
    font-size: 0.85em;
    color: var(--zwie-front-primary);
    line-height: 1.4;
    margin-top: auto;
}

@media (prefers-color-scheme: dark) {
    .zwie-interlink-reason {
        background: linear-gradient(135deg, #2d4a1e 0%, #3d5a2d 100%);
        color: #a5d6a7;
    }
}

.zwie-leftover-icon {
    flex-shrink: 0;
    font-size: 1em;
}

/* ==========================================================================
   Debug Match Score
   ========================================================================== */

.zwie-match-score {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ==========================================================================
   Widget Specific
   ========================================================================== */

.widget .zwie-interlinks,
.zwie-widget-content {
    padding: 0;
    background: transparent;
    border: none;
}

.widget .zwie-interlinks-grid,
.zwie-widget-content .zwie-interlinks-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.widget .zwie-interlink-card,
.zwie-widget-content .zwie-interlink-card {
    flex-direction: row;
    align-items: center;
}

.widget .zwie-interlink-image,
.zwie-widget-content .zwie-interlink-image {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 1;
}

.widget .zwie-interlink-content,
.zwie-widget-content .zwie-interlink-content {
    padding: 10px;
}

.widget .zwie-interlink-title,
.zwie-widget-content .zwie-interlink-title {
    font-size: 0.95em;
    margin-bottom: 6px;
}

.widget .zwie-interlink-reason,
.zwie-widget-content .zwie-interlink-reason {
    font-size: 0.75em;
    padding: 5px 8px;
}

/* ==========================================================================
   Block Editor Preview
   ========================================================================== */

.wp-block-zwie-interlinks {
    margin: 20px 0;
}

.wp-block-zwie-interlinks .zwie-interlinks {
    margin: 0;
}

/* Block editor placeholder */
.zwie-block-placeholder {
    padding: 40px;
    background: var(--zwie-front-bg);
    border: 2px dashed var(--zwie-front-border);
    border-radius: var(--zwie-front-radius);
    text-align: center;
}

.zwie-block-placeholder-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.zwie-block-placeholder-text {
    font-size: 14px;
    color: var(--zwie-front-text-light);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
    .zwie-interlinks {
        padding: 20px 15px;
        margin: 20px 0;
    }
    
    .zwie-interlinks-grid {
        grid-template-columns: 1fr;
    }
    
    .zwie-interlink-card {
        flex-direction: row;
    }
    
    .zwie-interlink-image {
        width: 100px;
        min-width: 100px;
        aspect-ratio: 1;
    }
    
    .zwie-interlink-content {
        padding: 12px;
    }
    
    .zwie-interlink-title {
        font-size: 1em;
    }
    
    .zwie-interlink-reason {
        font-size: 0.8em;
    }
}

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

@media print {
    .zwie-interlinks {
        display: none;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes zwie-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zwie-interlinks {
    animation: zwie-fade-in 0.4s ease-out;
}

.zwie-interlink-card {
    animation: zwie-fade-in 0.4s ease-out;
    animation-fill-mode: both;
}

.zwie-interlink-card:nth-child(1) { animation-delay: 0.1s; }
.zwie-interlink-card:nth-child(2) { animation-delay: 0.15s; }
.zwie-interlink-card:nth-child(3) { animation-delay: 0.2s; }
.zwie-interlink-card:nth-child(4) { animation-delay: 0.25s; }
.zwie-interlink-card:nth-child(5) { animation-delay: 0.3s; }