/*
 * The private lessons cards.
 *
 * Deliberately close to the pricing tiers on the landing page: a visitor
 * choosing between a membership and a private lesson is making one comparison,
 * and it should look like one.
 *
 * No hex values: colours come from tokens.css.
 */

.bp-lessons { background: var(--bp-band); }

.bp-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  align-items: start;
}

.bp-lesson-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bp-page);
  border: 1px solid var(--bp-hair);
  border-radius: var(--bp-radius);
  padding: 34px 28px 28px;
}

/* Marked by its border, not a fill: gold behind body text fails contrast. */
.bp-lesson-card.is-featured { border-color: var(--bp-gold-deep); }

.bp-lesson-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--bp-gold);
  color: var(--bp-dark);
}

.bp-lesson-kind {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bp-gold-deep);
  margin: 0 0 10px;
}

.bp-lesson-title {
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--bp-ink);
  margin: 0 0 16px;
}

.bp-lesson-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bp-muted);
  flex: 1;
}

.bp-lesson-features li {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0 0 9px;
}

/* A tick drawn in CSS rather than an icon font, so nothing has to load for the
   list to read as a list of things you get. */
.bp-lesson-features li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--bp-gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bp-lesson-price { margin: 0 0 22px; }

.bp-lesson-amount {
  font-family: var(--bp-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--bp-ink);
}

.bp-lesson-period {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--bp-muted);
}

@media (max-width: 760px) {
  .bp-lessons-grid { grid-template-columns: 1fr; }
  .bp-lesson-card { padding-top: 30px; }
}

/*
 * WooCommerce adds its own "View cart" link after a successful add. The basket
 * slides open at that moment and already offers View basket, so the extra link
 * only appears under one card and says the same thing twice.
 */
.bp-lesson-card .added_to_cart { display: none; }