/*
 * Styles for the [latest_posts_custom] shortcode (Post Layout)
 */

/* RESET */
#ast-scroll-top {
    background-color: #499a33;
}

.latest-posts-wrapper,
.latest-posts-grid,
.featured-post,
.grid-post {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* MAIN WRAPPER (2 columns) */
.latest-posts-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    align-items: stretch;
    font-family: Arial, sans-serif;
    line-height: 1.2;
}

/* FEATURED POST STYLES */
.latest-posts-wrapper .featured-post {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;

    /* height: 450px;  */
}

/* RIGHT GRID */
.latest-posts-grid {
    flex: 0 0 50%;
    width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px;  /* Fixed height for grid rows */
    gap: 20px;
}

/* GRID POST STYLING */
.latest-posts-grid .grid-post {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
}

/* FIRST ONE FULL WIDTH */
.latest-posts-grid .grid-post.full {
    grid-column: 1 / 3;
}

/* GRADIENT OVERLAY */
.featured-post::before,
.latest-posts-grid .grid-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(40, 40, 40 ,0.35) 0%,
        rgba(0,0,0,0.85) 100%
    );
    z-index: 1;
}

/* Post content and links are inside the shortcode function, but we need to style the wrapper (.post-overlay) */
/* Adjusting the content positioning based on the shortcode output structure */

/* TITLE POSITION */
.featured-post .post-overlay,
.grid-post .post-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    /* No background here, using ::before for gradient */
    padding: 20px; /* Ensures padding around text/button */
    z-index: 2; /* Must be above ::before gradient */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Hide default margin for title and move it up */
.featured-post .post-title,
.grid-post .post-title {
    margin: 0 0 10px 0;
    font-family: "Minecrafter", Sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #F7F7F7;
}
p.post-excerpt {
    color: #fff;
    font-family: 'Inter';
    font-size: 15px;
    line-height: 24px;
}
/* BUTTON STYLING AND POSITIONING */
.read-more {
    background-color: transparent;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    background-image: linear-gradient(90deg, #3C8527 0%, #18689D 100%);
    border-radius: 3px 3px 3px 3px;
    width: 106px;
    padding: 11px 12px;
    color: #fff;
    border: 1px solid #3C8527;
}
.read-more:hover {
    background: #e0e0e004;
    color: #fff;
    border: 1px solid #3C8527;
}
img.readmore-icon {
    width: 10px;
}

/* universal grid for category pages */

/* GRID */
.cat-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Post Cards */
.cat-posts-grid .featured-post {
    width: 100%;
    height: 380px;
    position: relative;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: 0.3s ease;
}

.featured-post:hover {
    transform: translateY(-5px);
}

/* Gradient Overlay */
.featured-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(30,30,30,0.4), rgba(0,0,0,0.9));
    z-index: 1;
}

/* Overlay Content */
.post-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 22px;
    z-index: 2;
    color: #fff;
}

.post-title {
    margin: 0 0 10px 0;
    font-family: "Minecrafter", sans-serif;
    font-size: 22px;
    color: #fff;
}

.post-excerpt {
    font-family: 'Inter';
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 12px;
}

.explore-btn{
    background-color: transparent;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    background-image: linear-gradient(90deg, #3C8527 0%, #18689D 100%);
    border-radius: 3px 3px 3px 3px;
    width: 31%;
    padding: 7px 12px;
    color: #fff;
    border: 1px solid #3C8527;
    text-decoration: none !important;
}
.explore-btn:hover {
    background: #e0e0e004;
    color: #fff;
    border: 1px solid #3C8527;
}

/* Tabs */
.cat-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.cat-tab {
    background: #434343;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.cat-tab.active,
.cat-tab:hover {
    background: #499A32;
}

/* No posts message */
.cat-no-posts {
    color: #c00;
    font-weight: bold;
    padding: 10px 0;
}

/* universal grid for category pages */


/* single postbpage */

/* BANNER / THUMBNAIL */
.post-banner {
    margin-top: -7%;
    width: 100%;
    height: 50vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.post-banner h1 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 48px;
    text-align: center;
    padding: 0 20px;
    font-family: "Minecrafter", Sans-serif;
    font-weight: 400;
    color: #F7F7F7;
}

/* CONTENT AREA */
.single-post-content {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.8;
    font-family: "Inter", Sans-serif;
}

/* ACF FIELD STYLES */
.acf-field {
    margin-bottom: 25px;
}
	.img-div {
    display: flex;
    gap: 30px;
}
	.acf-field ul {
    margin: 0 0 0.5em 1em;
}

.acf-field img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}
/* single postbpage */

/* RESPONSIVE */

@media screen and (min-width: 2200px) {
	.elementor-7 .elementor-element.elementor-element-df9226d > .elementor-background-overlay {
        background-position: 0px 90px !important;
        background-size: cover !important;
}

}
@media (max-width: 768px) {
	.single-post .ast-container{
		padding:0px !important;
	}
	.post-banner{
		margin-top:-20%;
	}
    .latest-posts-wrapper {
        flex-wrap: wrap;
    }
	

    .featured-post,#blogs .latest-posts-wrapper .featured-post {
        width: 100%;
        flex: 0 0 100%;
        height: 350px;
    }

    .latest-posts-grid {
        width: 100%;
        flex: 0 0 100%;
        grid-template-columns: 1fr; /* Single column on mobile */
        grid-template-rows: 250px 250px 250px; /* All secondary posts stacked */
    }

    .latest-posts-grid .grid-post.full {
        grid-column: 1 / -1;
    }
    .java-posts-grid,.cat-posts-grid {
        grid-template-columns: 1fr;
    }
	.cat-tabs {
    padding-right: 20px !important;
    display: block;
    column-count: 3;
    gap: 20px;
    margin-bottom: 30px;
}
	.cat-tab{
		width: 100%;
		margin-bottom:20px;
		    padding: 10px 8px;
	}
}