/* assets/styles/front/28-rework-detail-armor.css */

.front-rework-detail-page {
    --rework-detail-accent: #b477ff;
}

/* Main section */

.rework-detail-hero {
    display: grid;
    width: min(
        calc(100% - 2.25rem),
        120rem
    );
    margin: 0 auto;
    padding:
        1rem
        0
        5rem;
    gap: 2rem;
}

/* Portrait */

.rework-detail-visual {
    position: relative;
    width: min(
        100%,
        28.375rem
    );
    margin: 0 auto;
    border:
        1px solid
        rgb(180 119 255 / 48%);
    overflow: hidden;

    aspect-ratio: 454 / 641;

    clip-path: polygon(
        1.1rem 0,
        100% 0,
        100% calc(100% - 1.35rem),
        calc(100% - 1.35rem) 100%,
        0 100%,
        0 1.1rem
    );

    background: var(--codex-panel);

    box-shadow:
        0 1.5rem 4rem
        rgb(0 0 0 / 24%);
}

.rework-detail-visual::after {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgb(8 5 20 / 22%) 68%,
            rgb(8 5 20 / 96%) 100%
        );

    content: "";
    pointer-events: none;
}

.rework-detail-portrait {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rework-detail-rank {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;

    display: grid;
    width: 2.75rem;
    height: 2.75rem;

    place-items: center;

    clip-path: polygon(
        0.35rem 0,
        100% 0,
        calc(100% - 0.35rem) 100%,
        0 100%
    );

    background: var(--codex-cyan);
    color: var(--codex-ink);

    font-family: var(--codex-font-display);
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 800;
}

.rework-detail-identity {
    position: absolute;
    z-index: 3;
    right: 1.35rem;
    bottom: 1.35rem;
    left: 1.35rem;

    display: grid;
    gap: 0.4rem;
}

.rework-detail-identity span {
    color: var(--rework-detail-accent);

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.rework-detail-identity strong {
    color: var(--codex-paper);

    font-family: var(--codex-font-display);
    font-size: clamp(
        2rem,
        10vw,
        3.5rem
    );
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.9;
    text-transform: uppercase;
}

/* Armor */

.rework-armor {
    min-width: 0;
}

.rework-armor__heading {
    margin-bottom: 1.5rem;
}

.rework-armor__kicker {
    margin:
        0
        0
        0.55rem;

    color: var(--rework-detail-accent);

    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.rework-armor__heading h1 {
    margin: 0;

    color: var(--codex-paper);

    font-family: var(--codex-font-display);
    font-size: clamp(
        3rem,
        14vw,
        5.2rem
    );
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.86;
    text-transform: uppercase;
}

.rework-armor__heading > p:last-child {
    max-width: 42rem;
    margin:
        1rem
        0
        0;

    color: var(--codex-muted);

    font-size: 0.76rem;
    line-height: 1.65;
}

/* Pieces */

.rework-armor__pieces {
    display: grid;
    gap: 0.75rem;
}

.rework-armor-piece {
    position: relative;

    display: grid;
    min-width: 0;
    padding: 0.85rem;

    border:
        1px solid
        rgb(180 119 255 / 28%);

    grid-template-columns:
        clamp(
            5rem,
            30vw,
            8rem
        )
        minmax(0, 1fr);

    align-items: center;
    gap:
        0.75rem
        1rem;

    background:
        linear-gradient(
            105deg,
            rgb(180 119 255 / 8%),
            transparent 52%
        ),
        rgb(23 16 47 / 82%);

    clip-path: polygon(
        0.6rem 0,
        100% 0,
        100% calc(100% - 0.6rem),
        calc(100% - 0.6rem) 100%,
        0 100%,
        0 0.6rem
    );
}

.rework-armor-piece.is-premium {
    border-color:
        rgb(244 201 93 / 72%);

    background:
        linear-gradient(
            105deg,
            rgb(244 201 93 / 10%),
            transparent 54%
        ),
        rgb(23 16 47 / 88%);

    box-shadow:
        inset
        0
        0
        1.5rem
        rgb(244 201 93 / 7%);
}

.rework-armor-piece__premium {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;

    padding:
        0.3rem
        0.65rem;

    background: var(--codex-gold);
    color: var(--codex-ink);

    font-size: 0.46rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.rework-armor-piece__image {
    display: block;
    width: 100%;
    max-width: 8rem;

    border:
        1px solid
        rgb(244 201 93 / 40%);
    border-radius: 50%;

    aspect-ratio: 1;

    object-fit: cover;

    background:
        radial-gradient(
            circle,
            rgb(244 201 93 / 12%),
            var(--codex-ink-soft)
        );

    box-shadow:
        inset
        0
        0
        1.5rem
        rgb(244 201 93 / 8%);
}

.rework-armor-piece__content {
    min-width: 0;
}

.rework-armor-piece__content h2 {
    margin:
        0
        0
        0.65rem;

    color: var(--codex-muted);

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Stat order: icon -> value -> abbreviation */

.rework-armor-piece__stat {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.rework-armor-piece__stat img {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 3.25rem;

    object-fit: contain;
}

.rework-armor-piece__stat strong,
.rework-armor-piece__stat span {
    color: var(--codex-paper);

    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.1;
}

.rework-armor-piece__stat span {
    white-space: nowrap;
}

/* Cost */

.rework-armor-piece__cost {
    display: grid;
    min-width: 0;

    grid-column: 2;

    justify-items: end;
    gap: 0.18rem;
    text-align: right;
}

.rework-armor-piece__cost strong {
    color: var(--codex-gold);

    font-family: var(--codex-font-display);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.rework-armor-piece__cost span {
    max-width: 9rem;

    color: var(--codex-muted);

    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Full armor bonus */

.rework-armor-bonus {
    margin-top: 0.85rem;
    padding: 1rem;

    border:
        1px solid
        rgb(244 201 93 / 34%);

    background:
        rgb(244 201 93 / 6%);
}

.rework-armor-bonus > p {
    margin:
        0
        0
        0.75rem;

    color: var(--codex-muted);

    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.rework-armor-bonus__stats {
    display: flex;
    flex-wrap: wrap;
    gap:
        0.75rem
        1.5rem;
}

.rework-armor-bonus__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rework-armor-bonus__stat img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;

    object-fit: contain;
}

.rework-armor-bonus__stat strong,
.rework-armor-bonus__stat span {
    color: var(--codex-gold);

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

/* Tablet */

@media (min-width: 48rem) {
    .rework-detail-hero {
        width: min(
            calc(100% - 8vw),
            120rem
        );
        padding:
            1.5rem
            0
            6rem;
    }

    .rework-armor-piece {
        grid-template-columns:
            8rem
            minmax(0, 1fr);
        padding: 1rem;
    }

    .rework-detail-identity {
        right: 1.75rem;
        bottom: 1.75rem;
        left: 1.75rem;
    }

    .rework-armor__heading > p:last-child {
        font-size: 0.82rem;
    }
}

/* Wide tablet / small desktop */

@media (min-width: 64rem) {
    .rework-armor__pieces {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .rework-armor-piece {
        grid-template-columns:
            minmax(
                5.5rem,
                7rem
            )
            minmax(0, 1fr);
    }
}

/* Desktop */

@media (min-width: 90rem) {
    .rework-detail-hero {
        grid-template-columns:
            28.375rem
            minmax(0, 1fr);
        align-items: start;
        gap: 2.75rem;
        padding-bottom: 7rem;
    }

    .rework-detail-visual {
        margin: 0;
    }

    .rework-armor-piece {
        grid-template-columns:
            8rem
            minmax(0, 1fr);
        min-height: 10rem;
    }

    .rework-armor__heading h1 {
        font-size: 5.2rem;
    }
}