Card 08

<div class="card-image-text">
  <div class="card-image-text__media">
    <img
      class="card-image-text__image"
      src="/snippets/card-sample-01.jpg"
      alt=""
      width="640"
      height="360"
      decoding="async"
    />
  </div>
  <div class="card-image-text__body">
    <h3 class="card-image-text__title">タイトル</h3>
    <p class="card-image-text__text">
      ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>
    <a class="card-image-text__button" href="#">詳しく見る</a>
  </div>
</div>

/* reset */
:where(.card-image-text) {
  box-sizing: border-box;
}

:where(h3).card-image-text__title,
:where(p).card-image-text__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text__image {
  display: block;
}

:where(a, button).card-image-text__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* snippet */
.card-image-text {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.card-image-text__media {
  aspect-ratio: 16 / 9;
}

.card-image-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text__body {
  padding: 24px;
}

.card-image-text__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

<a class="card-image-text-link" href="#">
  <div class="card-image-text-link__media">
    <img
      class="card-image-text-link__image"
      src="/snippets/card-sample-01.jpg"
      alt=""
      width="640"
      height="360"
      decoding="async"
    />
  </div>
  <div class="card-image-text-link__body">
    <h3 class="card-image-text-link__title">タイトル</h3>
    <p class="card-image-text-link__text">
      ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>
    <span class="card-image-text-link__label">詳しく見る</span>
  </div>
</a>

/* reset */
:where(a).card-image-text-link {
  box-sizing: border-box;
  text-decoration: none;
}

:where(img).card-image-text-link__image {
  display: block;
}

:where(h3).card-image-text-link__title,
:where(p).card-image-text-link__text {
  margin: 0;
  font: inherit;
}

/* snippet */
.card-image-text-link {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-link-color: #2b36f5;
  --card-link-color-hover: #1f28a8;
  --card-focus-color: #2b36f5;

  display: grid;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }
}

.card-image-text-link__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-image-text-link__image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  @media (any-hover: hover) {
    transition: transform 0.3s;

    .card-image-text-link:hover & {
      transform: scale(1.05);
    }
  }
}

.card-image-text-link__body {
  padding: 24px;
}

