/* ==========================================================================
   BLOG MODULE — MODERN GRID
   Styles the default Divi Blog module in grid layout.
   No custom class needed — targets Divi 5 blog module markup.
   Scroll animations apply automatically.

   Title color defaults to turquoise via --tv-blog-title-color.
   To change it, override that variable in style.css :root.

   Divi 5 markup structure:
   .et_pb_blog
     .et_pb_ajax_pagination_container
       .et_pb_posts.et_grid_module
         article.et_pb_post
           .et_pb_image_container > a.entry-featured-image-url > img
           h2.entry-title > a
           p.post-meta > span.entry-categories > a
           .post-content > .post-content-inner > p
   ========================================================================== */

/* ---------- Grid container ---------- */
.et_pb_blog .et_grid_module {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

/* ---------- Individual post card ---------- */
.et_pb_blog .et_grid_module .et_pb_post {
    width: calc(33.333% - 30px);
    margin: 15px;
    background: var(--tv-snow, #FFFBFE);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(25, 25, 25, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    float: none;
}

.et_pb_blog .et_grid_module .et_pb_post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(25, 25, 25, 0.1);
}

/* ---------- Featured image ---------- */
.et_pb_blog .et_grid_module .et_pb_image_container {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.et_pb_blog .et_grid_module .et_pb_image_container a {
    display: block;
    height: 100%;
}

.et_pb_blog .et_grid_module .et_pb_image_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.et_pb_blog .et_grid_module .et_pb_post:hover .et_pb_image_container img {
    transform: scale(1.03);
}

/* ---------- Post title ---------- */
/* Targets .entry-title regardless of heading level (h1–h6).
   Uses --tv-blog-title-color so you can change it from style.css
   without editing this file. Defaults to turquoise. */
.et_pb_blog .et_grid_module .et_pb_post .entry-title {
    font-family: var(--tv-font-heading, 'Poppins', sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 16px 24px 0;
    padding: 0;
}

.et_pb_blog .et_grid_module .et_pb_post .entry-title a {
    color: var(--tv-blog-title-color, var(--tv-turquoise, #00CFC1));
    text-decoration: none;
    transition: color 0.2s ease;
}

.et_pb_blog .et_grid_module .et_pb_post .entry-title a:hover {
    color: var(--tv-carbon-black, #191919);
}

/* ---------- Post meta (categories) ---------- */
.et_pb_blog .et_grid_module .et_pb_post .post-meta {
    font-family: var(--tv-font-body, 'Lato', sans-serif);
    font-size: 0.8rem;
    margin: 6px 24px 0;
    padding: 0;
    letter-spacing: 0.02em;
}

.et_pb_blog .et_grid_module .et_pb_post .post-meta a {
    color: var(--tv-dusty-grape, #675C99);
    text-decoration: none;
}

.et_pb_blog .et_grid_module .et_pb_post .post-meta a:hover {
    color: var(--tv-turquoise, #00CFC1);
}

/* ---------- Excerpt ---------- */
.et_pb_blog .et_grid_module .et_pb_post .post-content {
    font-family: var(--tv-font-body, 'Lato', sans-serif);
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 12px 24px 24px;
    margin: 0;
}

.et_pb_blog .et_grid_module .et_pb_post .post-content .post-content-inner {
    padding: 0;
    margin: 0;
}

/* ---------- Read more link ---------- */
.et_pb_blog .et_grid_module .et_pb_post .more-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--tv-font-heading, 'Poppins', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tv-turquoise, #00CFC1);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.2s ease;
}

.et_pb_blog .et_grid_module .et_pb_post .more-link:hover {
    color: var(--tv-dusty-grape, #675C99);
}

/* ---------- Divi overlay icon on image hover ---------- */
.et_pb_blog .et_grid_module .et_overlay {
    border-radius: 0;
}

/* ---------- Pagination ---------- */
.et_pb_blog .pagination {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    padding: 0 15px;
}

.et_pb_blog .pagination a,
.et_pb_blog .pagination span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 3px;
    border-radius: 4px;
    font-family: var(--tv-font-body, 'Lato', sans-serif);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .et_pb_blog .et_grid_module .et_pb_post {
        width: calc(50% - 30px);
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .et_pb_blog .et_grid_module .et_pb_post {
        width: calc(100% - 30px);
    }

    .et_pb_blog .et_grid_module .et_pb_post:hover {
        transform: none;
    }

    .et_pb_blog .et_grid_module .et_pb_post .post-content {
        padding: 10px 18px 18px;
    }

    .et_pb_blog .et_grid_module .et_pb_post .entry-title {
        margin: 14px 18px 0;
    }

    .et_pb_blog .et_grid_module .et_pb_post .post-meta {
        margin: 6px 18px 0;
    }
}