/*
Originally written to handle carousels and lists of films and collections, such
as used on the pages browse, new releases, collections, logged-in homepage,
film, and collection.

New types of cards and containers can be added by following the pattern already established.

I refactored for clarity by starting with this file. It is intended to show the page
strucure, which results in some peculiar syntax, such as long indentations, unnecessarily
explicit parents in selectors, selectors without definitions, and single-line formatting.
*/

body {
	--button-height: 40px;
	--film-card-width:  360px;
	--film-card-height: 203px;
	--collection-card-width:  360px;
	--collection-card-height: 203px;
}

/* ALL CONTAINERS MOBILE */

@media ( max-width: 602px ) { /* @media queries do not support CSS variables */
.card-list.list-of-films,
.card-carousel.carousel-of-films       { padding: 0 calc((100vw - var(--film-card-width)) / 2); }
.card-list.list-of-collections,
.card-carousel.carousel-of-collections { padding: 0 calc((100vw - var(--collection-card-width)) / 2); }
}

/** CARD LISTS **/

/* card lists */
.card-list                     { text-align:center; }
.card-list.list-of-films       {}
.card-list.list-of-collections {}

/* card list headers */
.card-list                     .list-header { text-align:center; }
.card-list                     .list-header .click-all-cards-button { display:inline-block; color:white; font-size:19px; line-height:2em; margin:0 12px; text-transform:uppercase; }
.card-list.list-of-films       .list-header {}
.card-list.list-of-collections .list-header {}

/* card list bodies */
.card-list                     .list-body {}
.card-list.list-of-films       .list-body {}
.card-list.list-of-collections .list-body {}

/** CAROUSELS **/

/* carousels */
.card-carousel                         { padding:0 30px; margin-top:52px; overflow:hidden; white-space:nowrap; max-width:100%; }
.card-carousel.carousel-of-films       {}
.card-carousel.carousel-of-collections {}

/* carousel headers */
.card-carousel                         .carousel-header { position:relative; }
.card-carousel.carousel-of-films       .carousel-header {}
.card-carousel.carousel-of-collections .carousel-header {}

/* titles in carousel headers */
.card-carousel                         .carousel-header .carousel-title { color:var(--pragda-yellow); font-size:clamp(10px, 7vw, 54px); display:inline-block; margin:0 0 42px 60px; }
@media ( max-width: 602px ) { /* @media queries do not support CSS variables */
.card-carousel                         .carousel-header .carousel-title { text-align:center; margin-left:0; margin-bottom:30px; width:100%; }
 }
.card-carousel.carousel-of-films       .carousel-header .carousel-title {}
.card-carousel.carousel-of-collections .carousel-header .carousel-title {}

/* next/prev nav buttons in generic carousel header */
.card-carousel .carousel-header button.carousel-prev,
.card-carousel .carousel-header button.carousel-next { position:absolute; top:0; }
.card-carousel .carousel-header button.carousel-prev { right:100px; }
.card-carousel .carousel-header button.carousel-next { right:20px; }
@media ( max-width: 602px ) { /* @media queries do not support CSS variables */
.card-carousel .carousel-header button.carousel-prev { left:20px; }
.card-carousel .carousel-header button.carousel-next { right:0; }
}
.card-carousel .carousel-header button.carousel-prev:hover,
.card-carousel .carousel-header button.carousel-next:hover { cursor: pointer; }
.card-carousel .carousel-header button.carousel-prev img,
.card-carousel .carousel-header button.carousel-next img { width:22px; margin-top:25%; }
@media ( max-width: 602px ) { /* @media queries do not support CSS variables */
.card-carousel .carousel-header button.carousel-prev img,
.card-carousel .carousel-header button.carousel-next img { width:21px; margin-top:0; }
}

/* carousel bodies */
.card-carousel                         .carousel-body { overflow:hidden; white-space: nowrap; position: relative; }
.card-carousel.carousel-of-films       .carousel-body {}
.card-carousel.carousel-of-collections .carousel-body {}

/** CARDS **/

/* cards */
.card *                  { font-family: inherit; }
.card                    { font-family: "Darker Grotesque", sans-serif; display:inline-block; overflow:hidden; text-align:left; white-space:normal; position:relative; margin: 0 20px 20px 0; }
.card.card-of-film       { width:var(--film-card-width); height:var(--film-card-height); }
.card.card-of-collection { width:var(--collection-card-width); height:var(--collection-card-height); }

/* card covers */
.card                    .card-cover { z-index:2; position:absolute; overflow: hidden; }
.card.open               .card-cover { z-index:0; }
.card:focus-within       .card-cover { z-index:0; } /* accessibility, keyboard navigation trello.com/c/KU0vueLW */
@media (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card:hover              .card-cover { z-index:0; } }
.card.card-of-film       .card-cover { width:100%; height:100%; }
.card.card-of-collection .card-cover { width:50%; height:100%; }
.card.card-of-collection .card-cover img { height:100%; }

