/*
  ここにある内容

  front-page.php と search.php（browseページ）の
  共通タイル部分のデザイン

  --- col-2 ---
    ● posts-section / result-posts の内側

*/


/* ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍   col-2   ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ */

.post-tile {
  width: 46cqw;
  height: 40cqw;
  display: grid;
}

.post-tile:hover,
.post-tile:focus-within {
  --tile-scale: 1.02;
}

.post-tile a {
  width: 100%;
  height: 100%;
  display: grid;
}

.tile-title-visible {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 80%;
  padding-top: 1cqw;
  padding-left: 1.2cqw;
  font-family: var(--rubik);
  font-size: calc(38 * 100cqw / 750);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 表示させたい行数 */
  overflow: hidden;
  z-index: 1;
  color: #cddbe4;
}

.post-tile figure {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 5px;
  overflow: hidden;
  z-index: 0;
}

.post-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-meta,
.t-ad span {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
  padding-left: 1.3cqw;
  padding-bottom: 0.7cqw;
  gap: 0.6cqw;
  font-family: var(--rubik);
  white-space: nowrap;
  font-size: calc(16 * 100cqw / 750);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.t-ad span {
  color: #888;
}

.post-number::before {
  content: "#";
}





/* ▦ ▥ ▤ ▦ ▥ ▤ ▦   S: 幅499px 以下（スマホなど）   ▦ ▥ ▤ ▦ ▥ ▤ ▦ */

@media (max-width: 499px) {

  .post-tile {
    width: 92cqw;
    height: 80cqw;
  }

  .tile-title-visible {
    padding-left: 2cqw;
    font-size: calc(40 * 100cqw / 400);
  }

  .post-meta,
  .t-ad span {
    padding-left: 2.5cqw;
    padding-bottom: 1.6cqw;
    gap: 1.5cqw;
    font-size: calc(16 * 100cqw / 400);
  }

}