/* ============================================================================
   Melli Life — homepage CTA cards, redesigned
   Brief: Greg Reid, 2026-09-11. Scope is the TWO side-by-side cards only.
   Nothing else on the homepage, in the nav, or in the section order changes.

   REPLACES the two `.mavn-box-card` anchors currently in that row. It keeps the
   existing system's bones on purpose — the same `.mavn-box-row` flex wrapper,
   the same 678px card width, the same 24px radius, the same Inter family, the
   same arrow-nudge motion — so the pair still reads as part of this homepage
   and not as a bolt-on.

   WHAT ACTUALLY CHANGED, and why:
   · The cards were 200px tall and carried only a title and a one-line "step".
     The brief needs headline + support copy + a real button + microcopy, so the
     card grew to 300px. Greg then asked for the midpoint between the original
     200px and that 300px, so the card now stands at 250px (msg 43625,
     2026-09-12) and the vertical rhythm is tightened to fit it without clipping.
   · The base was a dark green gradient. The brief asks for a muted, elevated,
     premium palette with the DARK GREEN ARRIVING ON HOVER — so the base is now
     warm neutral with dark green type, and the hover deepens the button and the
     accent rail. That is the same hover direction, inverted so it has somewhere
     to travel to.
   · Each card gets an image panel on the right instead of a full-bleed
     background, because the two paths have to look DIFFERENT at a glance:
     card 1 leads with the report interface, card 2 leads with the person.

   COLOUR comes from the Melli brand board (melli-brand-tokens.md):
   Hunter Green #1F4D3F · Soft White #F7F7F4 · Charcoal #2E2E2E ·
   Muted Gold #B79A63 · Soft Sage #A7B7AD.
   ========================================================================== */

.melli-cta-row,
.mavn-box-row:has(> .melli-cta) {
  width: 100%;
  display: flex;
  align-items: stretch;      /* the site's own row centres; these two must be equal height */
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.melli-cta {
  --ink: #1f4d3f;
  --ink-deep: #143528;
  --gold: #b79a63;
  --sage: #a7b7ad;
  --paper: #fbfaf7;
  --charcoal: #2e2e2e;
  --stone: #5f6b64;

  position: relative;
  display: grid;
  grid-template-columns: 1fr 236px;
  align-items: stretch;
  width: 678px;
  max-width: 100%;
  min-height: 250px;
  background: var(--paper);
  border: 1px solid #e4e6e1;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
  /* the whole card is the target, so the lift belongs to the card, not the button */
  transition: transform .32s cubic-bezier(.22,1,.36,1),
              box-shadow .32s cubic-bezier(.22,1,.36,1),
              border-color .32s ease;
  box-shadow: 0 1px 2px rgba(20,53,40,.04);
}

.melli-cta:hover,
.melli-cta:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(20,53,40,.38);
  border-color: #cfd6cf;
  text-decoration: none;
}

.melli-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The accent rail is what tells the two paths apart before a word is read:
   gold = understand first, hunter green = act. Both deepen on hover. */
.melli-cta::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 4;
  background: var(--rail, var(--gold));
  transition: background .32s ease;
}
.melli-cta:hover::before { background: var(--ink-deep); }

.melli-cta--discover { --rail: var(--gold); }
.melli-cta--intake   { --rail: var(--ink); }

/* ---------- copy side ---------- */

.melli-cta__body {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px 28px;
  min-width: 0;
}

.melli-cta__eyebrow {
  font-family: "Inter Tight", Inter, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--gold);
  margin: 0 0 8px;
}
.melli-cta--intake .melli-cta__eyebrow { color: var(--ink); }

.melli-cta__title {
  font-family: "Inter Tight", Inter, Arial, sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--ink-deep);
  margin: 0 0 8px;
}

.melli-cta__copy {
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--stone);
  margin: 0;
  max-width: 42ch;   /* two lines on BOTH cards, so neither one drives the pair taller */
}

/* pushes the button + microcopy to the bottom so both cards line up even if
   one has a longer support line */
.melli-cta__foot { margin-top: auto; padding-top: 14px; }

.melli-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  font-family: "Inter Tight", Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  padding: 12px 19px;
  border-radius: 12px;
  transition: background .28s ease, box-shadow .28s ease;
}
.melli-cta:hover .melli-cta__btn {
  background: var(--ink-deep);
  box-shadow: 0 10px 22px -12px rgba(20,53,40,.55);
}

/* the forward cue, nudged on hover — same motion the old card used */
.melli-cta__btn svg { width: 17px; height: 17px; flex: none; }
.melli-cta:hover .melli-cta__btn svg {
  animation: melli-nudge .58s cubic-bezier(.22,1,.36,1);
}
.melli-cta__arrow-line { transform-origin: 18.653px 11px; }
.melli-cta:hover .melli-cta__arrow-line {
  animation: melli-tail .58s cubic-bezier(.22,1,.36,1);
}

.melli-cta__micro {
  font-family: Inter, Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #8a938c;
  margin: 9px 0 0;
  letter-spacing: .005em;
}

/* ---------- image side ---------- */

.melli-cta__media {
  position: relative;
  overflow: hidden;
  background: #f1f0ec;
}

.melli-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* card 1 leads with the report UI, card 2 with the person — so they sit
     differently in their frames */
  object-position: var(--focal, center);
  display: block;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.melli-cta:hover .melli-cta__media img { transform: scale(1.035); }

.melli-cta--discover .melli-cta__media { --focal: 50% 12%; }   /* the score ring, not the middle of the page */
.melli-cta--intake   .melli-cta__media { --focal: 56% 34%; }   /* her face and the laptop, not the mug */

/* softens the hard edge between copy and photo without a visible gradient band */
.melli-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--paper) 0%, rgba(251,250,247,0) 34%);
  pointer-events: none;
}

@keyframes melli-nudge {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(4px); }
}
@keyframes melli-tail {
  0%,100% { transform: scaleX(1); }
  50%     { transform: scaleX(1.28); }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .melli-cta { width: 100%; }
}

@media (max-width: 560px) {
  /* photo on top, copy beneath — the button must never be pushed off the card */
  .melli-cta {
    grid-template-columns: 1fr;
    grid-template-rows: 168px auto;
    min-height: 0;
  }
  .melli-cta__media { order: -1; }
  .melli-cta__media::after {
    background: linear-gradient(180deg, rgba(251,250,247,0) 58%, var(--paper) 100%);
  }
  .melli-cta__body { padding: 22px 20px 24px 22px; }
  .melli-cta__title { font-size: 22px; }
  .melli-cta__copy { font-size: 14px; max-width: none; }
  .melli-cta__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .melli-cta,
  .melli-cta__media img,
  .melli-cta__btn { transition: none; }
  .melli-cta:hover { transform: none; }
  .melli-cta:hover .melli-cta__media img { transform: none; }
  .melli-cta:hover .melli-cta__btn svg,
  .melli-cta:hover .melli-cta__arrow-line { animation: none; }
}