/* ============================================================
   WaveLocal — Pricing card styles
   File: includes/pricing-card.css

   Pairs with includes/pricing-card.php

   Layout:
     • Desktop / tablet : responsive grid, cards side by side
     • Mobile (<=640px) : horizontal PEEK-CAROUSEL — cards scroll
                          sideways with scroll-snap, and the NEXT card
                          peeks in at the right edge so users can see
                          there's more to swipe. Pure CSS, no JavaScript.

   Colours use CSS variables with sensible fallbacks. If your site
   already defines brand variables (e.g. --wl-accent), set them on
   :root and these will pick them up. Otherwise the fallbacks apply.
   ============================================================ */

:root {
  --wl-pricing-accent:        var(--wl-accent, #1e88e5);      /* primary / links / featured accent */
  --wl-pricing-premium:       var(--wl-premium, #6a4bc4);     /* professional/premium tier accent */
  --wl-pricing-ink:           var(--wl-ink, #1a2230);         /* headings / price text */
  --wl-pricing-body:          var(--wl-body, #4a5568);        /* body copy */
  --wl-pricing-muted:         var(--wl-muted, #718096);       /* monthly / secondary text */
  --wl-pricing-card-bg:       #ffffff;
  --wl-pricing-page-bg:       var(--wl-surface, #f6f8fb);     /* section background */
  --wl-pricing-border:        #e4e9f0;
  --wl-pricing-tick:          #2e9e5b;                        /* feature list ticks */
  --wl-pricing-radius:        14px;
  --wl-pricing-shadow:        0 2px 4px rgba(20,30,50,.04), 0 8px 24px rgba(20,30,50,.06);
  --wl-pricing-shadow-hover:  0 4px 8px rgba(20,30,50,.06), 0 14px 36px rgba(20,30,50,.12);
}

/* ---------- Section wrapper ---------- */
.pricing {
  background: var(--wl-pricing-page-bg);
  padding: 4rem 1.25rem;
}

.pricing h2 {
  text-align: center;
  color: var(--wl-pricing-ink);
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0 0 .5rem;
}

.pricing-intro {
  text-align: center;
  color: var(--wl-pricing-body);
  max-width: 640px;
  margin: 0 auto 2.75rem;
  line-height: 1.6;
}

/* ---------- Grid (desktop / tablet default) ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

/* Drop to 2-up on medium screens */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 640px;
  }
}

/* ---------- Card ---------- */
.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--wl-pricing-card-bg);
  border: 1px solid var(--wl-pricing-border);
  border-radius: var(--wl-pricing-radius);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--wl-pricing-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wl-pricing-shadow-hover);
}

.pricing-card h3 {
  color: var(--wl-pricing-ink);
  font-size: 1.25rem;
  margin: 0 0 .75rem;
}

/* ---------- Price ---------- */
.pricing-price {
  color: var(--wl-pricing-ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .25rem;
}

.pricing-price .from {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wl-pricing-muted);
}

/* Quote-style prices (no £) render a touch smaller so they sit level with numeric ones */
.pricing-price--quote {
  font-size: 1.4rem;
  padding-top: .35rem;
}

.pricing-monthly {
  color: var(--wl-pricing-muted);
  font-size: .9rem;
  margin: 0 0 1rem;
}

.pricing-desc {
  color: var(--wl-pricing-body);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

/* ---------- Feature list ---------- */
.pricing-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex-grow: 1;               /* pushes the button to the bottom, aligning CTAs across cards */
}

.pricing-features li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  color: var(--wl-pricing-body);
  font-size: .92rem;
  line-height: 1.4;
}

.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 1rem;
  height: 1rem;
  background: var(--wl-pricing-tick);
  border-radius: 50%;
  /* white tick drawn with a mask so it scales crisply */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* ---------- Button ---------- */
.pricing-button {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--wl-pricing-accent);
  color: #fff;
  font-weight: 600;
  padding: .8rem 1rem;
  border-radius: 8px;
  transition: filter .15s ease;
  margin-top: auto;
}

.pricing-button:hover { filter: brightness(1.08); }

/* ---------- Variants ---------- */
.pricing-card--featured {
  border-color: var(--wl-pricing-accent);
  border-width: 2px;
}

.pricing-card--featured::before {
  content: "Most popular";
  display: inline-block;
  align-self: flex-start;
  background: var(--wl-pricing-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}

.pricing-card--premium {
  border-color: var(--wl-pricing-premium);
}

.pricing-card--premium .pricing-button {
  background: var(--wl-pricing-premium);
}

/* ---------- Footnote ---------- */
.pricing-footnote {
  text-align: center;
  color: var(--wl-pricing-muted);
  font-size: .9rem;
  margin: 2rem auto 0;
  max-width: 560px;
}

.pricing-footnote a,
.pricing-intro a { color: var(--wl-pricing-accent); }

/* ============================================================
   MOBILE PEEK-CAROUSEL  (<= 640px)
   Horizontal scroll-snap. Each card is ~82% wide so the next
   one peeks in at the right edge, cueing "swipe for more".
   No JavaScript.
   ============================================================ */
@media (max-width: 640px) {

  .pricing-grid {
    display: flex;                       /* override grid */
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    /* padding so first/last cards aren't jammed against the screen edge,
       and the peek is visible on the right */
    padding: .5rem 1.25rem 1.25rem;
    margin: 0 -1.25rem;                  /* bleed to the section edges */
    scroll-padding-left: 1.25rem;
  }

  /* Hide scrollbar but keep it scrollable */
  .pricing-grid::-webkit-scrollbar { display: none; }
  .pricing-grid { scrollbar-width: none; }

  .pricing-card {
    flex: 0 0 82%;                       /* <100% so the next card peeks */
    scroll-snap-align: start;
    /* disable hover lift on touch — it can feel janky mid-scroll */
    transition: box-shadow .18s ease;
  }
  .pricing-card:hover { transform: none; }

  /* Featured badge still works; nudge spacing a touch on mobile */
  .pricing h2 { font-size: 1.6rem; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-card { transition: none; }
  .pricing-grid { scroll-behavior: auto; }
}