/*
 * SNS 投稿表示（[mirainet_fb_posts]・[mirainet_ig_posts]）
 * 並び方は画面の幅ではなく、ショートコードを置いた枠の幅で切り替える。
 * 文字の大きさ・色・フォントはテーマから引き継ぐ。上書きは .mfp- で始まるクラスに対して行う。
 */

/*
 * container-type: inline-size を当てると、この枠の中身本来の幅は 0 として扱われる。
 * Elementor のコンテナが「縦並び＋折り返しあり」（スマホの既定）だと、高さをその幅で見積もるため
 * 実際より低く出て、はみ出した分が下の要素に重なる。中身本来の幅を画面幅として扱わせて防ぐ。
 */
.mfp {
    container-type: inline-size;
    contain-intrinsic-inline-size: 100vw;
    --mfp-gap: 1.5rem;
    --mfp-border: rgba(0, 0, 0, 0.12);
    --mfp-radius: 6px;
}

.mfp-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mfp-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 480px) {
    .mfp-list:not(.mfp-max-1) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 768px) {
    .mfp-list.mfp-max-3,
    .mfp-list.mfp-max-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* tablet_columns を指定したときは、枠の幅が 1024px 未満なら幅に関係なくこの列数にする。 */
.mfp .mfp-list.mfp-tablet-1 {
    grid-template-columns: 1fr;
}

.mfp .mfp-list.mfp-tablet-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 1024px 以上は max_columns の列数にする。tablet_columns の指定より後に置き、詳細度もそろえて優先させる。 */
@container (min-width: 1024px) {
    .mfp .mfp-list.mfp-max-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mfp .mfp-list.mfp-max-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mfp .mfp-list.mfp-max-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.mfp-item {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--mfp-border);
    border-radius: var(--mfp-radius);
    overflow: hidden;
    background: transparent;
}

/* 写真の無いカードは、同じ段の写真付きカードの高さまで伸ばさず、中身の高さで止める。 */
.mfp-item--no-image {
    align-self: start;
}

.mfp-media {
    aspect-ratio: var(--mfp-ratio, 4 / 3);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

/*
 * テーマや Elementor は画像に height: auto を当てる（.elementor img など）。
 * それに負けると横長の写真が枠の高さに届かず、下に余白が出るので、大きさの指定だけ !important で守る。
 */
.mfp .mfp-media .mfp-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
}

.mfp-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.mfp-date {
    font-size: 0.875em;
    opacity: 0.75;
}

.mfp-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--mfp-lines, 3);
    line-clamp: var(--mfp-lines, 3);
    overflow-wrap: anywhere;
    line-height: 1.7;
}

.mfp-link {
    margin-top: auto;
    padding-top: 0.25rem;
    font-size: 0.875em;
}

/* テーマが .screen-reader-text を定義していない場合に備える。 */
.mfp .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mfp-notice {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--mfp-border, rgba(0, 0, 0, 0.3));
}