/* =====================================================================
   外部リンクカード（2026-10-31 作り直し）
   ・大きいカード：[sc_Linkcard]・ブロック「外部リンクカード」の「大きいカード」（.blog-card02）
   ・REFERENCE：[sc_Linkcard2]・ブロックの「シンプル」（.blog-card-sp）
   ・HTML はプラグイン MEMORANDUM Blocks の includes/ex-link.php（memo_ex_link_render()）
   ・REFERENCE：記事 7661「URLを書くだけで外部サイトをリンクカード表示」の REFERENCE カードと同じ並び
       ┃ ↗ REFERENCE
       ┃ [ファビコン] ページのタイトル
       ┃ [  2行分  ] EXAMPLE.COM
   ・大きいカード：外枠 1px の中に、上にスクリーンショット、下に2行の文字と右端のファビコン
       ┃ ↗ REFERENCE › ページのタイトル              [ファビコン]
       ┃ https://example.com/page/                    [  2行分  ]
     文字の左の罫線は外枠の左の線に重ねる → REFERENCE と罫線・文字の位置が揃う
   ・公開画面と編集画面（ブロックのプレビュー）の両方で読み込む（functions.php の memo_link_card_style()）
   ・色は main.css の :root の変数。編集画面には main.css が無いので、同じ色を予備の値に書いている
   ・前の指定は 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, #4A6B82);  /* 左の罫線：差し色 */
  overflow-wrap: anywhere;
  line-height: 1.2em;
}
.blog-card-sp a {
  display: block;
  color: #4a4e63;              /* タイトル・ドメイン */
  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 #b5b9c6;   /* 外枠：薄い青みグレー（今までと同じ） */
  background-color: #ffffff;
  overflow-wrap: anywhere;
  line-height: 1.2em;          /* REFERENCE と同じ */
}
.blog-card02 a {
  display: block;
  color: #4a4e63;              /* タイトル・ドメイン：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, #8a8f9d);
}

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

/* スクリーンショットが届かなかったとき（2026-11-03）
   ・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, #4A6B82);
}
.blog-card02_text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;                /* 長い URL で横にはみ出さない */
}
.blog-card02 .fa-chevron-right { /* › */
  color: var(--memo-accent-text, #4A6B82);
  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 だけ1行目に独立）
   --------------------------------------------------------------------- */
.blog-card-sp .type-x {
  display: block;
}
.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, #4A6B82);
}
.blog-card-sp .type-x i,
.blog-card02 .type-x i {
  color: var(--memo-icon, #8a8f9d);
}

/* ---------------------------------------------------------------------
   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: 2.4em;                /* 文字2行分（行の高さ 1.2em × 2） */
  height: 2.4em;
  margin: 0;
  border-radius: 4px;          /* 少しだけ角丸（アイコンっぽく） */
  transition: opacity 0.5s;
}
/* ファビコンをグレーに（カラーのままにするときは、このまとまりをコメントアウト） */
.exlink-ref_row .favicon {
  filter: grayscale(1);
  opacity: 0.8;                /* 濃さ（1 で元の濃さ） */
}
.exlink-ref_text {
  display: block;
  min-width: 0;                /* 長いタイトルでも横にはみ出さない */
}
.exlink-ref_title {
  display: block;
}
.exlink-ref_host {
  display: block;
  margin-top: 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;   /* ドメインは大文字 */
}

/* マウスオン：文字とアイコンは #CCCCC8、画像は薄く */
.blog-card-sp a:hover,
.blog-card-sp a:hover .type-x,
.blog-card-sp a:hover i,
.blog-card02 a:hover,
.blog-card02 a:hover .type-x,
.blog-card02 a:hover i {
  color: #CCCCC8;
}
.blog-card02 a:hover .blog-card02_thumbnail img,
.blog-card-sp a:hover .favicon,
.blog-card02 a:hover .favicon {
  opacity: 0.4;
}