@use "global/acms-common" as acms;
@use "global/common" as global;

/* ----------------
エントリー一覧
------------------ */
.summary {
  padding: 0;
  margin: 0 0 30px;
  list-style: none;
}

.summary-entry-link {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 20px 0;
  margin: 0;
  color: global.$text-color-base;
  border-bottom: 1px solid global.$border-color-base;

  @include global.roll-over-bg-color(transparent, global.$bg-color-hover, global.$transition-speed);

  &:link,
  &:visited,
  &:active,
  &:focus {
    color: global.$text-color-base;
  }
}

.summary-entry-img-outer {
  padding: 0 10px;
}

.summary-entry-img {
  box-sizing: border-box;
  width: 178px;
  height: 100px;
}

.summary-entry-contents {
  box-sizing: border-box;
  width: 69%;
  padding: 0 10px;
}

.summary-entry-title {
  margin: 0 0 5px;
  font-weight: bold;
  line-height: 1.4;

  @include acms.font-size(21);
}

.summary-entry-text {
  margin: 10px 0 0;
  line-height: 1.5;

  @include acms.font-size(14);

  span {
    padding: 1px;
    vertical-align: middle;
    color: #FFF;
    background-color: global.$key-color;
    border-radius: 50%;
  }
}

.summary-entry-user {
  display: flex;
  align-items: center;
  margin: 15px 0 0;
}

.summary-entry-user-icon {
  width: 26px;
  height: 26px;
  margin: 0 10px 0 0;
  border-radius: 100%;
}

/* ----------------
エントリー一覧 (SP幅：デフォルト)
------------------ */
@include acms.media-breakpoint-down(md) {
  .summary-entry-link {
    padding: 15px 0;
  }

  .summary-entry-title {
    @include acms.font-size(16);
  }

  .entry-date {
    margin-bottom: 2px;

    @include acms.font-size(12);
  }

  .entry-labels {
    margin-bottom: 0;

    li {
      padding: 0 3px 2px 0;

      @include acms.font-size(12);
    }
  }

  .summary-entry-text {
    display: none;
  }
}

@include acms.media-breakpoint-down(sm) {
  .summary-entry-img-outer {
    padding: 0 5px 0 0;
  }

  .summary-entry-img {
    width: 120px;
    height: 67px;
  }

  .summary-entry-contents {
    padding: 0 0 0 5px;
  }
}

/* ----------------
エントリー一覧 (1カラムVer.)
------------------ */
.summary.is-thumbnail-1column {
  padding: 0;
  margin-top: 10px;

  .entry-labels {
    margin-bottom: 0;

    a {
      @include acms.font-size(10);
    }
  }

  .entry-date {
    margin-bottom: 2px;
  }

  .entry-labels li {
    padding: 0 3px 0 0;
  }

  .summary-entry-link {
    display: block;
    width: 100%;
    padding: 0 0 15px;
    margin-bottom: 15px;
  }

  .summary-entry-img-outer {
    padding: 0;
    margin: 0 0 10px;
  }

  .summary-entry-img {
    width: 100%;
    height: 0;
    padding: calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
  }

  .summary-entry-contents {
    width: 100%;
    padding: 0 5px;
  }

  .summary-entry-title {
    margin-bottom: 10px;
  }
}

/* ----------------
エントリー一覧 (SP幅：1カラムVer.)
------------------ */
@include acms.media-breakpoint-down(md) {
  .summary.is-thumbnail-1column-sp {
    padding: 0;
    margin-top: 10px;

    .entry-labels {
      margin-bottom: 0;

      a {
        @include acms.font-size(10);
      }
    }

    .entry-date {
      margin-bottom: 2px;
    }

    .entry-labels li {
      padding: 0 3px 0 0;
    }

    .summary-entry-link {
      display: block;
      width: 100%;
      padding: 0 0 15px;
      margin-bottom: 15px;
    }

    .summary-entry-img-outer {
      padding: 0;
      margin: 0 0 10px;
    }

    .summary-entry-img {
      width: 100%;
      height: 0;
      padding: calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
    }

    .summary-entry-contents {
      width: 100%;
      padding: 0 5px;
    }

    .summary-entry-title {
      margin-bottom: 10px;
    }
  }
}

/* ----------------
エントリー一覧 (2カラムVer.)
------------------ */
.summary.is-thumbnail-2column {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  margin: 10px -5px 0;

  .entry-labels {
    margin-bottom: 0;

    a {
      @include acms.font-size(10);
    }
  }

  .entry-date {
    margin-bottom: 2px;

    @include acms.font-size(10);
  }

  .entry-labels li {
    padding: 0 3px 0 0;

    @include acms.font-size(10);
  }

  .summary-entry {
    width: 50%;
  }

  .summary-entry-link {
    display: block;
    padding: 0 5px;
    margin-bottom: 20px;
    border: none;
  }

  .summary-entry-img-outer {
    padding: 0;
    margin: 0 0 5px;
  }

  .summary-entry-img {
    width: 100%;
    height: 0;
    padding:  calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
  }

  .summary-entry-contents {
    width: 100%;
    padding: 0 5px;
  }

  .summary-entry-title {
    @include acms.font-size(16);
  }

  .summary-entry-text {
    display: none;
  }
}

/* ----------------
エントリー一覧 (SP幅：2カラムVer.)
------------------ */
@include acms.media-breakpoint-down(md) {
  .summary.is-thumbnail-2column-sp {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
    margin: 10px -5px 0;

    .entry-labels {
      margin-bottom: 0;

      a {
        @include acms.font-size(10);
      }
    }

    .entry-date {
      margin-bottom: 2px;

      @include acms.font-size(10);
    }

    .entry-labels li {
      padding: 0 3px 0 0;

      @include acms.font-size(10);
    }

    .summary-entry {
      width: 50%;
    }

    .summary-entry-link {
      display: block;
      padding: 0 5px;
      margin-bottom: 20px;
      border: none;
    }

    .summary-entry-img-outer {
      padding: 0;
      margin: 0 0 5px;
    }

    .summary-entry-img {
      width: 100%;
      height: 0;
      padding:  calc(100% / 2 * 0.5625); /* 画像が16:9になる高さ */
    }

    .summary-entry-contents {
      width: 100%;
      padding: 0 5px;
    }

    .summary-entry-title {
      @include acms.font-size(16);
    }

    .summary-entry-text {
      display: none;
    }
  }
}
