/* assets/styles/front/14-home-updates.css */

.home-updates {
    position: relative;
    z-index: 5;
    display: grid;
    width: min(100%, 1580px);
    margin: 0 auto;
    padding: 0 1.125rem 4.5rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "cosmos"
        "farm"
        "reworks";
    gap: 3.5rem;
}

.home-latest-cosmos {
    grid-area: cosmos;
}

.home-cosmos-farm {
    grid-area: farm;
}

.home-latest-reworks {
    grid-area: reworks;
}

.home-update-block {
    --home-update-accent: var(--codex-cyan);

    min-width: 0;
    scroll-margin-top: 6rem;
}

.home-update-block--reworks {
    --home-update-accent: var(--codex-magenta);
}

.home-update-block--farm {
    --home-update-accent: var(--codex-gold);
}

.home-update-block__heading {
    display: flex;
    margin-bottom: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.home-update-block__kicker {
    margin: 0 0 0.35rem;
    color: var(--codex-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-update-block__heading h2 {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--codex-font-display);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.home-update-block__heading-star {
    color: var(--home-update-accent);
    filter: drop-shadow(
        0 0 10px color-mix(in srgb, var(--home-update-accent) 70%, transparent)
    );
}

.home-update-block__link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    color: var(--home-update-accent);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.home-update-block__link:hover {
    color: var(--codex-paper);
}

.home-update-block__link span:last-child {
    font-size: 1rem;
    transition: transform 160ms ease;
}

.home-update-block__link:hover span:last-child {
    transform: translate(0.15rem, -0.15rem);
}

.home-update-block__link:focus-visible {
    outline: 2px solid var(--home-update-accent);
    outline-offset: 4px;
}

/* Latest Cosmos */

.home-latest-cosmos__list {
    display: grid;
    gap: 0.75rem;
}

.home-cosmos-card {
    --home-cosmos-accent: var(--codex-cyan);

    position: relative;
    display: grid;
    min-height: 6.7rem;
    padding: 0.85rem 0.95rem;
    overflow: hidden;
    border: 1px solid
        color-mix(in srgb, var(--home-cosmos-accent) 28%, transparent);
    clip-path: polygon(
        0.65rem 0,
        100% 0,
        100% calc(100% - 0.75rem),
        calc(100% - 0.75rem) 100%,
        0 100%,
        0 0.65rem
    );
    grid-template-columns:
        5rem
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 0.9rem;
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--home-cosmos-accent) 7%, transparent),
            transparent 48%
        ),
        rgb(23 16 47 / 76%);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.home-cosmos-card--gold {
    --home-cosmos-accent: var(--codex-gold);
}

.home-cosmos-card--violet {
    --home-cosmos-accent: #b97cff;
}

.home-cosmos-card:hover {
    border-color: var(--home-cosmos-accent);
    box-shadow: 0 0.9rem 2rem
        color-mix(in srgb, var(--home-cosmos-accent) 10%, transparent);
    transform: translateX(0.25rem);
}

.home-cosmos-card__orbit {
    position: relative;
    display: grid;
    width: 5rem;
    height: 5rem;
    border: 1px solid
        color-mix(in srgb, var(--home-cosmos-accent) 50%, transparent);
    border-radius: 50%;
    place-items: center;
    box-shadow: inset 0 0 1.3rem
        color-mix(in srgb, var(--home-cosmos-accent) 12%, transparent);
}

.home-cosmos-card__picture {
    display: block;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border-radius: 50%;
}

.home-cosmos-card__picture img {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

.home-cosmos-card__orbit::before,
.home-cosmos-card__orbit::after {
    position: absolute;
    border: 1px solid
        color-mix(in srgb, var(--home-cosmos-accent) 22%, transparent);
    border-radius: 50%;
    pointer-events: none;
    content: "";
}

.home-cosmos-card__orbit::before {
    inset: 0.35rem;
}

.home-cosmos-card__orbit::after {
    inset: -0.3rem;
    border-color: color-mix(
        in srgb,
        var(--home-cosmos-accent) 12%,
        transparent
    );
}

.home-cosmos-card__content {
    min-width: 0;
}

.home-cosmos-card__content p {
    margin: 0 0 0.18rem;
    overflow: hidden;
    color: var(--codex-muted);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-cosmos-card__content h3 {
    margin: 0;
    font-family: var(--codex-font-display);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.home-cosmos-card__content strong {
    display: block;
    margin-top: 0.35rem;
    color: var(--home-cosmos-accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.home-cosmos-card__arrow {
    color: var(--codex-muted);
    font-size: 1.15rem;
    line-height: 1;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.home-cosmos-card:hover .home-cosmos-card__arrow {
    color: var(--home-cosmos-accent);
    transform: translate(0.15rem, -0.15rem);
}

/* Latest Reworks */

.home-latest-reworks__list {
    display: grid;
    gap: 0.75rem;
}

.home-rework-card {
    position: relative;
    display: grid;
    min-height: 10.25rem;
    overflow: hidden;
    border: 1px solid rgb(242 59 210 / 22%);
    clip-path: polygon(
        0.65rem 0,
        100% 0,
        100% calc(100% - 0.75rem),
        calc(100% - 0.75rem) 100%,
        0 100%,
        0 0.65rem
    );
    grid-template-columns:
        minmax(6.5rem, 35%)
        minmax(0, 1fr)
        auto;
    align-items: stretch;
    background: rgb(23 16 47 / 68%);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.home-rework-card:hover {
    border-color: rgb(242 59 210 / 62%);
    box-shadow: 0 0.9rem 2rem rgb(242 59 210 / 10%);
    transform: translateX(0.25rem);
}

.home-rework-card__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--codex-ink-soft);
}

.home-rework-card__media::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, transparent 52%, rgb(23 16 47 / 94%));
    pointer-events: none;
    content: "";
}

.home-rework-card__picture {
    display: block;
    width: 100%;
    height: 100%;
}

.home-rework-card__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-rework-card__content {
    align-self: center;
    min-width: 0;
    padding: 1rem 0.5rem 1rem 0.15rem;
}

.home-rework-card__meta {
    display: flex;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.home-rework-card__tag {
    padding: 0.2rem 0.45rem;
    background: rgb(242 59 210 / 86%);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.home-rework-card__meta time {
    color: var(--codex-muted);
    font-size: 0.58rem;
}

.home-rework-card__content h3 {
    display: -webkit-box;
    margin: 0.25rem 0;
    overflow: hidden;
    font-family: var(--codex-font-display);
    font-size: 1.26rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-rework-card__content p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--codex-muted);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-rework-card__arrow {
    align-self: center;
    margin-right: 0.875rem;
    color: var(--codex-muted);
    font-size: 1rem;
    line-height: 1;
    transition:
        color 160ms ease,
        transform 160ms ease;
}

.home-rework-card:hover .home-rework-card__arrow {
    color: var(--codex-magenta);
    transform: translate(0.15rem, -0.15rem);
}

/* Cosmos farm today */

.home-cosmos-farm__panel {
    position: relative;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgb(244 201 93 / 30%);
    clip-path: polygon(
        0.75rem 0,
        100% 0,
        100% calc(100% - 0.9rem),
        calc(100% - 0.9rem) 100%,
        0 100%,
        0 0.75rem
    );
    background:
        radial-gradient(
            circle at 12% 10%,
            rgb(244 201 93 / 10%),
            transparent 12rem
        ),
        linear-gradient(115deg, rgb(244 201 93 / 5%), transparent 52%),
        rgb(23 16 47 / 72%);
}

.home-cosmos-farm__day {
    display: flex;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--codex-line);
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.home-cosmos-farm__day span {
    color: var(--codex-muted);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-cosmos-farm__day strong {
    color: var(--codex-gold);
    font-family: var(--codex-font-display);
    font-size: 1.45rem;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;
}

.home-cosmos-farm__groups {
    display: grid;
    gap: 0.85rem;
}

.home-cosmos-farm__group {
    display: grid;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgb(167 157 191 / 15%);
    background: rgb(8 5 20 / 28%);
    gap: 0.65rem;
}

.home-cosmos-farm__group h3 {
    margin: 0;
    color: var(--codex-paper);
    font-family: var(--codex-font-display);
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.home-cosmos-farm__icons {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.home-cosmos-farm__icons img {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgb(244 201 93 / 22%);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0.75rem rgb(244 201 93 / 8%);
}

@media (min-width: 48rem) {
    .home-updates {
        padding: 0 2rem 5.5rem;
        gap: 4rem;
    }

    .home-cosmos-card {
        min-height: 10rem;
        padding: 1rem 1.15rem;
        grid-template-columns:
            8rem
            minmax(0, 1fr)
            auto;
        gap: 1.25rem;
    }

    .home-cosmos-card__orbit,
    .home-cosmos-card__picture,
    .home-cosmos-card__picture img {
        width: 8rem;
        height: 8rem;
    }

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

    .home-cosmos-card__content strong {
        font-size: 0.76rem;
    }

    .home-latest-reworks__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-rework-card {
        min-height: 13rem;
        grid-template-columns:
            minmax(7rem, 35%)
            minmax(0, 1fr)
            auto;
    }

    .home-cosmos-farm__group {
        grid-template-columns:
            minmax(8.5rem, 0.35fr)
            minmax(0, 1fr);
        align-items: center;
    }

    .home-cosmos-farm__icons img {
        width: 3rem;
        height: 3rem;
    }
}

@media (min-width: 70rem) {
    .home-updates {
        padding-inline: 4vw;
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);
        grid-template-areas:
            "cosmos reworks"
            "cosmos farm";
        align-items: start;
        column-gap: 4rem;
        row-gap: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-update-block__link span:last-child,
    .home-cosmos-card,
    .home-cosmos-card__arrow,
    .home-rework-card,
    .home-rework-card__arrow {
        transition: none;
    }
}