/* おすすめページ挿入 — フロント（左: タイトル / 右: サムネ） */

.arc-recommended-page {
  --arc-rec-page-gap: clamp(0.85rem, 2.5vw, 1.25rem);
  --arc-rec-page-media-width: clamp(5.5rem, 22vw, 8.5rem);
  --arc-rec-page-radius: clamp(0.5rem, 1.5vw, 0.75rem);
  --arc-rec-page-border: #d8dadf;
  --arc-rec-page-reveal-offset: clamp(0.15rem, 0.45vw, 0.25rem);
  --arc-rec-page-accent: var(--arc-brand-yellow, #ffe900);
  --arc-rec-page-card-bg: var(--arc-rec-page-accent);
  --arc-rec-page-surface: var(--arc-brand-surface-card, #fff);
  --arc-rec-page-link-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23000" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill="%23000" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');
  margin: clamp(1rem, 2.5vw, 1.5rem) 0;
  color: var(--arc-brand-dark, #2c2e36);
}

.arc-recommended-page *,
.arc-recommended-page *::before,
.arc-recommended-page *::after {
  box-sizing: border-box;
}

.arc-recommended-page__frame {
  position: relative;
  margin-right: var(--arc-rec-page-reveal-offset);
  margin-bottom: var(--arc-rec-page-reveal-offset);
}

.arc-recommended-page__card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--arc-rec-page-radius);
  background: var(--arc-rec-page-card-bg);
  transform: rotate(0deg);
  transform-origin: 100% 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.arc-recommended-page__link {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--arc-rec-page-media-width);
  gap: var(--arc-rec-page-gap);
  align-items: stretch;
  min-height: 100%;
  padding: clamp(0.85rem, 2vw, 1.1rem) clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid var(--arc-rec-page-border);
  border-radius: var(--arc-rec-page-radius);
  color: var(--arc-brand-dark, #2c2e36);
  text-decoration: none;
  background-color: var(--arc-rec-page-surface);
  background-image: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}

:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  a.arc-recommended-page__link,
.arc-recommended-page a.arc-recommended-page__link {
  color: var(--arc-brand-dark, #2c2e36);
  text-decoration: none;
  border: 1px solid var(--arc-rec-page-border);
  border-bottom: 1px solid var(--arc-rec-page-border);
  background-color: var(--arc-rec-page-surface);
  background-image: none;
  box-shadow: none;
}

:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  a.arc-recommended-page__link::before,
:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  a.arc-recommended-page__link::after,
.arc-recommended-page a.arc-recommended-page__link::before,
.arc-recommended-page a.arc-recommended-page__link::after {
  content: none;
  display: none;
}

.arc-recommended-page a.arc-recommended-page__link:focus-visible {
  outline: 2px solid var(--arc-rec-page-accent);
  outline-offset: 0.2rem;
}

.arc-recommended-page__body {
  display: flex;
  align-items: center;
  min-width: 0;
}

:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  .arc-recommended-page__title,
.arc-recommended-page .arc-recommended-page__title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(0.9375rem, 2.1vw, 1.125rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: inherit;
  transition: color 0.3s ease;
}

/* テーマ prose-inline-link と同じ box-arrow-up-right */
.arc-recommended-page .arc-recommended-page__title::after {
  content: '' / '';
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-inline-start: 0.3em;
  margin-inline-end: 0.35em;
  vertical-align: 0.08em;
  background-color: currentColor;
  mask: var(--arc-rec-page-link-icon-mask) no-repeat center / contain;
  -webkit-mask: var(--arc-rec-page-link-icon-mask) no-repeat center / contain;
}

.arc-recommended-page__media {
  position: relative;
  align-self: stretch;
  min-height: 3.5rem;
  overflow: hidden;
  border-radius: calc(var(--arc-rec-page-radius) * 0.85);
  background: #eef0f3;
}

.arc-recommended-page__image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  .arc-recommended-page__image,
.arc-recommended-page .arc-recommended-page__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.arc-recommended-page__image--placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #eef0f3 0%, #dfe3ea 100%);
}

@media (hover: hover) and (pointer: fine) {
  .arc-recommended-page__frame:hover .arc-recommended-page__card-bg,
  .arc-recommended-page__frame:focus-within .arc-recommended-page__card-bg {
    transform: rotate(2deg);
  }

  .arc-recommended-page__frame:hover .arc-recommended-page__link,
  .arc-recommended-page__frame:focus-within .arc-recommended-page__link,
  .arc-recommended-page__frame:hover .arc-recommended-page__title,
  .arc-recommended-page__frame:focus-within .arc-recommended-page__title {
    color: var(--arc-rec-page-accent);
  }

  :is(#postContent .thewrap-blog-prose, #postContent .generalText, #postContent)
    .arc-recommended-page__frame:hover
    a.arc-recommended-page__link,
  :is(#postContent .thewrap-blog-prose, #postContent .generalText, #postContent)
    .arc-recommended-page__frame:focus-within
    a.arc-recommended-page__link {
    color: var(--arc-rec-page-accent);
    background-color: var(--arc-rec-page-surface);
    text-decoration: none;
  }
}

@media (max-width: 480px) {
  .arc-recommended-page__link {
    grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 28vw, 6.5rem);
    padding: 0.75rem;
  }
}