/* FILE: public/css/feed_horizontal.css — FULL FILE REPLACEMENT
   Component-scoped horizontal footer feeds (no overlap with .feed-*)
   ------------------------------------------------------------------
   Desktop (≥1126px): 4-up grid (cap to first 4 items)
   Medium  (826–1125): 3-up grid (hide 4th card so it stays one row)
   Small   (≤825px):   2×2 grid (show the 4th card again)
   Card look matches dashboard "row2" tiles.
   No "Load more" in this variant.
*/

/* Local surface palette (scoped) */
.eg-hf {
    --hf-surface-1: var(--section-medium-background-color);
    --hf-surface-2: var(--section-dark-background-color);
    margin-bottom: 32px;
}

/* Grid */
.eg-hf__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 5.6364px + 0.7273vw, 14px);
}

/* Cap to first 4 cards (anything 5+ always hidden) */
.eg-hf__row > .eg-hf__card:nth-child(n + 5) {
    display: none !important;
}

/* ≤1125px → 3 columns */
@media (max-width: 1125px) {
    .eg-hf__row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Between 1125px and 825px, hide the 4th tile so the row stays single-line */
@media (max-width: 1125px) and (min-width: 826px) {
    .eg-hf__row > .eg-hf__card:nth-child(4) {
        display: none !important;
    }
}

/* ≤825px → 2×2 grid and show the 4th tile again */
@media (max-width: 825px) {
    .eg-hf__row {
        grid-template-columns: repeat(2, 1fr);
    }
    .eg-hf__row > .eg-hf__card:nth-child(4) {
        display: flex !important; /* restore default display from .eg-hf__card */
    }
}

/* Card */
.eg-hf__card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--hf-surface-2);
    color: var(--white-color-1);
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
}

/* Image – "row2" style */
.eg-hf__img {
    width: 100%;
    height: clamp(159px, 120.4118px + 9.6471vw, 200px);
    object-fit: cover;
    display: block;
    background: var(--section-darkestdark-background-color);
}

/* Content */
.eg-hf__content {
    flex: 1;
    padding: 1.25rem 1.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5rem;
}

.eg-hf__title {
    font-family: var(--identity-font);
    font-weight: var(--font-weight7);
    font-size: var(--font-size-18px);
    letter-spacing: -.5px;
    line-height: 1.35;
    margin: .5rem 0 .75rem 0;
    color: var(--white-black-color-1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eg-hf__desc {
    display: none;
}

.eg-hf__date {
    display: none;
    margin: 0;
    color: var(--grey-color-3);
}

/* Tag clamp */
.eg-hf .item-tag {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover */
.eg-hf__card:hover .eg-hf__title {
    text-decoration: underline;
    text-decoration-color: var(--white-black-color-1);
    text-decoration-thickness: 1.25px;
    text-underline-offset: 1.25px;
}

/* Badges (reuse existing markup) */
.eg-hf .editors-choice-badge,
.eg-hf .pinned-tag {
    display: none;
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
}

@media (max-width: 1150px) {
    .eg-hf__title {
        font-size: var(--ft-19-17);
        line-height: 1.3;
    }
}

@media (max-width: 600px) {
    .eg-hf__title {
        font-size: var(--fm-17-15);
    }
}

/* Footer tone parity when inside .article-footer */
.article-footer :where(.eg-hf, .eg-hf__row, .eg-hf__card) {
    --hf-surface-2: var(--section-darkest-background-color);
}

/* Rail placement: make the horizontal feed span MAIN + RIGHT in side/grid layouts */
.article-section.layout-grid > .eg-hf {
    grid-column: 2 / -1;
}

@media (max-width: 1800px) {
    .article-section.layout-grid > .eg-hf {
        grid-column: 1 / -1;
    }
}

.article-section.layout-side > .eg-hf {
    grid-column: 1 / -1;
}