/* Compact cards share the same actions on mouse, touch and keyboard. */
.film-card{display:flex;flex-direction:column}
.film-card .film-art{flex-shrink:0}
.film-card button.film-copy{flex:1;width:100%;padding:14px;text-align:left;border:0;border-radius:0;background:#181818;font-weight:400;cursor:pointer}
.film-card button.film-copy:hover{background:#222}
.film-card button.film-copy:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.film-card .film-title{width:100%;display:block;overflow-wrap:anywhere;font-size:16px;font-weight:600}
.film-card .film-copy .film-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:#aaa;font-size:12px;line-height:1.7;margin:9px 0;min-height:3.4em}
.film-card .film-copy .film-facts{display:block;margin:5px 0 0;line-height:1.6}
.film-card > .film-progress{margin:0;height:4px;line-height:0}
.film-card > .film-progress progress{display:block;margin:0;height:4px;width:100%;border:0;border-radius:0}
.film-card > .film-progress .progress-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#film-detail{width:min(850px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overscroll-behavior:contain}
#film-detail .detail-close{position:sticky;float:right;top:12px;margin:12px 12px -56px 0;min-width:44px;min-height:44px;width:44px;height:44px;z-index:5}
#film-detail .detail-image-wrap{clear:none}
#film-detail .detail-copy{padding-bottom:28px}
#film-detail .detail-copy dl{grid-template-columns:minmax(65px,90px) minmax(0,1fr)}
#film-detail .detail-copy dd{overflow-wrap:anywhere}
#detail-progress{margin:18px 0}
#detail-play{min-height:44px}
body:has(#film-detail[open]){overflow:hidden}
@media(max-width:780px){
 #film-detail{width:calc(100% - 16px);max-width:none;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:12px}
 #film-detail .detail-image-wrap{height:clamp(150px,32vw,260px)}
 #film-detail .detail-copy{padding:0 18px 24px;margin-top:-20px}
 #film-detail .detail-copy h2{font-size:25px}
 #film-detail .detail-copy dl{gap:10px;font-size:12px}
 #detail-play{width:100%}
}

.catalog-view-switch{display:flex;gap:4px;flex:0 0 auto}.catalog-view-switch button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:9px;background:#24242b;color:#c8c8cd;border:1px solid #ffffff30;border-radius:7px}.catalog-view-switch button[aria-pressed="true"]{background:#e50914;border-color:#e50914;color:#fff}.catalog-view-switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}.catalog-view-switch svg{display:block;pointer-events:none}.catalog-pagination:has(.catalog-view-switch) .catalog-sort{margin-left:auto}
#catalog-grid[data-view="list"]{grid-template-columns:minmax(0,1fr);gap:12px}
#catalog-grid[data-view="list"] .film-card{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:1fr 4px;align-items:stretch}
#catalog-grid[data-view="list"] .film-art{grid-column:1;grid-row:1;width:100%;height:100%;min-height:138px;aspect-ratio:16/10;border:0;border-radius:0;padding:0}
#catalog-grid[data-view="list"] .film-copy{grid-column:2;grid-row:1/3;min-width:0;display:flex;flex-direction:column;justify-content:center}
#catalog-grid[data-view="list"] .film-progress{grid-column:1;grid-row:2}
#catalog-grid[data-view="list"] .film-title{font-size:18px}
#catalog-grid[data-view="list"] .film-description{min-height:0;-webkit-line-clamp:2}
#catalog-grid[data-view="list"] .film-card:hover{transform:none}
@media(max-width:600px){
 .catalog-pagination:has(.catalog-view-switch) .catalog-sort{width:auto;flex:1 1 180px;margin-left:0}.catalog-pagination:has(.catalog-view-switch) .catalog-sort select{min-width:0;max-width:180px}
 #catalog-grid[data-view="list"] .film-card{grid-template-columns:110px minmax(0,1fr)}
 #catalog-grid[data-view="list"] .film-art{min-height:100px;aspect-ratio:auto}
 #catalog-grid[data-view="list"] .film-copy{padding:10px}
 #catalog-grid[data-view="list"] .film-title{font-size:14px}
 #catalog-grid[data-view="list"] .film-description{font-size:11px;line-height:1.5;margin:5px 0;-webkit-line-clamp:2}
 #catalog-grid[data-view="list"] .film-facts{font-size:10px}
 #catalog-grid[data-view="list"] .film-play{left:8px;bottom:8px}
}