/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    
    /* Gaps and Margins */
    --wps-grid-gap: 1.5rem;
    --wps-grid-margin-top: 1.5rem;
    --wps-grid-margin-bottom: 1.5rem;

    /*
    --wps-grid-gap: 2rem;
    --wps-grid-margin-top: 2rem;
    --wps-grid-margin-bottom: 2rem;
    */

}

/* WPS Grid CSS */
.wps-grid 
{
    display: grid;
    width: 100%;

    /* Desktop: Use all available space */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        
}

.wps-grid-col {
    width: 100%;
}

/* Mobile: Stack columns vertically */
@media (max-width: 767px) {
    .wps-grid {
        grid-template-columns: 1fr;
    }
}

/* VARIATIONS */
.wps-grid-gap
{
    gap: var(--wps-grid-gap);
}
.wps-grid-margin-top 
{
    margin-top: var(--wps-grid-margin-top);
}
.wps-grid-margin-bottom 
{
    margin-bottom: var(--wps-grid-margin-bottom);
}

/* Vertical alignment helpers using CSS Grid place-items */
.wps-grid-col-valign-top {
    place-self: start;
}

.wps-grid-col-valign-middle {
    place-self: center;
}

.wps-grid-col-valign-bottom {
    place-self: end;
}


/*
// -------------------------------------------------------------------
// Debug 
// -------------------------------------------------------------------
*/
.wps-grid-debug
{
    outline: 4px dashed lightblue;        
}

.wps-grid-debug > .wps-grid-col 
{
    outline: 2px dashed pink;        
}