/* Main Blog Page */
.blog-cards {
    max-width: var(--width-996);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-64);
}

.blog-card {
    background-color: var(--color-yellow-background);
    border-radius: var(--radius-md);
    width: var(--width-384);
    height: var(--width-384);
    text-decoration: none;
    color: var(--color-black-text);
    text-align: center;
    display: flex; /* make sure the content fills the card */
    box-shadow: var(--shadow-bottom-left);
    transition: var(--transition);
}

.blog-content {
    padding: var(--space-12) var(--space-24);
    display: flex;
    flex-direction: column;
    gap: auto; /* space distributes automatically */
    justify-content: space-evenly; /* spreads items evenly vertically */
    align-items: center;
    width: 100%;
}

.blog-card-title {
    font-weight: var(--font-main-medium);
}

.blog-content img {
    width: 250px;
    max-height: 230px;
    /* border-radius: var(--radius-sm); */
}

.card-cta {
    font-weight: var(--font-main-medium);
    background-color: var(--color-yellow);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-12);
    box-shadow: var(--shadow-bottom);
    transition: var(--transition-fast);
}

.card-cta:hover {
    box-shadow: var(--shadow-bottom-blur);
}

.blog-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-bottom-left-yellow);
}

@media (max-width: 400px) {
    .blog-card {
        max-width: var(--width-384);
        width: 100%;
        max-height: var(--width-384);
        /* height: 100%; */
    }

    .blog-content img {
        max-width: 250px;
        width: 100%;
    }
}

/* Article Styles */
.article-hero img{
    max-width: var(--width-384);
    width: 100%;
    margin-top: var(--space-24);
    box-shadow: var(--shadow-bottom-left);
}

.article-hero video{
    max-width: var(--width-384);
    width: 100%;
    margin-top: var(--space-24);
    box-shadow: var(--shadow-bottom-left);
}

.article-hero small {
    max-width: var(--width-384);
    margin-top: var(--space-8);
    text-align: center;
}

.article-content {
    text-align: left;
    gap: var(--space-24);
    width: 100%;
}

.paragraph-title {
    font-weight: var(--font-main-medium);
    width: 100%;
    text-align: left;
    font-size: var(--font-28);
}

.paragraph-title:not(:first-of-type) {
    margin-top: var(--space-64);
}

.paragraph-text {
    width: 100%;
    text-align: left;
    /* font-size: var(--font-20); */
}

.text-bold {
    font-weight: var(--font-main-medium);
}

.paragraph-text span {
    font-weight: var(--font-main-medium);
}

.paragraph-signature {
    margin-top: var(--space-48);
    font-weight: var(--font-main-medium);
    font-size: var(--font-20);
}

.blog-cta h4{
    margin-top: 0;
}

.related-articles .paragraph-title {
    margin-bottom: var(--space-48);
}

.related-articles .paragraph-text {
    display: flex;
    align-items: center;
}

.related-articles .paragraph-text:not(:last-of-type) {
    margin-bottom: var(--space-24);
}

.related-articles .paragraph-text i {
    margin-right: var(--space-12);
    color: var(--color-light-green);
    /* transform: rotate(deg); */
}

.blog-card-image-wrapper {
    position: relative;
    display: inline-block;
}

.blog-card-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.blog-card-image-wrapper .video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.blog-card-image-wrapper:hover .video-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    color: rgba(255, 255, 255, 1);
}