/* tt360/featured-article, ported from the prototype's own
   layout/thought-leadership.css (.tl-featured-article). Two-column card
   (image left, content right), collapsing to stacked at md. Not a reuse
   of .post-card/.feature-link-card: the one "hero" card on the page, wider
   and with its own author/read-time meta line neither of those have. */

.tl-featured-article {
    display: flex;
    margin-top: 32px;
    overflow: hidden;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 4px;
}

.tl-featured-article .media-placeholder {
    flex: 0 0 48%;
    margin: 0;
    padding: 0;
    aspect-ratio: 560 / 360;
    border: 0;
    border-radius: 0;
}

.tl-featured-article > img {
    display: block;
    flex: 0 0 48%;
    width: 48%;
    aspect-ratio: 560 / 360;
    object-fit: cover;
}

.tl-featured-article .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px;
}

/* Same recipe as .post-card .category (light-gold bg, charcoal text). */
.tl-featured-article .category {
    display: inline-block;
    padding: 4px 12px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    background-color: rgba(var(--light-gold), 1);
    border-radius: 999px;
}

.tl-featured-article .title {
    margin: 16px 0 0;
    font-size: 32px;
}

.tl-featured-article .excerpt {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.tl-featured-article .meta {
    margin: 8px 0 0;
    font-size: 13px;
    color: rgba(var(--warm-gray), 1);
}

.tl-featured-article .cta-button {
    margin-top: 20px;
}

/* md */
@media (max-width: 767.98px) {
    .tl-featured-article {
        flex-direction: column;
    }

    .tl-featured-article .media-placeholder,
    .tl-featured-article > img {
        flex-basis: auto;
        width: 100%;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .tl-featured-article .card-body {
        padding: 16px;
    }

    .tl-featured-article .cta-button {
        width: 100%;
    }
}