/**
* embeds.css
* ----------------------------------------------------------------
* 目的：
* - chub/linkcard ブロック／[linkcard] ショートコードが出力する
* 「汎用リンクカード（OGP取得ベース）」の見た目を定義する。
* - マークアップの class は BEM 風（.embed-card__*）で統一。
*
* 対象マークアップ（template-parts/embed-card.php）：
*
*
*
*
*
![]()
側で
* ★常に枠を隙間なく埋める（object-fit: cover）表示にする。
*/
.embed-card__thumb {
position: relative;
overflow: hidden;
background: #f4f4f4;
width: 100%;
aspect-ratio: var(--embed-thumb-ratio); /* 常に 16:9 の枠を確保 */
margin: 0; /* 上端にぴったりくっつける */
}
/* ★サムネイル画像：常に「枠を隙間なく」埋める（cover）
* --------------------------------------------------------------
* - width/height を 100% にして、枠いっぱいへ
* - object-fit: cover で縦横比を維持したまま全面表示（余白ゼロ）
* - トリミングが発生するが、「枠内に隙間が出ない」ことを優先
*/
.embed-card__thumb > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: block;
/* 余白ゼロで枠を埋める */
object-fit: cover;
object-position: 50% 50%;
/* 拡大アニメ（中心基準） */
transform: scale(1);
transform-origin: var(--embed-zoom-origin);
transition: transform var(--embed-zoom-dur) var(--embed-zoom-ease);
will-change: transform;
}
/* PC等 hover 対応環境＋アニメ許可時だけ拡大アニメを有効化 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.embed-card__link:hover .embed-card__thumb > img,
.embed-card__link:focus-visible .embed-card__thumb > img {
transform: scale(var(--embed-zoom-scale));
}
}
/* ==============================================================
* 3. 本文エリア（タイトル＋説明＋メタ）
* ============================================================== */
.embed-card__body {
/* 画像下の白い帯を無くすため margin-top は 0 にする */
margin-top: 0;
/* テキスト部だけ見やすい背景色に（カード全体と別で調整可能） */
background: var(--embed-body-bg);
color: var(--embed-text);
/* 上の余白を少しだけ詰めつつ、左右もやや狭めにして縦幅を圧縮 */
padding: 10px 16px 12px;
display: grid;
/* 要素間の隙間も少し詰める */
gap: 4px;
align-content: center;
/* 画像との境目をわずかな線で区切る（背景色が近い時のため） */
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* タイトル（2行まで、line-clamp） */
.embed-card__title {
margin: 0;
font-weight: var(--embed-title-weight);
line-height: 1.35;
font-size: 15px;
display: -webkit-box;
-webkit-line-clamp: var(--embed-title-lines);
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(1.35em * var(--embed-title-lines));
}
/* 説明文（2行まで、line-clamp：変数で制御） */
.embed-card__desc {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--embed-muted);
display: -webkit-box;
-webkit-line-clamp: var(--embed-desc-lines);
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(1.6em * var(--embed-desc-lines));
}
/* メタ情報行（favicon + サイト名 + URL） */
.embed-card__meta {
display: flex;
align-items: center;
gap: .5em;
font-size: 11px;
color: var(--embed-muted);
min-height: 1.4em;
white-space: nowrap;
overflow: hidden;
}
/* ファビコンアイコン（省スペース） */
.embed-card__favicon {
width: 14px;
height: 14px;
border-radius: 3px;
object-fit: cover;
flex-shrink: 0;
}
/* サイト名（例：example.com） */
.embed-card__sitename {
max-width: 30%;
overflow: hidden;
text-overflow: ellipsis;
}
/* URL 表示（末尾を … で省略） */
.embed-card__url {
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
opacity: .85;
}
/* --------------------------------------------------------------
* 3-1. ブログ本文用スタイルからの margin / 余白を打ち消す
* （single-blog.css などの .bs-content h3, p, img への指定）
* embeds.css だけでカードのレイアウトを完結させるための「リセット」。
* -------------------------------------------------------------- */
/* タイトル・説明：外側マージンを embed-card 側で完全管理する */
.embed-card .embed-card__title,
.embed-card .embed-card__desc {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 画像：
* - .bs-content img:not(...) などの「height:auto; max-width:100%」を
* 完全に上書きするため、ここでは height / width / max-width を
* まとめて !important で固定する。
* - これにより single-blog.css の汎用 img ルールよりも常に優先され、
* 「枠を隙間なく埋める（cover）」挙動が崩れなくなる。
*/
.embed-card .embed-card__thumb > img {
margin: 0 !important;
height: 100% !important;
width: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: 50% 50% !important;
}
/* ==============================================================
* 4. レイアウト：画像有無による挙動
* ============================================================== */
/**
* 以前は :has() で「画像あり→2カラム／画像なし→1カラム」を
* 自動切り替えしていたが、現在は縦並びレイアウトに統一している。
* 将来2カラムレイアウトを復活させたくなった場合は、
* 下記ブロックを再定義する想定でコメントのみ残しておく。
*/
/*
@supports selector(:has(*)) {
.embed-card:has(.embed-card__thumb) .embed-card__link {
grid-template-columns: var(--embed-thumb-col) minmax(0, 1fr);
}
}
*/
/* スマホ幅では本文側の余白などを微調整（1カラム前提） */
@media (max-width: 600px) {
.embed-card__body {
padding: 8px 12px 10px;
border-top-width: 0.5px;
}
.embed-card__title {
font-size: 14px;
}
.embed-card__desc {
font-size: 12px;
}
}
/* ==============================================================
* 5. プレースホルダ／エラー表示（ブロックの編集画面用）
* ============================================================== */
/**
* サーバー側で URL 未入力・取得失敗時に返す
* .embed-card--placeholder / .embed-card--error 用の簡易スタイル。
* （Gutenberg の edit() 内で使われる想定）
*/
.embed-card--placeholder,
.embed-card--error {
width: 100%;
max-width: var(--embed-card-maxw);
margin: 8px auto;
padding: 12px 14px;
border-radius: var(--embed-radius);
border: 1px dashed var(--embed-border-color);
font-size: 13px;
color: var(--embed-muted);
background: #fafafa;
}
@media (prefers-color-scheme: dark) {
.embed-card--placeholder,
.embed-card--error {
background: #2a2b2e;
}
}
/* ==============================================================
* 6. 印刷／アクセシビリティ配慮
* ============================================================== */
/* 印刷時：影を消して、リンク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;
}
}
/* 動きを減らす設定時：画像ズームアニメを無効化 */
@media (prefers-reduced-motion: reduce) {
.embed-card__thumb > img {
transition: none !important;
transform: scale(1) !important;
}
}