/* =============================================================================
   TRUST: PROCESS — "A Clear Process From Day One"
   Block: acf/trust-process (template-parts/blocks/trust_process)

   Self-contained. Tokens live on .tr-process, not :root, and every class is
   prefixed `tr-process__`, so the block cannot leak into the rest of the theme.
   ============================================================================= */

/* The theme ships Unbounded in 400/500/700/900; the step numerals are drawn in
   ExtraLight, so this face adds the missing weight. It is subset to the ten
   digits (2 KB) and is scoped to its own family name to keep it away from any
   other Unbounded usage. */
@font-face {
  font-family: "Unbounded Numerals";
  src: url("../../../fonts/Unbounded-ExtraLight.digits.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039;
}

.tr-process {
  --tr-brand: #f15f62;
  --tr-primary: #fda26b;
  --tr-title: #1e1e1e;
  --tr-text: #343434;
  --tr-card-bg: #f8f7f5;
  --tr-section-bg: #ffffff;

  --tr-font-titles: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --tr-font-numerals: "Unbounded Numerals", var(--tr-font-titles);
  --tr-font-text: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tr-gradient: linear-gradient(90deg, var(--tr-brand) 0%, var(--tr-primary) 100%);

  /* The numeral column and the glyph that sits in it. */
  --tr-num-col: 480px;
  --tr-num-size: 256px;
  --tr-card-pad: 32px;

  position: relative;
  width: 100%;
  margin: 0;
  padding: 64px 64px 128px;
  background: var(--tr-section-bg);
  font-family: var(--tr-font-text);
  color: var(--tr-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The root is in the reset too: it carries the section padding, and without
   border-box a 100%-wide section overflows the viewport by that padding. */
.tr-process,
.tr-process *,
.tr-process *::before,
.tr-process *::after {
  box-sizing: border-box;
}

.tr-process__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1408px;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.tr-process__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.tr-process__eyebrow {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  background-image: var(--tr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tr-process__title {
  margin: 0;
  font-family: var(--tr-font-titles);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--tr-title);
}

/* -----------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.tr-process__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tr-process__step {
  position: relative;
  padding: var(--tr-card-pad) 64px var(--tr-card-pad)
    calc(var(--tr-num-col) + var(--tr-card-pad));
  background: var(--tr-card-bg);
  /* The numeral is taller than a collapsed card and is meant to be cut off. */
  overflow: hidden;
}

.tr-process__summary {
  cursor: pointer;
  list-style: none;
}

/* The whole card toggles the step, not just the words in the summary. The
   overlay sits under .tr-process__panel (which raises itself), so the open
   description stays selectable and clicking it does not collapse the step. */
.tr-process__summary::before {
  content: "";
  position: absolute;
  inset: 0;
}

.tr-process__txts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-process__summary::-webkit-details-marker {
  display: none;
}

.tr-process__summary:focus-visible {
  outline: 2px solid var(--tr-brand);
  outline-offset: 4px;
}

.tr-process__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  background-image: var(--tr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tr-process__name {
  font-family: var(--tr-font-titles);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--tr-title);
}

.tr-process__panel {
  position: relative;
  z-index: 1;
  padding-top: 16px;
}

.tr-process__text {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tr-text);
}

/* -----------------------------------------------------------------------------
   Step numeral — its own crop, so the card's padding does not constrain it
   -------------------------------------------------------------------------- */
/* The design draws one numeral size for every step — the glyph does not change
   when a step opens. It is anchored near the top of the card and the card's own
   edge crops it, so an open step shows the whole numeral and the collapsed ones
   show its top arcs. Measured off the Figma frames: the ink is 198px tall (so
   256px of Unbounded, whose digits are 0.774em) and starts 29px below the top
   of the card, in both the open and the collapsed card. */
.tr-process__num {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--tr-num-col);
  overflow: hidden;
  pointer-events: none;
}

.tr-process__num-text {
  display: block;
  font-family: var(--tr-font-numerals);
  font-size: var(--tr-num-size);
  font-weight: 200;
  /* Sets where the digits start: with Unbounded's metrics this leading puts the
     ink 0.113em below the top of the card, which is the design's 29px at 256px. */
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  background-image: var(--tr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -----------------------------------------------------------------------------
   Open/close animation, where the browser supports animating <details>.
   Everywhere else the panel simply appears, which is the native behaviour.
   -------------------------------------------------------------------------- */
@supports selector(::details-content) {
  .tr-process__step {
    interpolate-size: allow-keywords;
  }

  .tr-process__step::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      content-visibility 0.35s allow-discrete;
  }

  .tr-process__step[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-process__step::details-content {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .tr-process {
    padding-inline: 32px;
  }
}

@media (max-width: 1024px) {
  .tr-process {
    --tr-num-col: 280px;
    --tr-num-size: 176px;

    padding-bottom: 96px;
  }

  .tr-process__inner {
    gap: 48px;
  }

  .tr-process__step {
    padding-right: 32px;
  }

  .tr-process__title {
    font-size: 32px;
  }

  .tr-process__name {
    font-size: 24px;
  }

  .tr-process__text {
    font-size: 18px;
  }
}

/* -----------------------------------------------------------------------------
   Mobile — Figma 360: the numeral moves under the copy, right-aligned, and is
   cropped to a 96px band at the bottom of the card.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .tr-process {
    --tr-num-size: 200px;
    --tr-card-pad: 16px;

    padding: 32px 16px 64px;
  }

  .tr-process__inner {
    gap: 32px;
  }

  .tr-process__title {
    font-size: 24px;
  }

  .tr-process__step {
    /* 128px = the design's 32px gap below the copy plus the 96px numeral band. */
    padding: 32px var(--tr-card-pad) 128px;
  }

  /* Mobile keeps the design's own treatment: one fixed numeral size, top
     aligned in a 96px band under the copy and cropped by it. The band runs to
     the card's own edge rather than stopping at the 16px text inset, so the
     digits overhang the column the copy sits in. */
  .tr-process__num {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 96px;
  }

  /* The frame does not align an edge of the numeral — it pins the middle of it
     0.71em from the card's right edge and lets the glyphs fall where they may.
     That is why "02" and "03" run off the card while the narrower "01" and "04"
     stop short of it, and why neither centring nor right-aligning reproduces it.
     The crop above ends at the card's edge, so the overshoot is cropped there. */
  .tr-process__num-text {
    position: absolute;
    top: 0;
    right: 0.71em;
    transform: translateX(50%);
    /* The band is only 96px, so the digits start level with its top rather
       than 0.113em below it, as they do in the mobile frame. */
    line-height: 0.85;
  }

  .tr-process__name {
    font-size: 20px;
  }

  .tr-process__text {
    font-size: 16px;
    color: #2a2a2a;
  }
}