/**
 * 画像の上に文字を重ねる（SWELL グループ＋追加CSSクラス）
 *
 * 操作:
 * 1. 画像ブロックと文字ブロックを「グループ」で囲む
 * 2. 親に: a-position-relative + overlay-on-image（角丸・クリップ）
 * 3. 文字側: position-absolute（名前のまま／高さは文字が決める）
 * 4. 画像: image-fade
 */

/* 親：文字の高さに合わせ、画像は背面でトリミング */
.position-relative,
.a-position-relative,
.overlay-on-image {
    position: relative;
    display: grid;
}

.overlay-on-image,
.a-position-relative:has(figure.image-fade),
.position-relative:has(figure.image-fade) {
    overflow: hidden;
    border-radius: 32px;
}

/* 文字（通常フローで高さを作る） */
.position-relative > .position-absolute,
.a-position-relative > .position-absolute,
.overlay-on-image > .position-absolute,
.position-relative .position-absolute,
.a-position-relative .position-absolute,
.overlay-on-image .position-absolute {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    width: min(58%, 780px);
    max-width: none;
    margin: 0 !important;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.75rem);
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: normal;
}

/* 画像：文字エリア全体を覆う（高さ＝文字に同期） */
.position-relative > .wp-block-image,
.a-position-relative > .wp-block-image,
.overlay-on-image > .wp-block-image,
.position-relative > figure.wp-block-image,
.a-position-relative > figure.wp-block-image,
.overlay-on-image > figure.wp-block-image {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    z-index: 0;
}

.position-relative .wp-block-image img,
.a-position-relative .wp-block-image img,
.overlay-on-image .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

/* 写真：左→右に淡くなるオーバーレイ */
figure.wp-block-image.image-fade,
.image-fade {
    isolation: isolate;
    overflow: hidden;
}

figure.wp-block-image.image-fade > img,
.image-fade > img {
    position: relative;
    z-index: 0;
    filter: brightness(1.1) contrast(0.9) saturate(0.88);
}

figure.wp-block-image.image-fade::after,
.image-fade::after,
.overlay-fade .wp-block-image::after,
.overlay-fade > figure.wp-block-image::after {
    content: "" !important;
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        90deg,
        var(--base-bg) 0%,
        rgba(253, 253, 253, 0.98) 22%,
        rgba(253, 253, 253, 0.82) 42%,
        rgba(255, 242, 243, 0.5) 65%,
        rgba(255, 255, 255, 0.2) 90%,
        transparent 100%
    );
}

.overlay-fade .wp-block-image,
.overlay-fade > figure.wp-block-image {
    isolation: isolate;
    overflow: hidden;
}

.overlay-fade .wp-block-image > img,
.overlay-fade > figure.wp-block-image > img {
    filter: brightness(1.08) contrast(0.9) saturate(0.88);
}

/* スマホ：文字が占める幅を広くする */
@media (max-width: 600px) {
    .position-relative > .position-absolute,
    .a-position-relative > .position-absolute,
    .overlay-on-image > .position-absolute,
    .position-relative .position-absolute,
    .a-position-relative .position-absolute,
    .overlay-on-image .position-absolute {
        width: min(88%, 780px);
    }
}