/*
 * 内部URLの自動埋め込みカード。iframe の中でだけ読み込まれる。
 *
 * 色・書体・文字サイズの正本は theme.json で、src/embed-card.php が
 * `--ofx-embed-*` として流し込む。ここに実値を書かない。テーマがパレットを
 * 変えたときに、このファイルを触らずに追随させるための約束である。
 * 埋め込み文書にはテーマの `--wp--preset--*` が出ないので、参照できるのは
 * `--ofx-embed-*` だけ。
 *
 * 角丸の 4px だけは直値で持つ。テーマ側のカードとポジションカードが全て 4px
 * で、theme.json にトークンが無いため（テーマ担当と合意済み）。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* 390px 幅でも横スクロールを出さない。 */
  overflow-x: hidden;
}

body {
  background: var(--ofx-embed-color-base);
  color: var(--ofx-embed-color-ink);
  font-family: var(--ofx-embed-font-gothic);
  font-size: var(--ofx-embed-size-small);
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* コア既定の埋め込みCSSを外したので、そこにあった読み上げ専用テキストの
   隠し方をこちらで持つ。無いと本来隠れている文字が画面に出る。 */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  word-wrap: normal !important;
}

/* --- カード本体 --------------------------------------------------------
 *
 * 一枚の紙の左端に真鍮の帯を引いた「引用札」。本文の段落と地続きに見えては
 * 困る一方、記事の中に何枚も続くので、影も塗りも足さずに罫と間隔だけで
 * 区切る。テーマ側の記事カード（面 + 1px の罫 + 4px の角丸）と同じ作りで、
 * 左の帯だけがこのカードの印になる。
 *
 * 横組みなのは縦を詰めるため。1200:630 の画像を上に敷くと 720px 幅で 378px
 * の帯になり、カードが二枚続いた時点で本文が読めなくなる。左へ回せば同じ
 * 画像が 200px 前後に収まる。
 */

.wp-embed.ofx-embed {
  --ofx-embed-pad-y: clamp(0.875rem, 3vw, 1.25rem);
  --ofx-embed-pad-x: clamp(0.9375rem, 3.5vw, 1.5rem);

  /* 親ページの wp-embed.js が iframe の高さを 200px 未満へ縮めない。
     これより低く作っても親では 200px の枠が残るだけなので、同じ値を下限に
     してカードで面を満たす。 */
  --ofx-embed-floor: 200px;

  /* 画像の幅は下限の高さから 1200:630 で逆算する。ただし本文720pxの器では
     それだと画像が 381px を占め、見出しが2行に収まらず語の途中で切れた。
     48% で頭打ちにして、切り取りを 1.72:1（1200:630 は 1.90:1）まで譲る
     代わりに見出しの居場所を取る。数字は実物で決めた。 */
  --ofx-embed-media: min(calc(var(--ofx-embed-floor) * 40 / 21), 48%);

  min-height: var(--ofx-embed-floor);
  display: grid;
  grid-template-columns: var(--ofx-embed-media) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media title"
    "media excerpt"
    "media meta";
  /* 余白は器ではなく本文側の要素が持つ。器に padding を置くと、画像を
     カードの端まで敷くために負のマージンで打ち消すことになる。 */
  column-gap: 0;
  /* 枠あり・枠なしを実物で見比べて枠ありを採る。テーマ側のサイドバーの
     カードは枠を外して間隔だけで区切っているが、あれは既にサイドバーという
     別の領域の中にあるから成り立つ。本文の中に単独で現れるカードで同じ
     ことをすると、地色も余白も段落と同じになり、明朝の見出しが本文の小見出し
     と見分けられなくなる。面（白）と1pxの罫でひとつの物として閉じる。 */
  background: var(--ofx-embed-color-surface);
  border: 1px solid var(--ofx-embed-color-line);
  /* 左端の真鍮の帯だけがこのカードの印。リンク色と同じ色を使い、
     「この先に別の記事がある」ことを文字を足さずに示す。 */
  border-left: 3px solid var(--ofx-embed-color-brass);
  border-radius: 4px;
  overflow: hidden;
}

/* アイキャッチが無い記事。画像の列ごと畳む。空の列を残すと本文が右へ寄って
   カードが崩れる。 */
.wp-embed.ofx-embed:not(.ofx-embed--media) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "excerpt"
    "meta";
}

/* --- アイキャッチ ------------------------------------------------------ */

.ofx-embed__media {
  grid-area: media;
  display: block;
  align-self: stretch;
  overflow: hidden;
  /* 読み込み前に真っ白な穴が空かないよう、淡い罫の色を敷いておく。 */
  background: var(--ofx-embed-color-line-soft);
}

