/* ===== Frame Overhead ===== */
.dp-frame__overhead-wrap {
    background:var(--surface);
    border:2px solid var(--stroke);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}

.dp-frame__overhead{
    height: 75px;
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--primary);
    padding:18px 22px;
    border-top-left-radius:var(--radius-lg);
    border-top-right-radius:var(--radius-lg);
    font-weight:700;
    font-size:1.3rem;
    color:white;
    justify-content: space-between;
}
.dp-frame__overhead div{
    color: white;
}

.dp-frame__overhead-button{
    margin-left: auto;
}

.dp-frame__divider {
    height:1px;
    background:var(--stroke);
    margin:10px 0 22px;
}

.dp-frame__body{
    padding:28px;
    background: var(--surface);
    border-bottom-left-radius:var(--radius-lg);
    border-bottom-right-radius:var(--radius-lg);
}

.dp-frame__warning-no-content {
    font-size: 18px;
    color: var(--muted);
    text-align: center;
    padding: 40px 0;
    grid-column: 1 / 5;
}

/* ===== Cards view ===== */

.dp-frame__cards-container {
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:28px;
    align-items: stretch;
    transition: gap 0.15s ease;
}

.dp-frame__card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    height: 100%;
    border:2px solid var(--stroke);
    border-radius: 16px;
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    position:relative;
    will-change:transform, opacity;
}

.dp-frame__card:hover {
    transform: translateY(-3px) scale(1);
    box-shadow:0 8px 24px rgba(0,0,0,.14);
}

.dp-frame__card-overhead{
    height:48px;
    background:var(--primary);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:10px 12px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    flex-shrink: 0;
}

.dp-frame__card-img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-bottom:2px solid var(--stroke);
    flex-shrink: 0;
}

.dp-frame__card-text {
    padding:16px 18px 22px;
    flex: 1;
    display:flex;
    flex-direction: column;
}

.dp-frame__card-text h3{
    margin:0 0 6px;
    font-weight:800;
    font-size:22px;
    color:var(--primary);
}

.dp-frame__card-text p{
    margin:0;
    font-size:14px;
    color:var(--text-dim);

    display:-webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dp-frame__card-text:hover, .dp-frame__card-img:hover {
    cursor: pointer;
}

/* ===== Page ratio ===== */


@media (max-width: 1100px){
    nav ul{ gap:24px }
    .dp-frame__cards-container{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 850px){
    .dp-frame__cards-container{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {

    .dp-frame__cards-container {
        grid-template-columns: 1fr;
    }

    .dp-frame__card-text h3 {
        font-size: 18px;
    }

    .dp-frame__card-text p {
        font-size: 13px;
    }
}

@media (max-width: 1100px), (max-width: 850px), (max-width: 560px){
    .dp-frame__card{
        transform: scale(0.98);
    }
}