/* ==========================================
   TDOGSPH PREMIUM WIDGET SYSTEM
========================================== */

/* ==========================================
   WIDGET GRID
========================================== */

.dashboard-widgets{

    display:grid;

    grid-template-columns:repeat(12,1fr);

    gap:24px;

    margin-top:32px;

}

/* ==========================================
   WIDGET
========================================== */

.dashboard-widget{

    background-image:var(--dashboard-card-bg);

    background-repeat:no-repeat;

    background-position:center;

    background-size:100% 100%;

    border-radius:32px;

    padding:30px;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

    overflow:hidden;

    position:relative;

}

.dashboard-widget:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

/* ==========================================
   WIDTH HELPERS
========================================== */

.widget-3{

    grid-column:span 3;

}

.widget-4{

    grid-column:span 4;

}

.widget-6{

    grid-column:span 6;

}

.widget-8{

    grid-column:span 8;

}

.widget-12{

    grid-column:span 12;

}

/* ==========================================
   HEADER
========================================== */

.dashboard-widget-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.dashboard-widget-title{

    margin:0;

    color:var(--primary);

    font-family:'Cormorant Garamond', serif;

    font-size:34px;

    font-weight:700;

}

.dashboard-widget-subtitle{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:15px;

}

/* ==========================================
   CONTENT
========================================== */

.dashboard-widget-content{

    color:var(--text-primary);

}

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

@media(max-width:1200px){

    .widget-3,
    .widget-4,
    .widget-6,
    .widget-8{

        grid-column:span 12;

    }

}