/* assets/styles/front/25-reworks-listing.css */

.reworks-listing {
    width: min(
        calc(100% - 2.25rem),
        108rem
    );
    margin: 0 auto;
    padding:
        3rem
        0
        5rem;
}

/* Heading */

.reworks-listing__heading {
    display: flex;
    margin-bottom: 1.6rem;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
}

.reworks-listing__kicker {
    margin: 0 0 0.55rem;
    color: var(--reworks-accent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.reworks-listing__heading h2 {
    margin: 0;
    color: var(--codex-paper);
    font-family: var(--codex-font-display);
    font-size: clamp(
        2.45rem,
        11vw,
        4rem
    );
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.88;
    text-transform: uppercase;
}

.reworks-listing__count {
    margin: 0 0 0.15rem;
    flex: 0 0 auto;
    color: var(--codex-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* Grid */

.reworks-listing__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr);
    gap: 0.8rem;
}

/* Card */

.rework-card {
    --rework-card-accent:
        var(--reworks-accent);

    position: relative;
    display: grid;
    min-width: 0;
    min-height: 100%;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--rework-card-accent) 28%,
            transparent
        );
    grid-template-columns:
        minmax(8.5rem, 42%)
        minmax(0, 1fr);
    overflow: hidden;
    clip-path: polygon(
        0.65rem 0,
        100% 0,
        100% calc(100% - 0.65rem),
        calc(100% - 0.65rem) 100%,
        0 100%,
        0 0.65rem
    );
    background:
        radial-gradient(
            circle at 100% 0,
            color-mix(
                in srgb,
                var(--rework-card-accent) 7%,
                transparent
            ),
            transparent 10rem
        ),
        rgb(23 16 47 / 94%);
    box-shadow:
        0 1rem 2.5rem
        rgb(0 0 0 / 14%);
}

.rework-card--cyan {
    --rework-card-accent: #42f5e6;
}

.rework-card--violet {
    --rework-card-accent: #b477ff;
}

.rework-card--blue {
    --rework-card-accent: #62bce8;
}

.rework-card--orange {
    --rework-card-accent: #ff7048;
}

.rework-card--emerald {
    --rework-card-accent: #50f2a2;
}

.rework-card::before {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background:
        var(--rework-card-accent);
    content: "";
    opacity: 0.72;
    pointer-events: none;
}

/* Portrait */

.rework-card__portrait {
    position: relative;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    background: var(--codex-ink-soft);
}

.rework-card__portrait::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 70%,
            rgb(23 16 47 / 42%)
        ),
        linear-gradient(
            180deg,
            transparent 72%,
            rgb(8 5 20 / 30%)
        );
    content: "";
    pointer-events: none;
}

.rework-card__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
 * Les fichiers source sont au ratio 345 × 377.
 * object-fit: cover évite toute déformation lorsque
 * le contenu de la carte impose une hauteur supérieure.
 */

.rework-card.is-announced
    .rework-card__portrait img {
    filter:
        grayscale(1)
        brightness(0.58)
        contrast(0.95);
}

/* Announced */

.rework-card__status {
    position: absolute;
    z-index: 6;
    top: 13px;
    left: 0;
    padding:
        7px
        22px
        7px
        13px;
    clip-path: polygon(
        0 0,
        calc(100% - 10px) 0,
        100% 50%,
        calc(100% - 10px) 100%,
        0 100%
    );
    background:
        linear-gradient(
            90deg,
            #d9a633,
            #f4c95d 68%,
            #ffeaa1
        );
    color: #150d02;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow:
        0 0 22px
        rgb(244 201 93 / 32%);
}

/* Content */

.rework-card__content {
    display: flex;
    min-width: 0;
    padding:
        0.9rem
        0.8rem;
    flex-direction: column;
}

.rework-card__content h3 {
    margin: 0;
    color: var(--codex-paper);
    font-family: var(--codex-font-display);
    font-size: clamp(
        1.25rem,
        5vw,
        1.6rem
    );
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 0.94;
    text-transform: uppercase;
    text-wrap: balance;
}

/* Skill evolution */

