/* ページタイトル帯 CyPN バッジ（コードマップ・page-logo）
   ※ .page_ttl-trustBadges は .inner の外・.page_ttl 直下（flex 子だと絶対配置の % が inner 基準になり狂うため）。
   ※ リセットの img { max-width: 100% } は親幅基準のため .cypn-badge-link に明示サイズを置く。 */

.page_ttl-titleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.page_ttl-titleRow .page_ttl-jp {
  margin: 0;
}

/* 中央配置（全幅 left/right + margin auto）のとき：帯下端から 3%（% は .page_ttl 基準）。固定ページは 768px〜で右寄せ。プラグイン詳細は別ブロックで全幅共通の固定位置。 */
.page_ttl-trustBadges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2rem);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  isolation: isolate;
}

/* ビューポート幅 540px 以下: 下端オフセットを広げる（768px 以上の top 右寄せは下記 min-width:48em で bottom: auto のため対象外） */
@media screen and (max-width: 33.75em) {
  .page_ttl-trustBadges {
    bottom: 10%;
  }
}

.page_ttl-trustBadges .cypn-badge-link,
.page_ttl-trustBadges .cypn-badge-static {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  pointer-events: none;
  perspective: 800px;
  width: 3.5rem;
  max-width: min(5.5rem, 22vw);
  border-radius: 50%;
  overflow: hidden;
}

.page_ttl-trustBadges .cypn-badge-link picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.page_ttl-trustBadges .cypn-badge-link.is-interactive {
  pointer-events: auto;
  cursor: pointer;
}

.page_ttl-trustBadges .cypn-badge-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px currentColor;
}

.page_ttl-trustBadges .cypn-badge-img,
.page_ttl-trustBadges .cypn-badge-link img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  transform-style: preserve-3d;
  transform-origin: center center;
  /* 配置の transform は使わない。回転演出のみ @keyframes で rotateY（DevTools の取り消し線は主にコンテナ側を避けるため） */
  /* --cypn-delay は JS で n×0.85s（複数時は開始をずらす）。both で待機中も keyframe 開始状態を維持 */
  animation: cypnBadgeSpinY 1.2s ease-out var(--cypn-delay, 0s) both;
}

/*
  タブレット以上（768px〜）かつ背景帯: バッジを帯内「中央より右」＋縦は top 基準で中段寄せ（bottom: 3% は打ち消し）。
  768px 未満の固定ページはベースの中央下のまま。
  バッジ一辺は --pagettl-badge-size。joyzo-plugin 詳細は body.has-pagettl-trust-badges--joyzo-plugin で別途固定配置。
*/
@media (min-width: 48em) {
  /*
    Loops / ユーティリティで .flex / .flex-column / .flex-sp-block 等が付くと横並びが潰れる。
    .page_ttl まで含めて詳細度を上げ、flex-direction を確実に固定する。
  */
  .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    /* 正方形バッジの一辺 */
    --pagettl-badge-size: min(6.5rem, max(4.25rem, 8vw));
    bottom: auto;
    left: 50%;
    right: auto;
    margin-inline: 0;
    margin-left: clamp(13rem, 11.25vw, 16rem);
    top: calc(50% + 1.1rem);
    margin-top: calc(var(--pagettl-badge-size) / -2);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    max-width: calc(100% - 2rem);
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* 固定ページ ecosystem39: 右寄せバッジ列をわずかに右へ（page-logo 帯） */
  body.page-ecosystem39 .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    margin-left: calc(clamp(13rem, 11.25vw, 16rem) + 2rem);
  }

  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link,
  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-static {
    flex: 0 0 auto;
    width: var(--pagettl-badge-size);
    height: var(--pagettl-badge-size);
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    max-height: 100%;
  }

  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-img,
  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link img,
  .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-static img {
    width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
  }
}

/* 768px〜1600px 付近: 背景タイトル画とバッジ列の左端が被りやすいので横だけ多めにずらす（プラグイン詳細は除外） */
@media (min-width: 48em) and (max-width: 100em) {
  body:not(.has-pagettl-trust-badges--joyzo-plugin) .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    margin-left: clamp(16rem, 14vw, 18rem);
  }

  body.page-ecosystem39:not(.has-pagettl-trust-badges--joyzo-plugin) .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    margin-left: calc(clamp(16rem, 14vw, 18rem) + 2rem);
  }
}

