/* ==========================================================================
   TUOIL — production and laboratory
   Two interlocking photographs in the middle of the row, the two halves
   named on either side of them.
   ========================================================================== */

.s-prod {
  padding-block: var(--section-pad);
  overflow: hidden;
}

.s-prod__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
}

.s-prod__text {
  max-width: 44ch;
  margin-top: var(--sp-2);
  color: var(--c-muted);
}

.s-prod__link { margin-top: var(--sp-3); }

/* --- Band ---------------------------------------------------------------------
   The band takes its height from the row, so it always stands exactly as tall
   as the taller of the two texts beside it.

   Two separate tiles that interlock. The first is
   a lying hexagon with a point at each end; the second repeats it with the
   left point turned inside out into a notch, so it sits around its neighbour
   at an even distance. Both cuts run 0.75px sideways per 1px of height
   (36.87 degrees off vertical), so a point reaches 0.375 of the height over
   half the height; the gap is 0.046 and the corner rounding 0.03 of the
   height. All of it is written in cqh -- hundredths of the band's own height,
   which is what makes the angles survive a height nobody declared. Local to
   this block on purpose: it shares nothing with .panel-row.
   -------------------------------------------------------------------------- */
.s-prod__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}

.prod-band {
  /* A size container, so the tiles can measure themselves against it -- and
     so its own height stays the row's business rather than its content's. */
  container-type: size;
  --band-nose: 37.5cqh;  /* how far a point reaches */
  --band-gap: 4.6cqh;    /* the even distance between the two tiles */
  display: flex;
  align-self: stretch;
}

.prod-band__tile { flex: 1 1 0; }

/* The second tile slides back over the first, so that its notch closes around
   the point rather than standing off from it; what is left between the two
   edges is the gap. The nose it takes back is added to its width, so both
   photographs end up the same size. */
.prod-band__tile--chevron {
  flex-basis: var(--band-nose);
  margin-left: calc(var(--band-gap) - var(--band-nose));
}

.prod-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.96);
}

/* The vertices run clockwise from the top-left corner -- a corner is the two
   points where its rounding leaves the edges, plus the middle of the arc
   where the turn is sharp enough for a straight chord to show. */
.prod-band__tile--hex {
  clip-path: polygon(
    36.6cqh 1.2cqh,
    39cqh 0,
    calc(100% - 39cqh) 0,
    calc(100% - 36.6cqh) 1.2cqh,
    calc(100% - 1.35cqh) calc(50% - 1.8cqh),
    calc(100% - 0.75cqh) 50%,
    calc(100% - 1.35cqh) calc(50% + 1.8cqh),
    calc(100% - 36.6cqh) calc(100% - 1.2cqh),
    calc(100% - 39cqh) 100%,
    39cqh 100%,
    36.6cqh calc(100% - 1.2cqh),
    1.35cqh calc(50% + 1.8cqh),
    0.75cqh 50%,
    1.35cqh calc(50% - 1.8cqh));
}

.prod-band__tile--chevron {
  clip-path: polygon(
    3.6cqh 4.8cqh,
    3.3167cqh 1.6584cqh,
    6cqh 0,
    calc(100% - 39cqh) 0,
    calc(100% - 36.6cqh) 1.2cqh,
    calc(100% - 1.35cqh) calc(50% - 1.8cqh),
    calc(100% - 0.75cqh) 50%,
    calc(100% - 1.35cqh) calc(50% + 1.8cqh),
    calc(100% - 36.6cqh) calc(100% - 1.2cqh),
    calc(100% - 39cqh) 100%,
    6cqh 100%,
    3.3167cqh calc(100% - 1.6584cqh),
    3.6cqh calc(100% - 4.8cqh),
    36.15cqh calc(50% + 1.8cqh),
    36.75cqh 50%,
    36.15cqh calc(50% - 1.8cqh));
}

/* The second half is set against the right edge, so the two names bracket the
   pictures instead of both leaning the same way. */
.s-prod__body--end { text-align: right; }
.s-prod__body--end .s-prod__text { margin-left: auto; }

@media (max-width: 1024px) {
  /* Three columns leave the two texts too narrow to read; the pictures take
     the full row and the names go under them. */
  .s-prod__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-5) var(--sp-6);
  }
    /* On its own row now, with nothing beside it to measure against, so the
     height goes back to being declared. */
  .prod-band { grid-column: 1 / -1; grid-row: 1; height: clamp(110px, 18vw, 200px); }
  .s-prod__body { grid-row: 2; }
}

@media (max-width: 768px) {
  .s-prod__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .s-prod__body { grid-row: auto; }
  .s-prod__body--end { text-align: left; }
  .s-prod__body--end .s-prod__text { margin-left: 0; }
}