/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.horizontal-cards {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* header — title on the left, optional button to its right */

.horizontal-cards__header.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.horizontal-cards__buttons {
    flex-shrink: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* search & blogs archive pages */

.horizontal-cards--search,
.horizontal-cards--blogs {
    padding-top: 12px;
}

.horizontal-cards--search .horizontal-cards__header.section-header,
.horizontal-cards--blogs .horizontal-cards__header.section-header {
    margin-bottom: 26px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* cards: */

.horizontal-cards__cards {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.horizontal-cards__card {
    border-radius: var(--box-border-radius-sm);
    overflow: hidden;

    display: flex;
    gap: 0;
    align-items: stretch;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* image */

.horizontal-cards__card__image {
    flex: 0 0 40%;
    overflow: hidden;
}

.horizontal-cards__card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.horizontal-cards__card__content {
    flex: 0 0 60%;
    padding: 30px 36px;

    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

/*blogs colors all dark blue*/
.horizontal-cards--blogs .horizontal-cards__card__content {
    background: var(--blue-dk);
}

/*default manual colors alternating dark blue and dark purple*/
.horizontal-cards--manual-content .horizontal-cards__card--default-color:nth-child(1n) .horizontal-cards__card__content {
    background: var(--blue-dk);
}

.horizontal-cards--manual-content .horizontal-cards__card--default-color:nth-child(2n) .horizontal-cards__card__content {
    background: var(--purple-dk);
}

/*custom manual colors*/
.horizontal-cards--manual-content .horizontal-cards__card--custom-color--blue-dk .horizontal-cards__card__content {
    background: var(--blue-dk);
}

.horizontal-cards--manual-content .horizontal-cards__card--custom-color--purple-dk .horizontal-cards__card__content {
    background: var(--purple-dk);
}

.horizontal-cards--manual-content .horizontal-cards__card--custom-color--purple-md .horizontal-cards__card__content {
    background: var(--purple-md);
}

.horizontal-cards__card__content>*,
.horizontal-cards__card__content>*>* {
    color: var(--white);
    margin: 0;
}

.horizontal-cards__card__date {
    font-family: "Cachet";
    font-size: 18px;
    font-weight: 600;
}

.horizontal-cards__card__description,
.horizontal-cards__card__content p,
.horizontal-cards__card__content li {
    font-weight: 300;
}

.horizontal-cards__card__content p {
    margin-bottom: 8px;
}

.horizontal-cards__card__content p:last-child {
    margin-bottom: 0;
}

.horizontal-cards__card__buttons {
    margin-top: 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile */

@container (max-width: 715px) {
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* header — stack the button under the title */

    .horizontal-cards__header.section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* cards */

    .horizontal-cards__card {
        flex-direction: column;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* image */

    .horizontal-cards__card__image {
        flex: 0 0 100%;
    }

    .horizontal-cards__card__image img {
        max-height: 200px;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* content */

    .horizontal-cards__card__content {
        flex: 0 0 100%;
        padding: 20px 25px;
    }
}