/**
 * Guidee Article Image – Lead / Header image + credit
 *
 * Version: 1.0.0
 * Last modified: 2026-07-24
 *
 * RULES:
 * - 100 % design-system tokens only (variables.css)
 * - Classes only (.wce-article-image*)
 * - No hardcoded colours, fonts or spacing values outside tokens
 * - Credit uses meta/caption voice (muted, small)
 */

/* =====================================================
   ROOT
   ===================================================== */
.wce-article-image {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.5rem;
    padding: 0;
    box-sizing: border-box;
}

/* =====================================================
   LINK WRAP (optional)
   ===================================================== */
.wce-article-image__link {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.wce-article-image__link:focus-visible {
    outline: 2px solid var(--color-cobalt);
    outline-offset: 3px;
}

/* =====================================================
   IMAGE
   ===================================================== */
.wce-article-image__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: middle;
    object-fit: cover;
}

/* =====================================================
   CREDIT / CAPTION
   ===================================================== */
.wce-article-image__credit {
    display: block;
    margin: 0.5rem 0 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: var(--tracking-body);
    color: var(--color-text-muted);
    text-align: left;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 767px) {
    .wce-article-image {
        margin-bottom: 1.25rem;
    }

    .wce-article-image__credit {
        font-size: 11px;
        margin-top: 0.4rem;
    }
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .wce-article-image * {
        transition: none !important;
    }
}