/* =====================================================================
   外部リンクカード
   ・大きいカード：[sc_Linkcard]・ブロック「外部リンクカード」の「大きいカード」（.blog-card02）
   ・REFERENCE：[sc_Linkcard2]・ブロックの「シンプル」（.blog-card-sp）
   ・HTML はプラグイン BACKON LINK CARD の includes/render.php（backon_link_card_render()）
     プラグインのクラス（backon-linkcard…）に、functions.php の memo_link_card_classes() で下のクラス名とアイコンのクラスを足している
   ・アイコンは空の <span>。指定は :is([class*="fa-"], .ph-bold)（古い記事の <i class="fa-…"> にも効くように）
   ・REFERENCE：記事 7661「URLを書くだけで外部サイトをリンクカード表示」の REFERENCE カードと同じ並び
       ┃ ↗ REFERENCE
       ┃ [ファビコン] ページのタイトル
       ┃ [  2行分  ] EXAMPLE.COM
   ・大きいカード：外枠 1px の中に、上にスクリーンショット、下に2行の文字と右端のファビコン
       ┃ REFERENCE ↗
       ┃ [ファビコン] ページのタイトル
       ┃ [  2行分  ] https://example.com/page/
     文字の左の罫線は外枠の左の線に重ねる → REFERENCE と罫線・文字の位置が揃う
   ・公開画面と編集画面（ブロックのプレビュー）の両方で読み込む（functions.php の memo_link_card_style()）
   ・色は main.css の :root の変数。編集画面には main.css が無いので、同じ色を予備の値に書いている
   ===================================================================== */

/* ---------------------------------------------------------------------
   REFERENCE（.blog-card-sp）の枠：main.css と同じ指定（編集画面のプレビュー用にここにも書く）
   --------------------------------------------------------------------- */
