/* United Earth · Film Collection, curator-only private preview
   Inspired by Apple Collections' scan-friendly rhythm and the art-first
   presentation of Google Arts & Culture. Not a clone of either product.

   Thumbnails intentionally crop to one editorial grid; the FILM ITSELF
   remains original aspect ratio in the scrolling/native player views. */

.film-exhibition {
  margin-bottom:clamp(72px,9vw,115px);
}
.film-exhibition-heading{
  align-items:flex-end;
}
.film-count{
  color:rgba(179,199,215,.85);
  font-size:11px;
  font-weight:450;
  letter-spacing:.035em;
}
.film-exhibition-description{
  max-width:47ch;
  margin-bottom:clamp(33px,5vw,55px);
  color:#a5b5c5;
  line-height:1.58;
  letter-spacing:-.012em;
}

/* Hero followed by a balanced, simple two-column collection.
   Neither portrait nor landscape creates letterboxed thumbnail cards. */
.film-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(13px,2.6vw,31px);
  row-gap:clamp(28px,4.8vw,60px);
  align-items:start;
}
.film-card{
  min-width:0;
  border:0;
  background:transparent;
}
.film-card:first-child{
  grid-column:1 / -1;
}
.film-card-art,
.film-card:first-child .film-card-art{
  position:relative;
  width:100%;
  display:block;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#09253b;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
}
.film-card-art{aspect-ratio:5 / 4}
.film-card:first-child .film-card-art{aspect-ratio:16 / 9}
.film-card-poster{
  position:absolute;
  inset:0;
  background-image:none;
  background-color:#0c2435;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transition:transform .36s cubic-bezier(.2,.7,.25,1);
}
.film-card-poster::before{display:none!important}
.film-card-poster::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:inherit;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat;
  opacity:1;
  filter:none!important;
  transform:none;
}
.film-card-art:hover .film-card-poster{transform:scale(1.025)}
.film-card-art:active .film-card-poster{transform:scale(1.005)}
/* Orientation changes the crop of a thumbnail, NEVER a video. */
.film-card:nth-child(2) .film-card-poster::after{
  background-position:center 43%!important;
}
.film-card-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  padding:1px 0 0 2px;
  width:40px;height:40px;
  min-width:40px;min-height:40px;
  border:1px solid rgba(248,252,255,.44);
  background:rgba(3,21,36,.38);
  color:white;
  border-radius:50%;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 18px rgba(0,0,0,.13);
  font:400 12px/1 system-ui,sans-serif;
  pointer-events:none;
  transition:background .2s ease,box-shadow .2s ease;
}
.film-card:first-child .film-card-play{
  width:47px;height:47px;
  font-size:13px;
}
.film-card-art:hover .film-card-play{
  background:rgba(14,48,74,.57);
  box-shadow:0 0 0 4px rgba(255,255,255,.07);
}
.film-card-art:focus-visible{
  outline:2px solid #7cb5fa;
  outline-offset:4px;
}
.film-card-info{
  padding:12px 0 0;
  margin:0;
  display:block;
}
.film-card-info strong{
  display:block;
  max-width:100%;
  font-family:'UE Newsreader',Iowan Old Style,Georgia,serif;
  font-size:clamp(19px,2.25vw,31px);
  font-weight:410;
  line-height:1.12;
  letter-spacing:-.029em;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.film-card:first-child .film-card-info strong{
  font-size:clamp(27px,3.2vw,39px);
  line-height:1.08;
  max-width:22ch;
}
.film-card-info .film-card-size{
  display:none!important;
}
.film-demo-meta{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:6px 12px;
  padding:0;
  margin:9px 0 0;
}
.film-demo-badge{
  display:inline;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:rgba(146,185,231,.88);
  font:550 9px/1.5 system-ui,sans-serif;
  letter-spacing:.13em;
}
.film-demo-credit{
  color:rgba(175,195,209,.76);
  text-decoration:none;
  font:400 10px/1.5 system-ui,sans-serif;
  border-bottom:1px solid rgba(175,195,209,.29);
  white-space:nowrap;
}
.film-demo-credit:hover,.film-demo-credit:focus-visible{
  color:white;
  border-bottom-color:rgba(255,255,255,.75);
}
/* No unnecessary zoom button over the film; entire video already opens the
   normal native fullscreen player, and rotation is automatic. */
.film-scene-zoom{display:none!important}
.film-enter{cursor:pointer}
.film-track{
  scrollbar-width:none;
}
.film-track::-webkit-scrollbar{width:0;height:0;display:none}

/* Phone gallery: beautiful 16:9 lead, two equal, edge-to-edge 5:4 clips. */
@media(max-width:500px){
 .film-gallery{
   column-gap:14px;
   row-gap:34px;
 }
 .film-card-info{padding-top:11px}
 .film-card-info strong{font-size:clamp(18px,4.7vw,23px);line-height:1.12}
 .film-card:first-child .film-card-info strong{font-size:clamp(26px,7.0vw,32px)}
 .film-demo-meta{margin-top:7px;gap:4px 9px}
 .film-demo-badge{font-size:8px;letter-spacing:.065em}
 .film-demo-credit{font-size:9px}
 .film-card-play{width:37px;height:37px;min-width:37px;min-height:37px}
 .film-card:first-child .film-card-play{width:44px;height:44px}
}
@media(max-width:365px){
 .film-gallery{column-gap:12px;row-gap:30px}
 .film-card-info strong{font-size:17px}
 .film-demo-meta{gap:3px 8px}
 .film-demo-credit{font-size:8px}
}
@media(min-width:760px){
 .film-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
 .film-card:first-child{grid-column:1 / -1}
 .film-card-art{aspect-ratio:3/2}
 .film-card:first-child .film-card-art{aspect-ratio:1.95}
}
@media(min-width:1200px){
 .film-card:first-child .film-card-art{aspect-ratio:2.12}
}
@media(prefers-reduced-motion:reduce){
 .film-card-play,.film-card-poster{transition:none}
}
html[dir=rtl] .film-card-info,
html[dir=rtl] .film-demo-meta{text-align:right}
html[dir=rtl] .film-demo-meta{justify-content:flex-start}