/* =========================================================================
   template-parts/sections/section-pricing.php
   Moved out of the partial's inline <style id="es-pricing-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

/* ── Head ───────────────────────────────────────────────── */
.es-price__head { text-align: center; }
.es-price__head .es-lede { margin-inline: auto; }

/* ── Grid ───────────────────────────────────────────────────
   One column until there is room for the full row. A two-up
   step would leave the third card orphaned on its own line,
   which reads as a mistake rather than a tier, so the stack
   goes straight to three and is capped in the meantime. */
.es-price__grid {
  display: grid;
  /* Row gap is the larger of the two: stacked, the featured card's badge
     hangs above its top edge and a column-sized gap leaves it crowding the
     card above. Only one row survives at 992px, so this costs nothing there. */
  gap: var(--gap-fluid-lg) var(--gap-fluid-md);
  margin-top: var(--section-head-gap);
  max-width: 440px;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .es-price__grid {
    grid-template-columns: repeat(var(--es-price-cols, 3), minmax(0, 1fr));
    max-width: none;
  }
}

/* ── Card ───────────────────────────────────────────────── */
.es-price__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--gap-fluid-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
}

/* The recommended tier. A brand border and the badge above it, not a
   different size: the cards stay on one baseline so the prices can be
   compared at a glance, which is the whole job of the row. */
.es-price__card--featured {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-md);
}

.es-price__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--brand-500);
  color: var(--text-inverse);
  font-size: var(--fs-caption);
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* ── Mark ───────────────────────────────────────────────── */
.es-price__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-500);
}

/* ── Name and price ─────────────────────────────────────── */
.es-price__name {
  margin: var(--gap-fluid-sm) 0 0;
  color: var(--text-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--font-bold);
  line-height: var(--lh-subhead);
}

/* Baseline rather than centre: the currency and the period are set much
   smaller than the amount, and centring them would float both off the
   number they belong to. */
.es-price__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.es-price__value {
  color: var(--text-heading);
  font-size: var(--fs-title-md);
  font-weight: var(--font-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.es-price__card--featured .es-price__value { color: var(--brand-500); }

.es-price__currency {
  color: var(--text-body);
  font-size: var(--fs-body);
  font-weight: var(--font-medium);
}

.es-price__period {
  margin-inline-start: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
}

/* ── Features ───────────────────────────────────────────────
   Takes the slack in the column so the CTA below it sits on the
   same line in all three cards, whatever the feature counts. */
.es-price__features {
  flex: 1;
  margin: var(--gap-fluid-sm) 0 0;
  padding: var(--gap-fluid-sm) 0 0;
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}

.es-price__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-subhead);
}

.es-price__feature + .es-price__feature { margin-top: var(--space-3); }

/* Nudged down to sit on the first line of the label rather than its box,
   which leaves the tick reading as part of the sentence. */
.es-price__check {
  flex-shrink: 0;
  margin-top: 5px;
  color: var(--brand-500);
}

/* ── CTA ────────────────────────────────────────────────── */
.es-price__cta {
  display: flex;
  margin-top: var(--gap-fluid-md);
}

.es-price__cta .es-btn { width: 100%; }