/**
 * embeds.css
 * ----------------------------------------------------------------
 * 目的：
 *  - embed.php が出力する “カード型埋め込み（Pixiv FANBOX対応）” の
 *    見た目を定義するスタイルシート。
 *  - マークアップの class は BEM 風（.embed-card__*）で統一。
 *
 * 設計のポイント：
 *  - 画像あり：2カラム（サムネ + 本文）
 *  - 画像なし：1カラム（本文のみ） … :has() が使える環境で自動判定
 *  - 文字は 2～3行で省略（line-clamp）し、カード全体をリンク化
 *  - ダークモード、コントラスト、リデュースドモーション対応
 *
 * 使い方：
 *  - 本ファイルをテーマから enqueue（フロント共通など）してください。
 *    例）wp_enqueue_style('embeds', get_stylesheet_directory_uri().'/css/embeds.css', [], '1.0.0');
 * ----------------------------------------------------------------
 */

/* --------------------------------------------------------------
 * 変数（テーマ側で上書き可能）
 * ------------------------------------------------------------ */
:root {
  --embed-radius: 12px;
  --embed-border: 1px;
  --embed-border-color: #e7e7e7;
  --embed-bg: #fff;
  --embed-text: #111;
  --embed-muted: #666;
  --embed-shadow: 0 1px 2px rgba(0,0,0,.04);
  --embed-shadow-hover: 0 6px 24px rgba(0,0,0,.12);

  --embed-title-weight: 600;
  --embed-title-lines: 2;
  --embed-desc-lines: 3;

  --embed-media-ratio: 7 / 5;        /* サムネ比率（横長） */
  --embed-media-col: 140px;          /* PC 時のサムネ幅 */
  --embed-media-col-sp: 110px;       /* SP 時のサムネ幅 */
  --embed-gap: 12px;

  /* FANBOX 固有のホストピル色 */
  --embed-fanbox-host-bg: #111;
  --embed-fanbox-host-fg: #fff;

  /* ★追加：Patreon 固有のホストピル色（ブランドカラー） */
  --embed-patreon-host-bg: #ff424d;  /* Patreon Red */
  --embed-patreon-host-fg: #fff;

  /* ===== 追加：オーバーレイ（全面画像 + 右下テキスト）用の調整値 ===== */
  --embed-overlay-ratio: 16 / 9;           /* 新レイアウトの既定アスペクト比 */
  --embed-overlay-pad: 10px 12px;          /* テキストパネルの内側余白 */
  --embed-overlay-radius: 10px;            /* テキストパネルの角丸 */
  --embed-overlay-maxw: min(60%, 520px);   /* テキストパネルの最大幅（PC想定） */
  --embed-overlay-panel-bg: rgba(17,17,17,.72);  /* テキストパネルの半透明背景 */
  --embed-overlay-panel-fg: #fff;          /* テキストパネルの文字色 */
  --embed-overlay-blur: saturate(150%) blur(6px);/* 背面ブラー（対応環境のみ） */
}

/* ダークモード（控えめな反転） */
@media (prefers-color-scheme: dark) {
  :root {
    --embed-border-color: #2a2a2a;
    --embed-bg: #1a1a1a;
    --embed-text: #f2f2f2;
    --embed-muted: #9aa0a6;
    --embed-shadow: 0 1px 2px rgba(0,0,0,.6);
    --embed-shadow-hover: 0 8px 28px rgba(0,0,0,.55);
    --embed-fanbox-host-bg: #e5e5e5;
    --embed-fanbox-host-fg: #111;

    /* ダーク時はテキストパネルをやや明るめに */
    --embed-overlay-panel-bg: rgba(255,255,255,.14);
    --embed-overlay-panel-fg: #fff;
  }
}

/* --------------------------------------------------------------
 * ベースカード
 *  - embed.php は <div class="embed-card embed-card--fanbox">… を出力
 * ------------------------------------------------------------ */