.ofx-embed__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* 生成サムネイルの原寸 1200:630。テーマ側の記事カードと同じ切り取り。 */
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.ofx-embed__media:hover .ofx-embed__image {
  transform: scale(1.03);
}

/* --- タイトル ---------------------------------------------------------- */

.wp-embed-heading {
  grid-area: title;
  margin: 0;
  padding: var(--ofx-embed-pad-y) var(--ofx-embed-pad-x) 0;
  font-family: var(--ofx-embed-font-mincho);
  font-size: var(--ofx-embed-size-large);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ofx-embed-color-ink);
  overflow-wrap: anywhere;
  /* 3行まで。テーマ側のカードは見出しを切り詰めないので、ここも本来は全部
     出したい。ただし4行を超える見出しがあるとカードだけが伸びて本文の流れを
     せき止めるため、上限だけ設ける。この記事群の見出しはおおむね30〜45字で、
     3行（約50字）ならほとんど切れない。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.wp-embed-heading a {
  color: inherit;
  text-decoration: none;
}

/* 下線だけを真鍮にする。文字色を真鍮へ変えると白地で 3.5:1 まで落ち、
   本文サイズの文字に必要な 4.5:1 を割る。 */
.wp-embed-heading a:hover,
.wp-embed-heading a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--ofx-embed-color-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* --- 抜粋 -------------------------------------------------------------- */

.wp-embed-excerpt {
  grid-area: excerpt;
  padding: 0.5rem var(--ofx-embed-pad-x) 0;
  color: var(--ofx-embed-color-ink-muted);
  font-size: var(--ofx-embed-size-small);
  line-height: 1.85;
  overflow: hidden;
}

.wp-embed-excerpt p {
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --- 出典と日付 -------------------------------------------------------- */

/* サイト名と日付を一本の細い罫でつなぐ。目次の leader と同じ作りで、二つの
   小さな文字を「同じ一行の両端」として読ませる。 */
.wp-embed-footer {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  margin: 0.75rem var(--ofx-embed-pad-x) 0;
  padding: 0.5625rem 0 var(--ofx-embed-pad-y);
  border-top: 1px solid var(--ofx-embed-color-line-soft);
}

.wp-embed-site-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
}

.wp-embed-site-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-width: 0;
  /* theme.json の最小サイズ（small）より小さいラベルが要る。実値ではなく
     small からの比で導き、テーマが尺度を変えたら一緒に動くようにする。 */
  font-size: calc(var(--ofx-embed-size-small) * 0.85);
  letter-spacing: 0.1em;
  color: var(--ofx-embed-color-ink-muted);
  text-decoration: none;
}

.wp-embed-site-title a:hover span {
  text-decoration: underline;
  text-decoration-color: var(--ofx-embed-color-brass);
  text-underline-offset: 0.22em;
}

.wp-embed-site-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-embed-site-icon {
  flex: 0 0 auto;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 2px;
}

.wp-embed-site-title::after {
  content: "";
  flex: 1 1 auto;
  min-width: 0.75rem;
  height: 1px;
  background: var(--ofx-embed-color-line);
}

.wp-embed-meta {
  flex: 0 0 auto;
}

.ofx-embed__date {
  font-size: calc(var(--ofx-embed-size-small) * 0.85);
  letter-spacing: 0.08em;
  color: var(--ofx-embed-color-ink-muted);
}

/* --- 操作の手掛かり ---------------------------------------------------- */

.ofx-embed a:focus-visible {
  outline: 2px solid var(--ofx-embed-color-brass);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- 狭い器 ------------------------------------------------------------
 *
 * 540px を下回ると、横組みのままでは画像も本文もどちらも成り立たない。
 * 画像を上へ回して 1200:630 のまま全幅で見せる。縦は伸びるが、150px の
 * 幅に3行の見出しを押し込むより読める。
 */

@media (max-width: 33.75rem) {
  .wp-embed.ofx-embed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "media"
      "title"
      "excerpt"
      "meta";
  }

  .ofx-embed__media {
    align-self: start;
  }

  .ofx-embed__image {
    height: auto;
  }

  .wp-embed-heading {
    font-size: var(--ofx-embed-size-medium);
    line-height: 1.6;
  }
}

/* --- 動きを減らす設定 -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ofx-embed__image {
    transition: none;
  }

  /* 遷移を切るだけでは、押した瞬間に拡大が飛ぶ。動き自体を止める。 */
  .ofx-embed__media:hover .ofx-embed__image {
    transform: none;
  }
}