/* ==========================================================================
   TUOIL — split
   Text on one half, a photograph on the other running off the page and
   ending on a point toward the text -- the inner pages' repeating block.
   The picture is on the right by default; --media-start puts it on the left.

   The photograph is the site's panel row (components.css) with the point
   blunted to a softer angle. It takes its height from the text beside
   it and stands a little taller than that text -- about 10%, from the
   body's small padding -- while the section's own padding keeps the pictures
   of two splits in a row well apart rather than meeting on one line.
   ========================================================================== */

.s-split {
  --bleed: max(var(--container-pad),
               calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  --split-pad: 6rem;
  padding-block: var(--split-pad);
  overflow: hidden;
  background: var(--c-cream);
}

.s-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4.4vw, 88px);
  align-items: center;
}

.s-split__media {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  container-type: size;
  margin-right: calc(-1 * var(--bleed));
}

.s-split__band {
  --panel-h: 100cqh;
  --panel-nose: calc(var(--panel-h) * 0.2);
}

.s-split__body {
  grid-column: 1;
  align-self: center;
  grid-row: 1;
  padding-block: 1.125rem;   /* 18px: the picture ends up ~10% taller than the text */
}

.s-split--media-start .s-split__media {
  grid-column: 1;
  margin-right: 0;
  margin-left: calc(-1 * var(--bleed));
}

.s-split--media-start .s-split__body { grid-column: 2; }

/* --- Picture to the edges of the block ----------------------------------------
   The picture runs through the section's padding to its top and bottom edge,
   so it stands the full height of the block rather than beside the text
   alone. --full-top stops at the text's foot, for a block with a row of
   points under it. */
.s-split--full .s-split__media { margin-block: calc(-1 * var(--split-pad)); }
.s-split--full-top .s-split__media { margin-top: calc(-1 * var(--split-pad)); }

/* --- A plane of its own ------------------------------------------------------
   Sets a block off from the cream around it, as on the documentation and
   the professional-supply blocks. */
.s-split--tint { background: var(--c-surface-2); }
.s-split--tint-sage { background: var(--c-surface-sage); }

/* --- A straight slant instead of a point ---------------------------------------
   For a picture on the right. --slant leans its edge like "/" -- in at the
   top, out at the bottom -- and --slant-back like a backslash. The run is the
   same the points take over half their height, doubled over the whole edge. */
.s-split--slant .s-split__band {
  clip-path: polygon(calc(var(--panel-h) * 0.4) 0, 100% 0, 100% 100%, 0 100%);
}

.s-split--slant-back .s-split__band {
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--panel-h) * 0.4) 100%);
}

/* A row of points under the text and the picture, across the whole width. */
.s-split__foot {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--sp-7);
}

.s-split__title {
  max-width: 20ch;
  font-size: var(--fs-h2);
  text-wrap: balance;
}

.s-split__text {
  max-width: 60ch;
  margin-top: var(--sp-3);
  color: var(--c-ink);
}

.s-split__text strong { font-weight: var(--fw-semibold); }

@media (max-width: 1024px) {
  .s-split__inner { grid-template-columns: minmax(0, 1fr); }

  /* Stacked, the picture goes over the text at a declared height. It still
     runs off its own side of the page and keeps its point on the other. */
  .s-split__media,
  .s-split--media-start .s-split__media {
    grid-column: 1;
    grid-row: 1;
    height: clamp(200px, 46vw, 400px);
  }

  .s-split__body,
  .s-split--media-start .s-split__body {
    grid-column: 1;
    grid-row: 2;
    padding-block: var(--sp-4) 0;
  }

  .s-split__foot { grid-row: 3; margin-top: var(--sp-6); }
}

@media (max-width: 1024px) {
  /* stacked, the picture is a band over the text and keeps its own height */
  .s-split--full .s-split__media,
  .s-split--full-top .s-split__media { margin-block: 0; }
}

@media (max-width: 768px) {
  .s-split { --split-pad: var(--sp-6); }
}