/* ========================================================================
   HAPPY PENS CORE — ARCHIVE NEWS V1.2
   One shared row system: marker | date | category | title | view.
======================================================================== */

.hpc-archive-news-list,
.hpc-archive-news-list *,
.hpc-archive-news-row,
.hpc-archive-news-row * {
    box-sizing: border-box;
}

.hpc-archive-news-list {
    display: grid;
    gap: 1px;
    width: 100%;
    min-width: 0;
}

.hpc-archive-news-row {
    display: grid;
    grid-template-columns: 6px 85px 70px minmax(0, 1fr) 50px;
    column-gap: 16px;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 4px 0;
    color: #252b34;
    line-height: 1.35;
    text-decoration: none;
}

.hpc-archive-news-marker {
    align-self: center;
    color: #34404d;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.hpc-archive-news-date {
    white-space: nowrap;
    color: #34404d;
    font-size: 14px;
    font-weight: 400;
}

.hpc-archive-news-title {
    min-width: 0;
    color: #475261;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.hpc-archive-news-title--plain {
    cursor: default;
}


.hpc-archive-news-row--linked {
    cursor: pointer;
}

.hpc-archive-news-row--linked:hover,
.hpc-archive-news-row--linked:focus-visible {
    text-decoration: none;
}

.hpc-archive-news-row--linked:hover .hpc-archive-news-title,
.hpc-archive-news-row--linked:focus-visible .hpc-archive-news-title,
.hpc-archive-news-row--linked:hover .hpc-archive-news-action,
.hpc-archive-news-row--linked:focus-visible .hpc-archive-news-action {
    color: #8a6a3f;
}

.hpc-archive-news-category {
    min-width: 0;
    white-space: nowrap;
    color: #72777d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hpc-archive-news-action {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    color: #8a6a3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
}

.hpc-archive-news-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.18s ease;
}

.hpc-archive-news-row--linked:hover .hpc-archive-news-arrow,
.hpc-archive-news-row--linked:focus-visible .hpc-archive-news-arrow {
    transform: translateX(3px);
}

.hpc-archive-news-action-placeholder {
    display: block;
}

@media (max-width: 900px) {
    .hpc-archive-news-row {
        grid-template-columns: 18px 108px 82px minmax(0, 1fr) 74px;
        column-gap: 12px;
    }

    .hpc-archive-news-title {
        font-size: 15px;
    }

    .hpc-archive-news-category,
    .hpc-archive-news-action {
        font-size: 11px;
    }
}

@media (max-width: 700px) {
    .hpc-archive-news-row {
        grid-template-columns: 18px minmax(0, 1fr) max-content;
        row-gap: 4px;
        column-gap: 10px;
        padding: 7px 0;
    }

    .hpc-archive-news-marker {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        margin-top: 1px;
    }

    .hpc-archive-news-date {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px;
    }

    .hpc-archive-news-category {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .hpc-archive-news-title {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .hpc-archive-news-action {
        grid-column: 2 / 4;
        grid-row: 3;
        justify-content: flex-start;
        margin-top: 1px;
    }

    .hpc-archive-news-action-placeholder {
        display: none;
    }
}

@media (max-width: 500px) {
    .hpc-archive-news-row {
        grid-template-columns: 18px minmax(0, 1fr);
    }

    .hpc-archive-news-date {
        grid-column: 2;
    }

    .hpc-archive-news-category {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .hpc-archive-news-title {
        grid-column: 2;
        grid-row: 3;
    }

    .hpc-archive-news-action {
        grid-column: 2;
        grid-row: 4;
    }
}


/* ========================================================================
   LATEST ADDED — ROLLING UPDATES SIDEBAR
   Narrow 1/5-column layout: date + category / title.
======================================================================== */

.hpc-latest-added-updates,
.hpc-latest-added-updates * {
    box-sizing: border-box;
}

.hpc-latest-added-updates {
    width: 100%;
    min-width: 0;
    border-top: 1px solid rgba(52, 64, 77, 0.16);
}

.hpc-latest-added-update {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 18px 0 10px;
    border-bottom: 1px solid rgba(52, 64, 77, 0.16);
    color: #475261;
    text-decoration: none;
}

.hpc-latest-added-update-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-bottom: 10px;
}

.hpc-latest-added-update-date {
    flex: 0 0 auto;
    white-space: nowrap;
    color: #72777d;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
}

.hpc-latest-added-update-category {
    min-width: 0;
    white-space: nowrap;
    color: #8a6a3f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-align: left;
    text-transform: uppercase;
}

.hpc-latest-added-update-title {
    display: block;
    min-width: 0;
    color: #475261;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.42;
    overflow-wrap: anywhere;
    transition: color 0.18s ease;
}

.hpc-latest-added-update:hover,
.hpc-latest-added-update:focus-visible {
    text-decoration: none;
}

.hpc-latest-added-update:hover .hpc-latest-added-update-title,
.hpc-latest-added-update:focus-visible .hpc-latest-added-update-title {
    color: #8a6a3f;
}

@media (max-width: 900px) {
    .hpc-latest-added-update {
        padding: 12px 0 13px;
    }

    .hpc-latest-added-update-title {
        font-size: 14px;
    }
}