/* --- LIST VIEW OVERRIDES --- */

/* 1. Disable Tabled.js scrolling/wrapping */
#catalogue.view-list .tabled {
    overflow: visible !important;
    padding: 0 !important;
}
#catalogue.view-list .tabled__wrapper {
    overflow: visible !important;
    display: block;
}
#catalogue.view-list .tabled__navigation {
    display: none !important;
}
#catalogue.view-list .tabled:before,
#catalogue.view-list .tabled:after {
    display: none;
}

#catalogue.view-list .tabled__table {
    border: 0px;
}

/* 2. Transform Table Rows into Cards */
#catalogue.view-list table, 
#catalogue.view-list tbody, 
#catalogue.view-list tr {
    display: block;
    width: 100%;
}

#catalogue.view-list tr {
    /* margin-bottom: 1.5rem; */
    padding: 0;
    background: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: grid;
    /* flex-wrap: wrap; */
    /* gap: 0.5rem; */
    padding-bottom: 1.5rem;
}

/* Hide Header in List View */
#catalogue.view-list thead {
    display: none;
}

/* 3. Transform Cells */
#catalogue.view-list td, 
#catalogue.view-list th {
    text-align: left;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--col);
    border-right: 1px solid var(--col);
    padding: 0;
    min-width: auto !important;
    display: block;
    grid-template-columns: 12rem 1fr;
}

#catalogue.view-list td span {
    padding: 0;
    grid-column-start: 2;
} 

#catalogue.view-list th.id {
    background-color: var(--col);
    color: var(--bg);
    font-family: monospace;
    padding: 5px;
    font-size: 0.75rem;
}
/* 4. Hard-coded Labels via Pseudo-elements */
/* Format: "label: " */
/* #catalogue.view-list th.id::before       { content: "ID"; } */
#catalogue.view-list td.city::before     { content: "City"; }
#catalogue.view-list td.date_of_events::before { content: "Date of event(s)"; }
#catalogue.view-list td.time_of_events_formatted::before { content: "Time of event(s)"; }
#catalogue.view-list td.locations::before { content: "Location(s)"; }
#catalogue.view-list td.categories::before { content: "Categories"; }
#catalogue.view-list td.description::before { content: "Description"; }
#catalogue.view-list td.media::before    { content: "Media"; }
#catalogue.view-list td.created_at::before { content: "Created at"; }

/* Hiding the unformatted time */
#catalogue.view-list td.time_of_events { display: none; }


/* Style the label text */
#catalogue.view-list td::before, 
#catalogue.view-list th::before {
    display: inline flow-root;
    background-color: var(--col); 
    color: var(--bg);
    font-family: monospace;
    font-size: 0.75rem;
    padding: 5px;
    width: 10rem !important;
    margin-right: 10px;
}
#catalogue.view-list th:nth-child(2) {
    border: 1px dotted red;
}


/* 5. Special Handling for Description (Full Width) */
#catalogue.view-list td.description, 
#catalogue.view-list th.description {
    /* flex-basis: 100%; */
    order: 99;        /* Push to the very end */
}

#catalogue.view-list td.description .desc-toggle, 
#catalogue.view-list th.description .desc-toggle {
    display: inline;
}


#catalogue.view-list td.description::before, 
#catalogue.view-list th.description::before {
    width: 10rem; 
}