.card-image-text-link__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text-link__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text-link__label {
  display: block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-link-color);
  text-align: right;

  @media (any-hover: hover) {
    transition: color 0.3s;

    .card-image-text-link:hover & {
      color: var(--card-link-color-hover);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-image-text-link__image {
    @media (any-hover: hover) {
      transition: none;

      .card-image-text-link:hover & {
        transform: none;
      }
    }
  }

  .card-image-text-link__label {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<div class="card-image-text-horizontal">
  <div class="card-image-text-horizontal__media">
    <img
      class="card-image-text-horizontal__image"
      src="/snippets/card-sample-01.jpg"
      alt=""
      width="640"
      height="360"
      decoding="async"
    />
  </div>
  <div class="card-image-text-horizontal__body">
    <h3 class="card-image-text-horizontal__title">タイトル</h3>
    <p class="card-image-text-horizontal__text">
      ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>
    <a class="card-image-text-horizontal__button" href="#">詳しく見る</a>
  </div>
</div>

/* reset */
:where(.card-image-text-horizontal) {
  box-sizing: border-box;
}

:where(h3).card-image-text-horizontal__title,
:where(p).card-image-text-horizontal__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text-horizontal__image {
  display: block;
}

:where(a, button).card-image-text-horizontal__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* snippet */
.card-image-text-horizontal {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;

  @media (width >= 480px) {
    grid-template-columns: min(42%, 200px) 1fr;
    max-width: 640px;
  }
}

.card-image-text-horizontal__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;

  @media (width >= 480px) {
    aspect-ratio: auto;
  }
}

.card-image-text-horizontal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text-horizontal__body {
  padding: 24px;
}

.card-image-text-horizontal__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text-horizontal__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text-horizontal__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

<div class="card-image-text-padded">
  <div class="card-image-text-padded__media">
    <img
      class="card-image-text-padded__image"
      src="/snippets/card-sample-01.jpg"
      alt=""
      width="640"
      height="360"
      decoding="async"
    />
  </div>
  <div class="card-image-text-padded__body">
    <h3 class="card-image-text-padded__title">タイトル</h3>
    <p class="card-image-text-padded__text">
      ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>
    <a class="card-image-text-padded__button" href="#">詳しく見る</a>
  </div>
</div>

/* reset */
:where(.card-image-text-padded) {
  box-sizing: border-box;
}

:where(h3).card-image-text-padded__title,
:where(p).card-image-text-padded__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text-padded__image {
  display: block;
}

:where(a, button).card-image-text-padded__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* snippet */
.card-image-text-padded {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  row-gap: 16px;
  width: 100%;
  max-width: 320px;
  padding: 12px;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.card-image-text-padded__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

.card-image-text-padded__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text-padded__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text-padded__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text-padded__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

<div class="card-image-text-padded-horizontal">
  <div class="card-image-text-padded-horizontal__media">
    <img
      class="card-image-text-padded-horizontal__image"
      src="/snippets/card-sample-01.jpg"
      alt=""
      width="640"
      height="360"
      decoding="async"
    />
  </div>
  <div class="card-image-text-padded-horizontal__body">
    <h3 class="card-image-text-padded-horizontal__title">タイトル</h3>
    <p class="card-image-text-padded-horizontal__text">
      ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
    </p>
    <a class="card-image-text-padded-horizontal__button" href="#">詳しく見る</a>
  </div>
</div>

/* reset */
:where(.card-image-text-padded-horizontal) {
  box-sizing: border-box;
}

:where(h3).card-image-text-padded-horizontal__title,
:where(p).card-image-text-padded-horizontal__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text-padded-horizontal__image {
  display: block;
}

:where(a, button).card-image-text-padded-horizontal__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* snippet */
.card-image-text-padded-horizontal {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
  width: 100%;
  max-width: 320px;
  padding: 12px;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;

  @media (width >= 480px) {
    grid-template-columns: min(42%, 200px) 1fr;
    row-gap: unset;
    column-gap: 12px;
    max-width: 640px;
  }
}

.card-image-text-padded-horizontal__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;

  @media (width >= 480px) {
    aspect-ratio: auto;
  }
}

.card-image-text-padded-horizontal__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text-padded-horizontal__body {
  @media (width >= 480px) {
    padding-block: 8px;
  }
}

.card-image-text-padded-horizontal__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text-padded-horizontal__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text-padded-horizontal__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

<a class="card-bg-image-text-link" href="#">
  <h3 class="card-bg-image-text-link__title">タイトル</h3>
  <p class="card-bg-image-text-link__text">ここに説明テキストが入ります。</p>
  <span class="card-bg-image-text-link__arrow" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <path d="M5 12h12M13 7l5 5-5 5" />
    </svg>
  </span>
</a>

/* reset */
:where(a).card-bg-image-text-link {
  box-sizing: border-box;
  text-decoration: none;
}

:where(h3).card-bg-image-text-link__title,
:where(p).card-bg-image-text-link__text {
  margin: 0;
  font: inherit;
}

/* snippet */
.card-bg-image-text-link {
  --card-background-image: url("/snippets/card-sample-01.jpg");
  --card-overlay: linear-gradient(
    to top,
    rgb(0 0 0 / 70%) 0%,
    rgb(0 0 0 / 20%) 60%,
    rgb(0 0 0 / 10%) 100%
  );
  --card-title-color: #fff;
  --card-text-color: rgb(255 255 255 / 90%);
  --card-arrow-color: #fff;
  --card-arrow-border: rgb(255 255 255 / 60%);
  --card-arrow-background-hover: #fff;
  --card-arrow-color-hover: #364153;
  --card-focus-color: #fff;

  position: relative;
  display: grid;
  row-gap: 12px;
  align-content: end;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  overflow: hidden;
  border-radius: 12px;

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  &::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background-image: var(--card-background-image);
    background-position: center;
    background-size: cover;
  }

  &::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background-image: var(--card-overlay);
  }

  > *:not(.card-bg-image-text-link__arrow) {
    position: relative;
    z-index: 2;
  }

  @media (any-hover: hover) {
    &::before {
      transition: transform 0.3s;
    }

    &:hover::before {
      transform: scale(1.05);
    }
  }
}

