/* ==========================================================================
   TUOIL — callout
   The olive band that closes an inner page: eyebrow, heading, one line and a
   button, left-aligned. A lighter point enters from the
   right edge at the same blunt angle as the photographs above it, so the
   band closes the page in the same figure the page was built from.
   ========================================================================== */

.s-callout {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 1.5rem + 4vw, 5.5rem);
  background: var(--c-base);
  color: var(--c-on-dark);
}

.s-callout::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36%;
  background: var(--c-base-lift);
  /* about a fifth of the band's height, as on the photographs */
  --nose: clamp(44px, 4.4vw, 72px);
  clip-path: polygon(var(--nose) 0, 100% 0, 100% 100%, var(--nose) 100%, 0 50%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .s-callout::before { width: 12%; }
}


.s-callout__inner { position: relative; }

/* --- With a photograph ----------------------------------------------------------
   The catalogue's version: a photograph takes the right of the band behind a
   slanted edge, in place of the lighter point, and the content keeps to the
   width left of it. */
.s-callout--media::before { display: none; }

.s-callout__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34%;
  overflow: hidden;
  container-type: size;
}

.s-callout__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* out at the top, in at the bottom, at the inner pages' slant */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40cqh 100%);
}

.s-callout--media .s-callout__inner > * { max-width: 62%; }
.s-callout--media .s-callout__inner > .s-callout__title { max-width: 24ch; }

.s-callout__points { margin-top: var(--sp-5); }

.s-callout__title {
  max-width: 24ch;
  font-size: var(--fs-h2);
  color: var(--c-on-dark);
}

.s-callout__text {
  max-width: 56ch;
  margin-top: var(--sp-2);
  font-size: var(--fs-lead);
  color: var(--c-on-dark-muted);
}

.s-callout__btn { margin-top: var(--sp-4); }

.s-callout__arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}

.s-callout__btn:hover .s-callout__arrow,
.s-callout__btn:focus-visible .s-callout__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .s-callout__arrow { transition: none; }
}

/* Short of the width, the photograph gives way to the content. */
@media (max-width: 1024px) {
  .s-callout__media { display: none; }
  .s-callout--media .s-callout__inner > * { max-width: none; }
}