/* ==========================================================================
   Pricing cards v4 — "Choose your pass" (ENGINEER-2878, /pricing-v2/)
   --------------------------------------------------------------------------
   Styles for template-parts/pricing/pricing-cards-v4.php. Loaded after
   css/pricing-table-v3.css (see fullwidth.php) and reuses its --sn-* tokens,
   .sn-tabs pill control and .sn-fineprint. Everything else is scoped to
   .sn-pass so the shared table on /pricing/ is untouched.
   ========================================================================== */

.sn-pass {
  max-width: 1040px;
  margin: 0 auto;
  text-align: left;
}

/* --- Product tabs -------------------------------------------------------- */

.sn-pass__tabs-wrap {
  display: flex;
  justify-content: center;
}

.sn-pass .sn-pass__tabs {
  width: 100%;
  margin: 0 0 22px;
}

/* Keep "Nursing School" on one line on phones. */
@media (max-width: 767px) {
  .sn-pass .sn-pass__tabs .sn-tabs__btn {
    padding: 9px 6px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .sn-pass .sn-pass__tabs {
    width: fit-content;
    margin: 0 0 30px;
  }
}

/* --- Panels -------------------------------------------------------------- */

.sn-pass__panel {
  display: none;
}

.sn-pass__panel.is-active {
  display: block;
}

.sn-pass__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 18px;
}

.sn-pass__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sn-text);
}

.sn-pass__installments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: var(--sn-text-body);
}

/* Tightly cropped logo (no built-in padding), sized a bit larger than the
   text per ENGINEER-2878 feedback. */
.sn-pass__installments img {
  width: auto;
  height: 20px;
}

@media (min-width: 992px) {
  .sn-pass__title {
    font-size: 28px;
  }
}

/* --- Card grid ----------------------------------------------------------- */

.sn-pass__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  /* Room for the featured card's "Best value" badge. */
  padding-top: 12px;
}

@media (min-width: 768px) {
  .sn-pass__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sn-pass__grid--3 .sn-pass__card--featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  /* Nursing School tab (3 white term cards + the featured Full Journey
     Pass): keep the white cards even with each other but slimmer than an
     equal 1fr split, and let the featured card take the extra room. */
  .sn-pass__grid--4 {
    grid-template-columns: repeat(3, 1fr) 1.15fr;
  }

  .sn-pass__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .sn-pass__grid--3 .sn-pass__card--featured {
    grid-column: auto;
  }
}

.sn-pass__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 18px 18px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-r-lg);
  background: var(--sn-white);
  box-shadow: 0 6px 18px rgba(var(--sn-navy-rgb), .06);
  color: var(--sn-text-body);
}

.sn-pass__card--featured {
  border-color: var(--sn-navy);
  background: var(--sn-navy);
  color: var(--sn-on-dark-bright);
  box-shadow: 0 14px 32px rgba(var(--sn-navy-rgb), .28);
}

/* The featured card's top badge + flag pill push "Full Journey Pass" down
   below the white cards' own padding-top. Add the flag pill's own height
   (~19px) plus its margin so the white cards' titles land on the same
   line as "Full Journey Pass" (ENGINEER-2878 feedback). */
.sn-pass__card:not(.sn-pass__card--featured) {
  padding-top: 68px;
}

/* "Best value" / "Most students pick this" pill sitting on the top edge. */
.sn-pass__top-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--sn-r-pill);
  background: #f5c542;
  color: var(--sn-navy-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sn-pass__flag {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1.5px solid var(--sn-pink-soft);
  border-radius: var(--sn-r-pill);
  color: var(--sn-pink-soft);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: normal;
  text-transform: uppercase;
}

.sn-pass__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  min-height: 2.6em;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sn-text);
}

/* Reserve the same vertical space on every card (including the featured
   one) so "Best for:" lines up across the whole row. Now that the white
   cards are wide enough for every detail line to fit on one line, this
   only needs to cover one line (ENGINEER-2878 feedback). */
.sn-pass__detail {
  min-height: 1.45em;
}

