/* ── CARD GRID (generic) ─────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
/* .card-label: standalone eyebrow/tag, still used on its own
   (e.g. homepage package cards) independent of the .card system. */
.card-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.4rem;
}

/* ── CARD (unified) ──────────────────────────────────────────────
   Replaces .how-card / .fg-card / .offer-card / .post-card /
   .cert-card / .feature-card / .content-card. See NEXT-STEPS.md. */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 67, 124, 0.14);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  transition: all var(--transition);
  position: relative;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sky-10);
}
/* When .reveal sits directly on a .card (rather than on its grid
   wrapper), .reveal.visible's resting transform ties .card:hover's on
   specificity and, being later in the file, wins — silently cancelling
   the hover lift. Force it back. .reveal's own transition (opacity/
   transform at 0.7s, for the scroll-in entrance) also wins over .card's
   0.3s for the same reason, making the hover feel sluggish — restore
   the fast 0.3s for anything but the one-time opacity fade-in. */
.card.reveal {
  transition:
    opacity 0.7s ease,
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.card.reveal.visible:hover {
  transform: translateY(-4px);
}
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--white);
}
.card--dark h3,
.card--dark h4 {
  color: var(--white);
}
.card--dark p {
  color: rgba(255, 255, 255, 0.7);
}

.card--accent {
  border-color: var(--sky);
  box-shadow: 0 0 0 2px var(--sky), var(--shadow-sm);
}
.card--accent:hover {
  box-shadow: 0 0 0 2px var(--sky), var(--shadow-lg);
}

.card--flush {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.card--compact {
  padding: 1.25rem;
  text-align: center;
  border-radius: var(--radius);
}
.card--compact .card__icon {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}
.card--compact .card__num {
  font-size: 1.75rem;
}
.card--compact .card__num {
  font-size: 1.5rem;
}
.card--compact h4 {
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  overflow-wrap: break-word;
}
.card--compact p {
  font-size: 0.72rem;
  margin: 0;
  overflow-wrap: break-word;
}

.card__img {
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.9);
  transition: filter 0.45s ease, transform 0.5s ease;
}
.card:hover .card__img img {
  filter: none;
  transform: scale(1.04);
}
/* No gap by default — most cards space their __body children via each
   sub-part's own margin (often inline, e.g. style="margin-top:1rem" on a
   CTA row), matching how the original systems this replaced worked. Only
   post-card was genuinely gap-based; that's opted back in per-page below
   (.post-grid .card__body) rather than made the universal default, since
   gap would otherwise double up with existing inline margins elsewhere. */
.card__body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.card__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sky);
  margin-bottom: 0.75rem;
  line-height: 1;
}

.card__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 0.4rem;
}
.card__subtitle {
  font-size: 0.8rem;
  color: var(--sky);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.card__badge {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sky);
  background: rgba(10, 179, 235, 0.1);
  border: 1px solid rgba(10, 179, 235, 0.25);
  border-radius: 50px;
  padding: 0.18rem 0.7rem;
  margin-bottom: 0.55rem;
}
/* "Featured" badge sitting on top card border.
   Usage: add <div class="card__flag">⭐ Featured</div> as the
   FIRST child of any .card. The parent card already has position:relative. */
.card__flag {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 1.25rem;
  transform: translateY(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: var(--sky);
  border-radius: 50px;
  padding: 0.2rem 0.7rem;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
.card__includes {
  margin: 0 0 1.5rem;
}
.card__includes li {
  font-size: 0.82rem;
  color: var(--mid);
  padding: 0.27rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.4;
}
.card__includes li::before {
  content: '✓';
  color: var(--sky);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.card__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.75rem;
  color: var(--mid);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 67, 124, 0.06);
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.card h5 {
  font-size: 0.82rem;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.card p {
  font-size: 0.87rem;
  color: var(--mid);
  line-height: 1.65;
}
.card .btn {
  margin-top: auto;
  /* .card__body is a flex column; without this, its default
     align-items:stretch forces the button to fill the full width
     even though .btn itself is inline-flex (shrink-to-fit). Package
     cards that want a full-width button set width:100% explicitly
     (.package-grid .btn / .pkg-grid .btn), which overrides this. */
  align-self: flex-start;
}

/* Header block for cards split into a distinct top section (e.g. package
   cards): badge + name + tagline, divided from the body by a hairline.
   --accent cards get a gradient treatment instead of the divider, for a
   "featured" look (originally .pkg--featured .pkg__head). */
.card__head {
  padding: 2rem 2rem 1.25rem;
  border-bottom: 1px solid rgba(0, 67, 124, 0.06);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card__head + .card__body {
  padding-top: 1.5rem;
  gap: 1.1rem;
}
.card--accent .card__head {
  background: linear-gradient(135deg, #001e3c, #00437c);
  border-bottom: none;
}
.card--accent .card__head .card__badge {
  color: rgba(255, 255, 255, 0.55);
}
.card--accent .card__name {
  color: var(--white);
}
.card--accent .card__head p {
  color: rgba(255, 255, 255, 0.7);
}

.card__name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

/* Price display (package cards). */
.card__price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.card__price small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mid);
}
.card__price-sub {
  font-size: 0.75rem;
  color: var(--mid);
  margin-top: 0.2rem;
}

/* Inline fact row (e.g. "⏱ 4 sessions  📅 4–6 weeks"). */
.card__facts {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.card__facts span {
  font-size: 0.78rem;
  color: var(--mid);
}
.card__facts strong {
  color: var(--navy);
}

/* Small process-flow strip (e.g. "Intake → 3 sessions → Closing"). */
.card__flow {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.25rem 0;
}
.card__flow span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(0, 67, 124, 0.06);
  border-radius: 5px;
  padding: 0.25rem 0.6rem;
}
.card__flow i {
  color: var(--sky);
  font-style: normal;
  font-size: 0.8rem;
}