.card-bg-image-text-link__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-bg-image-text-link__text {
  padding-right: 48px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-bg-image-text-link__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--card-arrow-color);
  border: 1px solid var(--card-arrow-border);
  border-radius: 50%;

  svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (any-hover: hover) {
    transition:
      background-color 0.3s,
      border-color 0.3s,
      color 0.3s;

    .card-bg-image-text-link:hover & {
      color: var(--card-arrow-color-hover);
      background-color: var(--card-arrow-background-hover);
      border-color: var(--card-arrow-background-hover);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-bg-image-text-link {
    @media (any-hover: hover) {
      &::before {
        transition: none;
      }

      &:hover::before {
        transform: none;
      }
    }
  }

  .card-bg-image-text-link__arrow {
    @media (any-hover: hover) {
      transition: none;
    }
  }
}

<div class="card-image-text-row-3">
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">
        ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
      </p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">ここに説明テキストが入ります。</p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">
        ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
      </p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
</div>

/* reset */
:where(.card-image-text) {
  box-sizing: border-box;
}

:where(h3).card-image-text__title,
:where(p).card-image-text__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text__image {
  display: block;
}

:where(a, button).card-image-text__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* card-image-text */
.card-image-text {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.card-image-text__media {
  aspect-ratio: 16 / 9;
}

.card-image-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text__body {
  padding: 24px;
}

.card-image-text__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

/* layout */
.card-image-text-row-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 320px;

  @media (width >= 480px) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1008px;

    & > .card-image-text {
      grid-template-rows: auto 1fr;

      & .card-image-text__body {
        display: flex;
        flex-direction: column;
      }

      & .card-image-text__text {
        flex: 1;
      }
    }
  }
}

<div
  class="card-image-text-row-3-scroll js-card-image-text-row-3-scroll"
  role="region"
  aria-label="カード一覧"
>
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">
        ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
      </p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">ここに説明テキストが入ります。</p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
  <div class="card-image-text">
    <div class="card-image-text__media">
      <img
        class="card-image-text__image"
        src="/snippets/card-sample-01.jpg"
        alt=""
        width="640"
        height="360"
        decoding="async"
      />
    </div>
    <div class="card-image-text__body">
      <h3 class="card-image-text__title">タイトル</h3>
      <p class="card-image-text__text">
        ここに説明テキストが入ります。<br />ここに説明テキストが入ります。ここに説明テキストが入ります。
      </p>
      <a class="card-image-text__button" href="#">詳しく見る</a>
    </div>
  </div>
</div>

/* reset */
:where(.card-image-text) {
  box-sizing: border-box;
}

:where(h3).card-image-text__title,
:where(p).card-image-text__text {
  margin: 0;
  font: inherit;
}

:where(img).card-image-text__image {
  display: block;
}

:where(a, button).card-image-text__button {
  box-sizing: border-box;
  font: inherit;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  border: none;
}

/* card-image-text */
.card-image-text {
  --card-background: #fff;
  --card-border: #e7e7e7;
  --card-title-color: #364153;
  --card-text-color: #5e6775;
  --card-button-background: #2b36f5;
  --card-button-background-hover: #1f28a8;
  --card-button-color: #fff;
  --card-focus-color: #2b36f5;

  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--card-background);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.card-image-text__media {
  aspect-ratio: 16 / 9;
}

.card-image-text__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-text__body {
  padding: 24px;
}

.card-image-text__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--card-title-color);
}

.card-image-text__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--card-text-color);
}

