/**
 * Styles the "Steps Grid" Page Builder layout (functions/fields-page-
 * builder-steps-grid.php, views/components/steps-grid.twig). Dedicated,
 * self-contained stylesheet rather than raw Tailwind utility classes —
 * this module's card/connector/button recipe doesn't already exist
 * anywhere in the theme's scanned .twig source, and the parent's
 * Tailwind bundle (dist/assets/style-*.css) is pre-compiled from a scan
 * of that source — an unused class compiles to nothing, silently (see
 * CLAUDE.md "Lliçons dures"). Colors/fonts reuse the parent's own
 * exposed CSS custom properties (--color-*, --font-*) instead.
 *
 * Row layout uses flexbox, not CSS grid-template-columns, on purpose:
 * the repeater holds 2 or 3 items (functions/fields-page-builder-steps-
 * grid.php) and `flex: 1 1 0%` on every `.oc-steps-grid__card` makes
 * both counts lay out correctly with zero per-count CSS — a grid
 * template would need a different `grid-template-columns` value per
 * item count.
 *
 * `.oc-steps-grid__intro`'s margin-bottom (client request 2026-10-14):
 * originally a plain `mb-10` Tailwind class in the Twig file — turned
 * out to be the SAME silent-no-op bug this file's own docblock warns
 * about: confirmed via grep that `mb-10` was never used anywhere else
 * in the theme's scanned source, so it was never compiled into
 * dist/assets/style-*.css and was rendering with NO margin at all
 * (not just "too little" — the client's "falta marge" report was the
 * symptom). Moved here instead, sized to match the effective default
 * gap the client asked to copy from `views/components/benefits.twig`:
 * that module's own intro block has `mb-8` (2rem) AND sits inside a
 * `grid gap-y-8` (2rem row-gap) wrapper shared with its items, so its
 * real total gap is 2rem + 2rem = 4rem — reproduced here as a single
 * margin since this module's intro and card row aren't grid siblings.
 */
.oc-steps-grid__intro {
  margin-bottom: 4rem;
}

.oc-steps-grid {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  align-items: stretch;
}

.oc-steps-grid__connector {
  display: none;
}

.oc-steps-grid__card {
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  overflow: hidden;
}

/**
 * Per-card background (client request 2026-10-14: white/bone/baby_blue/
 * dark, editor choice — see item.background in fields-page-builder-
 * steps-grid.php). `--color-blue-baby` is the parent theme's own token
 * for what the client called "baby blue" (confirmed via grep against
 * dist/assets/style-*.css's compiled :root custom properties).
 */
.oc-steps-grid__card--white {
  background-color: var(--color-white);
}

.oc-steps-grid__card--bone {
  background-color: var(--color-bone);
}

.oc-steps-grid__card--baby_blue {
  background-color: var(--color-blue-baby);
}

.oc-steps-grid__card--dark {
  background-color: var(--color-gray-dark);
}

.oc-steps-grid__image {
  width: 100%;
}

.oc-steps-grid__image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/**
 * Optional per-card crop toggle (client request 2026-10-14, "com el
 * crop image que tenen alguns mòduls") — same convention as the parent
 * theme's own crop_image fields (e.g. views/components/split-section/
 * *.twig): the aspect-ratio box stays fixed either way, only object-fit
 * changes, so an unchecked card shows the whole image letterboxed
 * instead of cropped.
 */
.oc-steps-grid__image--uncropped img {
  object-fit: contain;
}

.oc-steps-grid__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.oc-steps-grid__eyebrow {
  font-family: var(--font-aktiv-grotesk-extended);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gray);
}

.oc-steps-grid__card--dark .oc-steps-grid__eyebrow {
  color: var(--color-blue-light);
}

.oc-steps-grid__heading {
  font-family: var(--font-aktiv-grotesk-extended);
  font-weight: 700;
  font-size: 1.4375rem;
  line-height: 1.625rem;
  text-transform: none;
  color: var(--color-gray-dark);
  margin-top: 0.5rem;
  text-wrap: balance;
}

