/* EX REDESiGN — assets/css/clamp.css
 *
 * Line-clamp Block Style ( is-style-clamp-1 〜 is-style-clamp-5 ) + カスタム接尾辞。
 *
 * 適用先 Block Style:
 *   .is-style-clamp-1〜5  N 行で省略表示 (inc/block-styles.php で register)
 *
 * カスタム接尾辞:
 *   data-clamp-suffix="..." 属性 (block attribute exrClampSuffix → render_block で付与)
 *   JS (assets/js/clamp.js) がオーバーフロー検出して --exr-clamp-suffix 変数を設定。
 *   オーバーフロー時のみ ::after で接尾辞を被せ、ブラウザ既定の "..." を覆い隠す。
 *
 * 非対応ブラウザ:
 *   -webkit-line-clamp は WebKit/Blink ベースで広くサポート (IE 除く)。Firefox 68+ も対応。
 */

/* ------------------------------------------------------------------
 * 基本 line-clamp スタイル (1〜5)
 * ------------------------------------------------------------------ */
.is-style-clamp-1,
.is-style-clamp-2,
.is-style-clamp-3,
.is-style-clamp-4,
.is-style-clamp-5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    /* word-break: break-word; 長い英単語が折り返さず溢れる事故防止 */
    word-break: break-word;
}
.is-style-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.is-style-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.is-style-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.is-style-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.is-style-clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }

/* ------------------------------------------------------------------
 * カスタム接尾辞オーバーレイ
 *   JS が overflow を検出して data-clamp-overflow="true" を付ける。
 *   ::after は --exr-clamp-suffix (JS が設定) の文字列を末尾右下に被せる。
 *   --exr-clamp-bg は親背景を意識して fade-out グラデを作る。
 *   既定は theme の surface 色だが、CSS 変数で上書き可。
 * ------------------------------------------------------------------ */
[data-clamp-overflow="true"][data-clamp-suffix]::after {
    content: var(--exr-clamp-suffix, "…");
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 0 0 1.5em;
    pointer-events: none;
    /* fade-out グラデで、被さる範囲のオリジナル文字（ブラウザ既定の "..." 含む）を覆う */
    background: linear-gradient(
        to right,
        transparent 0,
        var(--exr-clamp-bg, var(--color-surface, var(--wp--preset--color--surface, #ffffff))) 1em
    );
    color: inherit;
    font: inherit;
}

/* エディタ内でも同じ動作を見せる (Gutenberg は body class が違うので両対応) */
.editor-styles-wrapper .is-style-clamp-1,
.editor-styles-wrapper .is-style-clamp-2,
.editor-styles-wrapper .is-style-clamp-3,
.editor-styles-wrapper .is-style-clamp-4,
.editor-styles-wrapper .is-style-clamp-5 {
    /* 同上ルールを継承するため特別な追記は不要 */
}