@import "header.css";

.x-prime {
  --pr-pad: 4rem;
  --ftf: "Reddit Sans";
}

.x-prime:has(.ps-portrait) {
  --pr-pad: .5rem;
}

@media screen and (width > 160vh) and (width <= 170vh) {
  .x-prime:has(.ps-landscape) {
    --pr-pad: 3rem;
  }
}

@media screen and (width > 150vh) and (width <= 160vh) {
  .x-prime:has(.ps-landscape) {
    --pr-pad: 2rem;
  }
}

@media screen and (width <= 150vh) {
  .x-prime:has(.ps-landscape) {
    --pr-pad: 1rem;
  }
}

.x-prime {
  width: 100%;
  height: 100%;
}

/* @media screen and (orientation: portrait) and (width > 80vh) {
  .x-prime {
      --pr-pad: .5rem;
    }
} */

.x-prime > main {
  display: flex;
  flex-direction: column;
  padding: 0 var(--pr-pad);
  padding-top: 1rem;
  width: (100% - 2 * var(--pr-pad));
  background-color: var(--theme-bg-color, #ffffff);
}

@media screen and (width > 120vh) {
  main:has(> .ps) {
    flex-direction: row;
  }

  .fc {
    --fc-cs: 6.6;
  }
}

@media screen and (-webkit-max-device-pixel-ratio: 0.99) {
  :root { --pw: var(--vw-max, 100vw) }
  .x-prime {
    position: absolute;
    left: calc(50% - var(--vw-max, 100vw) / 2);
    width: calc(var(--vw-max, 100vw));
  }

}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    min-width: calc(var(--vw-min, 80vw) * .5);
  }
  .x-prime {
    --pr-pad: calc(var(--vw-min, 80vw) * .02);
  }
}

.container {
  display: grid;
  width: 100%;
  position: relative;
  grid-gap: 1.125rem;
  grid-template-columns: repeat(5, 1fr);
}

.container .swipe {
  grid-column: 1 / 3;
  grid-row: 1 / 3;

  img {
    width: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
  }
}

.fc .fc-thumb, .fc .fc-title {
  width: 100%;
  position: relative;
}

.fc > a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  font-weight: 400;
  width: 100%;
  color: #1b1b1b;
}

.fc > a:hover {
  color: #4747e7;
}

.fc .fc-thumb {
  > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    transition: transform .1s ease-in;
    z-index: 1;
  }
  > .fc-detail, > img {
    border-radius: min(0.3rem, 0.5lvw);
  }
}

.fc .fc-thumb .fc-detail {
  width: 94%;
  display: flex;
  height: fit-content;
  position: absolute;
  bottom: 0;
  padding: 3%;
  padding-top: 8%;
  font-size: calc(10% * var(--fc-cs, 10) - 10%);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.6) 90%);
  pointer-events: none;
  
  > [data-views], > [data-likes] {
    --p: calc(var(--sz4) / 8 * var(--fc-cs, 7));
    position: relative;
    padding-left: var(--p);
    padding-right: 3%;
    font-size: 94%;
    color: hsla(0, 0%, 100%, 0.8);
    align-content: end;
  }
  > [data-views]::before {
    left: 0;
    content: url('/svg/icon/view.svg');
  }
  > [data-views]::after {
    left: var(--p);
    content: attr(data-views);
  }
  > [data-likes]::before {
    left: 0;
    content: url('/svg/icon/heart.svg');
  }
  > [data-likes]::after {
    left: var(--p);
    content: attr(data-likes);
  }
  > [data-views]::before, [data-views]::after, > [data-likes]::before, [data-likes]::after {
    position: absolute;
    height: 94%;
    aspect-ratio: 1;
    opacity: .8;
  }

  > span:nth-child(3) {
    color: #ffffff;
    flex-grow: 1;
    direction: rtl;
  }
}


@media screen {
  @media (width > 120vh) and (width <= 154vh) {
    .container {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (width <= 120vh) {
    .container .swipe {
      display: none;
    }
  }

  @media (width > 84vh) and (width <= 120vh) {
    .container {
      grid-template-columns: repeat(3, 1fr);
    }
    .fc {
      font-size: 2lvw;
    }
  }

  @media (width > 44vh) and (width <= 84vh) {
    .container {
      grid-template-columns: repeat(2, 1fr);
    }
    .fc {
      font-size: 2.6lvw;
    }
  }

  @media (width <= 44vh) {
    .container {
      grid-template-columns: repeat(1, 1fr);
    }
    .fc {
      font-size: 3.8lvw;
    }
  }
}

.fc .fc-title > span {
  font-size: calc(10% * var(--fc-cs, 10));
  display: block;
  overflow: hidden;
  padding: .2rem 0 .1rem 0;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}