/**
 * 画像制限に関する視覚制御 (image-restriction.css)
 * 
 * 有料記事のサムネイル暗化、および記事内のサンプル画像（制限中）のボカシ・暗化を管理します。
 */

/* ==========================================================
 * 1. サムネイル暗化・制限処理（一覧ページ）
 * ==========================================================
 * 有料プランかつ未加入ユーザーの場合のみ、ボカシ・暗化を表示
 */

/* 有料会員以外（未ログイン・無料）向け：ボカシ＋暗化 */
body:not(.user-plan-basic):not(.user-plan-special) article.is-paid-post:not(.is-video-post):not(.is-taikendan-post):not(.is-story-post) .card-thumb::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(1.5px) brightness(80%);
  -webkit-backdrop-filter: blur(1.5px) brightness(80%);
  z-index: 1;
  pointer-events: none;
}

/* 有料会員以外（未ログイン・無料）向け：中央にプレミアムなロックアイコンを表示 */
body:not(.user-plan-basic):not(.user-plan-special) article.is-paid-post:not(.is-video-post):not(.is-taikendan-post):not(.is-story-post) .card-thumb::after {
  content: "\f023"; /* fa-lock (FontAwesome 4) */
  font-family: FontAwesome;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* デザイン調整：黄金色のグラデーション + 白い縁取り（プレミアム感） */
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.8); /* よりはっきりした縁取り */
  
  font-size: 32px;
  line-height: 1;
  padding-bottom: 2px; /* アイコンをわずかに上にずらして視覚的に中央に */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* 影を少し強調 */
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================
 * 2. 制限画像プレビュー（記事内ページ）
 * ==========================================================
 * restriction_images ショートコード / scode.post-images.php で使用。
 */
.restriction_images .sample-images img:not(.lock-icon) {
    filter: blur(1.5px) brightness(80%); /* ぼかし効果 + 暗くする */
    -webkit-filter: blur(1.5px) brightness(80%); /* Safari対応 */
    transition: filter 0.3s ease;
    max-width: 140px; /* デスクトップでの最大幅 */
}

.restriction_images .sample-images {
    display: flex; /* 3枚目以降は横並びに */
    gap: 10px; /* 横のスペースを空ける */
    flex-wrap: wrap;
    justify-content: center;
    position: relative; /* 親要素の位置基準を設定 */
}

/* ロックアイコン関連 */
.restriction_images .lock-icon {
    z-index: 1;
    width: 200px !important;
    position: absolute !important;
    top: 50%;
    transform: translate(0%, -50%); /* アイコンの中央を基準にする */
    opacity: 0.8; /* アイコンの透明度 */
    pointer-events: none; /* アイコンのクリックイベントを無効にする */
}

.lock-text {
    z-index: 2;
    position: absolute; /* 親要素に対して絶対位置を指定 */
    top: calc(50% + 42px); /* 縦方向の少し下に配置 */
    left: 50%; /* 横方向の中央 */
    transform: translateX(-50%); /* テキストの中央を基準にする */
    color: white; /* テキストの色 */
    font-size: 24px; /* フォントサイズ */
    background: rgba(0, 0, 0, 0.7); /* 背景を半透明にする */
    padding: 5px; /* テキストの内側の余白 */
    border-radius: 5px; /* 角を丸くする */
    text-align: center; /* テキストを中央揃え */
}

/* モバイル表示用のメディアクエリ */
@media screen and (max-width: 768px) {
    .restriction_images .sample-images img:not(.lock-icon) {
        max-width: 90px; /* モバイルでの最大幅を小さくする */
    }

    .restriction_images .sample-images {
        gap: 5px; /* 横のスペースを少し狭くする */
        justify-content: center;
    }
}

/* ==========================================================
 * 3. 画像まとめ (Digest) のレイアウト復旧
 * ==========================================================
 */
.box.digest {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 8pxから10pxに変更 */
    justify-content: center; /* flex-startからcenterに変更 */
    padding: 15px;
    clear: both;
}

/* 画像まとめ内のリンクと画像 */
.box.digest a.a-wrap,
.box.digest .digest {
    display: block;
    width: 140px; /* 80pxから140pxに拡大 */
    height: 140px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 4px;
    overflow: hidden;
}

.box.digest img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* スマホ表示での調整 */
@media screen and (max-width: 768px) { /* 480pxから768pxに統一 */
    .box.digest {
        gap: 8px; /* 5pxから8pxに変更 */
        padding: 10px;
    }
    .box.digest a.a-wrap,
    .box.digest .digest {
        width: 90px; /* 65pxから90pxに拡大 */
        height: 90px;
    }
}