/* Media collection section editor (SiteForge → Page Sections → Edit MediaCollection).
   Global because this project doesn't load the Blazor scoped CSS bundle —
   selectors are namespaced under .mc-*.

   The tile grid deliberately sizes from its own container rather than from
   Bootstrap's col-* classes. Those breakpoints watch the *window*, not the
   element, so on a wide screen `col-xxl-3` happily put four tiles across the
   ~800px modal and each one collapsed to ~185px — too small to see the upload
   preview, the poster field and the alt text. minmax() asks the space that is
   actually available, so the tiles stay legible at any modal or window size. */

/* auto-fit, not auto-fill: auto-fill keeps empty tracks, so a "Full width — 1 tile"
   row rendered its single tile at 254px with three empty columns beside it. auto-fit
   collapses the unused tracks, so each tile grows to the share of the row it actually
   occupies on the storefront — full rows read wide, four-up rows read narrow. */
.mc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

/* Grid items stretch by default, so every tile in a row shares the tallest
   height without needing Bootstrap's h-100. */
.mc-tile {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.75rem;
    min-width: 0; /* lets long file names wrap instead of widening the track */
}

.mc-tile__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

/* Row header: layout picker, slot count and the move/remove controls. */
.mc-row-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}