﻿/* ===== Engagement tile (FORCE fixed height + internal scroll) ===== */
.section-item-narrow.home-eng-tile[data-id="engagement"] {
    height: 378px !important; /* key: tile must be height-constrained */
    overflow: hidden !important; /* keep rounded corners clean */
    border-radius: 16px;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important; /* important inside flex/grid layouts */
}

    /* Header rows should not shrink */
    .section-item-narrow.home-eng-tile[data-id="engagement"] > .drag-handle,
    .section-item-narrow.home-eng-tile[data-id="engagement"] > .d-flex {
        flex: 0 0 auto !important;
    }

    /* The list is the scroll container */
    .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-list {
        flex: 1 1 auto !important;
        min-height: 0 !important; /* critical: allows overflow scroll */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Use block for reliability (prevents flex height quirks) */
        display: block !important;
        padding: 6px 10px 6px 2px; /* right padding makes scrollbar room */
    }

    /* Nice spacing between cards */
    .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-card {
        width: 100%;
        margin: 0 0 10px 0;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        overflow: hidden;
        display: block;
    }

    /* Logo clamp */
    .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-logoBox {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        border-radius: 12px;
        overflow: hidden;
        display: grid;
        place-items: center;
        padding: 8px;
        background: rgba(13,110,253,0.05);
        border: 1px solid rgba(13,110,253,0.12);
    }

        .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-logoBox > img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

    /* Optional scrollbar styling */
    .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-list::-webkit-scrollbar {
        width: 8px;
    }

    .section-item-narrow.home-eng-tile[data-id="engagement"] .home-eng-list::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 10px;
    }
