/* ==========================================================================
   Section 4 — Packages
   Source of truth: design_handoff_sections/README.md ("Section 4").
   ========================================================================== */

.packages {
  --glow: radial-gradient(44% 34% at 62% 40%,
    rgba(168, 112, 28, .13) 0%, rgba(6, 5, 4, 0) 72%);

  background: var(--black-deep);
  padding: var(--space-132) var(--gutter) var(--space-118);
}

/* --- Header --------------------------------------------------------------- */

.packages__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-26);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.packages__header .section-h2 { font-size: 62px; }
.packages__lede { max-width: 56ch; }

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

.packages__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 74px;
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 20px 32px;
  box-shadow: var(--shadow-card);
  transition:
    background .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}

/* 3px bar pinned to the card's top edge. Colour is per tier. */
.pkg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pkg-bar);
  transition: height .3s ease;
}

/* --- Tiers ---------------------------------------------------------------- */

/* Four steps up one ladder, and the step has to be visible at a glance —
   especially on a phone, where the rail shows one card at a time and there is
   nothing beside it to compare against. Each tier owns an edge alpha, a bar, a
   label colour and how much gold sits in its bed; --pkg-edge is named because
   the mobile rail brightens it to mark the card you are on. */

.pkg--standard {
  --pkg-edge: .16;
  --pkg-bar: rgba(217, 169, 58, .3);
  --pkg-label: rgba(240, 233, 220, .6);
  background: var(--black-card-2);
}

.pkg--premium {
  --pkg-edge: .27;
  --pkg-bar: rgba(217, 169, 58, .55);
  --pkg-label: rgba(217, 169, 58, .88);
  background:
    linear-gradient(to bottom,
      rgba(168, 112, 28, .1) 0%,
      rgba(168, 112, 28, .02) 54%,
      transparent 100%),
    var(--black-premium);
}

/* The emphasised tier: a gold wash over its own bed rather than a flat fill. */
.pkg--elite {
  --pkg-edge: .5;
  --pkg-bar: var(--gold-figure);
  --pkg-label: var(--gold-figure);
  background:
    linear-gradient(to bottom,
      rgba(168, 112, 28, .26) 0%,
      rgba(168, 112, 28, .06) 58%,
      transparent 100%),
    var(--black-elite);
}

/* The top of the ladder answers in metal rather than in more gold. */
.pkg--black {
  --pkg-edge: .36;
  --pkg-bar: var(--grad-metal-bar);
  --pkg-label: transparent;
  background:
    linear-gradient(to bottom,
      rgba(120, 96, 54, .14) 0%,
      rgba(120, 96, 54, .03) 52%,
      transparent 100%),
    var(--black-blackcard);
}

.pkg--black .pkg__tier {
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
}

.pkg { border: 1px solid rgba(217, 169, 58, var(--pkg-edge)); }

/* --- Hover ---------------------------------------------------------------- */

.pkg:hover,
.pkg:focus-within {
  border-color: rgba(217, 169, 58, calc(var(--pkg-edge) + .26));
  box-shadow: var(--shadow-card-hover);
}

.pkg--standard:hover, .pkg--standard:focus-within,
.pkg--premium:hover,  .pkg--premium:focus-within,
.pkg--black:hover,    .pkg--black:focus-within {
  background-image: linear-gradient(to bottom,
    rgba(168, 112, 28, .15) 0%,
    rgba(168, 112, 28, .03) 62%,
    transparent 100%);
}

.pkg--elite:hover,
.pkg--elite:focus-within {
  background:
    linear-gradient(to bottom,
      rgba(168, 112, 28, .28) 0%,
      rgba(168, 112, 28, .06) 58%,
      transparent 100%),
    #15120C;
}

/* --- Card internals ------------------------------------------------------- */

.pkg__tier {
  margin-bottom: 20px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pkg-label, rgba(217, 169, 58, .8));
}

.pkg__popular {
  position: absolute;
  top: 36px;
  right: 20px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .62);
}

/* The rung that was missing. This was 12.5px Karla 300 — smaller and fainter
   than the bullet list below it — so the card ran tiny-caps straight into a
   48px price with nothing in between, and every card read as the same block of
   grey. It is the package's name; it should look like one. */
.pkg__name {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--bone);
  text-wrap: pretty;
}

.pkg__price {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: .9;
  /* The figure is the number, not the symbol — see .pkg__price-mark. */
  letter-spacing: -.028em;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1, 'onum' 0;
}

/* Set smaller and lifted to the cap line, so "$" reads as a mark on the
   number rather than as its first digit. */
.pkg__price-mark {
  font-size: .56em;
  vertical-align: .34em;
  margin-right: .04em;
  letter-spacing: 0;
}

.pkg__once {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .72);
}

.pkg__divider {
  height: 1px;
  margin: 26px 0 22px;
  background: rgba(217, 169, 58, .2);
}

.pkg .bullets {
  gap: 13px;
  margin-bottom: 30px;
  font-size: 14px;
}

/* Under a heading now, so the divider above it is doing the separating and the
   markers can stop shouting. */
.pkg .bullets li::before { background: rgba(217, 169, 58, .5); }

.pkg__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pkg__audience {
  margin: 0;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(246, 241, 230, .6);
  text-wrap: pretty;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  /* 4-up becomes 2 x 2; Elite keeps its emphasis in place. */
  .packages__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packages__header .section-h2 { font-size: clamp(38px, 6vw, 62px); }
}

@media (max-width: 768px) {
  .packages { padding: var(--space-88) var(--gutter) var(--space-72); }
  .packages__grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    margin-top: var(--space-44);
  }
  .pkg { padding: 30px 22px 26px; }
  .pkg .bullets { gap: 11px; margin-bottom: var(--space-24); }
  .pkg__price { font-size: 42px; }

  /* Which card you are on. The rail shows one at a time, so the neighbours
     fading back says "there is more" but nothing says "this one" — the centred
     card has to answer for itself.

     --near comes from js/carousel.js: 1 at the centre of the rail, 0 a slide
     away, updated as the finger moves. Note the fallback is 0 here, not the 1
     that the opacity rule uses: with no JavaScript there is no notion of a
     centred card, so every card should sit at full strength and none should be
     singled out. */
  .pkg {
    border-color: rgba(217, 169, 58,
      calc(var(--pkg-edge) + .34 * var(--near, 0)));
    box-shadow:
      var(--shadow-card),
      0 0 30px rgba(168, 112, 28, calc(.26 * var(--near, 0)));
  }

  /* The tier's own bar thickens as its card arrives. */
  .pkg::before { height: calc(3px + 3px * var(--near, 0)); }

  /* Hover is meaningless on touch; give the emphasis to the card instead. */
  .pkg__footer { gap: var(--space-16); }
  .pkg .cta-link {
    width: 100%;
    justify-content: center;
    background-position: 0 calc(100% - 6px);
  }
}