/* ORGANISM: ContentShowcase - grid note cards inside the carousels (loaded by the lego). */
[data-showcase] .view-mode-grid .note-card-header { height: 160px !important; padding: 0 !important; overflow: hidden !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
[data-showcase] .view-mode-grid .note-cover-container { width: 100% !important; height: 100% !important; padding: 0 !important; }
[data-showcase] .view-mode-grid .note-card-header img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; }
[data-showcase] .view-mode-grid .grid-meta-info { display: flex !important; }
[data-showcase] .view-mode-grid .list-meta-info { display: none !important; }
[data-showcase] .view-mode-grid .action-buttons-container { flex-direction: column; }

[data-showcase] .view-mode-grid .note-index-badge { position: absolute !important; top: 0.75rem !important; left: 0.75rem !important; z-index: 30 !important; background-color: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(5px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; color: #3b82f6 !important; font-weight: 900 !important; font-size: 1.5rem !important; min-width: 3.5rem !important; padding: 0.4rem 0.85rem !important; border-radius: 0.75rem !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.dark [data-showcase] .view-mode-grid .note-index-badge { background-color: rgba(15, 23, 42, 0.70) !important; color: #60a5fa !important; border-color: rgba(255, 255, 255, 0.1) !important; }
[data-showcase] .view-mode-grid .note-index-badge:empty { display: none !important; }

[data-showcase] .view-mode-grid .note-card-wrapper { height: 100%; display: flex; flex-direction: column; }
[data-showcase] .view-mode-grid .note-card-inner { height: 100%; display: flex; flex-direction: column; }
[data-showcase] .view-mode-grid .note-card-body { flex: 1; display: flex; flex-direction: column; }

/* Phones: the carousel stays one sideways row (the list grid rules of datagrid.css would wrap it)
   and the cards keep their text, date and statistics. */
@media (max-width: 640px) {
    [data-showcase] .view-mode-grid.showcase-row { display: flex !important; grid-template-columns: none !important; gap: 0.75rem !important; padding-left: 0 !important; padding-right: 0 !important; }
    [data-showcase] .view-mode-grid .note-card-header { height: 150px !important; max-height: 150px !important; }
    [data-showcase] .view-mode-grid .note-card-body { padding: 0.9rem 1rem !important; }
    [data-showcase] .view-mode-grid h3 { font-size: 1rem !important; line-height: 1.35rem !important; -webkit-line-clamp: 2 !important; }
    [data-showcase] .view-mode-grid .note-card-content p { display: -webkit-box !important; }
    [data-showcase] .view-mode-grid .grid-meta-info,
    [data-showcase] .view-mode-grid .note-card-footer { display: flex !important; }
    [data-showcase] .view-mode-grid .note-stats-wrapper { display: block !important; }
}