/* ==========================================================================
   ALBI HOME — SO ARBEITEN WIR
   Section backdrop, process step card, closing CTA.
   Depends on tokens.css + base.css + components.css, and reuses
   .section-head, .eyebrow, .prose and .btn unchanged.

   Every number is measured from ALBI-HOME-final.fig (node 42:2185) or read
   back from the 1440x9649 export.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE SECTION
   Figma: full-bleed panel at y4791, 1440x1005, over a dark interior photo.

   The overlay is heavy and was solved rather than guessed: regressing the raw
   photograph against the export across the section gives roughly
   rgba(16,18,23,.90), which is why a warm (109,96,87) pixel lands as a neutral
   (26,26,29). Stacking it as a gradient in the same background-image keeps it
   to one layer — no pseudo-element, no filter that children would inherit.
   -------------------------------------------------------------------------- */
.process-section {
  background-color: var(--bg-page);
  background-image: var(--process-scrim), url("../img/process-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  --process-scrim: linear-gradient(
    rgba(16, 18, 23, .90),
    rgba(16, 18, 23, .90)
  );
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .process-section {
    background-image: var(--process-scrim), image-set(
      url("../img/process-bg-1440.webp") type("image/webp") 1x,
      url("../img/process-bg-1440.jpg")  type("image/jpeg") 1x
    );
  }
}
/* A phone viewport is far taller than the backdrop is proportionally, so
   `cover` scales the 1440 file up enormously for no visible gain. */
@media (max-width: 1023.98px) {
  .process-section { background-image: var(--process-scrim), url("../img/process-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .process-section {
      background-image: var(--process-scrim), image-set(
        url("../img/process-bg-1024.webp") type("image/webp") 1x,
        url("../img/process-bg-1024.jpg")  type("image/jpeg") 1x
      );
    }
  }
}
@media (max-width: 719.98px) {
  .process-section { background-image: var(--process-scrim), url("../img/process-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .process-section {
      background-image: var(--process-scrim), image-set(
        url("../img/process-bg-720.webp") type("image/webp") 1x,
        url("../img/process-bg-720.jpg")  type("image/jpeg") 1x
      );
    }
  }
}

/* --------------------------------------------------------------------------
   2. THE GRID
   1296 = (302 x 4) + (29 x 3). Four across at 1440, two at tablet, one on a
   phone. Rows stretch so the cards in a row share a height.
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 29px;                        /* as drawn */
  margin-top: var(--section-stack);
}

/* --------------------------------------------------------------------------
   3. THE STEP CARD
   Figma: 302x358. Frosted glass over the backdrop — the fill reads ~26 points
   brighter than the section around it, which is white at roughly 10% once the
   backdrop underneath is accounted for. The blur is what makes it read as
   glass rather than as a flat grey: without it the photograph's texture
   telegraphs straight through the panel.

   Measured off the export, relative to the card's top-left corner:
       icon box   25,25  64x64, gold, 6px radius
       numeral    top 25, ink ending 28 from the right edge
       label      y113  16px/500 gold
       title      y140  24px/600, 29px leading
       body       y261  13px, 21px leading, anchored to the bottom
   -------------------------------------------------------------------------- */
.process-step {
  display: flex;
  flex-direction: column;
  /* The drawn height. Content alone comes to 321px, and the 37px difference
     is exactly the breathing room the design leaves between a heading and the
     copy under it — without it the card reads cramped and the copy stops
     looking deliberately dropped to the bottom. A minimum, not a height: a
     step whose copy runs longer simply grows, and the row grows with it. */
  min-height: 358px;
  /* 25 left, 18 right. The inset really is asymmetric in the file, and it is
     load-bearing: it gives the body a 259px measure, and the longest line of
     step 1 is 253px. Squaring it up to 25 drops the measure to 252 and spills
     that line onto a fourth row. */
  padding: 25px 18px 34px 25px;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);   /* 8px, measured at the corner */
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.process-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* The icons carry their own white fills and deliberately non-uniform sizes
   (20x26 to 34x30) — they sit at intrinsic size, centred. Never set a fixed
   square on them; that squashes the set. */
.process-step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background-color: var(--gold-500);
}

/* White at ~34% — measured, and far more present than the 12% ghost on the
   Vorteile cards. Here it is a step number you are meant to read, not texture.
   Proportional figures, not tabular: tabular widens the 1 to a full digit
   slot and pushes the pair ~8px wider than the design draws it. */
.process-step__num {
  color: var(--a-white-32);
  font-family: var(--font-display);
  font-size: 3rem;                  /* 48px — 35px digits, as measured */
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.process-step__label {
  margin-top: 24px;
  color: var(--accent);             /* --gold-500, as measured */
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.process-step__title {
  margin-top: 8px;
  font-size: var(--fs-h3);          /* 24px at 1440, as measured */
  font-weight: var(--fw-semibold);
  line-height: 1.2;                 /* 29px at 24px, as measured */
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

/* margin-top:auto anchors the copy to the bottom of the card. The design does
   this deliberately: step 1's heading is one line and step 3's is two, yet
   every body starts on the same line across the row. */
.process-step__text {
  margin-top: auto;
  padding-top: var(--space-5);      /* floor for the gap once the card grows */
  color: var(--text-on-media);
  font-size: var(--fs-xs);          /* 13px, as measured */
  line-height: 1.62;                /* 21px at 13px, as measured */
}

/* --------------------------------------------------------------------------
   4. CLOSING CTA
   Not the gold .cta-panel the other two sections end on — here the design
   sets the heading and button straight onto the backdrop, centred.
   Figma: heading 40px at y5555, button 372x56 at y5631.
   -------------------------------------------------------------------------- */
.process-cta {
  margin-top: clamp(2.5rem, 5.2vw, 4.6875rem);   /* 75px as drawn */
  text-align: center;
}
.process-cta__title { font-size: var(--fs-h2); }
.process-cta .btn { margin-top: var(--space-6); }
.process-cta .btn .icon { margin-left: calc(var(--space-1) * -1); }

/* --------------------------------------------------------------------------
   5. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Two across from 1200 down. Four would put the cards near 214px, which
   breaks every heading onto three lines. */
@media (max-width: 1199.98px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (max-width: 767.98px) {
  .process { gap: 16px; }

  /* Symmetric here: the asymmetric inset above exists only to reproduce the
     desktop measure, and there is no room to spare at this size. The drawn
     height goes too — on a two-up phone card 358px would be mostly empty. */
  .process-step { min-height: 0; padding: 18px 16px 22px; }

  .process-step__icon { width: 52px; height: 52px; }
  .process-step__num { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }

  .process-step__label { margin-top: 18px; font-size: clamp(0.8125rem, 3.4vw, 1rem); }
  .process-step__title { font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.25; }
  .process-step__text {
    padding-top: var(--space-5);
    font-size: clamp(0.75rem, 3vw, 0.8125rem);
    line-height: 1.6;
  }
}

@media (max-width: 479.98px) {
  .process { gap: 12px; }
  .process-step { padding: 14px 12px 18px; }
  .process-step__icon { width: 46px; height: 46px; }
}