.sn-pass__card--featured .sn-pass__name {
  color: var(--sn-white);
}

.sn-pass__save {
  padding: 2px 8px;
  border-radius: var(--sn-r-pill);
  background: var(--sn-tint-blue);
  color: var(--sn-blue);
  font-size: 10px;
  font-weight: 700;
}

.sn-pass__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: var(--sn-text);
}

.sn-pass__card--featured .sn-pass__price {
  color: var(--sn-white);
}

.sn-pass__price-major {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
}

.sn-pass__price-unit {
  font-size: 14px;
  font-weight: 600;
}

.sn-pass__detail {
  margin: 4px 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sn-text-muted);
}

.sn-pass__card--featured .sn-pass__detail {
  color: var(--sn-on-dark);
}

.sn-pass__bestfor {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
}

.sn-pass__bestfor-label {
  font-weight: 700;
  color: var(--sn-pink);
}

.sn-pass__card--featured .sn-pass__bestfor {
  color: var(--sn-white);
}

.sn-pass__card--featured .sn-pass__bestfor-label {
  color: var(--sn-pink-soft);
}

.sn-pass__guarantee {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sn-pink-soft);
}

.sn-pass__guarantee svg {
  flex-shrink: 0;
}

.sn-pass__gift {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1.5px dashed rgba(var(--sn-white-rgb), .35);
  border-radius: var(--sn-r-md);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--sn-on-dark);
}

.sn-pass__gift svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--sn-pink-soft);
}

.sn-pass__gift strong {
  color: var(--sn-white);
}

.sn-pass__gift-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sn-pink-soft);
}

/* Push every "Choose" button to the bottom so they line up across cards. */
.sn-pass__choose {
  display: block;
  margin-top: auto;
  padding: 11px 16px;
  border: 2px solid var(--sn-blue);
  border-radius: var(--sn-r-pill);
  background: transparent;
  color: var(--sn-blue);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: opacity .15s;
}

/* Hover matches the earlier pricing table buttons: same colours, slight
   fade. Scoped under .sn-pass so global link hover colours can't override
   the text colour. */
.sn-pass .sn-pass__choose:hover,
.sn-pass .sn-pass__choose:focus {
  border-color: var(--sn-blue);
  background: transparent;
  color: var(--sn-blue);
  opacity: .92;
  text-decoration: none;
}

.sn-pass .sn-pass__card--featured .sn-pass__choose,
.sn-pass .sn-pass__card--featured .sn-pass__choose:hover,
.sn-pass .sn-pass__card--featured .sn-pass__choose:focus {
  border-color: var(--sn-pink);
  background: var(--sn-pink);
  color: var(--sn-white);
}

/* --- Feature summary box ------------------------------------------------- */

.sn-pass__features {
  margin-top: 18px;
  padding: 20px 18px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-r-lg);
  background: var(--sn-mist);
}

.sn-pass__features-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sn-text);
}

.sn-pass__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-pass__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--sn-text-soft);
}

.sn-pass__check {
  flex-shrink: 0;
  margin-top: 1px;
}

.sn-pass__divider {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--sn-border-strong);
}

@media (min-width: 576px) {
  .sn-pass__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .sn-pass__features {
    padding: 26px 26px 24px;
  }

  .sn-pass__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Guarantee / gift callouts ------------------------------------------ */

.sn-pass__callouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .sn-pass__callouts--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sn-pass__callout {
  padding: 14px 16px;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-r-md);
  background: var(--sn-white);
}

.sn-pass__callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sn-pink);
}

.sn-pass__callout-title svg {
  flex-shrink: 0;
}

.sn-pass__callout-body {
  margin: 0;
  padding-left: 24px;
  font-size: 13px;
  color: var(--sn-text-body);
}

.sn-pass__callout-link {
  margin: 4px 0 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sn-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Fine print ---------------------------------------------------------- */

.sn-pass .sn-fineprint {
  margin: 22px auto 0;
  max-width: 825px;
  text-align: center;
}