/* 1080〜1379px・固定ページ: ロゴ帯との重なり対策（プラグイン単体は除外） */
@media (min-width: 67.5em) and (max-width: 1379px) {
  body:not(.has-pagettl-trust-badges--joyzo-plugin) .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    /* この幅帯の上限相当で得られる一辺（min(6.5rem, …) の上限）未満に縮めない */
    --pagettl-badge-size: 6.5rem;
    margin-left: calc(clamp(16rem, 14vw, 18rem) + 30px);
  }

  body.page-ecosystem39:not(.has-pagettl-trust-badges--joyzo-plugin) .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    margin-left: calc(clamp(16rem, 14vw, 18rem) + 2rem + 30px + 15px);
  }
}

/*
  joyzo-plugin 詳細（body.has-pagettl-trust-badges--joyzo-plugin）のみ:
  基本は帯の 50%/50% ＋ translate(110px,-110px)（中央ロゴの右肩上）。モバイルは X のみ 85px。
  1081〜1280px は帯高の都合で -110px だけ上に寄り過ぎることがあるため、縦オフセットだけわずかに弱める（配置のイメージは維持）。
*/
body.has-pagettl-trust-badges--joyzo-plugin .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
  --pagettl-badge-size: 6.5rem;
  position: absolute;
  bottom: auto;
  left: 50%;
  top: 50%;
  right: auto;
  margin: 0;
  transform: translate(110px, -110px);
  width: max-content;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  max-width: calc(100% - 2rem);
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 47.9375em) {
  body.has-pagettl-trust-badges--joyzo-plugin .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    transform: translate(85px, -110px);
  }
}

@media (min-width: 1081px) and (max-width: 1280px) {
  body.has-pagettl-trust-badges--joyzo-plugin .page_ttl.page_ttl-has_bg .page_ttl-trustBadges {
    transform: translate(110px, -96px);
  }
}

body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link,
body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-static {
  flex: 0 0 auto;
  width: var(--pagettl-badge-size);
  height: var(--pagettl-badge-size);
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  max-height: 100%;
}

body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-img,
body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-link img,
body.has-pagettl-trust-badges--joyzo-plugin .page_ttl-has_bg .page_ttl-trustBadges .cypn-badge-static img {
  width: auto;
  height: 100%;
  max-width: none;
  max-height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .page_ttl-trustBadges .cypn-badge-img,
  .page_ttl-trustBadges .cypn-badge-link img {
    animation: none;
  }

  .page_ttl-trustBadges,
  .page_ttl-trustBadges .cypn-badge-link {
    pointer-events: auto;
  }

  .page_ttl-trustBadges .cypn-badge-link {
    cursor: pointer;
  }
}

@keyframes cypnBadgeSpinY {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

/* home_recognition は sass/layout/_home.scss → style.css に集約 */

/* プラグイン一覧カードの信頼バッジ: 重ねてずらすのみ（回転なし）。_archive.scss と併せて維持 */
.posts-joyzo-plugin .post--badge {
  transform-origin: top right;
}
.posts-joyzo-plugin .post--badge:nth-child(1) {
  transform: none;
}
.posts-joyzo-plugin .post--badge:nth-child(2) {
  transform: translate(calc(-14 * var(--rem-pc)), calc(8 * var(--rem-pc)));
}
.posts-joyzo-plugin .post--badge:nth-child(3) {
  transform: translate(calc(-28 * var(--rem-pc)), calc(16 * var(--rem-pc)));
}
@media screen and (max-width: 47.9375em) {
  .posts-joyzo-plugin .post--badge:nth-child(2) {
    transform: translate(calc(-10 * var(--rem-sp)), calc(6 * var(--rem-sp)));
  }
  .posts-joyzo-plugin .post--badge:nth-child(3) {
    transform: translate(calc(-18 * var(--rem-sp)), calc(12 * var(--rem-sp)));
  }
}