/* ---------------------------------------------------------------------------
   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. The three stops are sampled from the flag
   artwork that backs the pricing count-down banner, so the banner, the pricing
   cards and these plan cards all sit on one blue ramp. Kept in step with
   --campaign-* in pricing-2026.blade.php and --cc-band-* in circle-chain.css.
   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;
}

/* Title measure matched to story-sections.css, so headings on a page built
   from both families wrap at the same width. */
.section-plan-cards h2 {
  max-width: 52rem;
}

.section-plan-cards .pc-grid {
  display: grid;
  gap: 1.75rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media screen and (min-width: 998px) {
  .section-plan-cards .pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* 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;
}