/* ==========================================================================
   ALBI HOME — IHRE VORTEILE
   Section backdrop, benefit card, closing CTA panel.
   Depends on tokens.css + base.css + components.css, and reuses
   .section-head, .eyebrow, .prose and .cta-panel 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 y2970, 1439x1821, carrying a dark textured
   photograph. The solid colour underneath is not a fallback nicety — the
   cards sit on --bg-page and are DARKER than the backdrop, so without it the
   card/ground relationship inverts while the image loads.
   -------------------------------------------------------------------------- */
.benefits-section {
  position: relative;
  background-color: var(--bg-raised);
  background-image: url("../img/benefits-bg-1440.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
  .benefits-section {
    background-image: image-set(
      url("../img/benefits-bg-1440.webp") type("image/webp") 1x,
      url("../img/benefits-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. The
   narrower files carry the same texture at a fraction of the bytes. */
@media (max-width: 1023.98px) {
  .benefits-section { background-image: url("../img/benefits-bg-1024.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .benefits-section {
      background-image: image-set(
        url("../img/benefits-bg-1024.webp") type("image/webp") 1x,
        url("../img/benefits-bg-1024.jpg")  type("image/jpeg") 1x
      );
    }
  }
}
@media (max-width: 719.98px) {
  .benefits-section { background-image: url("../img/benefits-bg-720.jpg"); }
  @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)) {
    .benefits-section {
      background-image: image-set(
        url("../img/benefits-bg-720.webp") type("image/webp") 1x,
        url("../img/benefits-bg-720.jpg")  type("image/jpeg") 1x
      );
    }
  }
}

/* --------------------------------------------------------------------------
   2. THE GRID
   1296 = (412 x 3) + (30 x 2). Three even columns at 1440, two at tablet,
   one on a phone. Rows stretch so every card in a row shares a height and
   the photographs along the bottom line up.
   -------------------------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Equal rows regardless of copy length. All six bodies are three lines as
     written, so this changes nothing today — it is here so that the client
     lengthening one card's text cannot leave the two rows visibly different
     heights with their photographs on different lines. */
  grid-auto-rows: 1fr;
  gap: 30px;                        /* as drawn, both axes */
  margin-top: var(--section-stack);
}

/* --------------------------------------------------------------------------
   3. THE CARD
   Figma: 412x487, on --bg-page. Text block on top, photograph flush to the
   bottom and both sides, ghosted numeral top-right.

   Measured off the export, relative to the card's top-left corner:
       padding-inline  25
       label      y 25..38   gold, 16px
       title      y 59..81 and 88..110  -> 24px, 29px line-height
       body       y 138, 159, 180       -> 14px, 21px line-height
       numeral    y 33..67, right edge 390 -> ~48px
       media      y 226, 412x261, flush to the bottom
   -------------------------------------------------------------------------- */
.benefit {
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* clips the photo to the bottom corners */
  border-radius: var(--radius-sm);  /* 6px, measured at the card's corner */
  background-color: var(--bg-page);
}

/* flex:1 pushes the media down, so a card with a shorter heading still lines
   its photograph up with its neighbours instead of floating mid-card.
   The inset is symmetric now: the asymmetric 25/18 existed only to reproduce
   the measure of the long supporting paragraph, which the card no longer
   carries. */
.benefit__body {
  flex: 1;
  padding: 21px 25px 29px;
}

/* The heading leads the card. */
.benefit__title {
  /* 24px at 1440, easing down on a phone where the card is narrower.
     --fs-h3 lands on exactly the measured 24px, so the token is reused. */
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.2;                 /* 29px at 24px, as measured */
  letter-spacing: var(--ls-tight);
  /* The design gives the heading its own <br>, so balancing would fight it. */
  text-wrap: wrap;
}

/* The gold line, now sitting UNDER the heading in place of the paragraph the
   card used to carry. Same colour, weight and size it had on top. */
.benefit__label {
  margin-top: 16px;
  color: var(--text-accent);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* Decorative numeral. rgba(226,184,92,.12) over --bg-page composites to
   exactly the #2F2D26 in the export — it is gold at 12%, not a grey. Being
   this quiet is the point: it is texture, not information, which is also why
   the markup hides it from assistive tech.

   FLOATED, not absolutely positioned. The heading now leads the card, so it
   is the thing that would run under the numeral. Absolute positioning would
   force a padding-right on the whole heading to clear it, and on a 169px
   phone card that reserved corner costs every line ~35px of measure — the
   heading ends up one word per line. Floating shortens only the lines the
   numeral actually sits beside and hands the rest their full width back. */
.benefit__num {
  float: right;
  margin-left: var(--space-3);
  color: var(--a-gold-12);
  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);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* The photograph is full-bleed left, right and bottom, but its TOP corners
   are rounded in the file — 6px, same as the card — so a sliver of card shows
   above each shoulder. Its bottom corners need nothing: the card's own
   overflow:hidden clips them to the same 6px. */
.benefit__media {
  aspect-ratio: 412 / 261;
  overflow: hidden;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--bg-card); /* holds the shape while the photo loads */
}
.benefit__media picture { display: contents; }
/* Same contract as the project tiles: the card owns the shape, the photo
   fills it from the centre. Any source size or aspect ratio works. */
.benefit__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   4. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* Two columns from 1024 down. Three would put the cards near 250px, which
   breaks the two-line headings into four. */
@media (max-width: 1199.98px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

/* --- Phone: below 768, still two up ---------------------------------------
   The pair is kept all the way down. A card is ~169px wide on a 390px phone,
   so everything inside has to come down with it: the desktop type would give
   the heading one word per line and push the photograph off the fold.

   The sizes below are vw-driven rather than stepped, because the card width
   is a fraction of the viewport — a step at one breakpoint would leave the
   type mismatched to the card either side of it. Each clamp floors at a size
   that is still legible and ceilings at the tablet value, so 767px hands over
   to the rule above with no visible jump.

   Symmetric padding here: the asymmetric inset above exists only to
   reproduce the desktop measure, and there is no room to spare at this size. */
@media (max-width: 767.98px) {
  .benefits { gap: 16px; }

  .benefit__body { padding: 16px 14px 20px; }

  /* The designed break would strand a heading across a third of the card, so
     it wraps to the card instead.

     Greedy, NOT balanced. Balance assumes every line has the same width to
     play with; the floated numeral makes the first line narrower than the
     rest, and balancing against that produced "Ein Partner. / Der / ganze
     Prozess." — a two-word line stranded in the middle. Greedy fills each
     line to the width actually available and reads straight. */
  .benefit__title {
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.25;
    text-wrap: wrap;
  }
  .benefit__title br { display: none; }

  .benefit__label {
    margin-top: 12px;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
  }

  /* line-height under 1 shrinks the float's BOX without shrinking the digits,
     so it occupies roughly one heading line instead of two. Only the first
     line then has to wrap around it and every line after gets the card's full
     width back — which on a 169px card is the difference between a readable
     heading and a column of single words. The glyphs overflow the short box
     harmlessly; it is decorative and nothing sits above it. */
  .benefit__num {
    margin-left: var(--space-2);
    font-size: clamp(1.375rem, 6.4vw, 2.5rem);
    line-height: .8;
  }
}

@media (max-width: 479.98px) {
  .benefits { gap: 12px; }
  .benefit__body { padding: 14px 12px 16px; }
  .benefit__label { margin-top: 10px; }
}