/* Desktop homepage live publication tile. Intentionally scoped to avoid mobile/PWA styles. */
@media (min-width: 1024px) {
    .categories-hero .latest-publication {
        width: 100%;
        grid-column: 1 / -1;
        min-width: 0;
        min-height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 14px;
        border-radius: 50px;
        color: #111827;
        background: #fff2f2;
        text-decoration: none;
        overflow: hidden;
        transition: background 180ms ease, transform 180ms ease, opacity 240ms ease;
    }

    .categories-hero .latest-publication:hover,
    .categories-hero .latest-publication:focus-visible {
        background: #ffe2e2;
    }

    .latest-publication.is-changing {
        opacity: 0;
        transform: translateY(5px);
    }

    .latest-publication__icon,
    .latest-publication__arrow {
        flex: 0 0 auto;
        color: #4f46e5;
        font-size: 20px;
    }

    .latest-publication__content {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 9px;
        overflow: hidden;
        white-space: nowrap;
    }

    .latest-publication__label {
        flex: 0 0 auto;
        color: rgb(17 24 39);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .latest-publication__text {
        min-width: 0;
        overflow: hidden;
        color: rgb(17 24 39);
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .latest-publication__user,
    .latest-publication__category {
        color: #ef4444;
        font-weight: 500;
    }

    .latest-publication__arrow {
        margin-left: auto;
        opacity: 0.7;
    }
}

@media (max-width: 1279px) and (min-width: 1024px) {
    .categories-hero .latest-publication {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .categories-hero .latest-publication {
        transition: none;
    }
}