.embed-card {
  color: var(--embed-text);
  background: var(--embed-bg);
  border: var(--embed-border) solid var(--embed-border-color);
  border-radius: var(--embed-radius);
  box-shadow: var(--embed-shadow);
  overflow: hidden;

  /* 初期は 1 カラム。画像がある場合は :has() で 2 カラムへ（後述） */
  display: grid;
  grid-template-columns: 1fr;
}

/* カード全体をリンク化（アンカーで余白までクリック可能に） */
.embed-card__link {
  display: grid;
  grid-template-columns: 1fr;            /* 画像なしの既定 */
  gap: var(--embed-gap);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .06s ease;
}

/* hover/active の持ち上がり効果（リデュースドモーション配慮） */
@media (prefers-reduced-motion: no-preference) {
  .embed-card__link:hover {
    box-shadow: var(--embed-shadow-hover);
  }
  .embed-card__link:active {
    transform: translateY(1px);
  }
}

/* キーボードフォーカス（視認性の高い外枠） */
.embed-card__link:focus-visible {
  outline: 2px solid transparent;    /* iOS Safari の滲み防止 */
  box-shadow:
    0 0 0 3px rgba(59,130,246,.35),  /* 青みの外側グロー */
    var(--embed-shadow-hover);
}

/* --------------------------------------------------------------
 * メディア（サムネイル）
 * ------------------------------------------------------------ */
.embed-card__media {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: var(--embed-media-ratio);
  border-top-left-radius: calc(var(--embed-radius) - var(--embed-border));
  border-bottom-left-radius: calc(var(--embed-radius) - var(--embed-border));
}

/* 画像は常にトリミングしてフィット */
.embed-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------
 * 本文エリア
 * ------------------------------------------------------------ */
.embed-card__body {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
}

/* タイトル（2行で省略） */
.embed-card__title {
  font-weight: var(--embed-title-weight);
  line-height: 1.35;
  display: -webkit-box;                 /* 旧WebKitクランプ */
  -webkit-line-clamp: var(--embed-title-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.35em * var(--embed-title-lines));
}

