| @@ -124,8 +124,56 @@ | ||
| 124 | 124 | .bkbg-row--gap-xl { |
| 125 | 125 | --bkbg-current-gap: var(--bkbg-space-xl); |
| 126 | 126 | } |
| 127 | 127 | |
| 128 | +/* Percentage columns describe a share of the available row width. Flex shrink | |
| 129 | + apportions the gap before laying them out; disabling shrink made 50% + 50% | |
| 130 | + plus a non-zero gap wider than the row. Keep this limited to direct columns | |
| 131 | + so nested layouts and mobile's column direction remain independent. */ | |
| 132 | +.bkbg-row > .bkbg-row__inner > .bkbg-column, | |
| 133 | +.editor-styles-wrapper .bkbg-row > .bkbg-row__inner > .block-editor-inner-blocks > .block-editor-block-list__layout > .bkbg-column { | |
| 134 | + flex-shrink: 1 !important; | |
| 135 | + min-width: 0; | |
| 136 | +} | |
| 137 | + | |
| 138 | +/* Gutenberg adds two wrappers around the columns, so the gap must reach the | |
| 139 | + actual flex container instead of spacing the single wrapper in row__inner. */ | |
| 140 | +.editor-styles-wrapper .bkbg-row > .bkbg-row__inner > .block-editor-inner-blocks > .block-editor-block-list__layout { | |
| 141 | + gap: var(--bkbg-current-gap, 0px); | |
| 142 | +} | |
| 143 | + | |
| 144 | +/* New AI sections use the native Section/Row/Column markup. Their outer | |
| 145 | + section owns vertical rhythm; Section's existing 20px/16px inner gutters | |
| 146 | + remain the single source of horizontal page padding. Inline user settings | |
| 147 | + still win, so subsequent manual edits work normally. */ | |
| 148 | +.bkbg-section.bkbg-ai-section, | |
| 149 | +.editor-styles-wrapper .bkbg-section.bkbg-ai-section { | |
| 150 | + margin-top: 0; | |
| 151 | + margin-bottom: 0; | |
| 152 | +} | |
| 153 | +.bkbg-section.bkbg-ai-section.bkbg-ai-spacing-comfortable { | |
| 154 | + padding-top: 80px; | |
| 155 | + padding-bottom: 80px; | |
| 156 | +} | |
| 157 | +.bkbg-section.bkbg-ai-section.bkbg-ai-spacing-compact { | |
| 158 | + padding-top: 48px; | |
| 159 | + padding-bottom: 48px; | |
| 160 | +} | |
| 161 | +.bkbg-section.bkbg-ai-section.bkbg-ai-spacing-spacious { | |
| 162 | + padding-top: 112px; | |
| 163 | + padding-bottom: 112px; | |
| 164 | +} | |
| 165 | +@media (max-width: 1024px) { | |
| 166 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-comfortable { padding-top: 56px; padding-bottom: 56px; } | |
| 167 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-compact { padding-top: 40px; padding-bottom: 40px; } | |
| 168 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-spacious { padding-top: 80px; padding-bottom: 80px; } | |
| 169 | +} | |
| 170 | +@media (max-width: 767px) { | |
| 171 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-comfortable { padding-top: 40px; padding-bottom: 40px; } | |
| 172 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-compact { padding-top: 32px; padding-bottom: 32px; } | |
| 173 | + .bkbg-section.bkbg-ai-section.bkbg-ai-spacing-spacious { padding-top: 56px; padding-bottom: 56px; } | |
| 174 | +} | |
| 175 | + | |
| 128 | 176 | /* ======================================== |
| 129 | 177 | Accessibility |
| 130 | 178 | ======================================== */ |
| 131 | 179 | |
