/* Monolith Section Kit v0.2.0 */

/* base */
.monolith-section{
  position: relative;
  background-color: var(--ms-bg, transparent);

  /* background image (block sets vars, shortcode can omit) */
  background-image: var(--ms-bg-image, none);
  background-size: var(--ms-bg-size, cover);
  background-position: var(--ms-bg-position, center center);
  background-repeat: var(--ms-bg-repeat, no-repeat);

  padding-top: var(--ms-pt, 60px);
  padding-bottom: var(--ms-pb, 60px);
}

/* overlay for image readability */
.monolith-section::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0, var(--ms-bg-overlay, 0));
  pointer-events:none;
  z-index:0;
}

.monolith-section__inner{
  position: relative;
  z-index: 1;

  margin: 0 auto;
  max-width: var(--ms-max, 900px);
  padding: 0 20px;
}

/* width */
.monolith-section.width-default .monolith-section__inner{ --ms-max: 900px; }
.monolith-section.width-wide .monolith-section__inner{ --ms-max: 1100px; }
.monolith-section.width-full .monolith-section__inner{ --ms-max: 100%; }

/* padding tokens (for editor parity; shortcode sets vars too) */
.monolith-section.pad-0{ --ms-pt: 0px; --ms-pb: 0px; }
.monolith-section.pad-s{ --ms-pt: 30px; --ms-pb: 30px; }
.monolith-section.pad-m{ --ms-pt: 60px; --ms-pb: 60px; }
.monolith-section.pad-l{ --ms-pt: 100px; --ms-pb: 100px; }

/* keep content clear of clipped areas */
.monolith-section.has-cut-top{
  padding-top: calc(var(--ms-pt, 60px) + var(--ms-cut-top-h, 80px));
}
.monolith-section.has-cut-bottom{
  padding-bottom: calc(var(--ms-pb, 60px) + var(--ms-cut-bottom-h, 48px));
}

/*
  Cut semantics (frozen):
  - Top v => PEAK (mountain): center goes UP.
  - Bottom v => CUT (valley): center goes DOWN.
*/

/* Only top v */
.monolith-section.has-cut-top:not(.has-cut-bottom).cut-top-v{
  clip-path: polygon(
    0 var(--ms-cut-top-h, 80px),
    50% 0,
    100% var(--ms-cut-top-h, 80px),
    100% 100%,
    0 100%
  );
}

/* Only bottom v */
.monolith-section.has-cut-bottom:not(.has-cut-top).cut-bottom-v{
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--ms-cut-bottom-h, 48px)),
    50% 100%,
    0 calc(100% - var(--ms-cut-bottom-h, 48px))
  );
}

/* Both: top peak + bottom cut */
.monolith-section.combo-top-v-bottom-v{
  clip-path: polygon(
    0 var(--ms-cut-top-h, 80px),
    50% 0,
    100% var(--ms-cut-top-h, 80px),
    100% calc(100% - var(--ms-cut-bottom-h, 48px)),
    50% 100%,
    0 calc(100% - var(--ms-cut-bottom-h, 48px))
  );
}

/* Gutenberg niceties */
.monolith-section .wp-block-image{ margin-top: 0; margin-bottom: 0; }
.monolith-section img{ display:block; }