/* メタ列（@handle ・ host ピル） */
.embed-card__meta {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 12px;
  color: var(--embed-muted);
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.embed-card__author {
  color: #444;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .embed-card__author { color: #ddd; }
}

.embed-card__separator {
  opacity: .5;
}

/* ホスト名のピル（FANBOX用の色） */
.embed-card__host {
  background: var(--embed-fanbox-host-bg);
  color: var(--embed-fanbox-host-fg);
  border-radius: 999px;
  padding: .15em .6em;
  font-size: 11px;
}

/* 説明（3行で省略） */
.embed-card__desc {
  color: #555;
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: var(--embed-desc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(1.55em * var(--embed-desc-lines));
}
@media (prefers-color-scheme: dark) {
  .embed-card__desc { color: #c8c8c8; }
}

/* --------------------------------------------------------------
 * レイアウト：画像の有無で 1カラム⇄2カラムを自動切替
 *   - :has() が使えるブラウザでは自動で 2 カラム化
 *   - 非対応環境では 1 カラムのままでも読みやすい構成にしている
 * ------------------------------------------------------------ */
@supports selector(:has(*)) {
  .embed-card:has(.embed-card__media) .embed-card__link {
    grid-template-columns: var(--embed-media-col) 1fr;
  }
}

/* モバイル幅ではサムネのカラム幅を縮小 */
@media (max-width: 480px) {
  @supports selector(:has(*)) {
    .embed-card:has(.embed-card__media) .embed-card__link {
      grid-template-columns: var(--embed-media-col-sp) 1fr;
    }
  }
}

/* --------------------------------------------------------------
 * FANBOX バリアント（将来、他サービス用カードとの区別が必要になった際の拡張点）
 * ------------------------------------------------------------ */
.embed-card--fanbox .embed-card__media {
  background: #fafafa;                  /* 若干明るめの土台 */
}
.embed-card--fanbox .embed-card__title {
  /* タイトルの重さを僅かに強めたい場合に備えたフック */
  font-variation-settings: "wght" var(--embed-title-weight);
}

/* ★追加：Patreon バリアント（見た目は FANBOX と同等・色だけ切替） */
.embed-card--patreon .embed-card__media {
  background: #fafafa;
}
.embed-card--patreon .embed-card__title {
  font-variation-settings: "wght" var(--embed-title-weight);
}
/* ブランドカラーのホストピル */
.embed-card--patreon .embed-card__host {
  background: var(--embed-patreon-host-bg);
  color: var(--embed-patreon-host-fg);
}

/* ==============================================================
 * 追加：オーバーレイレイアウト
 *  - 画像をカード全面に敷き、右下にテキストパネルを重ねる。
 *  - 既存の2カラム構成は維持しつつ、モディファイア
 *    `.embed-card--overlay` を付けたカードのみ切り替える。
 * ============================================================== */

/* 土台はカード外周の角丸/影をそのまま活かす
 * ★修正：オーバーレイ時は枠線を不要にするため、変数を 0 にし border も除去 */
.embed-card--overlay {
  display: block;               /* grid → block に戻す（以降は絶対配置で制御） */
  --embed-border: 0;            /* 角丸計算(calc)と挙動の一貫性のために変数ごと0へ */
  border: none;                 /* 黒い外枠を完全に消す */
}

/* カード全体をクリック可能に保ったまま、アスペクト比を固定 */
.embed-card--overlay .embed-card__link {
  position: relative;
  display: block;               /* グリッド解除 */
  aspect-ratio: var(--embed-overlay-ratio);
  overflow: hidden;             /* 子要素のはみ出しを隠す（角丸に追従） */
}

/* aspect-ratio 非対応ブラウザ向けフォールバック（高さを比率で確保） */
@supports not (aspect-ratio: 1 / 1) {
  .embed-card--overlay .embed-card__link {
    height: 0;
    padding-top: calc(100% * 9 / 16);   /* 16:9 を既定に */
  }
}

/* 画像を全面化。親の角丸でクリップされる想定 */
.embed-card--overlay .embed-card__media {
  position: absolute;
  inset: 0;
  border-radius: 0;                       /* 左側だけ丸い既存設定を打ち消す */
  background: #eaeaea;
  aspect-ratio: auto;                     /* 既存の比率指定は不要になるためリセット */
}

/* 画像自体は cover で敷き詰め */
.embed-card--overlay .embed-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 読みやすさのため、下から上へ薄いグラデを重ねる（クリックを阻害しない） */
.embed-card--overlay .embed-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.45) 10%, rgba(0,0,0,0) 55%);
}
@media (prefers-color-scheme: dark) {
  .embed-card--overlay .embed-card__link::before {
    background: linear-gradient(to top, rgba(0,0,0,.35) 10%, rgba(0,0,0,0) 55%);
  }
}

