/* おすすめページ挿入 — フロント（左: タイトル / 右: サムネ）
 *
 * テーマの #postContent a / p / img 上書きに勝つため、必要な箇所だけ
 * :is(#postContent …) で specificity を上げる（!important は使わない）。
 */

.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;
  /* hover 時ティルトのはみ出し分を常時確保（通常時は閉じる。前後ギャップは動かさない） */
  --arc-rec-page-reveal-x: clamp(0.2rem, 0.55vw, 0.35rem);
  --arc-rec-page-reveal-y: clamp(0.6rem, 1.8vw, 1.1rem);
  --arc-rec-page-tilt: 1deg;
  --arc-rec-page-accent: var(--arc-brand-yellow, #ffe900);
  --arc-rec-page-surface: var(--arc-brand-surface-card, #fff);
  /* 内部リンク用 chevron（外部リンクアイコンは使わない） */
  --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="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');

  box-sizing: border-box;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0;
  padding: var(--arc-rec-page-reveal-y) var(--arc-rec-page-reveal-x) 0 0;
  overflow: clip;
  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;
}

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

.arc-recommended-page__link,
:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .arc-recommended-page
  a.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;
  box-shadow: none;
  transition: color 0.3s ease;
}

.arc-recommended-page a.arc-recommended-page__link::before,
.arc-recommended-page a.arc-recommended-page__link::after,
: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 {
  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;
}

.arc-recommended-page .arc-recommended-page__title,
:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .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;
}

.arc-recommended-page .arc-recommended-page__title::after {
  content: '' / '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-inline-start: 0.35em;
  vertical-align: 0.12em;
  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;
}

.arc-recommended-page .arc-recommended-page__image,
:is(
    #postContent .thewrap-blog-prose,
    #postContent .generalText,
    #postContent,
    .entry-content
  )
  .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;
  background: linear-gradient(135deg, #eef0f3 0%, #dfe3ea 100%);
}

@media (hover: hover) and (pointer: fine) {
  .arc-recommended-page__frame:is(:hover, :focus-within) .arc-recommended-page__card-bg {
    transform: rotate(var(--arc-rec-page-tilt));
  }

  .arc-recommended-page__frame:is(:hover, :focus-within) .arc-recommended-page__link,
  .arc-recommended-page__frame:is(:hover, :focus-within) .arc-recommended-page__title,
  :is(#postContent .thewrap-blog-prose, #postContent .generalText, #postContent, .entry-content)
    .arc-recommended-page__frame:is(:hover, :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,
  :is(#postContent .thewrap-blog-prose, #postContent .generalText, #postContent, .entry-content)
    .arc-recommended-page
    a.arc-recommended-page__link {
    grid-template-columns: minmax(0, 1fr) clamp(4.5rem, 28vw, 6.5rem);
    padding: 0.75rem;
  }
}