/*
 * How it works (plan-bespoke-steps-bnr): a thin pale band under the Bespoke banner with the three steps side by
 * side, each after its own icon: a ticked box, a basket and a calendar. On tablets and phones the steps stack.
 */

.wp-block-group.plan-pattern.plan-pattern--bespoke-steps-bnr {
  margin: 0;
  padding: 28px clamp(24px, 5vw, 64px);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--teal-pale);
  color: var(--text);
}

.plan-pattern--bespoke-steps-bnr .wp-block-group__inner-container {
  display: contents;
}

/* The steps: three even columns, one under another on smaller screens */

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 899px) {
  .plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Each step reads as one line of text after its icon, so the bold start and the rest wrap together */

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list li {
  position: relative;
  display: block;
  align-self: center;
  min-height: 28px;
  margin: 0;
  padding-left: 42px;
  font-size: 16px;
  line-height: 1.5;
}

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list strong {
  color: #0d3d39;
}

/* Each step's icon, drawn in the theme's dark teal */

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list li::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 28px;
  height: 28px;
  background: var(--teal-darker);
  transform: translateY(-50%);
  content: "";
  -webkit-mask: var(--bespoke-step-icon) center / contain no-repeat;
  mask: var(--bespoke-step-icon) center / contain no-repeat;
}

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list li:nth-child(1) {
  --bespoke-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E");
}

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list li:nth-child(2) {
  --bespoke-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-1.5 9h-12z'/%3E%3Cpath d='M6 6L5 3H2'/%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E");
}

.plan-pattern--bespoke-steps-bnr .plan-pattern__bespoke-steps-bnr-list li:nth-child(3) {
  --bespoke-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}