/**
 * @file
 * MLT Modern — Pricing card.
 *
 * Centred card showing a price tier. Add .mlt-price-card--featured to
 * highlight the recommended option — it gets a blue ribbon badge above.
 *
 * Default badge text is "Most common"; override with data-badge attribute
 * (e.g. data-badge="Most popular") if needed:
 *   .mlt-price-card--featured[data-badge]::before { content: attr(data-badge); }
 *
 * Markup:
 *   <div class="mlt-pricing-grid">
 *     <div class="mlt-price-card">
 *       <h3>2-bed flat</h3>
 *       <div class="mlt-price-card__price">£3,200<span>typical, fixed</span></div>
 *       <p class="mlt-price-card__meta">4-5 day job · NICEIC certified</p>
 *     </div>
 *     <div class="mlt-price-card mlt-price-card--featured">
 *       <h3>3-bed semi</h3>
 *       <div class="mlt-price-card__price">£4,800<span>typical, fixed</span></div>
 *       <p class="mlt-price-card__meta">5-7 day job · NICEIC certified</p>
 *     </div>
 *   </div>
 *   <div class="mlt-pricing-note">
 *     <strong>Fixed prices, no surprises.</strong> Every job is quoted...
 *   </div>
 */

.mlt-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.mlt-price-card {
  background: #fff;
  border: 1px solid var(--mlt-border);
  border-radius: var(--mlt-radius-lg);
  padding: 32px 26px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.mlt-price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mlt-shadow-elevated);
}

.mlt-price-card--featured {
  border: 2px solid var(--mlt-primary);
  background: var(--mlt-primary-light);
}

.mlt-price-card--featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mlt-primary);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--mlt-radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Fallback badge text if no data-badge attribute is set. */
.mlt-price-card--featured:not([data-badge])::before {
  content: "Most common";
}

.mlt-price-card h3 {
  font-size: 20px;
  color: var(--mlt-text);
  margin: 0 0 8px;
  font-weight: 700;
}

.mlt-price-card__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--mlt-primary);
  margin: 14px 0;
  line-height: 1.1;
}

.mlt-price-card__price span {
  font-size: 14px;
  font-weight: 400;
  color: var(--mlt-text-light);
  display: block;
  margin-top: 4px;
}

.mlt-price-card__meta {
  font-size: 14px;
  color: var(--mlt-text-light);
  margin: 0 0 16px;
}

.mlt-pricing-note {
  background: var(--mlt-warning-soft);
  border-left: 4px solid var(--mlt-accent);
  padding: 18px 22px;
  border-radius: var(--mlt-radius-sm);
  font-size: 15px;
  color: var(--mlt-text);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
}