/* =============================================================================
   Block - Section (Modular - Pure Visual Shell)
   =============================================================================

   Pure visual shell. Background, overlay, padding, inner max-width, shape
   dividers, content alignment. Inner content composes via
   modular-block__container instances dropped inside.
*/

/* -- Spacing cascade -------------------------------------------------------

   Each padding side resolves through a two-step custom property chain:

   1. --section-override-padding-{side}  - emitted inline by render.php
      when this section's own field has an explicit value (including 0)
   2. --brand-section-padding-{side}     - Brand Identity Section Defaults,
      emitted on :root (front end via wp_head, editor iframe via
      enqueue_block_assets in includes/brand-identity.php)
   3. 0                                  - nothing configured anywhere

   Same pattern for the inner container max-width, ending at 100% instead of 0.
   No margin controls by design: padding covers spacing between sections.

   Editor note: the legacy `.acf-block-preview > section` padding rule in the
   global style.css exempts this block via :not(), otherwise its higher
   specificity would override this chain in editor previews.
*/
.modular-block-section {
    width:    100%;
    position: relative;
    padding:  var( --section-override-padding-top,    var( --brand-section-padding-top,    0 ) )
              var( --section-override-padding-right,  var( --brand-section-padding-right,  0 ) )
              var( --section-override-padding-bottom, var( --brand-section-padding-bottom, 0 ) )
              var( --section-override-padding-left,   var( --brand-section-padding-left,   0 ) );
}

/* Inner container - no padding by default (overrides the global block__inner).
   Max-width caps the content while the section background spans full width;
   the capped inner stays horizontally centered. Child modular-block__container
   instances position themselves within it via the align chain. */
.modular-block-section__inner {
    padding:   0;
    width:     100%;
    max-width: var( --section-override-inner-max-width, var( --brand-section-inner-max-width, 100% ) );
    margin:    0 auto;
}

/* -- Content alignment ----------------------------------------------------

   Two effects per alignment value:

   1. text-align on the inner container, so inline content (text inside
      element blocks) follows the section's content alignment by default.

   2. --section-content-align custom property, which descendant
      modular-block__container instances inherit when their own align_self
      field is set to "inherit". Value is the two-value `margin-inline`
      shorthand (start end) that positions the (max_width-capped) container
      within the section's content box.

      - left:   `0 auto`  -> start=0, end=auto, pushes container left
      - center: `auto`    -> both auto, centers container
      - right:  `auto 0`  -> start=auto, end=0, pushes container right
*/
.modular-block-section--align-left {
    --section-content-align: 0 auto;
}
.modular-block-section--align-left .modular-block-section__inner {
    text-align: left;
}

.modular-block-section--align-center {
    --section-content-align: auto;
}
.modular-block-section--align-center .modular-block-section__inner {
    text-align: center;
}

.modular-block-section--align-right {
    --section-content-align: auto 0;
}
.modular-block-section--align-right .modular-block-section__inner {
    text-align: right;
}

/* Drop-shadow modifier applies when the Inner Container's Drop Shadow toggle
   is enabled. Same neutral shadow as component__column. */
.modular-block-section__inner--has-shadow {
    box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

/* -- Editor-only - minimum height so empty sections stay visible -------- */
/* Front end is content-driven - no min-height applied there. */
.acf-block-preview .modular-block-section {
    min-height: 120px;
}

/* Placeholder treatment lives in assets/css/block-placeholder.css (shared
   editor-only stylesheet). The block emits its tutorial placeholder via
   guidelines_block_placeholder() in render.php. */