/* Trip list-view row layout.
 *
 * One flex row per place, every element in its own slot:
 *
 *   [drag handle] [thumb 64px] [name  flex:1 / min-width:0] [Book] [...]
 *
 * The name column is the only thing that flexes; `min-width: 0` lets it
 * shrink below its content width so the title wraps (max two lines, then
 * an ellipsis) instead of pushing under the Book button. Everything else
 * is `flex: none` so the title can never grow under it and the buttons can
 * never be laid on top of the text.
 *
 * Selectors carry the grid ID so they win over the many class-only
 * `.list-view` rules spread across core.css / responsive.css / the template
 * inline styles, independent of load order. Applies at every viewport. */

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder:not(.filtered-hidden):not(.triplist-card-skeleton) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Drag handle — fixed slot. Visual stays compact; the ::before in
   triplist-list-reorder.css extends the touch target. */
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-list-drag-handle {
    flex: none !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
}

/* Thumbnail — fixed 64px square for both DND video cards (.moodboard-item)
   and Google Places / camera-roll placeholder cards (.video-thumbnail). */
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder > .moodboard-item,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder.placeholder-card > .video-thumbnail,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder.placeholder-card > .video-thumbnail.placeholder-thumbnail {
    flex: none !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    align-self: center !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder.placeholder-card > .video-thumbnail img,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder > .moodboard-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Everything right of the thumbnail shares the remaining width. */
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-details,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-title-actions-container {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-details {
    display: block !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-title-actions-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important; /* the 12px before Book */
}

/* Place name — the only flexible slot. */
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row > a,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row .moodboard-item-link {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row .video-title,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row p.video-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: break-word !important; /* only split a word that cannot fit a whole line */
    word-break: normal !important;
    hyphens: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row .video-sub-title,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .video-title-row .video-note {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Book + … — fixed slots, never shrink. */
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions {
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .triplist-book-mobile,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions a.triplist-book-mobile,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .placeholder-booking-cta,
#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .triplist-book {
    flex: none !important;
    position: static !important;
    order: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    max-width: none !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .video-item-menu-wrapper {
    flex: none !important;
    order: 2 !important;
    margin: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .triplist-card-menu-toggle {
    flex: none !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
}

/* Mobile: tighten the fixed slots so the name keeps a usable width on a
   390px viewport (handle 28 + thumb 64 + Book + … already eat ~190px). */
@media (max-width: 480px) {
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder:not(.filtered-hidden):not(.triplist-card-skeleton) {
        gap: 10px !important;
    }
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-list-drag-handle {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
    }
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .triplist-book-mobile,
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions a.triplist-book-mobile,
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .placeholder-booking-cta {
        padding: 0 10px !important;
        font-size: 13px !important;
        height: 30px !important;
    }
    /* … chip narrows to 32px; its 40×40 ::before keeps the tap target. */
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .video-item-menu-wrapper,
    #triplist-main-grid.triplist-content-grid.list-view .moodboard-holder .triplist-actions .triplist-card-menu-toggle {
        width: 32px !important;
        min-width: 32px !important;
    }
}