.blog-card-sp {
  display: block;
  margin-bottom: 15px;
  padding-left: 10px;                                  /* 罫線 〜 文字 */
  border: 0;
  border-left: 2px solid var(--memo-accent, #949494);  /* 左の罫線 */
  overflow-wrap: anywhere;
  line-height: 1.2em;
}
.blog-card-sp a {
  display: block;
  color: var(--mfw-c-body, #5f5f5f);              /* タイトル・ドメイン */
  text-decoration: none;
  border: 0;                   /* 本文のリンクの下線（border-bottom）を消す */
}

/* ---------------------------------------------------------------------
   大きいカード（.blog-card02）
   --------------------------------------------------------------------- */
/* 外枠 */
.blog-card02 {
  display: block;
  margin: 0 0 15px;            /* 下の間：REFERENCE と同じ */
  padding: 0 0 10px;           /* 文字 〜 外枠の下 */
  border: 1px solid var(--mfw-c-faint, #bfbfbf);   /* 外枠 */
  background-color: #ffffff;
  overflow-wrap: anywhere;
  line-height: 1.2em;          /* REFERENCE と同じ */
}
.blog-card02 a {
  display: block;
  color: var(--mfw-c-body, #5f5f5f);              /* タイトル・ドメイン：REFERENCE と同じ */
  text-decoration: none;
  border: 0;
}

/* スクリーンショット：外枠から 10px 内側に左寄せ */
.blog-card02_thumbnail {
  float: none;
  margin: 0;
  padding: 10px;
}
/* 本文の画像の指定（main.css：中央寄せ・最大 640px）より強くするため、同じ形の長いセレクタにしている */
.blog-card02 .blog-card02_thumbnail img,
.single .content .blog-card02 .blog-card02_thumbnail img:not(.favicon):not(.emoji):not(.wp-smiley) {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  transition: opacity 0.5s;
}

/* ページが無いとき（つながらない・404）：スクリーンショットと同じ大きさの白地の箱、左上に「404 Not Found」
   ・画像は使わない。HTML はプラグインの ex-link.php */
.blog-card02_none {
  display: block;
  width: 100%;
  max-width: 650px;            /* スクリーンショットと同じ横幅まで */
  aspect-ratio: 650 / 300;     /* スクリーンショットと同じ縦横比 */
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: var(--memo-icon, var(--mfw-c-sub, #949494));
}

/* 白地の箱に、対角線のクロス（×）の罫線を引く
   ・画像は使わず、背景に斜めの線を2本重ねる（左下→右上／左上→右下）
   ・線の色は外枠と同じ、太さは 1px（50% の前後 0.5px ずつ）
   ・箱に外枠（外枠と同じ色・1px）。地色はなし */
.blog-card02_none {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% - 0.5px), var(--mfw-c-faint, #bfbfbf) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-color: transparent;
  border: 1px solid var(--mfw-c-faint, #bfbfbf);
  box-sizing: border-box;      /* 枠の分だけ大きくならないように */
  padding: 6px 8px;            /* 「404 Not Found」を枠から少し離す */
}

/* スクリーンショットが届かなかったとき
   ・HTML は <span class="blog-card02_none blog-card02_shot">503 Service Unavailable<img …></span>
   ・箱（上の .blog-card02_none）の上に、画像を同じ大きさで重ねる。画像が届けば箱は隠れる
   ・画像は箱の外枠（1px）の上まで広げて、枠なしのスクリーンショットに見せる
   ・届かなかったら、プラグインの onerror が画像を消す → 箱（クロス・外枠・503）が見える */
.blog-card02_shot {
  position: relative;
}
.blog-card02 .blog-card02_shot img,
.single .content .blog-card02 .blog-card02_shot img:not(.favicon):not(.emoji):not(.wp-smiley) {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: left top;
  background-color: #ffffff;   /* 読み込み中は白（下の箱が透けない） */
}

/* 文字部分：左の罫線を外枠の左の線に重ねる（REFERENCE と罫線・文字の位置が揃う） */
.blog-card02_content {
  display: flex;
  align-items: center;         /* ファビコンを2行の真ん中に */
  gap: 8px;                    /* 文字 〜 ファビコン */
  margin-left: -1px;           /* 外枠の太さと同じ */
  padding: 0 10px;             /* 罫線 〜 文字：REFERENCE と同じ／右は外枠から 10px（スクリーンショットの右端と揃う） */
  border-left: 2px solid var(--memo-accent, #949494);
}
.blog-card02_text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;                /* 長い URL で横にはみ出さない */
}
.blog-card02 .ph-caret-right { /* › */
  color: var(--memo-accent-text, #2a2a2a);
  margin-right: 0.3em;
}
.blog-card02_link {            /* URL 全文 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
/* 右端のファビコン：文字2行分（カラーのまま） */
.blog-card02_content .favicon {
  flex: 0 0 auto;
  display: block;
  width: 2.4em;
  height: 2.4em;
  margin: 0;
  border-radius: 4px;
  transition: opacity 0.5s;
}

/* 大きいカードの文字部分を REFERENCE（シンプル）と同じ並びに
       ┃ ↗ REFERENCE
       ┃ [ファビコン] ページのタイトル
       ┃ [  2行分  ] https://example.com/page/
   ・HTML（プラグイン）は「文字のかたまり（見出し・タイトル・改行・URL）＋右にファビコン」のまま。CSS だけで並べ替える
   ・.blog-card02_content を grid に、文字のかたまり .blog-card02_text を display: contents でほどいて、4つを格子に置く
   ・タイトルの前の ＞ と、タイトル 〜 URL の間の <br> は隠す
   ・ファビコンはカラーのまま、大きさ・間はシンプルと同じ（2em・8px） */
.blog-card02_content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* ファビコン｜文字（長い URL でもはみ出さない） */
  align-items: center;
  gap: 0 8px;                  /* 行の間 0（上の gap: 8px を打ち消す）／ファビコン 〜 文字 8px：シンプルと同じ */
}
.blog-card02_text {
  display: contents;           /* 中の見出し・タイトル・URL を格子に直接並べる */
}
.blog-card02_text > br,
.blog-card02_title .ph-caret-right {
  display: none;
}
.blog-card02 .type-x {         /* 1行目：見出しだけ（横いっぱい） */
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 3px;          /* 見出し 〜 タイトル：シンプルの .exlink-ref_row の margin-top と同じ */
}
.blog-card02_title {
  grid-column: 2;
  grid-row: 2;
}
.blog-card02_link {
  grid-column: 2;
  grid-row: 3;
}
.blog-card02_content .favicon {
  grid-column: 1;
  grid-row: 2 / span 2;        /* タイトルと URL の2行分の真ん中 */
  width: 2em;                  /* ★ シンプルと同じ */
  height: 2em;
}

/* ---------------------------------------------------------------------
   見出し ↗ REFERENCE（両方共通。REFERENCE だけ1行目に独立）
   --------------------------------------------------------------------- */
.blog-card-sp .type-x {
  display: block;
}
/* RELATED（内部リンク）は「RELATED ＞ タイトル」を1行に
   ・REFERENCE（シンプル）と同じ .blog-card-sp なので、上の display: block だと見出しの後に改行が入る
   ・RELATED だけ見出しに ＞（.ph-caret-right）があるので、:has() で見分けてインラインに戻す
   ・タイトルが長いときは、そのまま次の行へ折り返す */
.blog-card-sp .type-x:has(.ph-caret-right) {
  display: inline;
}
/* REFERENCE のアイコン（↗ ph-arrow-up-right）を見出しの右に
   ・HTML（プラグイン）は「アイコン → REFERENCE」の順のまま。flex の order で右へ回す
   ・大きいカード・シンプルの両方。RELATED のアイコンは左 */
.type-x:has(> .backon-linkcard__icon--external) {
  display: flex;
  align-items: center;
  gap: 0.2em;                  /* ★ REFERENCE 〜 ↗ の間 */
}
.type-x > .backon-linkcard__icon--external {
  order: 1;
}
.blog-card-sp .type-x,
.blog-card02 .type-x {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--memo-accent-text, #2a2a2a);
}
.blog-card-sp .type-x :is([class*="fa-"], .ph-bold),
.blog-card02 .type-x :is([class*="fa-"], .ph-bold) {
  color: var(--memo-icon, var(--mfw-c-sub, #949494));
}

/* ---------------------------------------------------------------------
   REFERENCE の2・3行目：左にファビコン（2行分の高さ）、右にタイトル・ドメイン
   --------------------------------------------------------------------- */
.exlink-ref_row {
  display: flex;
  align-items: center;
  gap: 8px;                    /* ファビコン 〜 文字 */
  margin-top: 3px;
}
.exlink-ref_row .favicon {
  flex: 0 0 auto;
  display: block;
  width: 2em;                 /* ★ 文字2行分より少し小さく */
  height: 2em;
  margin: 0;
  border-radius: 4px;          /* 少しだけ角丸（アイコンっぽく） */
  transition: opacity 0.5s;
}
.exlink-ref_text {
  display: block;
  min-width: 0;                /* 長いタイトルでも横にはみ出さない */
}
.exlink-ref_title {
  display: block;
}
/* REFERENCE のタイトル（大きいカード・シンプルの両方）：英字は URL・ドメインと同じ Montserrat、日本語は本文と同じ M PLUS Rounded 1c
   ・Montserrat に日本語の文字は無いので、日本語は2番目の書体で出る
   ・★ 太さ：400＝本文と同じ／500＝URL・ドメインと同じ */
.blog-card02_title,
.exlink-ref_title {
  font-family: 'Montserrat', 'M PLUS Rounded 1c', sans-serif;
  font-weight: 400;
}
.exlink-ref_host {
  display: block;
  margin-top: 0;               /* ★ タイトル 〜 URL の間 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* マウスオン：文字とアイコンはいちばん薄く、画像も薄く */
.blog-card-sp a:hover,
.blog-card-sp a:hover .type-x,
.blog-card-sp a:hover :is([class*="fa-"], .ph-bold),
.blog-card02 a:hover,
.blog-card02 a:hover .type-x,
.blog-card02 a:hover :is([class*="fa-"], .ph-bold) {
  color: var(--mfw-c-faint, #bfbfbf);
}
/* スクリーンショットは、画像だけでなく下の箱ごと薄くする
   ・画像だけ薄くすると、下に敷いた箱（クロス・503）が透けて見えるため */
.blog-card02 a:hover .blog-card02_thumbnail .blog-card02_none,
.blog-card-sp a:hover .favicon,
.blog-card02 a:hover .favicon {
  opacity: 0.4;
}
.blog-card02_thumbnail .blog-card02_none {
  transition: opacity 0.5s;
}

/* アイコンの色の切り替えの速さ（main.css の a i と同じ。アイコンが <span> なので、ここで指定） */
.blog-card-sp :is([class*="fa-"], .ph-bold),
.blog-card02 :is([class*="fa-"], .ph-bold) {
  transition: color 0.5s;
}

/* =====================================================================
   超シンプル（ブロックの「表示の形」で「超シンプル」／[backon_linkcard style="mini"]）
       ( [ファビコン] REFERENCE ↗ example.com )
   ・HTML はシンプルと同じ（カードに blog-card-mini が付く）。並びを CSS で入れ替える
   ・タイトルは出さない（HTML にはある）。↗ は大きいカードと同じく REFERENCE の右（上の order: 1）
   ・ドメインだけ（functions.php の memo_link_card_full_url() は blog-card-mini を書き換えない）
   ・枠は 0.5px・両端が半円・中身の長さ
   ===================================================================== */

/* 枠：左の罫線ではなく、細い罫線のカプセルで囲む */
.blog-card-sp.blog-card-mini {
  padding: 6px 14px;           /* ★ 罫線 〜 中身（両端が半円なので左右を少し広く） */
  border: 0.5px solid var(--memo-accent-text, #2a2a2a); /* ★ 線：見出し [tl01]（1px）より細く、色は REFERENCE の文字と同じ */
  border-radius: 999px;        /* ★ 両端を半円に（カプセル形。見出し [tl01] の角丸 4px と見分けるため） */
  width: fit-content;          /* 枠を中身の長さに合わせる */
  max-width: 100%;             /* 長い URL は本文の幅で折り返す */
  box-sizing: border-box;
}

/* 1行に並べる：ファビコン → REFERENCE ↗ → ドメイン */
.blog-card-sp.blog-card-mini .blog-card-sp-content {
  display: flex;
  align-items: center;
  gap: 6px;                    /* ★ ファビコン 〜 REFERENCE 〜 URL の間 */
}
.blog-card-sp.blog-card-mini .exlink-ref_row,
.blog-card-sp.blog-card-mini .exlink-ref_text {
  display: contents;           /* 中のファビコン・URL を上の flex に直接並べる */
}
.blog-card-sp.blog-card-mini .favicon {
  order: -1;                   /* いちばん左へ */
  width: 1.2em;                /* ★ ファビコン：文字1行分 */
  height: 1.2em;
  border-radius: 2px;
}
.blog-card-sp.blog-card-mini .type-x {
  flex: 0 0 auto;              /* REFERENCE は折り返さない */
}
/* ↗ は大きいカードと同じく REFERENCE の右（上の order: 1 のまま） */
.blog-card-sp.blog-card-mini .exlink-ref_title {
  display: none;               /* タイトルは出さない */
}
.blog-card-sp.blog-card-mini .exlink-ref_host {
  flex: 1 1 auto;
  min-width: 0;                /* 長い URL は枠の中で折り返す */
  margin: 0;
}

/* ---------------------------------------------------------
   MEMOFOLIO（ウィンドウ型）の記事ページ：カードの文字・ファビコン
   ・編集画面では body.mf-window が無いので効かない
   --------------------------------------------------------- */
	/* REFERENCE・RELATED（リンクカード）の文字 */
	body.mf-window.single .blog-card-sp,
	body.mf-window.single .blog-card02 {
		font-size: 11px;          /* ★ カードの文字：SHARE（X・FACEBOOK…）と同じ大きさ */
		color: var(--mfw-c-body);
	}
	body.mf-window.single :is(.blog-card-sp, .blog-card02) a {
		border-bottom: 0;
	}
	/* カードの2・3行目（タイトル・URL）の行間をつめて、ファビコンと1つのかたまりに見せる */
	body.mf-window.single :is(.exlink-ref_title, .exlink-ref_host, .blog-card02_title, .blog-card02_link) {
		line-height: 1.2;         /* ★ 2・3行目の行の高さ（文字の大きさの 1.2 倍） */
		margin: 0;
	}
	body.mf-window.single .exlink-ref_row {
		gap: 6px;                 /* ★ ファビコン 〜 文字 */
	}
	body.mf-window.single :is(.exlink-ref_row, .blog-card02_content) .favicon {
		width: 16px;              /* ★ ファビコン */
		height: 16px;
		border-radius: 3px;
	}
	/* 超シンプル（1行のカプセル）：ファビコンは文字と同じくらいのまま（上の 16px だと文字より大きくなる） */
	body.mf-window.single .blog-card-sp.blog-card-mini .favicon {
		width: 1.2em;
		height: 1.2em;
	}