/* Layout only: MDB supplies the cards, controls, colors and typography. */
.masonry-folder-grid,
.masonry-media-grid {
    display: block;
    column-count: var(--media-columns, 5);
    column-gap: 1rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.masonry-folder-grid > .col,
.masonry-media-grid > .col {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-top: 0;
    margin-bottom: 1rem;
    vertical-align: top;
    break-inside: avoid;
}

.masonry-folder-grid {
    column-count: var(--folder-columns, 5);
}

@media (max-width: 1199.98px) {
    .masonry-folder-grid,
    .masonry-media-grid {
        column-count: min(var(--media-columns, 5), 3);
    }

    .masonry-folder-grid {
        column-count: min(var(--folder-columns, 5), 3);
    }
}

@media (max-width: 767.98px) {
    .masonry-folder-grid,
    .masonry-media-grid {
        column-count: min(var(--media-columns, 5), 2);
    }

    .masonry-folder-grid {
        column-count: min(var(--folder-columns, 5), 2);
    }

    .masonry-media-grid.inline-large-mode {
        column-count: 1;
    }
}

/* Player geometry and the explicitly requested #262626 surface; MDB supplies its controls and fade. */
.slideshow-overlay .slideshow-overlay-shell {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    margin: 10px;
}
.slideshow-overlay { padding: 0 !important; }
.slideshow-overlay-shell .modal-content { height: 100%; }
.slideshow-overlay-toolbar { background-color: #262626; }
.slideshow-overlay-toolbar { position: relative; z-index: 6; }
.player-list-toggle:hover, .player-list-toggle:focus-visible { background-color: transparent; box-shadow: none; color: var(--mdb-gray-400, #ced4da) !important; }
.player-main { min-height: 0; }
.player-list { width: clamp(12rem, 20vw, 20rem); flex: 0 0 auto; background-color: color-mix(in srgb, #262626 75%, black 25%); scrollbar-width: thin; scrollbar-color: var(--mdb-secondary) transparent; }
/* Mirror the existing player list on the site's library sidebar. */
.library-sidebar {
    --site-sidebar-bg: color-mix(in srgb, #262626 55%, black 45%);
    --mdb-offcanvas-bg: var(--site-sidebar-bg);
    background-color: var(--site-sidebar-bg);
}
@media (min-width: 992px) {
    /* MDB's desktop offcanvas rule sets a transparent background with !important. */
    .library-sidebar.offcanvas-lg { background-color: var(--site-sidebar-bg) !important; }
}
.library-sidebar .sidebar-scroll { scrollbar-width: thin; scrollbar-color: var(--mdb-secondary) transparent; }
.library-sidebar .sidebar-album-list {
    --mdb-list-group-bg: transparent;
    --mdb-list-group-action-color: rgba(var(--mdb-white-rgb), .5);
    --mdb-list-group-action-hover-color: rgba(var(--mdb-white-rgb), .5);
    --mdb-list-group-action-hover-bg: var(--mdb-dark);
    --mdb-list-group-border-color: var(--mdb-dark);
}
.slideshow-overlay-stage { min-width: 0; }
.player-carousel, .player-carousel .carousel-inner, .player-carousel .carousel-item { width: 100%; height: 100%; }
.player-carousel .carousel-item { transition-duration: var(--player-transition-duration); }
.slideshow-overlay-stage .player-carousel .mh-slideshow-media { width: auto; height: auto; max-width: 100%; max-height: 100%; flex: 0 1 auto; object-fit: contain; }
.player-list-thumb { width: 3rem; height: 3rem; object-fit: cover; }
.player-annotation { max-width: min(80%, 42rem); max-height: 35%; overflow-y: auto; z-index: 2; }
.player-memo { top: 20px; }
.player-comments { bottom: 20px; }
.player-side-nav { z-index: 3; }
@media (max-width: 767.98px) {
    .slideshow-overlay .slideshow-overlay-shell { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
    .slideshow-overlay-shell .modal-content { border-radius: 0 !important; }
    .player-list { position: absolute; top: 0; bottom: 0; left: 0; width: min(80vw, 20rem); z-index: 5; }
    .player-main { position: relative; }
    .slideshow-overlay-toolbar { max-height: 35dvh; overflow-y: auto; }
}
.slideshow-overlay-stage { min-height: 0; flex: 1 1 auto; }
.slideshow-overlay-stage .mh-slideshow-media {
    display: block;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    flex: 1 1 auto;
    object-fit: contain;
}
.slideshow-overlay-stage video.mh-slideshow-media { width: auto; height: auto; max-width: 100%; max-height: 100%; flex: 0 1 auto; }

/* Detail media stays in document flow; only its displayed size follows the viewport. */
.embedded-media-detail .viewer-stage .mh-detail-media {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    object-fit: contain;
}
.embedded-media-detail .viewer-stage { height: clamp(20rem, calc(100dvh - 14rem), 75rem); }
.embedded-media-detail .viewer-stage video.mh-detail-media { width: 100%; }
.embedded-media-detail .viewer-stage iframe { height: 100% !important; }
.mh-slideshow-heading-meta { min-width: 0; }

/* Home card geometry only; visual components and spacing use MDB classes. */
.home-page .library-bento > .col,
.home-page .memory-grid > .col { min-width: 0; }
.home-page .shelf-thumb { overflow: hidden; aspect-ratio: 4 / 3; }
.home-page .shelf-thumb img { display: block; height: 100%; object-fit: cover; }
.home-page .library-tile { min-width: 0; }

/* Responsive card columns and image cropping are layout geometry; MDB provides card visuals. */
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(var(--home-columns, 5), minmax(0, 1fr));
    gap: 1rem;
}
.home-card-grid > * { min-width: 0; }
.home-page .home-card-image,
.home-page .shelf-thumb,
.trash-page .trash-media-thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.home-page .home-card-image img,
.home-page .shelf-thumb img,
.trash-page .trash-media-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.home-page .home-card-image { flex: none; }
.home-page .recent-copy { min-width: 0; }
.home-page .month-track { min-width: 0; }
@media (max-width: 1199.98px) {
    .home-card-grid { grid-template-columns: repeat(min(var(--home-columns, 5), 3), minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .home-card-grid { grid-template-columns: repeat(min(var(--home-columns, 5), 2), minmax(0, 1fr)); }
}

/* Playlist preview truncation and wide navigation are layout constraints. */
.playlist-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 3.5em;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.header-category-nav { min-width: 0; flex: 1 1 auto; }

/* Responsive layout and media placeholder geometry; MDB supplies component visuals. */
@media (max-width: 767.98px) {
    .masonry-folder-grid, .masonry-media-grid { column-count: 1; }
    .home-card-grid { grid-template-columns: minmax(0, 1fr); }
}
.media-grid-thumb .type-placeholder { min-height: 10rem; }
.player-photo-details { top: 20px; z-index: 2; max-width: 90%; }
.player-memo { top: 55px; }
@media (max-width: 767.98px) {
    .slideshow-overlay-toolbar { max-height: none; overflow: visible; }
}

/* Blazor FocusOnNavigate keeps screen reader focus on h1; hide only its programmatic outline. */
h1[tabindex="-1"]:focus { outline: none; }

/* Allow the volume slider to shrink to the player sidebar width. */
.player-settings .form-range { min-width: 0; flex: 1 1 auto; }

/* MDB button colors with a quieter site hamburger hover and pressed state. */
.header-hamburger { color: var(--mdb-gray-600) !important; background-color: transparent !important; box-shadow: none !important; }
.header-hamburger:hover, .header-hamburger:active, .header-hamburger:focus-visible { color: var(--mdb-gray-500) !important; background-color: transparent !important; box-shadow: none !important; }
.header-hamburger .ripple-wave { display: none; }

/* Home favorite carousel geometry; component visuals and controls remain MDB. */
.home-feature-favorites { flex: 0 0 var(--favorite-width, 40%); min-width: 0; }
.home-feature-playlists { flex: 1 1 0; min-width: 0; }
.home-favorite-carousel { height: var(--home-feature-height, 18rem); }
.home-favorite-carousel .carousel-inner { height: 100%; }
.home-favorite-carousel .carousel-item { height: 100%; transition-duration: var(--home-transition-duration, 1000ms); }
.home-favorite-carousel .carousel-item img { object-fit: cover; }
.home-playlist-list { height: var(--home-feature-height, 18rem); max-height: var(--home-feature-height, 18rem); }
/* MDB's fade sets a fixed 0.6 s exit delay; use the saved transition time for both images. */
.player-carousel.carousel-fade .active.carousel-item-start,
.player-carousel.carousel-fade .active.carousel-item-end { transition: opacity var(--player-transition-duration) ease-in-out; }
.home-favorite-carousel.carousel-fade .active.carousel-item-start,
.home-favorite-carousel.carousel-fade .active.carousel-item-end { transition: opacity var(--home-transition-duration, 1000ms) ease-in-out; }
@media (prefers-reduced-motion: reduce) {
    .player-carousel.carousel-fade .active.carousel-item-start,
    .player-carousel.carousel-fade .active.carousel-item-end,
    .home-favorite-carousel.carousel-fade .active.carousel-item-start,
    .home-favorite-carousel.carousel-fade .active.carousel-item-end { transition: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .home-feature-favorites { flex-basis: 66%; }
}
@media (max-width: 767.98px) {
    .home-feature-favorites, .home-feature-playlists { flex: 0 0 100%; }
}