/**
 * Theme Name:     ColorMag Child
 * Author:         ThemeGrill
 * Template:       colormag
 * Text Domain:	   colormag-child
 * Description:    ColorMag is always the best choice when it comes to magazine, news, and blog WordPress themes. You can create elegant and modern websites for news portals, online magazines, and publishing sites. With ColorMag’s 8 and counting free starter demos for health, food, entertainment, sports, and fashion industries, building a magazine style website is super easy. Best of all, the ColorMag WordPress theme offers multiple ad spaces in its layout. So, you can monetize your website by displaying ads in these slots without any fuss. And if you plan to sell products and services online, you can rely on the theme’s compatibility with WooCommerce. Some of its key features are: >> SEO Optimized >> Translation & RTL Ready >> Cross-browser Compatible >> Custom Widgets >> Responsive Design >> Sticky Menu. So, download the free ColorMag theme and create professional magazine websites quickly. You can get free support for ColorMag at https://themegrill.com/contact/ and check our demos at https://themegrilldemos.com/colormag/
 */
.full-width-post {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Optional: Center the text column if it's TOO wide */
.full-width-post .entry-content {
    max-width: 1200px; 
    margin: 0 auto;
}


/*------------------------ Category page for Programma Category --------------------------*/
/* ========================================================= */
/* 1. STRUCTURAL WRAPPER (Forces Vertical Stacking)          */
/* ========================================================= */
.programma-archive-wrapper {
    display: flex;
    flex-direction: column; /* This is the magic rule that stacks the rows */
    width: 100%;
    clear: both;
}

/* ========================================================= */
/* 2. STICKY POST (Row 1 - Full Width)                       */
/* ========================================================= */
.programma-sticky-row {
	display: block;
    width: 100%;
    margin-bottom: 3em; /* Creates breathing room before the grid starts */
}

/* Make sure the image scales responsively but respects theme max-widths */
.programma-sticky-post .sticky-image img {
    width: 80%;
    height: auto;
    display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Center the title under the sticky image, inheriting theme fonts */
.programma-sticky-post .sticky-title {
    text-align: center;
    margin-top: 0.5em;
}

/* ========================================================= */
/* 3. GRID POSTS (Row 2 - 3 Columns)                         */
/* ========================================================= */
.programma-grid-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4em; /* Space between grid items */
}

/* Create the uniform box for the image and overlay */
.programma-grid-post {
    position: relative;
    aspect-ratio: 4 / 4; /* Keeps all grid items exactly the same shape */
    overflow: hidden;
}

/* Ensure the link covers the whole box */
.programma-grid-post .grid-post-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Make the image fill the aspect-ratio box without stretching */
.programma-grid-post .grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================================= */
/* 4. GRID TITLE OVERLAY                                     */
/* ========================================================= */
.programma-grid-post .grid-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
	text-align: center;
    padding: 1.5em 1em 1em; /* Extra top padding for the gradient fade */
    
    /* Dark gradient so the white text is readable over any image */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff; /* Hardcoded to white to contrast with the dark gradient */
    box-sizing: border-box;
}

/* Inherit theme heading sizes, just ensure it behaves inside the box */
.programma-grid-post .grid-overlay-title span {
    display: block;
    line-height: 1.3;
	font-size: 20px;
}

/* ========================================================= */
/* 5. RESPONSIVE FALLBACKS                                   */
/* ========================================================= */
@media (max-width: 992px) {
    .programma-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .programma-grid-row {
        grid-template-columns: 1fr;
    }
}
/*------------------------------------------End Programma Category---------------------------------------------------*/