/*
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
structure, which results in some peculiar syntax, such as long indentations, unnecessarily
explicit parents in selectors, selectors without definitions, and single-line formatting.
*/

main {
	--film-card-width: 250px;
	--collection-card-width:  250px;
	--collection-card-height: 414px;
}

/* ALL CONTAINERS MOBILE */

@media ( max-width: 602px ) { /* @media queries do not support CSS variables */
.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 list headers */
.card-list { padding-right: var( --newday-page-gutter ); padding-left: var( --newday-page-gutter ); }
.card-list-title { margin:0 0 1em; font-size:calc( 1.3169014085rem + 1.3145539906vw ); font-weight:600; line-height:1.2; letter-spacing:0.01em; }
.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:30px 12px; text-transform:uppercase; }
/* Match New Day's card-count thresholds without using font size as the grid measurement. */
.card-list.list-of-films .list-body { display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(10rem, calc(8.75rem + 5.6vw), 18rem), 1fr)); gap:5vw; }

@media ( min-width: 60rem ) {
	.card-list.list-of-films .list-body { gap:4vw; }
}

.card-list.list-of-films { margin-top:52px; }
/** CAROUSELS **/

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

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

/* titles in carousel headers */
.card-carousel                         .carousel-header .carousel-title { color:var(--newday-orange); 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%; }
 }
/* 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; }

/** CARDS **/

/* cards */
.card *                  { font-family: inherit; }
.card                    { font-family: inherit; display:inline-block; overflow:hidden; text-align:left; white-space:normal; position:relative; margin: 0 60px 20px 0; }
.card.card-of-film       { width:var(--film-card-width); overflow:visible; vertical-align:top; font-size:var(--newday-body-size); }
.card-list .card.card-of-film { width:auto; margin:0 0 1.2em; }
.card.card-of-collection { width:var(--collection-card-width); height:var(--collection-card-height); }

/* card covers */
.card-of-collection .card-cover { z-index:2; position:absolute; width:50%; height:100%; overflow:hidden; }
.card-of-collection.open .card-cover { z-index:0; }
.card-of-collection: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-of-collection:hover .card-cover { z-index:0; } }
.card-of-collection .card-cover img { height:100%; }

/* card details */
.card-of-collection .card-details { z-index:1; position:absolute; right:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden; background:#10151c; 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 card content */
.film-card-link { display:block; color:inherit; text-decoration:none; }
.film-card-link:hover { color:inherit; }
.film-card-poster { position:relative; padding-top:141.7%; overflow:hidden; background:#10151c; }
.film-card-poster > * { position:absolute; inset:0; }
.film-card-poster img { height:100%; object-fit:cover; }
.film-card-info { z-index:1; overflow:auto; padding:1.5em; opacity:0; font-size:var(--newday-utility-size); }
.film-card-info h4 { margin:0 0 1em; font-size:calc( 0.948943662rem + 0.7511737089vw ); font-weight:600; line-height:1.2; letter-spacing:0.01em; }
.film-card-bottom { display:grid; }
.film-card-title { grid-area:1 / 1; align-self:start; margin:0.2em 0 0; font-size:calc( 0.948943662rem + 0.7511737089vw ); font-weight:600; line-height:1.2; letter-spacing:0.01em; }
.card-of-film .film-card-action { grid-area:1 / 1; align-self:start; display:block; padding:0.5em 1.5em; opacity:0; font-size:var(--newday-utility-size); font-weight:800; }
@media (hover: hover) {
	.card-of-film:hover .film-card-poster img { filter:blur(0.2rem) contrast(50%); opacity:0.2; }
	.card-of-film:hover .film-card-info,
	.card-of-film:hover .film-card-action { opacity:1; }
	.card-of-film:hover .film-card-title { opacity:0; }
}
.film-card-link:focus .film-card-poster img { filter:blur(0.2rem) contrast(50%); opacity:0.2; }
.film-card-link:focus .film-card-info,
.film-card-link:focus .film-card-action { opacity:1; }
.film-card-link:focus .film-card-title { opacity: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; }

.card.card-of-collection .card-details * { color:inherit; }