/* Posts section (homepage #posts) and Recent Posts (footer #recent-posts) – use theme variables for dark mode */

/* Homepage Posts section (#posts) – match Projects card spacing */
#posts .card {
    background-color: var(--secondary-color) !important;
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
    border-radius: 1rem;
    cursor: context-menu;
    overflow: hidden;
    border: none;
}

#posts .card .card-body {
    padding: 1rem !important;
}

#posts .card .post-footer,
#posts .card .card-footer {
    padding: 1rem !important;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

#posts .card a {
    text-decoration: none;
}

#posts .card a h5,
#posts .card .card-title {
    color: var(--text-color) !important;
}

#posts .card:hover {
    transition: all 0.3s ease-out;
    transform: translateY(-7px);
}

#posts .card-text,
#posts .card-text * {
    background-color: var(--secondary-color) !important;
    color: var(--text-secondary-color) !important;
}

#posts .post-footer,
#posts .card-footer,
#posts .card .card-body.bg-transparent {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
    border-top: 1px solid rgba(15, 80, 100, 0.16);
}

#posts .post-footer a,
#posts .card-footer a {
    background-color: var(--secondary-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--primary-color) !important;
    transition: none;
}

#posts .post-footer a:hover,
#posts .card-footer a:hover {
    color: var(--primary-color) !important;
}

#posts .card > .card-header {
    padding: 0 !important;
    border: none !important;
    background-color: var(--secondary-color) !important;
}

#posts .card > .card-header .card-img-top {
    width: 100%;
    height: 250px !important;
    object-fit: cover;
    background-color: transparent !important;
}

#posts h3 {
    color: var(--text-color) !important;
}

#posts .btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#posts .btn-outline-primary:hover {
    color: var(--secondary-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Footer Recent Posts (#recent-posts) – ensure dark mode */
#recent-posts .h3,
#recent-posts h3 {
    color: var(--text-secondary-color) !important;
}

#recent-posts .card {
    background-color: var(--secondary-color) !important;
    border-radius: .75rem;
    border: none;
}

#recent-posts .card:hover {
    transition: all 0.3s ease-out;
    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
}

#recent-posts .card-text,
#recent-posts .card-text * {
    background-color: var(--secondary-color) !important;
    color: var(--text-secondary-color) !important;
}

#recent-posts .card .card-body {
    background-color: var(--secondary-color) !important;
}

#recent-posts .card .card-title,
#recent-posts .card a h5 {
    color: var(--text-color) !important;
}

#recent-posts .card-footer {
    background-color: var(--background-color) !important;
    padding: .8em .7em;
    border: 1px solid var(--secondary-color);
    color: var(--text-color) !important;
}

#recent-posts .card-footer a {
    color: var(--text-secondary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: var(--background-color) !important;
}

#recent-posts .card-footer a:hover {
    color: var(--primary-color) !important;
}

#recent-posts .card > .card-header {
    padding: 0 !important;
    border: none !important;
    background-color: var(--secondary-color) !important;
}

#recent-posts .card > .card-header .card-img-top {
    width: 100%;
    height: 250px !important;
    object-fit: cover;
    background-color: transparent !important;
}