<div class="card-wrapper">
  <article class="card" aria-labelledby="article1" data-href="https://www.tak-dcxi.com/article/accordion-implementation-example-using-the-name-attribute-of-details" data-blank>
    <h2 id="article1" class="title">
      <a class="article-link" href="https://www.tak-dcxi.com/article/accordion-implementation-example-using-the-name-attribute-of-details" target="_blank" rel="external">
        details要素のname属性を使用した排他的なアコーディオンの実装例
      </a>
    </h2>
    <p class="category">
      <span class="visually-hidden">カテゴリ：</span>
      <a href="https://www.tak-dcxi.com/articles/html/" target="_blank" rel="external">HTML</a>
    </p>
    <p class="publish">
      <span class="visually-hidden">投稿日：</span>
      <time datetime="2024-04-30">2024.04.30</time>
    </p>
    <a class="thumbnail article-link" href="https://www.tak-dcxi.com/article/accordion-implementation-example-using-the-name-attribute-of-details" target="_blank" rel="external" tabindex="-1">
      <img src="https://picsum.photos/800/450?random=1" width="800" height="450" decoding="async" fetchpriority="high" alt="" />
      <span class="thumbnail-text">Read article<span class="visually-hidden">: details要素のname属性を使用した排他的なアコーディオンの実装例</span></span>
    </a>
  </article>
  <article class="card" aria-labelledby="article2" data-href="https://www.tak-dcxi.com/article/scroll-linked-animation-implementation-examples" data-blank>
    <h2 id="article2" class="title">
      <a class="article-link" href="https://www.tak-dcxi.com/article/scroll-linked-animation-implementation-examples" target="_blank" rel="external">
        スクロール連動アニメーションの実装例
      </a>
    </h2>
    <p class="category">
      <span class="visually-hidden">カテゴリ：</span>
      <a href="https://www.tak-dcxi.com/articles/css/" target="_blank" rel="external">CSS</a>
    </p>
    <p class="publish">
      <span class="visually-hidden">投稿日：</span>
      <time datetime="2024-04-23">2024.04.23</time>
    </p>
    <a class="thumbnail article-link" href="https://www.tak-dcxi.com/article/scroll-linked-animation-implementation-examples" target="_blank" rel="external" tabindex="-1">
      <img src="https://picsum.photos/800/450?random=2" width="800" height="450" decoding="async" fetchpriority="high" alt="" />
      <span class="thumbnail-text">Read article<span class="visually-hidden">: スクロール連動アニメーションの実装例</span></span>
    </a>
  </article>
  <article class="card" aria-labelledby="article3" data-href="https://www.tak-dcxi.com/article/implementation-example-of-a-modal-created-using-the-dialog-element" data-blank>
    <h2 id="article3" class="title">
      <a class="article-link" href="https://www.tak-dcxi.com/article/implementation-example-of-a-modal-created-using-the-dialog-element" target="_blank" rel="external">
        dialog要素を使用したモーダルウィンドウの実装例
      </a>
    </h2>
    <p class="category">
      <span class="visually-hidden">カテゴリ：</span>
      <a href="https://www.tak-dcxi.com/articles/" target="_blank" rel="external">JavaScript</a>
    </p>
    <p class="publish">
      <span class="visually-hidden">投稿日：</span>
      <time datetime="2024-04-12">2024.04.12</time>
    </p>
    <a class="thumbnail article-link" href="https://www.tak-dcxi.com/article/implementation-example-of-a-modal-created-using-the-dialog-element" target="_blank" rel="external" tabindex="-1">
      <img src="https://picsum.photos/800/450?random=3" width="800" height="450" decoding="async" fetchpriority="high" alt="" />
      <span class="thumbnail-text">Read article<span class="visually-hidden">: dialog要素を使用したモーダルウィンドウの実装例</span></span>
    </a>
  </article>
</div>

.card-wrapper {
  --max-inline-size: 1024px;
  --column-min-size: 20rem;
  --gap: max(16px, 2.5%);

  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--column-min-size), 100%), 1fr)
  );
  gap: var(--gap);
  max-inline-size: var(--max-inline-size);
  margin-inline: auto;
}

.card {
  --gutter: 1lh;
  --font-size: clamp(0.75rem, 0.705rem + 0.23vi, 0.875rem);
  --color-background: #fcfcfc;
  --color-background-active: color-mix(
    in srgb,
    var(--color-background),
    black 5%
  );
  --color-active: #1ca4b4;
  --shadow: 0 4px 10px rgb(0 0 0 / 20%);
  --duration: 0.3s;

  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: var(--gutter);
  padding: var(--gutter);
  font-size: var(--font-size);
  background-color: var(--color-background);
  transition: background-color var(--duration), box-shadow var(--duration);

  &:focus-within {
    background-color: var(--color-background-active);
    box-shadow: var(--shadow);
  }

  @media (scripting: enabled) {
    &[data-href] {
      cursor: pointer;
    }
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-background-active);
      box-shadow: var(--shadow);
    }
  }
}

