/* ==========================================================================
   TUOIL — mosaic opening
   The About page's first screen: four photographs
   cut into one figure on the left, running off the page, and the heading
   with the introduction on the right.

   The figure is a block square to the page edge whose right side ends on a
   point. A second, parallel point runs inside it and splits the figure in
   two: the left part is halved by a level seam that starts at that inner
   point, the right part -- the large central picture -- is cut again by a
   level seam low down, which leaves a slanted strip along the bottom.

   Every piece is the full figure clipped to its own share, so the seams
   between them are exact at any size. The points are measured off the
   figure's own height (cqh), which keeps their angle fixed however wide the
   figure gets; the inner point sits a fixed share of the width (cqw) in from
   the outer one.
   ========================================================================== */

.s-mosaic {
  --bleed: max(var(--container-pad),
               calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-top: 120px;   /* the height of the fixed header's plate */
  padding-bottom: 6rem;
  overflow: hidden;
  background: var(--c-cream);
}

.s-mosaic__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4.4vw, 88px);
  min-height: clamp(560px, 47vw, 760px);
}

/* --- Figure ------------------------------------------------------------------ */
.s-mosaic__media {
  position: relative;
  align-self: stretch;
  container-type: size;
  margin-left: calc(-1 * var(--bleed));
  /* how far a point reaches, off the figure's height */
  --nose: 20cqh;
  /* the inner point, this far in from the outer one */
  --shift: 52cqw;
  /* where the strip along the bottom starts, and the slope's share there */
  --low: 71%;
  --low-k: 0.42;
  /* half the seam, level and across a slanted seam */
  --gap: 3px;
  --gap-x: 3.3px;
}

.s-mosaic__piece {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.s-mosaic__img {
  position: absolute;
  width: auto;
  max-width: none;
  object-fit: cover;
}

/* upper left */
.s-mosaic__piece--upper {
  clip-path: polygon(
    0 0,
    calc(100% - var(--nose) - var(--shift) - var(--gap-x)) 0,
    calc(100% - var(--shift) - var(--gap-x)) calc(50% - var(--gap)),
    0 calc(50% - var(--gap)));
}

.s-mosaic__piece--upper .s-mosaic__img {
  left: 0;
  top: 0;
  width: calc(100% - var(--shift));
  height: 50%;
}

/* lower left */
.s-mosaic__piece--lower {
  clip-path: polygon(
    0 calc(50% + var(--gap)),
    calc(100% - var(--shift) - var(--gap-x)) calc(50% + var(--gap)),
    calc(100% - var(--nose) - var(--shift) - var(--gap-x)) 100%,
    0 100%);
}

.s-mosaic__piece--lower .s-mosaic__img {
  left: 0;
  top: 50%;
  width: calc(100% - var(--shift));
  height: 50%;
}

/* the large picture between the two points */
.s-mosaic__piece--centre {
  clip-path: polygon(
    calc(100% - var(--nose) - var(--shift) + var(--gap-x)) 0,
    calc(100% - var(--nose)) 0,
    100% 50%,
    calc(100% - var(--nose) * var(--low-k)) calc(var(--low) - var(--gap)),
    calc(100% - var(--shift) - var(--nose) * var(--low-k) + var(--gap-x)) calc(var(--low) - var(--gap)),
    calc(100% - var(--shift) + var(--gap-x)) 50%);
}

.s-mosaic__piece--centre .s-mosaic__img {
  left: calc(100% - var(--nose) - var(--shift));
  top: 0;
  width: calc(var(--nose) + var(--shift));
  height: var(--low);
}

/* the slanted strip along the bottom */
.s-mosaic__piece--strip {
  clip-path: polygon(
    calc(100% - var(--shift) - var(--nose) * var(--low-k) + var(--gap-x)) calc(var(--low) + var(--gap)),
    calc(100% - var(--nose) * var(--low-k)) calc(var(--low) + var(--gap)),
    calc(100% - var(--nose)) 100%,
    calc(100% - var(--nose) - var(--shift) + var(--gap-x)) 100%);
}

.s-mosaic__piece--strip .s-mosaic__img {
  left: calc(100% - var(--nose) - var(--shift));
  top: var(--low);
  /* out to where the slope stands at the top of the strip */
  width: calc(var(--shift) + var(--nose) - var(--nose) * var(--low-k));
  height: calc(100% - var(--low));
}

/* --- Text -------------------------------------------------------------------- */
.s-mosaic__body {
  align-self: center;
  padding-block: var(--sp-5) var(--sp-6);
}

.s-mosaic__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
}

.s-mosaic__line { display: block; }

/* The company's line under the heading: spaced capitals behind a hairline.
   It sits under the heading: a three-line heading at full size leaves no
   width for a column beside it at any container size. */
.s-mosaic__motto {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 2px 0 2px var(--sp-3);
  border-left: 1px solid var(--c-border-strong);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--c-muted);
}

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

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

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

  /* Stacked, nothing beside the figure sets its height, so it is declared.
     The point stays on the right, a margin short of the page edge. */
  .s-mosaic__media {
    height: clamp(280px, 64vw, 560px);
    --shift: 50cqw;
  }

  .s-mosaic__body { padding-block: var(--sp-5) 0; }
}

@media (max-width: 768px) {
  .s-mosaic { padding-top: 104px; padding-bottom: var(--sp-6); }
}

@media (max-width: 480px) {
  .s-mosaic__media { --nose: 18cqh; --gap: 2px; --gap-x: 2.2px; }
}