.oc-steps-grid__card--dark .oc-steps-grid__heading {
  color: var(--color-white);
}

.oc-steps-grid__text {
  font-family: var(--font-aktiv-grotesk);
  font-size: 1rem;
  line-height: 1.375rem;
  color: var(--color-gray);
  margin-top: 0.625rem;
  text-wrap: pretty;
}

.oc-steps-grid__card--dark .oc-steps-grid__text {
  color: var(--color-gray-light);
}

.oc-steps-grid__content > *:first-child {
  margin-top: 0;
}

/**
 * Replicates the theme's own `button-small-secondary-alt` utility
 * (resources/css/site.css:143-145, chaining `button-base` + `button-
 * size-small` + `button-color-secondary-alt`) as plain CSS instead of
 * using that class name directly — confirmed via grep that it's unused
 * anywhere in the theme's scanned .twig/.php source AND absent from the
 * compiled dist/assets/style-*.css bundle, so it would render
 * unstyled. `--dark` modifier uses `button-color-secondary` (white
 * text/border) instead of `-alt` (dark gray) on dark cards — `-alt` is
 * the light-background pair by the theme's own naming convention, and
 * would be invisible (dark gray on dark navy).
 */
.oc-steps-grid__button {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* .oc-steps-grid__content is a column flexbox
    with no align-items set, so its default (stretch) was forcing this
    link to the full column width — not how buttons look anywhere else
    on the site (client, 2026-10-14: "no ho he vist implementat cap
    lloc del web"). This makes it hug its own text instead. */
  font-family: var(--font-aktiv-grotesk-extended);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
  border: 1px solid var(--color-gray-dark);
  border-radius: 9999px;
  padding: 0.625rem 1.375rem;
  color: var(--color-gray-dark);
  margin-top: 1.25rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.oc-steps-grid__button:hover,
.oc-steps-grid__button:focus-visible {
  background-color: var(--color-blue);
}

.oc-steps-grid__card--dark .oc-steps-grid__button {
  border-color: var(--color-white);
  color: var(--color-white);
}

.oc-steps-grid__card--dark .oc-steps-grid__button:hover,
.oc-steps-grid__card--dark .oc-steps-grid__button:focus-visible {
  background-color: var(--color-white);
  color: var(--color-gray-dark);
}

@media (min-width: 1024px) {
  .oc-steps-grid {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    row-gap: 0;
  }

  /**
   * Card width is capped at 5/12 of the row (client request 2026-10-14:
   * the 2-item case at the old 1/2-each split — effectively 6/12 — read
   * as too wide) instead of an unbounded `flex: 1 1 0%`. `flex-grow: 0`
   * stops a 2-item row from stretching past that cap — the leftover
   * space is absorbed by `.oc-steps-grid`'s own `justify-content:
   * center` above, which centers the (now narrower) row instead of
   * leaving it flush left. `flex-shrink: 1` is what keeps the 3-item
   * case working with zero extra CSS: 3 × 5/12 (125%) doesn't fit, so
   * all 3 cards shrink by the same ratio down to the row's real width,
   * landing back at an equal ~1/3 split exactly like the old `flex: 1 1
   * 0%` did.
   */
  .oc-steps-grid__card {
    flex: 0 1 calc(5 / 12 * 100%);
    min-width: 0;
  }

  .oc-steps-grid__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    color: var(--color-blue-light);
    align-self: center;
  }

  .oc-steps-grid__connector svg {
    width: 100%;
    height: 1.5625rem; /* 1.25rem + 25% */
  }

  /* plus.twig/minus.twig draw plain <rect>s with no fill attribute (SVG
     default fill is black) — x.twig/caret-right.twig already use
     stroke="currentColor" on a <path> and are left alone; forcing fill
     on <path> too would override x.twig's own fill="none". */
  .oc-steps-grid__connector svg rect {
    fill: currentColor;
  }
}