/* =============================================
   ARCHIVE GRID - 3 COLUMN CARDS
   ============================================= */

.category-filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 40px 0 30px;
    flex-wrap: wrap;
}
.filter-tab {
    padding: 12px 28px;
    border: 2px solid #d2b48c;
    color: #d2b48c;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s;
}
.filter-tab.active,
.filter-tab:hover {
    background: #d2b48c;
    color: #fff;
}

/* GRID CONTAINER */
.posts-archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}

/* EACH CARD */
.card-entry {
    flex: 0 0 calc(33.333% - 20px);   /* 3 columns with gap */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

/* Featured image */
.entry-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Category label */
.entry-meta-top {
    padding: 20px 25px 0;
    font-size: 13px;
    letter-spacing: 1px;
    color: #8a8a8a;
}

/* Hero Title */
.entry-title {
    padding: 0 25px;
    margin: 8px 0 12px;
    font-size: 44px;
    line-height: 1.3;
}

/* Post Title */
.type-post h2.entry-title {
    font-size: 22px;
}

/* Excerpt */
.entry-content {
    padding: 0 25px 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* CONTINUE READING */
.continue-reading-link {
    display: inline-block;
    margin: 0 25px 25px;
    color: #c06c84;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid #c06c84;
}
.continue-reading-link:hover {
    color: #a04c64;
    border-color: #a04c64;
}

/* EQUAL HEIGHT COVER IMAGES */
.entry-image {
    height: 280px;           /* ← change this number if you want taller/shorter cards */
    overflow: hidden;
    position: relative;
}

.entry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* this is the "cover" mode you asked for */
    display: block;
}

/* CUSTOM NO-POSTS MESSAGE */
.no-posts-message {
    text-align: center;
    padding: 80px 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    max-width: 600px;
    margin: 0 auto;
}

.no-posts-message br {
    display: block;
    margin: 8px 0;
}

/* Optional: slightly taller on very large screens */
@media (min-width: 1200px) {
    .entry-image {
        height: 300px;
    }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .card-entry {
        flex: 0 0 calc(50% - 15px);   /* 2 columns on tablets */
    }
}
@media (max-width: 640px) {
    .card-entry {
        flex: 0 0 100%;               /* 1 column on mobile */
    }
}