.card-image-text__button {
  display: inline-grid;
  place-items: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--card-button-color);
  background-color: var(--card-button-background);
  border-radius: calc(infinity * 1px);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--card-focus-color);
    outline-offset: 2px;
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s;

    &:hover {
      background-color: var(--card-button-background-hover);
    }
  }
}

/* layout */
.card-image-text-row-3-scroll {
  --scroll-focus-color: #2b36f5;

  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--scroll-focus-color);
    outline-offset: 2px;
  }

  &.is-scrollable {
    cursor: grab;

    &.is-dragging {
      cursor: grabbing;
      user-select: none;

      a {
        pointer-events: none;
      }
    }
  }

  @media (width >= 480px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1008px;
    overflow-x: visible;
  }
}

.card-image-text-row-3-scroll > .card-image-text {
  flex: 0 0 280px;
  grid-template-rows: auto 1fr;
  width: 280px;

  & .card-image-text__body {
    display: flex;
    flex-direction: column;
  }

  & .card-image-text__text {
    flex: 1;
  }

  @media (width >= 480px) {
    flex: unset;
    width: 100%;
  }
}

(function () {
  const DRAG_THRESHOLD = 5;
  const SUPPRESS_CLICK_MS = 100;

  function initDragScroll(el) {
    if (el.dataset.cardImageTextRow3ScrollInit === "true") return;
    el.dataset.cardImageTextRow3ScrollInit = "true";

    let isPointerDown = false;
    let isDragging = false;
    let suppressClick = false;
    let suppressClickTimeoutId = 0;
    let startX = 0;
    let startScrollLeft = 0;

    function clearSuppressClickTimeout() {
      if (suppressClickTimeoutId) {
        clearTimeout(suppressClickTimeoutId);
        suppressClickTimeoutId = 0;
      }
    }

    function canDrag() {
      return el.scrollWidth > el.clientWidth + 1;
    }

    function updateScrollState() {
      const scrollable = canDrag();
      el.classList.toggle("is-scrollable", scrollable);
      el.setAttribute(
        "aria-label",
        scrollable ? "カード一覧（横スクロール）" : "カード一覧",
      );
      if (scrollable) {
        el.tabIndex = 0;
      } else {
        el.removeAttribute("tabindex");
      }
    }

    updateScrollState();
    new ResizeObserver(updateScrollState).observe(el);

    function endDrag() {
      if (!isPointerDown) return;
      isPointerDown = false;
      if (isDragging) {
        suppressClick = true;
        isDragging = false;
        el.classList.remove("is-dragging");
        clearSuppressClickTimeout();
        suppressClickTimeoutId = setTimeout(() => {
          suppressClick = false;
          suppressClickTimeoutId = 0;
        }, SUPPRESS_CLICK_MS);
      }
    }

    el.addEventListener("pointerdown", (event) => {
      if (!canDrag() || event.button !== 0 || event.pointerType === "touch") {
        return;
      }

      isPointerDown = true;
      isDragging = false;
      suppressClick = false;
      clearSuppressClickTimeout();
      startX = event.clientX;
      startScrollLeft = el.scrollLeft;
      el.setPointerCapture(event.pointerId);
    });

    el.addEventListener("pointermove", (event) => {
      if (!isPointerDown) return;

      const dx = event.clientX - startX;
      if (!isDragging) {
        if (Math.abs(dx) < DRAG_THRESHOLD) return;
        isDragging = true;
        el.classList.add("is-dragging");
      }

      el.scrollLeft = startScrollLeft - dx;
      event.preventDefault();
    });

    el.addEventListener("pointerup", endDrag);
    el.addEventListener("pointercancel", endDrag);

    el.addEventListener(
      "click",
      (event) => {
        if (!suppressClick) return;
        event.preventDefault();
        event.stopPropagation();
        suppressClick = false;
        clearSuppressClickTimeout();
      },
      true,
    );
  }

  function initAll() {
    document
      .querySelectorAll(".js-card-image-text-row-3-scroll")
      .forEach(initDragScroll);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAll);
  } else {
    initAll();
  }
})();