/* Organic Divider — block styles */

.organic-divider {
  position: relative;
  /* Full-bleed at first paint. The JS below re-measures and corrects for
     asymmetric containers, but in a centred one (Dawn's page-width wrapper)
     this already matches what the JS computes, so nothing shifts. Leaving it
     at width:100% meant every block rendered inset until its script finished
     downloading — a visible gap on every load. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  line-height: 0;
  background-color: var(--od-bottom-color, transparent);
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  z-index: 0;

  /* Merchant padding, as borders rather than padding so each side can carry
     its own colour: the top band continues the section above, the bottom
     band the section below. Padding would inherit the container background
     (bottom colour) on both sides and show a seam at the top. */
  /* The pad colours undo the invert_vertical swap: the bands are borders on a
     box that never flips, so their top stays the section's top. The fallbacks
     keep the pre-existing behaviour for markup rendered before these existed. */
  border-top: var(--od-padding-y, 0px) solid var(--od-pad-top-color, var(--od-top-color, #f5f5f5));
  border-bottom: var(--od-padding-y, 0px) solid var(--od-pad-bottom-color, var(--od-bottom-color, transparent));
}

.organic-divider__svg {
  display: block;
  width: 100%;
  /* The block no longer sets its own height — it's the curve band plus the
     two padding borders, so height follows from this. */
  height: var(--od-band-height, 250px);
  vector-effect: non-scaling-stroke;
  will-change: filter, transform;
}

.organic-divider__path {
  fill: var(--od-top-color, #f5f5f5);
  transition: fill 0.3s ease;
}

/* Sizes — these now set the CURVE BAND height, not the block height.
   Previously they set the block height while the shape occupied whatever
   slice of the shared viewBox it happened to occupy, so the same size gave
   every shape a different curve height and a different amount of dead
   space. Sizing the band directly makes Divider Size mean the same thing
   for all eight shapes. */
.organic-divider--size-s { --od-band-height: 100px; }
.organic-divider--size-m { --od-band-height: 175px; }
.organic-divider--size-l { --od-band-height: 250px; }

/* Sizes — mobile */
@media (max-width: 749px) {
  .organic-divider--size-s { --od-band-height: 50px; }
  .organic-divider--size-m { --od-band-height: 80px; }
  .organic-divider--size-l { --od-band-height: 120px; }
}

/* Orientation */
.organic-divider--invert-v .organic-divider__svg { transform: scaleY(-1); }
.organic-divider--flip-h   .organic-divider__svg { transform: scaleX(-1); }
.organic-divider--invert-v.organic-divider--flip-h .organic-divider__svg { transform: scale(-1, -1); }