/** step-details: reusable inner-section presentation.
 * Owned by parts/sections/step-details.php. Caller enqueues this before wp_head after vwbh-pages/base.
 * Shared prose/media/metadata primitives remain in vwbh-pages.css. No ACF or route-specific data.
 * Keep the section contract and ARCHITECTURE.md current when changing selectors or reuse.
 * Flip cards mirror css/start-working-with-us.css: both faces share one grid cell, so a card is
 * as tall as its taller face; hover, keyboard focus (:focus-visible) and .is-flipped (tap)
 * rotate it, with no motion when reduced motion is requested.
 * Spacing above/below the card row comes from the shared vertical rhythm in vwbh-pages.css; the
 * row never adds its own bottom margin (the flip script may follow it as the last child).
 */
.vwbh-site .vwbh-page__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:32px 0 0;padding:0;list-style:none}
.vwbh-site .vwbh-page__section>.vwbh-home__container>.vwbh-page__steps{margin-bottom:0}
.vwbh-site .vwbh-page__step{min-width:0;line-height:1.6;perspective:1200px;list-style:none;cursor:pointer;border-radius:16px}
.vwbh-site .vwbh-page__step:focus{outline:none}
.vwbh-site .vwbh-page__step:focus-visible{outline:3px solid #146c75;outline-offset:4px}
.vwbh-site .vwbh-page__step .vwbh-flip__inner{display:grid;height:100%;transition:transform .6s ease;transform-style:preserve-3d}
.vwbh-site .vwbh-page__step .vwbh-flip__face{grid-area:1/1;position:relative;background:#fff;border:1px solid #dfe7ed;border-radius:16px;padding:32px 24px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.vwbh-site .vwbh-page__step .vwbh-flip__back{transform:rotateY(180deg);background:var(--vwbh-navy);border-color:var(--vwbh-navy);color:#fff}
.vwbh-site .vwbh-page__step .vwbh-flip__back .vwbh-page__prose{color:inherit;font-size:18px;line-height:1.5}
.vwbh-site .vwbh-page__step .vwbh-flip__back .vwbh-page__prose a{color:inherit}
.vwbh-site .vwbh-page__step.is-flipped .vwbh-flip__inner,.vwbh-site .vwbh-page__step:focus-visible .vwbh-flip__inner,.vwbh-site .vwbh-page__step:has(a:focus-visible) .vwbh-flip__inner{transform:rotateY(180deg)}
@media(hover:hover){.vwbh-site .vwbh-page__step:hover .vwbh-flip__inner{transform:rotateY(180deg)}}
.vwbh-site .vwbh-page__step .vwbh-flip__title{margin:0;font-size:25px;font-weight:600;line-height:1.3;text-transform:none;letter-spacing:.01em;color:var(--vwbh-navy)}
.vwbh-site .vwbh-page__step-icon{display:block;width:72px;height:72px;object-fit:contain;margin:0 auto}
@media(prefers-reduced-motion:reduce){
  .vwbh-site .vwbh-page__step .vwbh-flip__inner{transition:none}
}
@media(max-width:1024px){
  .vwbh-site .vwbh-page__steps{gap:18px}
  .vwbh-site .vwbh-page__step .vwbh-flip__face{padding:28px 22px}
}
@media(max-width:767px){
  .vwbh-site .vwbh-page__steps{grid-template-columns:minmax(0,1fr)}
  .vwbh-site .vwbh-page__step .vwbh-flip__face{min-height:190px}
}