@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　ボーダー付きカード
------------------------------ */
.card-bordered-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;

  @media (hover: hover) {
    .card-bordered {
      transition: all 0.3s ease;
    }

    .card-bordered-img {
      transition: 0.4s 0.2s ease-out;
      will-change: transform;
    }

    &:any-link:hover {
      .card-bordered {
        background-color: var(--color-hover-bg-2nd);
        box-shadow: var(--box-shadow-hover);
      }

      .card-bordered-img {
        transform: scale(1.2);
      }
    }
  }
}

.card-bordered {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
}

:not(.is-admin-page) { /* 編集画面ではアニメーションしない */
  .js .js-animation-row .card-bordered {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation-row.is-show .card-bordered {
    animation: fade-in 0.2s 0.7s 1 both;
  }
}

.card-bordered-img-wrap {
  width: 100%;
  aspect-ratio: var(--card-img-aspect-ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.card-bordered-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-bordered-text-layout {
  padding: 1rem;

  @include acms.media-breakpoint-up(md) {
    padding: 2rem;
  }
}

.card-bordered-title,
.#{acms.$entry-class} .card-bordered-title {
  margin: 0;
  font-size: map.get(global.$font-scales, heading-ss);
  line-height: var(--line-height-md);
  color: var(--color-text);

  @include acms.media-breakpoint-up(md) {
    font-size: map.get(global.$font-scales, heading-s);
    line-height: var(--line-height-lg);
  }
}
