/*
 * Blog card - Figma `1:4235` (archive grid) and `1:4383` (Related Articles).
 *
 * The frame draws one component for both, so this is its own file rather than
 * part of either section's stylesheet: the archive block and the single post
 * both enqueue it, and neither owns it.
 *
 * 442.67 x 581 at 1440, of which the image is 442 x 313. Below it a 24px gap,
 * then the date chip, 24px, the title, and 40px down to the Read article link.
 */

/*
 * The frame lines the Read article links up across a row, whatever the titles
 * above them do, so the card fills its row or slide and the CTA is pushed to
 * the bottom of it - see .blog-card-cta.
 */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-media {
    display: block;
    aspect-ratio: 443 / 313;
    overflow: hidden;
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    padding-top: 24px;
}

.blog-card-date {
    background: var(--color-white-100);
    color: var(--Dark-Grey);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 8px;
    margin-bottom: 24px;
}

/*
 * H2 at 1440 down to the frame's 28 mobile cut. Lyon has only 400 and 700, and
 * the frame sets this in Regular.
 */
.blog-card-title {
    font-family: var(--font-primary);
    font-size: clamp(28px, 2.639vw, 38px);
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
}

.blog-card-title a {
    color: var(--color-shark);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.blog-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-shark);
    /* 40 clear of the title, and further if a shorter title leaves room. */
    margin-top: auto;
    padding-top: 40px;
}

.blog-card-cta .icon-cta-arrow {
    width: 15px;
    height: 15px;
    flex: none;
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
    /* The mobile card runs the CTA 24px under the title, not 40. */
    .blog-card-cta {
        padding-top: 24px;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    /*
     * The mobile frame keeps the image at 313 tall while the card narrows to
     * 343, so the crop is squarer here than the 443/313 it has on desktop.
     */
    .blog-card-media {
        aspect-ratio: 343 / 313;
    }
}