/* =========================================
   components/challenge-links/challenge-links.css
   Challenge Links — strictly scoped, minimal
   - No accent/eyebrow
   - All text black
   - Title weight 100
   - Shared icon (iconpicker <i> or uploaded <img>, incl. SVG)
   ========================================= */

/* Root scope + defaults */
.challenge-links{
    --ink:#000000;     /* all text black */
    --muted:#000000;   /* copy also black */

    background:#fff;
    color:var(--ink);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;

    /* Section spacing */
    padding-block: clamp(3rem, 6vw, 5rem);
}

/* Title & copy */
.challenge-links .challenge-links__title{
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:100;     /* ultra-light per request */
    line-height:1.1;
    color:var(--ink);
    margin:0;
}
.challenge-links .challenge-links__copy{
    color:var(--muted);
    max-width:65ch;
    font-size:.95rem;
    margin-top:.5rem;
}

/* Right-side list */
.challenge-links .challenge-links__list{
    display:flex;
    flex-direction:column;
}

/* Link row */
.challenge-links .challenge-links__item{
    --rule:#000;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    width:100%;

    color:#000;
    text-decoration:none;

    padding:.9rem .75rem .9rem 0;
    border-top:1px solid var(--rule);

    text-transform:uppercase;
    letter-spacing:.02em;
    font-weight:600;
    font-size:.85rem;

    transition: opacity .18s ease;
}
.challenge-links .challenge-links__item:first-child{
    margin-top:.35rem;
}

/* Shared icon (either iconpicker <i> or uploaded <img>) */
.challenge-links .challenge-links__icon-i,
.challenge-links .challenge-links__icon-img{
    flex:0 0 auto;
    display:inline-block;
    transform:translateX(0);
    opacity:.8;
    transition: transform .18s ease, opacity .18s ease;
    vertical-align:middle;
}

/* Default size for <img>; actual size is enforced inline from PHP */
.challenge-links .challenge-links__icon-img{
    width:18px;
    height:18px;
    object-fit:contain;
}

/* Optional class when the uploaded asset is an SVG (added by PHP helper) */
.challenge-links .challenge-links__icon-img--svg{
    /* keep same rules; class exists mainly for debugging/targeting if needed */
}

/* Hover / focus: keep black; use motion/opacity only */
.challenge-links .challenge-links__item:hover,
.challenge-links .challenge-links__item:focus-visible{
    opacity:.9;
    outline:none;
}
.challenge-links .challenge-links__item:hover .challenge-links__icon-i,
.challenge-links .challenge-links__item:focus-visible .challenge-links__icon-i,
.challenge-links .challenge-links__item:hover .challenge-links__icon-img,
.challenge-links .challenge-links__item:focus-visible .challenge-links__icon-img{
    transform:translateX(6px);
    opacity:1;
}

/* Touch padding tweak */
@media (hover:none){
    .challenge-links .challenge-links__item{
        padding:1rem .75rem 1rem 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
    .challenge-links .challenge-links__item,
    .challenge-links .challenge-links__icon-i,
    .challenge-links .challenge-links__icon-img{
        transition: none;
    }
}