/* ========================= */
/* ADMIN / ENTRY VIEW (UNCHANGED) */
/* ========================= */

.dynamic-contents-container {
    margin: 20px;
}

    .dynamic-contents-container h2 {
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: bold;
    }

#contentTable {
    width: 100%;
    margin-bottom: 20px;
    table-layout: fixed;
    border-collapse: collapse;
}

    #contentTable th,
    #contentTable td {
        text-align: left;
        vertical-align: middle;
        padding: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
    }

        #contentTable th:nth-child(2),
        #contentTable td:nth-child(2) {
            width: 10%;
            text-align: center;
        }

        #contentTable th:nth-child(3),
        #contentTable td:nth-child(3) {
            width: 30%;
        }

        #contentTable th:nth-child(4),
        #contentTable td:nth-child(4) {
            width: 9%;
        }

        #contentTable th:nth-child(5),
        #contentTable td:nth-child(5) {
            width: 7%;
        }

        #contentTable th:nth-child(6),
        #contentTable td:nth-child(6) {
            width: 9%;
        }

/* ========================= */
/* HOME PAGE DISPLAY (FINAL) */
/* ========================= */

.dynamic-content-container {
    position: relative;
    overflow: hidden;
    padding: 10px;
}

/* GRID */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

/* CARD */
.content-card {
    display: flex;
    flex-direction: column;
    height: 320px; /* fixed height */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.2s ease;
}

    /* HOVER */
    .content-card:hover {
        transform: translateY(-5px);
    }

/* STICKY */
.sticky-content {
    border: 3px solid #ff9800;
    background: rgba(255, 152, 0, 0.08);
}

/* THUMBNAIL WRAPPER */
.thumbnail-wrapper {
    width: 100%;
    height: 160px;
    position: relative;
    /* 🔥 Center media properly */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 🔥 Background for letterboxing */
    background-color: #000; /* or #f5f5f5 if preferred */

    overflow: hidden;
}

/* IMAGE */
.content-thumbnail {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 🔥 show full image */
}

/* VIDEO */
.dynamic-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* 🔥 same behavior as image */
}

/* AD TAG */
.ad-tag {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
}

/* DETAILS */
.content-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: center;
}

    /* TITLE */
    .content-details h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* DESCRIPTION */
    .content-details p {
        font-size: 13px;
        margin: 0 0 8px 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex-grow: 1;
    }

/* LINK */
.content-link {
    margin-top: auto;
    font-size: 13px;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

    .content-link:hover {
        text-decoration: underline;
    }

/* NO CONTENT */
.no-content {
    text-align: center;
    font-size: 18px;
    color: #666;
}

/* ========================= */
/* ADMIN THUMBNAIL (UNCHANGED) */
/* ========================= */

.thumbnail-fixed,
video.thumbnail-fixed {
    width: 75px;
    height: 75px;
    object-fit: cover;
}