/* ---------------------------------------------------------------------------
   plan-cards — campaign plan cards side by side. Each carries a promo ribbon
   across its head, a struck-through price, a CTA, a "best for" pill and a
   feature checklist. `highlight` flips one card to the inverse (blue)
   treatment.

   Loaded by resources/views/components/sections/plan-cards.blade.php.
   Plain CSS — no Tailwind @apply here.
   Bump the ?v in that component's <link> whenever this file changes.
--------------------------------------------------------------------------- */

/* Made in Malaysia campaign palette, sampled from the pricing count-down
   banner art. The same three stops live in --campaign-* in
   pricing-2026.blade.php and circle-chain.css, and the navy is the fallback
   background-color in pricing-grant-ribbon.blade.php; keep all four in step
   if the art is swapped. Scoped to the section rather than :root so nothing
   else can pick them up. */
.section-plan-cards {
  --campaign-navy: #000073;
  --campaign-blue: #041089;
  --campaign-blue-bright: #0441cd;
}

/* Phones: the cards are one swipeable row inside the site slider
   (.slider-scroll in slider.css: overflow, snap, hidden scrollbar); this sizes
   the track so it sits like the pricing page slider.
   - Every card snaps dead centre. With two cards both are end cards, and plain
     end padding leaves too little scroll room to centre them on anything wider
     than a 375px phone, so the ::before/::after spacers each take half the
     free width, less the gap.
   - The neighbour always peeks in: cards are 21.25rem, shrinking on narrow
     phones so 1.25rem of the next card stays visible past the 1.25rem gap.
   - The scroller clips, so the track pads 3.5rem under the cards for the soft
     card shadow to fade out before the edge, and the negative margin hands that
     room back to the layout. */
.section-plan-cards .pc-grid {
  --pc-gap: 1.25rem;
  --pc-card-w: min(21.25rem, 100% - 5rem);
  display: flex;
  gap: var(--pc-gap);
  padding: 0.5rem 0 3.5rem;
}

.section-plan-cards .pc-grid::before,
.section-plan-cards .pc-grid::after {
  content: "";
  flex: 0 0 calc((100% - var(--pc-card-w)) / 2 - var(--pc-gap));
}

.section-plan-cards .pc-card {
  flex: 0 0 var(--pc-card-w);
  scroll-snap-align: center;
}

.section-plan-cards .pc-scroll {
  margin-bottom: -2rem;
}

/* From md both cards fit side by side, so the row stops being a slider: the
   scroller no longer clips (the card shadows spill past it as before), the
   spacers go, and the track is the 2-up grid. */
@media screen and (min-width: 768px) {
  .section-plan-cards .pc-scroll {
    overflow: visible;
    margin-bottom: 0;
  }

  .section-plan-cards .pc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .section-plan-cards .pc-grid::before,
  .section-plan-cards .pc-grid::after {
    content: none;
  }
}

@media screen and (min-width: 998px) {
  .section-plan-cards .pc-grid {
    gap: 2rem;
    padding: 0;
  }
}

/* Cards stretch to the tallest in the row (grid's default) and lay their body
   out as a column, so the shorter plan's background runs the full height
   instead of stopping under its last feature. */
.section-plan-cards .pc-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  color: #000;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
}

.section-plan-cards .pc-card--highlight {
  background: linear-gradient(to bottom,
      var(--campaign-navy) 0%,
      var(--campaign-blue) 45%,
      var(--campaign-blue-bright) 100%);
  color: #fff;
}

/* Promo ribbon across the card head. The plain card gets the dark half of the
   flag ramp, so it reads as flat navy; the highlighted card gets lime — so the
   two never read as the same card. */
.section-plan-cards .pc-ribbon {
  display: block;
  padding: 0.85rem 1rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.0625rem;
  background: linear-gradient(90deg, var(--campaign-navy), var(--campaign-blue));
  color: #fff;
}

.section-plan-cards .pc-card--highlight .pc-ribbon {
  background: var(--color-yellow);
  color: #000;
}

.section-plan-cards .pc-body {
  flex: 1;
  padding: 2rem 1.75rem 2.25rem;
}

@media screen and (min-width: 768px) {
  .section-plan-cards .pc-body {
    padding: 2.25rem 2.25rem 2.5rem;
  }
}

.section-plan-cards .pc-name {
  margin: 0 0 0.75rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.section-plan-cards .pc-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.section-plan-cards .pc-price__currency {
  font-size: 1.5rem;
  font-weight: 700;
}

.section-plan-cards .pc-price__amount {
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-plan-cards .pc-price__was {
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.55;
}

.section-plan-cards .pc-price__cycle {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.75;
}

/* The CTA is full-width inside the card, so it reads as the card's own action
   rather than a button that happens to sit there. */
.section-plan-cards .pc-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* The plain card's CTA wears the same navy as the ribbon above it, so the head
   and the button read as one campaign colour rather than two different blues.
   The highlighted card is already blue-filled and keeps its yellow CTA, so
   these rules deliberately stop short of it. */
.section-plan-cards .pc-card:not(.pc-card--highlight) .pc-cta .btn.btn-primary {
  background: linear-gradient(to right, var(--campaign-navy), var(--campaign-blue));
  border-color: var(--campaign-navy);
}

.section-plan-cards .pc-card:not(.pc-card--highlight) .pc-cta .btn.btn-primary:hover {
  background: linear-gradient(to right, var(--campaign-blue), var(--campaign-blue-bright));
  border-color: var(--campaign-blue);
}

.section-plan-cards .pc-note {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-blue);
}

.section-plan-cards .pc-card--highlight .pc-note {
  color: #fff;
}

/* "Best for" — an outlined pill that labels the block beneath it */
.section-plan-cards .pc-pill {
  display: inline-block;
  margin: 1.75rem 0 0.9rem;
  padding: 0.3rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-blue);
}

.section-plan-cards .pc-card--highlight .pc-pill {
  background: #fff;
  border-color: #fff;
  color: var(--color-blue);
}

.section-plan-cards .pc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-plan-cards .pc-list li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.55em;
  line-height: 1.4;
}

.section-plan-cards .pc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.05rem;
  height: 1.05rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313ce66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.5'/%3E%3C/svg%3E");
}

/* The "best for" list sits above a hairline that separates it from the plan's
   feature list — same list styling, two different jobs. */
.section-plan-cards .pc-list--intro {
  font-size: 1rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.section-plan-cards .pc-list--features {
  font-size: 0.9375rem;
}

.section-plan-cards .pc-list--features li {
  margin-bottom: 0.75em;
}