/* Pricing — tab-driven tier cards.

   Colours read theme.global_colors so the section tracks the admin's brand
   settings, matching how theme-overrides.css themes the rest of the site.
   This file is HubL-preprocessed; do NOT put HubL tag characters inside CSS
   comments — they are parsed before the CSS parser sees them.

   Colour split, deliberate:
     - Buttons use the theme's .button--primary / .button--tertiary variants,
       so they track theme settings like every other button on the site.
     - Card border, check icons and secondary text are pinned to the design's
       own values. theme.global_colors.fg_secondary is #181A22, noticeably
       darker than the #4a4d56 the design specifies, so tracking the token
       here would visibly diverge from the Figma.

   Deliberately does NOT use --fg_primary / --bg_canvas / --primary and
   friends: those custom properties are referenced across the theme but are
   never declared anywhere, so they always fall through to their fallback. */

{% set fg_primary = theme.global_colors.fg_primary.color %}
{% set brand_primary = theme.global_colors.primary.color %}

.pricing__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.pricing__tabs-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.pricing__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Tabs ride the theme's .button--primary / .button--tertiary variants, the
   same pair the blog topic filter uses, so colour and hover states come from
   theme settings. Only the focus ring is added here. */
.pricing__tab:focus-visible {
  outline: 2px solid ;
  outline-offset: 2px;
}

.pricing__tabs-caption {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #4a4d56;
  text-align: center;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  width: 100%;
}

.pricing__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;

  padding: 32px;

  position: relative;

  background-color: #fbfcff;
  border: 1px solid #d1d4de;
  border-radius: 16px;

  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

/* Card hover — a small lift, brand border and soft shadow, mirroring the
   treatment on the DT Group pricing cards. The cards themselves are not
   clickable; the CTA inside is the target, so the lift reads as affordance
   rather than implying the whole card is a link.

   0.2s matches the transition timing theme-overrides.css already uses on
   buttons; ease-out suits a lift better than the buttons' ease-in-out. */
.pricing__card:hover {
  transform: translateY(-4px);
  border-color: #de6e27;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

/* Featured card — the tier carrying a badge.

   The resting state deliberately uses a property the hover does NOT own: a
   flat spread ring. Hover expresses itself through lift + a soft drop shadow
   + border tint, so a ring at rest reads as "featured" without spending any
   of the hover's vocabulary. The featured card still lifts and deepens on
   hover exactly like its neighbours.

   box-shadow is a single property, so the hover rule below must restate the
   ring alongside the drop shadow or it would replace it. */
.pricing__card--featured {
  border-color: #de6e27;
  box-shadow: 0 0 0 4px rgba(222, 110, 39, 0.1);
}

.pricing__card--featured:hover {
  box-shadow: 0 0 0 4px rgba(222, 110, 39, 0.1), 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.pricing__card-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);

  margin: 0;
  padding: 6px 12px;

  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  white-space: nowrap;

  color: ;
  background-color: #fafafa;
  border: 1px solid #d1d4de;
  border-radius: 9999px;
}

@media (prefers-reduced-motion: reduce) {
  .pricing__card {
    transition: border-color 0.2s ease-out;
  }

  .pricing__card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Keep the featured ring — it is identity, not motion. */
  .pricing__card--featured:hover {
    transform: none;
    box-shadow: 0 0 0 4px rgba(222, 110, 39, 0.1);
  }
}

.pricing__card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.pricing__card-name {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: ;
}

.pricing__card-price {
  margin: 0;
  color: ;
}

.pricing__card-price-amount {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.36px;
}

.pricing__card-price-suffix {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.pricing__card-description {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #4a4d56;
}

.pricing__card-actions {
  display: flex;
  width: 100%;
}

/* The card CTA rides .button--primary for brand colour and hover states;
   these rules only fix the shape the design calls for. */
.pricing__card-cta {
  padding: 12px 20px;
  font-size: 18px;
  line-height: 28px;
  border-radius: 12px;
  white-space: nowrap;
}

.pricing__card-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #d1d4de;
}

.pricing__card-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.pricing__card-features-heading {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: ;
}

.pricing__card-features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing__card-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pricing__card-feature-icon {
  display: flex;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.pricing__card-feature-check {
  width: 24px;
  height: 24px;
  color: #de6e27;
}

.pricing__card-feature-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  color: #4a4d56;
}

/* ── Mobile ───────────────────────────────────────────────────────────────
   Shared rules sit above this block so the media query wins at its viewport
   on the source-order tiebreak. */

@media (max-width: 991px) {
  .pricing__body {
    gap: 32px;
  }

  .pricing__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Stacked, the badge overhangs 16px into the 24px gap, leaving it crowding
     the card above. Nudge the featured card down so the clearance holds. */
  .pricing__card--featured {
    margin-top: 8px;
  }

  .pricing__tab {
    padding: 8px 16px;
    font-size: 16px;
    line-height: 24px;
  }

  .pricing__card-cta {
    font-size: 16px;
    line-height: 24px;
  }
}