.rework-card__skills {
    display: flex;
    width: 100%;
    margin: 1rem 0;
    align-items: center;
    justify-content: center;
    gap: clamp(
        0.25rem,
        1.5vw,
        0.6rem
    );
}

.rework-card__skill {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0.3rem;
    color: var(--codex-muted);
    text-decoration: none;
}

.rework-card__skill > img {
    display: block;
    width: 3rem;
    height: 3rem;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--rework-card-accent) 42%,
            var(--codex-muted)
        );
    border-radius: 50%;
    object-fit: cover;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.rework-card__skill small {
    color: inherit;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.rework-card__skill--awakened {
    color: var(--codex-gold);
}

.rework-card__skill--awakened > img {
    border-color:
        rgb(244 201 93 / 72%);
    box-shadow:
        0 0 1rem
        rgb(244 201 93 / 14%);
}

a.rework-card__skill:hover > img,
a.rework-card__skill:focus-visible > img {
    border-color:
        var(--rework-card-accent);
    box-shadow:
        0 0 1rem
        color-mix(
            in srgb,
            var(--rework-card-accent) 22%,
            transparent
        );
    transform: translateY(-2px);
}

a.rework-card__skill:focus-visible {
    border-radius: 0;
    outline:
        2px solid
        var(--codex-cyan);
    outline-offset: 4px;
}

.rework-card__skill.is-disabled {
    cursor: default;
    opacity: 0.56;
}

.rework-card__skill-arrow {
    display: block;
    width: clamp(
        2rem,
        8vw,
        3rem
    );
    height: auto;
    flex:
        0
        1
        3rem;
    object-fit: contain;
}

/* Footer */

.rework-card__footer {
    display: flex;
    min-width: 0;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top:
        1px solid
        var(--codex-line);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.rework-card__tags {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rework-card__tags span {
    display: inline-flex;
    min-height: 1.35rem;
    padding:
        0.25rem
        0.35rem;
    border:
        1px solid
        rgb(167 157 191 / 24%);
    align-items: center;
    color: var(--codex-muted);
    font-size: 0.46rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
}

.rework-card__details {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 0.3rem;
    color: var(--reworks-accent);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.rework-card__details span {
    font-size: 0.75rem;
    transition: transform 160ms ease;
}

a.rework-card__details:hover,
a.rework-card__details:focus-visible {
    color: var(--codex-paper);
}

a.rework-card__details:hover span,
a.rework-card__details:focus-visible span {
    transform:
        translate(
            0.12rem,
            -0.12rem
        );
}

a.rework-card__details:focus-visible {
    outline:
        2px solid
        var(--codex-cyan);
    outline-offset: 4px;
}

.rework-card__details.is-disabled {
    cursor: default;
    color: var(--codex-muted);
    opacity: 0.55;
}

/* Tablet */

@media (min-width: 48rem) {
    .reworks-listing {
        width: min(
            calc(100% - 8vw),
            108rem
        );
        padding:
            3.75rem
            0
            5.75rem;
    }

    .reworks-listing__heading {
        margin-bottom: 2rem;
    }

    .reworks-listing__heading h2 {
        font-size: 4.1rem;
    }

    .reworks-listing__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .rework-card {
        grid-template-columns:
            minmax(8.75rem, 39%)
            minmax(0, 1fr);
    }

    .rework-card__content {
        padding:
            1rem
            0.9rem;
    }

    .rework-card__skill > img {
        width: 3.15rem;
        height: 3.15rem;
    }
}

/* Desktop */

@media (min-width: 75rem) {
    .reworks-listing {
        padding-top: 4.25rem;
    }

    .reworks-listing__grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .rework-card {
        grid-template-columns:
            minmax(8rem, 37%)
            minmax(0, 1fr);
    }

    .rework-card__content h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 100rem) {
    .reworks-listing__grid {
        gap: 0.9rem;
    }

    .rework-card__content {
        padding:
            1.1rem
            1rem;
    }

    .rework-card__skill > img {
        width: 3.35rem;
        height: 3.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rework-card__skill > img,
    .rework-card__details span {
        transition: none;
    }
}