/**
 * jsantell.com/projects
 */

/**
 * Project Filter
 */

input.filter {
  display: none;
}

ul.filtered-list {
  margin-top:20px;
}
ul.filtered-list li {
  display: none;
}
input.filter:checked[value=featured] ~ .filtered-list li[featured-tag],
input.filter:checked[value=xr] ~ .filtered-list li[xr-tag],
input.filter:checked[value=graphics] ~ .filtered-list li[graphics-tag],
input.filter:checked[value=tools] ~ .filtered-list li[tools-tag],
input.filter:checked[value=audio] ~ .filtered-list li[audio-tag],
input.filter:checked[value=all] ~ .filtered-list li {
  display: block;
}

input.filter + label {
  padding: 0 10px;
  cursor: pointer;
}
input.filter + label:not(:last-of-type)::after {
  content: "/";
  padding-left: 5px;
  font-size: 90%;
  color: #ccc;
  position: absolute;
}
input.filter:checked + label{
  border-bottom: 1px solid var(--red);
}

/**
 * Project List
 */

/* align the filter links via centering, but due to
   structure, reset alignment in the list. */
#projects {
  text-align: center;
}
#projects ul.filtered-list {
  text-align: unset;
}
#projects a {
  text-decoration: none;
}
.filtered-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: 200px; 
  grid-gap: 20px;
}

@media (max-width:600px) {
  #projects ul.filtered-list {
    position: relative;
    flex-direction: column;
  }
}

#projects > div[active-filter=featured] .filter a[filter=featured],

.filtered-list li {
  list-style-type: none;
  border: 1px solid #ccc;
  position: relative;
  transition: grid-template-columns 1s;
}
.filtered-list li:nth-child(5n + 1) { --project-color: var(--red); }
.filtered-list li:nth-child(5n + 2) { --project-color: var(--orange); }
.filtered-list li:nth-child(5n + 3) { --project-color: var(--yellow); }
.filtered-list li:nth-child(5n + 4) { --project-color: var(--green); }
.filtered-list li:nth-child(5n + 5) { --project-color: var(--blue); }

.filtered-list .image-container {
  flex: 1;
  /* subtract the h2's top padding */
  height: calc(100% - 5px);
  overflow: hidden;
  filter: none;
  transition: filter 1s;
}
.filtered-list .image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.filtered-list li:hover .image-container {
  filter: hue-rotate(360deg);
}

.filtered-list a {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.filtered-list li h2 {
  display: block;
  width: calc(100% - 20px);
  top: 0;
  padding: 5px 10px;
  margin: 0;
  color:#3c484e;
  font-size: 120%;
  text-transform:uppercase;
  background-color: var(--project-color);
}

.filtered-list li .subtitle {
  position: absolute;
  transform: scaleX(0);
  color: var(--project-color);
  transition: transform 0.2s, color 0.2s 0.2s;
  background-color: var(--project-color);
  transform-origin: left;
  bottom: 0;
  padding: 10px;
  font-size: 60%;
}
.filtered-list li:hover .subtitle {
  transform: scaleX(1);
  color: black;
}