/* Lo que ganas tú (site/_gains), after pixy's services and figures, on Grella's violet, edge to
   edge. The opening (gains_controller): a white veil whose disc shrinks to the logo's ring. The
   veil only exists once the controller has started (.gains--animated), so without JavaScript
   or with reduced motion the section is violet from the first frame. Fixed colours in either
   mode. */
@layer components {
  /* Full-bleed on the wrapper, not the section: pinning moves the section into a spacer that
     takes the wrapper's width. */
  .gains-wrap { margin: calc(var(--block-space) * 3) var(--bleed) 0; }

  .gains {
    position: relative;
    inline-size: 100%;
    overflow: clip;
    color: #fff;
    background: #6448e8;
  }

  .gains__veil { display: none; }

  .gains--animated .gains__veil {
    position: absolute;
    inset: 0 0 auto;
    block-size: calc(100vh - var(--header, 0px)); /* the screen under the header, where it pins */
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
  }

  /* The disc: white, with a hole of --hole of its diameter; scaled up it covers the screen. */
  .gains__disc {
    --hole: 0;

    inline-size: 12rem;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    mask: radial-gradient(circle, transparent calc(var(--hole) * 50%), #000 calc(var(--hole) * 50% + 0.5px));
  }

  .gains__body {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3.5vh, 2.5rem);
    min-block-size: calc(100vh - var(--header, 0px));
    justify-content: center;
    padding: clamp(1.5rem, 6vh, 4rem) var(--site-edge); /* the header's edge */

    & p { margin: 0; max-inline-size: none; }
  }

  .gains .gains__title { /* beats .site-page h2 */
    margin: 0;
    font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .gains__grid {
    display: grid;
    gap: calc(var(--block-space) * 3) calc(var(--inline-space) * 8);

    @media (min-width: 52rem) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  }

  /* Each gain: a ruled row, its title big, its line under a lime bar. */
  .gains__list {
    margin: 0;
    padding: 0;
    list-style: none;

    & > li:first-child { border-block-start: 1px solid rgb(255 255 255 / 0.3); } /* on the item: it comes in with it */

    & > li {
      max-inline-size: none;
      padding-block: clamp(0.75rem, 2.4vh, 1.5rem);
      border-block-end: 1px solid rgb(255 255 255 / 0.3);
    }

    & h3 { margin: 0 0 var(--block-space-half); font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -0.03em; }

    & p {
      padding-inline-start: var(--inline-space-double);
      border-inline-start: 3px solid #c8f04a;
      font-size: var(--text-normal);
      line-height: 1.45;
      color: rgb(255 255 255 / 0.85);
    }
  }

  /* The figures: a huge number, its unit in lime, its label under it. */
  .gains__figures {
    display: grid;
    gap: clamp(1rem, 4vh, 2.5rem);
    margin: 0;

    & > div { display: flex; flex-direction: column-reverse; }

    & dt { font-size: var(--text-medium); font-weight: 700; letter-spacing: -0.01em; }

    & dd {
      margin: 0;
      font-size: clamp(3.5rem, 1rem + min(6vw, 10vh), 7.5rem);
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.06em;

      & span { margin-inline-start: 0.1em; font-size: 0.35em; letter-spacing: -0.02em; color: #c8f04a; }
    }
  }

  .gains .btn {
    --btn-background: #fff;
    --btn-color: #6448e8;
    --btn-border: #fff;
    --btn-hover-background: oklch(22.1% 0.031 292.3);
    --btn-hover-color: #fff;
    --btn-hover-border: oklch(22.1% 0.031 292.3);
  }
}