/* ============ Round 8: "how it works" on the soil analysis page, photographs instead of numbers (29 Oct 2026) ============
   The owner wanted the four steps more visual and without the 01 02 03 04. First try: a photo inside a white card, with the icon below it: "I don't like this
   style". Now each step is ONE photograph that is the whole card (the kit is handed over, the sample is dug from the lawn, the tubes at the lab, the plan on a
   garden table; credits in docs/ui-ux/CREDITS.md): the line icon sits on a frosted-glass disc in the top corner, and the heading with its few lines of text sit
   over a dark fade at the bottom (the look of the season cards of the home page). The order is the order of the photographs and of the verbs (order, take,
   send, receive): a number says nothing the pictures do not. On a phone the cards are the shared swipe row (carousel.js). Markup: Front/Blocks/Steps.php.
   The card recipe (white, 24 px corners, 28 px padding), the heading colours and the older `.soil-step-icon` rules are `!important`, so what has to change is
   `!important` too, inside `@layer fi-pre` (the earlier layer wins). */

.soil-section .soil-steps { gap: clamp(14px, 1.6vw, 24px); }
@layer fi-pre {
  .soil-steps .soil-step.has-pic {
    /* the words start at the same height in every card (the top padding is the room for the photograph), so the four headings line up whatever the length of the text */
    position: relative; isolation: isolate; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0 !important;
    padding: clamp(250px, 22vw, 320px) 24px 28px !important; overflow: hidden; border-radius: 28px !important; background: #1d3a2c !important; color: #fff;
  }
  .soil-steps .soil-step.has-pic .soil-step-icon {
    position: absolute !important; top: 20px; left: 20px; z-index: 2; flex: none; width: 56px !important; height: 56px !important; margin: 0 !important; padding: 0;
    display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, .18) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42) !important; color: #fff !important;
  }
  @supports (backdrop-filter: blur(1px)) { .soil-steps .soil-step.has-pic .soil-step-icon { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } }
  /* the older icon rules draw the svg itself as a pale rounded tile: here the glass disc is the tile */
  .soil-steps .soil-step.has-pic .soil-step-icon svg { position: static !important; flex: none; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #fff !important; }
  .soil-steps .soil-step.has-pic h3 { margin: 0 0 8px !important; color: #fff !important; font-size: 23px !important; line-height: 1.15 !important; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
  .soil-steps .soil-step.has-pic p { margin: 0 !important; color: rgba(255, 255, 255, .92) !important; font-size: 14.5px !important; line-height: 1.5 !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
}
/* the photograph is the card: it fills it, behind the text, with a fade that makes the text readable on any photograph (top fade for the glass disc, bottom fade for the words) */
.soil-step-pic { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; background: #24402f; }
.soil-step-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-soft, ease); }
.soil-step-pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 30, 22, 0.4) 0, rgba(14, 30, 22, 0.37) 4%, rgba(14, 30, 22, 0.3) 8%, rgba(14, 30, 22, 0.2) 12%, rgba(14, 30, 22, 0.1) 16%, rgba(14, 30, 22, 0.03) 20%, rgba(14, 30, 22, 0) 24%, rgba(14, 30, 22, 0) 34%, rgba(14, 30, 22, 0.02) 39.5%, rgba(14, 30, 22, 0.07) 45%, rgba(14, 30, 22, 0.14) 50.5%, rgba(14, 30, 22, 0.23) 56%, rgba(14, 30, 22, 0.34) 61.5%, rgba(14, 30, 22, 0.45) 67%, rgba(14, 30, 22, 0.56) 72.5%, rgba(14, 30, 22, 0.67) 78%, rgba(14, 30, 22, 0.76) 83.5%, rgba(14, 30, 22, 0.83) 89%, rgba(14, 30, 22, 0.88) 94.5%, rgba(14, 30, 22, 0.9) 100%);
}
.soil-step.has-pic .soil-step-icon svg { --hi-w: 1.3; }
@media (hover: hover) and (pointer: fine) { .soil-step.has-pic:hover .soil-step-pic img { transform: scale(1.05); } }

/* ---- The product page's "Gebruiksaanwijzing": a tick on a mint disc where the 01-04 circles were (the dashed line between the steps stays) ---- */
@layer fi-pre {
  .pdp-stepper .pdp-label-step .num { display: grid !important; place-items: center; background: var(--m-mint, #cfe0bd) !important; border: 0 !important; color: var(--green-ink, #1d3a2c) !important; }
  @media (hover: hover) and (pointer: fine) {
    .pdp-stepper .pdp-label-step:hover .num { background: var(--green-deep, #2a7050) !important; color: #fff !important; }
  }
}
.pdp-stepper .num svg { width: 55%; height: 55%; --hi-w: 1.8; }

/* Tablets: four columns are too narrow for the words (168 px each at 768), so two by two. */
@media (min-width: 721px) and (max-width: 1023px) {
  @layer fi-pre {
    .soil-steps.pg-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .soil-steps .soil-step.has-pic { padding-top: 290px !important; }
  }
}

/* Phones: the swipe row, one tall photograph card and a peek of the next. */
@media (max-width: 720px) {
  .soil-steps[data-snap] { --snap-w: 80%; --snap-max: 340px; }
  @layer fi-pre {
    .soil-steps .soil-step.has-pic { padding: 250px 20px 24px !important; border-radius: 24px !important; }
  }
}
@media (prefers-reduced-motion: reduce) { .soil-step-pic img { transition: none; } }