.title {
  font-size: 1em;
}

.title a {
  display: -webkit-box;
  block-size: min(100%, 3lh);
  overflow: clip;
  text-overflow: ellipsis;
  -webkit-box-orient: block-axis;
  -webkit-line-clamp: 3;
  transition: color var(--duration);

  &:where(.card:has(.article-link:focus-visible) *) {
    color: var(--color-active);
  }

  @media (any-hover: hover) {
    &:where(.card:has(.article-link:hover)
        *, .card:not([data-link-hovered]):hover *) {
      color: var(--color-active);
    }
  }
}

.category {
  grid-row: 2 / 3;
}

.category a {
  --color-decoration: color-mix(in srgb, currentcolor 20%, white);

  display: inline-block;
  padding-block: 0.1em;
  padding-inline: 1em;
  border: 1px solid var(--color-decoration);
  border-radius: calc(infinity * 1px);
  transition: background-color var(--duration), color var(--duration);

  &:focus-visible {
    color: var(--color-active);
    background-color: var(--color-decoration);
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-active);
      background-color: var(--color-decoration);
    }
  }
}

.thumbnail {
  display: block;
  grid-row: 1 / 2;
  min-inline-size: 0;
  aspect-ratio: 16 / 9;
  margin-block-start: calc(var(--gutter) * -1);
  margin-inline: calc(var(--gutter) * -1);
  contain: strict;

  &:where(.card:has(.article-link:focus-visible) *) {
    outline: auto;
  }
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration);

  &:where(.card:has(.article-link:focus-visible) *) {
    scale: 1.1;
  }

  @media (any-hover: hover) {
    &:where(.card:has(.article-link:hover)
        *, .card:not([data-link-hovered]):hover *) {
      scale: 1.1;
    }
  }
}

.thumbnail-text {
  --color-text: var(--color-white);
  --color-background: color-mix(in srgb, var(--color-active) 80%, transparent);
  --shadow: 2px 2px 2px color-mix(in srgb, currentcolor 30%, transparent);

  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Open Sans", var(--font-sans);
  font-size: 2.5em;
  color: var(--color-text);
  text-shadow: var(--shadow);
  background-color: var(--color-background);
  opacity: 0;
  writing-mode: initial;
  transition: opacity var(--duration), scale var(--duration);

  &:where(.card:has(.article-link:focus-visible) *) {
    opacity: 1;
    scale: 1.05;
  }

  @media (any-hover: hover) {
    &:where(.card:has(.article-link:hover)
        *, .card:not([data-link-hovered]):hover *) {
      opacity: 1;
      scale: 1.05;
    }
  }
}

.visually-hidden {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  inline-size: 4px !important;
  block-size: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  contain: strict !important;
  pointer-events: none !important;
  visibility: visible !important;
  border: none !important;
  opacity: 0 !important;
}

@layer defaults {
  :root {
    --color-white: #fcfcfc;
    --color-smoke: #dadada;
    --color-black: #353535;
    --font-sans: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    margin: 0;
  }

  body {
    padding: max(5vi, 20px);
    font-family: var(--font-sans);
    color: var(--color-black);
    background-color: var(--color-smoke);
    line-height: 1.5;
  }

  a {
    color: unset;
    text-decoration: unset;
  }
}

const initializeCard = (card) => {
  card.addEventListener("click", handleCardClick);
  card.querySelectorAll("a").forEach((link) => {
    link.addEventListener("mouseover", () => handleLinkHover(card, true));
    link.addEventListener("mouseout", () => handleLinkHover(card, false));
  });
};

const handleCardClick = (event) => {
  if (event.target.closest("a")) {
    return;
  }

  const card = event.currentTarget;
  const href = card.getAttribute("data-href");
  if (!href) return;

  const blank = card.hasAttribute("data-blank");
  if (blank) {
    window.open(href, "_blank");
  } else {
    window.location.href = href;
  }
};

const handleLinkHover = (card, isHovered) => {
  if (isHovered) {
    card.setAttribute("data-link-hovered", "true");
  } else {
    card.removeAttribute("data-link-hovered");
  }
};

document.addEventListener("DOMContentLoaded", () => {
  const cards = document.querySelectorAll(".card");
  if (cards.length === 0) return;

  cards.forEach((card) => {
    initializeCard(card);
  });
});