/* ==========================================================================
   TUOIL — IFEAT membership
   A photograph bleeding off the left edge of the page and ending on a point,
   the right half of the page's hexagon. It takes half the section; the text
   takes the other half, with the federation's own mark under it.
   ========================================================================== */

.s-ifeat {
  --mark: clamp(230px, 23vw, 330px);
  /* The distance from the container's own content edge out to the edge of the
     page. Everything that has to bleed measures itself against this rather
     than against a share of the viewport, which above 1600 stops matching the
     container and pushes the content off its own grid. */
  --bleed: max(var(--container-pad),
               calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  /* No padding of its own: the photograph runs the full height of the
     section and the text carries the padding instead, which is what gives
     the picture the extra height over the text. */
  padding-block: 0;
  overflow: hidden;
  background: var(--c-surface-2);
}

.s-ifeat__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 3vw, 56px);
}

/* --- Photograph ---------------------------------------------------------------
   A grid item, so the point always lands at the middle of the container
   whatever the screen does. The negative margin on the left takes it out to
   the page edge; because the item stretches, the width follows on its own.
   Its height comes from the row -- that is, from the text beside it -- and the
   negative margin top and bottom is what makes it stand a little taller than
   that text rather than exactly as tall. A size container, so the band inside
   can measure the height it was handed; that band is one panel, so there is no
   seam to lean and the picture stays upright, and the row's --open-start keeps
   the left end square, since it runs off the page.
   -------------------------------------------------------------------------- */
.s-ifeat__media {
  grid-column: 1;
  align-self: stretch;
  container-type: size;
  margin-left: calc(-1 * var(--bleed));
}

.s-ifeat__band { --panel-h: 100cqh; }

.s-ifeat__media .panel__img { filter: saturate(0.85) brightness(0.94); }

/* --- Content ------------------------------------------------------------------ */
.s-ifeat__body {
  grid-column: 2;
  padding-block: var(--section-pad);
}

.s-ifeat__title { max-width: 18ch; }

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

/* The federation's line. Set apart from the paragraphs, and reading as the
   caption to the mark it stands over. */
.s-ifeat__motto {
  margin-top: var(--sp-4);
  color: var(--c-muted);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s-ifeat__mark {
  display: block;
  width: var(--mark);
  height: auto;
  margin-top: var(--sp-2);
}

@media (max-width: 1024px) {
  /* Stacked, the photograph no longer sets the height of anything, so the
     padding goes back on the section where it usually lives. */
  .s-ifeat { padding-block: var(--section-pad); }
  .s-ifeat__body { padding-block: 0; }

  /* The point needs width to read. Below this the photograph goes back to a
     plain band running the full width, above the text. */
  .s-ifeat__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-5);
  }

  /* Nothing beside it to take a height from any more, so it is declared. */
  .s-ifeat__media {
    grid-column: 1 / -1;
    height: clamp(180px, 34vw, 280px);
    margin-inline: calc(-1 * var(--bleed));
  }

  /* a plain band at this width: both ends run off the page */
  .s-ifeat__band { clip-path: none; }

  .s-ifeat__body { grid-column: 1; }
}

@media (max-width: 600px) {
  .s-ifeat__inner { row-gap: var(--sp-3); }
}