/* テキストパネル：右下固定。半透明背景 + 角丸 + ブラー */
.embed-card--overlay .embed-card__body {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  top: auto;
  z-index: 1;
  padding: var(--embed-overlay-pad);
  max-width: var(--embed-overlay-maxw);
  background: var(--embed-overlay-panel-bg);
  color: var(--embed-overlay-panel-fg);
  border-radius: var(--embed-overlay-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  backdrop-filter: var(--embed-overlay-blur);
  -webkit-backdrop-filter: var(--embed-overlay-blur);
  display: grid;
  gap: 6px;
}

/* オーバーレイ時は文字色をパネル色に合わせて強制 */
.embed-card--overlay .embed-card__title,
.embed-card--overlay .embed-card__desc,
.embed-card--overlay .embed-card__meta,
.embed-card--overlay .embed-card__author {
  color: var(--embed-overlay-panel-fg);
  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* 低コントラスト背景上での可読性向上 */
}

/* ホストピルは白背景のほうが乗算しにくく視認性が高い（既定） */
.embed-card--overlay .embed-card__host {
  background: rgba(255,255,255,.92);
  color: #111;
}
@media (prefers-color-scheme: dark) {
  .embed-card--overlay .embed-card__host {
    background: rgba(255,255,255,.9);
    color: #111;
  }
}

/* ★追加：Patreon × オーバーレイ時はブランド色のほうが視認性が高いケースが多いので上書き */
.embed-card--patreon.embed-card--overlay .embed-card__host {
  background: rgba(255,66,77,.92);
  color: #fff;
}

/* モバイルではパネルをやや広げて読みやすく */
@media (max-width: 640px) {
  .embed-card--overlay .embed-card__body {
    right: 8px;
    left: 8px;                 /* 端末幅に合わせて横幅を確保 */
    max-width: none;
  }
}

/* 既存の「画像あり→2カラム化」ルールをオーバーレイでは無効化 */
@supports selector(:has(*)) {
  .embed-card--overlay:has(.embed-card__media) .embed-card__link {
    grid-template-columns: 1fr !important; /* 念のため上書き */
  }
}

/* 右上/左下への配置などに拡張したい場合のための位置モディファイア例 */
.embed-card--overlay.embed-card--overlay-tr .embed-card__body { right: 10px; top: 10px; bottom: auto; left: auto; }
.embed-card--overlay.embed-card--overlay-bl .embed-card__body { left: 10px; bottom: 10px; right: auto; top: auto; }
.embed-card--overlay.embed-card--overlay-tl .embed-card__body { left: 10px; top: 10px; right: auto; bottom: auto; }

/* ==============================================================
 * 追加：カードのコンパクト表示（FANBOX / Patreon）
 * 目的：
 *  - 対象サービスのカードだけを“いまの約半分”の見た目に縮める。
 * 方法：
 *  - 外側の最大幅（max-width）を制限して箱ごと小さくする。
 *  - フラット（2カラム）時はサムネ列と余白の変数を少し詰める。
 *  - オーバーレイ時は外側の幅だけで自動縮小（aspect-ratio に従う）。
 * ============================================================== */

/* ▼サービス共通：カードの最大幅を制限（= 見た目を“半分”に） */
.embed-card--fanbox,
.embed-card--patreon {
  --embed-card-maxw: 500px;     /* お好みで 320〜400px 程度に調整可 */
  max-width: var(--embed-card-maxw);
  width: 100%;
  margin: 12px auto;            /* 中央寄せ。左寄せは margin: 12px 0; */
  align-self: flex-start;       /* 親が flex のときの縦伸び抑止 */
}

/* ▼フラット（2カラム）で窮屈に見えないよう、列幅と隙間を詰める */
.embed-card--fanbox,
.embed-card--patreon {
  --embed-media-col: 100px;     /* PC時サムネ列（元:140px） */
  --embed-media-col-sp: 90px;   /* SP時サムネ列（元:110px） */
  --embed-gap: 8px;             /* グリッド隙間（元:12px） */
  /* 必要があれば本文をさらにコンパクトに：
     --embed-desc-lines: 2;
  */
}

/* ▼オーバーレイ（画像全面）時：右下パネルの最大幅をやや抑える */
.embed-card--fanbox.embed-card--overlay,
.embed-card--patreon.embed-card--overlay {
  --embed-overlay-maxw: min(70%, 360px);
  /* さらに詰めたい場合：
     --embed-overlay-pad: 8px 10px;
  */
}

/* ▼任意：一部の投稿だけ小さくしたい場合に使う補助クラス */
.embed-card--compact {
  --embed-card-maxw: 360px;
  max-width: var(--embed-card-maxw);
  width: 100%;
  margin: 12px auto;
  align-self: flex-start;
}
.embed-card--compact {
  --embed-media-col: 100px;
  --embed-media-col-sp: 90px;
  --embed-gap: 8px;
}
.embed-card--compact.embed-card--overlay {
  --embed-overlay-maxw: min(70%, 360px);
}

/* --------------------------------------------------------------
 * 印刷時の視認性（影を外し、リンクURL を補足）
 * ------------------------------------------------------------ */
@media print {
  .embed-card {
    box-shadow: none !important;
  }
  .embed-card__link::after {
    content: " (" attr(href) ")";
    color: var(--embed-muted);
    font-size: 11px;
    word-break: break-all;
    margin-left: .25em;
  }
}