/* ========================================
   IMAGE CREDITS - Global Attribution Styles
   ========================================

   Provides consistent image credit/attribution display
   across all content types:
   - Presentation slides
   - Infographics
   - Text content with images
   - PDF/HTML exports

   Credit Requirements by Provider:
   - Unsplash: Recommended (not required)
   - Pexels: Appreciated (not required)
   - Pixabay: Not required
   - Wikimedia: REQUIRED (CC licenses)
   ======================================== */

/* ========================================
   1. OVERLAY STYLE (for presentations)
   Position: bottom-right corner of image
   ======================================== */

.image-credit-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%
    );
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.65rem;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    line-height: 1.3;
    text-align: right;
    z-index: 10;
    pointer-events: none;
}

.image-credit-overlay a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    pointer-events: auto;
}

.image-credit-overlay a:hover {
    text-decoration-color: rgba(255, 255, 255, 0.9);
}

/* Compact variant for smaller images */
.image-credit-overlay--compact {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}

/* Light background variant */
.image-credit-overlay--light {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    color: rgba(0, 0, 0, 0.8);
}

.image-credit-overlay--light a {
    color: rgba(0, 0, 0, 0.8);
    text-decoration-color: rgba(0, 0, 0, 0.4);
}

/* ========================================
   2. CAPTION STYLE (for content/infographics)
   Position: below the image
   ======================================== */

.image-credit-caption,
figcaption.image-credit {
    display: block;
    padding: 0.5rem 0;
    color: var(--text-3, #64748b);
    font-size: 0.75rem;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

.image-credit-caption a,
figcaption.image-credit a {
    color: var(--primary, #00d9ff);
    text-decoration: none;
}

.image-credit-caption a:hover,
figcaption.image-credit a:hover {
    text-decoration: underline;
}

/* Left-aligned variant for blog/article content */
.image-credit-caption--left,
figcaption.image-credit--left {
    text-align: left;
    padding-left: 0.25rem;
}

/* ========================================
   3. INLINE STYLE (for minimal display)
   Position: inline with image metadata
   ======================================== */

.image-credit-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-3, #64748b);
    font-size: 0.7rem;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

.image-credit-inline::before {
    content: "📷";
    font-size: 0.8em;
}

.image-credit-inline a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-style: dotted;
}

/* ========================================
   4. BADGE STYLE (for provider branding)
   Shows provider logo/name as a badge
   ======================================== */

.image-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.25rem;
    color: white;
    font-size: 0.65rem;
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    font-weight: 500;
}

.image-credit-badge--unsplash {
    background: rgba(0, 0, 0, 0.7);
}

.image-credit-badge--pexels {
    background: rgba(5, 160, 140, 0.9);
}

.image-credit-badge--pixabay {
    background: rgba(47, 115, 65, 0.9);
}

.image-credit-badge--wikimedia {
    background: rgba(51, 102, 153, 0.9);
}

/* ========================================
   5. REQUIRED ATTRIBUTION INDICATOR
   Visual indicator for CC/required credits
   ======================================== */

.image-credit--required {
    position: relative;
}

.image-credit--required::after {
    content: "*";
    color: var(--danger, #ff6b6b);
    font-size: 0.8em;
    margin-left: 0.125rem;
}

/* ========================================
   6. CONTAINER STYLES
   For wrapping images with credits
   ======================================== */

.image-with-credit {
    position: relative;
    display: inline-block;
    width: 100%;
}

.image-with-credit img {
    display: block;
    width: 100%;
    height: auto;
}

/* Figure container with caption */
figure.image-with-credit {
    margin: 0;
    padding: 0;
}

/* ========================================
   7. EXPORT STYLES (PDF/Print)
   Optimized for printed output
   ======================================== */

@media print {
    .image-credit-overlay {
        background: rgba(0, 0, 0, 0.5);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .image-credit-caption,
    figcaption.image-credit {
        color: #666;
        font-size: 0.65rem;
    }
}

/* ========================================
   8. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .image-credit-overlay {
        font-size: 0.6rem;
        padding: 0.375rem 0.5rem;
    }

    .image-credit-caption,
    figcaption.image-credit {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .image-credit-overlay {
        font-size: 0.55rem;
        padding: 0.25rem 0.375rem;
    }

    .image-credit-overlay--compact {
        font-size: 0.55rem;
        padding: 0.2rem 0.375rem;
    }

    .image-credit-caption,
    figcaption.image-credit {
        font-size: 0.65rem;
    }

    .image-credit-inline {
        font-size: 0.65rem;
    }

    .image-credit-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.375rem;
    }

    .image-credits-list {
        margin-top: 1.25rem;
    }

    .image-credits-list__title {
        font-size: 0.8rem;
    }

    .image-credits-list__items {
        font-size: 0.7rem;
    }
}

/* ========================================
   9. CREDITS LIST (for export footer)
   Aggregated list of all image credits
   ======================================== */

.image-credits-list {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-1, #e2e8f0);
}

.image-credits-list__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-2, #334155);
    margin-bottom: 0.5rem;
}

.image-credits-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-3, #64748b);
}

.image-credits-list__items li {
    padding: 0.25rem 0;
}

.image-credits-list__items a {
    color: var(--primary, #00d9ff);
}