/* card details */
.card                                           .card-details { z-index:1; position:absolute; width:100%; height:100%; overflow:hidden; }
.card.card-of-film.open                         .card-details { overflow:auto; }
@media (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-film:hover                        .card-details { overflow:auto; } }
.card.card-of-film                              .card-details { background: rgba(15, 15, 14, 0.87); padding: 9px 13px 13px 13px; }
.card.card-of-collection                        .card-details { right:0; background-size:cover; background-position: left center; background-repeat:no-repeat; display:flex; align-items:center; justify-content:center; transition: width 100ms linear; }
@media (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-collection:not(.open):not(:hover) .card-details { width:50%; } }
@media not (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-collection:not(.open)             .card-details { width:50%; } }

/* film details content */
.card.card-of-film .card-cover img { width:100%; height:100%; }
.card.card-of-film .card-details .film-titles { line-height:1em; }
.card.card-of-film .card-details .film-titles .primary-title { font-size:23px; line-height:1em; margin:0; display:inline; }
.card.card-of-film .card-details .film-titles .secondary-title { font-size:23px; line-height:1em; margin:0; display:inline; }
.card.card-of-film .card-details .film-titles :first-child { font-weight: bold; }
.card.card-of-film .card-details .primary-title + .secondary-title:before { content:'('; }
.card.card-of-film .card-details .primary-title + .secondary-title:after { content:')'; }
.card.card-of-film .card-details .film-categorizations { display: inline-block; font-size:18px; line-height:1em; margin:8px 0; }
.card.card-of-film .card-details .film-categorizations .film-genres { color:var(--pragda-yellow); font-weight: bolder; }
.card.card-of-film .card-details .film-categorizations .film-countries { color:var(--pragda-pink); }
.card.card-of-film .card-details .film-categorizations > :first-child + *:before { content: ' | '; color:white; }
.card.card-of-film .card-details .film-description { font-size:18px; line-height:1em; margin:unset; }
.card.card-of-film .card-details .film-page-link {}
.card.card-of-film .card-details .playlist-button {}
/* controls container in film details */
.card.card-of-film .card-details .controls-container { float:left; height:100%; display:flex; align-items:flex-end; shape-outside: inset(calc(100% - var(--button-height)) 0 0); }
.card.card-of-film .card-details .controls-container > * { margin-right:13px; }
.card.card-of-film .card-details .controls-container a,
.card.card-of-film .card-details .controls-container button { padding:0 13px; text-decoration: none; font-size:21px; line-height:var(--button-height); border: none; font-weight: bold; height:var(--button-height); }
.card.card-of-film .card-details .controls-container button img { vertical-align: middle; margin:0; }

/* collection details content */
.card.card-of-collection                        .card-details .card-details-content { vertical-align:middle; padding:20px; }
.card.card-of-collection                        .card-details .card-details-content > .collection-title { text-align:center; font-size:27px; line-height:1em; margin:0; }
.card.card-of-collection.open                   .card-details .card-details-content > .collection-title { text-align:left; }
@media (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-collection:hover                  .card-details .card-details-content > .collection-title { text-align:left; } }
@media (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-collection:not(.open):not(:hover) .card-details .card-details-content > :not(.collection-title) { display:none;} }
@media not (hover: hover) { /* wrap hovers in @media since Amazon Fire long hover interferes with tap behavior */
.card.card-of-collection:not(.open)             .card-details .card-details-content > :not(.collection-title) { display:none; } }
.card.card-of-collection                        .card-details .card-details-content .collection-description { font-size:18px; line-height:1em; margin-top:15px; }
.card.card-of-collection                        .card-details .card-details-content .collection-number-of-titles { font-size:16px; line-height:1em; }
.card.card-of-collection                        .card-details .card-details-content .collection-page-link { font-size:17px; line-height:1em; font-weight:bold; float:right; }

/** collection card background images and text colors **/
.card.card-of-collection .card-details * { color:inherit; }
.card.card-of-collection .card-details.pragda-yellow { color:#3a86ff; background-image: url('//misc.docuseek2.com/pragda/images/collection-yellow.svg'); }
.card.card-of-collection .card-details.pragda-orange { color:#15315e; background-image: url('//misc.docuseek2.com/pragda/images/collection-orange.svg'); }
.card.card-of-collection .card-details.pragda-magenta { color:#d9e8ff; background-image: url('//misc.docuseek2.com/pragda/images/collection-magenta.svg'); }
.card.card-of-collection .card-details.pragda-purple { color:#ffdd80; background-image: url('//misc.docuseek2.com/pragda/images/collection-purple.svg'); }
.card.card-of-collection .card-details.pragda-blue { color:#fbeae2; background-image: url('//misc.docuseek2.com/pragda/images/collection-blue.svg'); }