/**
 * [ifa_latest_posts] — an intro column beside the newest posts, one row.
 *
 * The cards are the knowledge hub's own (css/ifa-cards.css); only the layout
 * around them lives here. The row never stacks: below 768px it scrolls
 * sideways instead, with the next card peeking in so it reads as scrollable.
 */

.ifa-latest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 28px;
    align-items: stretch;
}

.ifa-latest__intro {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Divi pads every heading and paragraph; the gap above does the spacing. */
.ifa-latest__eyebrow,
.ifa-latest__title,
.ifa-latest__text {
    margin: 0;
    padding: 0;
}

.ifa-latest__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ifa-dark-teal);
}

.ifa-latest__title {
    font-size: 31px;
    line-height: 1.2;
    color: var(--ifa-dark-blue);
}

/* Grows so the button sits on the cards' bottom edge when the intro is the
   shorter side of the row. */
.ifa-latest__text {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ifa-dark-blue);
}

.ifa-latest__button {
    align-self: flex-start;
}

/* Divi gives content lists bullets and an indent at higher specificity. */
.ifa-latest ul.ifa-latest__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 28px;
}

.ifa-latest__item {
    display: flex;
    min-width: 0;
    padding: 0;
}

.ifa-latest__card-title {
    flex-grow: 1;
    padding: 0;
}

/* Four lines at most, so one long headline cannot set the height of the
   whole row. The full title is still the link text, so nothing is lost to a
   screen reader. */
.ifa-latest__card-title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.ifa-latest__card .ifa-search-card__meta {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .ifa-latest {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .ifa-latest ul.ifa-latest__list {
        grid-auto-columns: 80%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Room for the card's hover lift, which the scroller would clip. */
        padding: 4px 0 12px !important;
    }

    .ifa-latest__item {
        scroll-snap-align: start;
    }
}