/**
 * Block Alignment Styles
 * ブロックエディターのアライメント（中央揃え、幅広、全幅）対応
 *
 * @package Forgeee
 * @since 1.0.0
 */

/* ==========================================================================
   エントリーコンテンツ基本構造
   ========================================================================== */

.entry-content {
    /* 通常のコンテンツ幅を確保 */
    width: 100%;
}

/* コンテンツ内の基本ブロック */
.entry-content > * {
    max-width: var(--fg-content-width, 800px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fg-content-padding, 20px);
    padding-right: var(--fg-content-padding, 20px);
}

/* ==========================================================================
   ブロックアライメント対応
   ========================================================================== */

/* 幅広ブロック */
.entry-content > .alignwide {
    max-width: var(--fg-wide-width, 1200px);
}

/* 全幅ブロック */
.entry-content > .alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* 中央揃えブロック */
.entry-content > .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 左揃えブロック */
.entry-content > .alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

/* 右揃えブロック */
.entry-content > .alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
    max-width: 50%;
}

/* ==========================================================================
   グループブロック内のアライメント対応
   ========================================================================== */

/* グループブロック内の幅広 */
.wp-block-group.alignwide > .wp-block-group__inner-container > * {
    max-width: var(--fg-content-width, 800px);
    margin-left: auto;
    margin-right: auto;
}

/* グループブロック内の全幅 */
.wp-block-group.alignfull {
    padding-left: 0;
    padding-right: 0;
}

.wp-block-group.alignfull > .wp-block-group__inner-container > * {
    max-width: var(--fg-content-width, 800px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fg-content-padding, 20px);
    padding-right: var(--fg-content-padding, 20px);
}

/* グループブロック内の全幅子要素 */
.wp-block-group.alignfull > .wp-block-group__inner-container > .alignwide {
    max-width: var(--fg-wide-width, 1200px);
}

.wp-block-group.alignfull > .wp-block-group__inner-container > .alignfull {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   カバーブロックのアライメント対応
   ========================================================================== */

/* カバーブロックの全幅対応 */
.entry-content > .wp-block-cover.alignfull,
.entry-content > .wp-block-cover.alignwide {
    padding-left: 0;
    padding-right: 0;
}

/* カバーブロック内のコンテンツ幅制御 */
.wp-block-cover.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignwide .wp-block-cover__inner-container {
    max-width: var(--fg-wide-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fg-content-padding, 20px);
    padding-right: var(--fg-content-padding, 20px);
}

/* ==========================================================================
   カラムブロックのアライメント対応
   ========================================================================== */

/* カラムブロックの幅広対応 */
.entry-content > .wp-block-columns.alignwide {
    max-width: var(--fg-wide-width, 1200px);
}

/* カラムブロックの全幅対応 */
.entry-content > .wp-block-columns.alignfull {
    padding-left: var(--fg-content-padding, 20px);
    padding-right: var(--fg-content-padding, 20px);
}

/* ==========================================================================
   画像・ギャラリーブロックのアライメント対応
   ========================================================================== */

/* 画像ブロックの中央揃え */
.wp-block-image.aligncenter {
    text-align: center;
}

.wp-block-image.aligncenter img {
    margin-left: auto;
    margin-right: auto;
}

/* 画像ブロックの全幅対応 */
.entry-content > .wp-block-image.alignfull img {
    width: 100%;
    max-width: none;
    height: auto;
}

/* ギャラリーブロックの全幅対応 */
.entry-content > .wp-block-gallery.alignfull {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   エンベッド（埋め込み）ブロックのアライメント対応
   ========================================================================== */

/* YouTube、Vimeoなどの埋め込み */
.entry-content > .wp-block-embed.alignwide .wp-block-embed__wrapper,
.entry-content > .wp-block-embed.alignfull .wp-block-embed__wrapper {
    max-width: none;
}

/* ==========================================================================
   サイドバーありレイアウトでの調整
   ========================================================================== */

/* サイドバーありの場合、全幅の計算を調整 */
.fg-layout--right-sidebar .entry-content > .alignfull,
.fg-layout--left-sidebar .entry-content > .alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   モバイル対応
   ========================================================================== */

@media (max-width: 768px) {
    /* モバイルでは左右のパディングを削減 */
    .entry-content > * {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* モバイルでのフロート解除 */
    .entry-content > .alignleft,
    .entry-content > .alignright {
        float: none;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* モバイルでの全幅ブロックの調整 */
    .entry-content > .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    /* グループブロック内のパディング調整 */
    .wp-block-group.alignfull > .wp-block-group__inner-container > * {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==========================================================================
   管理画面（エディター）での表示調整
   ========================================================================== */

/* エディター内での幅広ブロック */
.editor-styles-wrapper .wp-block[data-align="wide"] {
    max-width: var(--fg-wide-width, 1200px);
}

/* エディター内での全幅ブロック */
.editor-styles-wrapper .wp-block[data-align="full"] {
    max-width: none;
}

/* エディター内でのコンテンツ幅 */
.editor-styles-wrapper .wp-block:not([data-align]) {
    max-width: var(--fg-content-width, 800px);
}