/* =============================================================
   FALMIS — CARDS
   Requires falmis-tokens.css

   One base, four uses. The banner is a separate component
   (falmis-banner.css) because it behaves differently.

   <article class="fm-card">
     <div class="fm-card__body">…</div>
   </article>
   ============================================================= */

.fm-card{
  --card-bg:var(--fm-surface-2);
  --card-pad:var(--fm-space-5);

  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-lg);
  overflow:hidden;
  transition:transform var(--fm-dur-base) var(--fm-ease-out),
             box-shadow var(--fm-dur-base) var(--fm-ease-out),
             border-color var(--fm-dur-base) var(--fm-ease-out);
}

.fm-card__body{
  padding:var(--card-pad);
  display:flex;
  flex-direction:column;
  flex:1;
}

.fm-card__title{
  margin:0 0 var(--fm-space-2);
  font-size:var(--fm-text-md);
  line-height:var(--fm-lh-md);
  font-weight:var(--fm-weight-bold);
  color:var(--fm-text-primary);
}
.fm-card__text{
  margin:0 0 var(--fm-space-4);
  font-size:var(--fm-text-sm);
  line-height:var(--fm-lh-sm);
  color:var(--fm-text-muted);
}
.fm-card__footer{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:var(--fm-space-3);
  align-items:center;
}

/* ---------- interactive ---------- */

.fm-card--link{ cursor:pointer; }
.fm-card--link:hover{
  transform:translateY(var(--fm-lift,-3px));
  box-shadow:var(--fm-shadow-md);
  border-color:var(--fm-border-accent);
}
.fm-card--link:focus-within{
  outline:2px solid var(--fm-focus-ring);
  outline-offset:3px;
}

/* whole-card click target without nesting links */
.fm-card__hit::after{ content:""; position:absolute; inset:0; }

/* ---------- glass variant ---------- */

.fm-card--glass{
  background:var(--fm-glass-2-bg);
  border-color:var(--fm-glass-2-border);
  -webkit-backdrop-filter:blur(var(--fm-glass-blur-md));
  backdrop-filter:blur(var(--fm-glass-blur-md));
}

/* ---------- selected ---------- */

.fm-card--selected{
  border-color:var(--fm-border-accent);
  background:linear-gradient(135deg,var(--fm-tint-violet),var(--fm-tint-fuchsia)),var(--card-bg);
  box-shadow:var(--fm-glow-violet);
}

/* ---------- disabled ---------- */

.fm-card--disabled{
  opacity:.55;
  pointer-events:none;
  filter:saturate(.5);
}

/* =============================================================
   SERVICE CARD — a horizontal strip. Image on the leading edge,
   title and one line beside it.

   Always horizontal. It never stacks, at any width. The whole
   point is that a list of services scans as a column of rows.

   Architecture is the banner's: the media is absolutely
   positioned and wider than it looks, so the mask has runway
   to finish before the text begins.

   <article class="fm-card fm-card--service fm-card--link">
     <div class="fm-card__media"><img src="…" alt=""></div>
     <div class="fm-card__body">
       <h4 class="fm-card__title">…</h4>
       <p class="fm-card__text">…</p>
     </div>
   </article>
   ============================================================= */

.fm-card--service{
  --svc-media-w:46%;      /* wider than it appears — fade runway */
  --svc-fade-start:26%;
  --svc-h:136px;

  position:relative;
  display:flex;
  flex-direction:row;     /* .fm-card is column — this MUST override it */
  justify-content:flex-end;
  align-items:stretch;
  direction:ltr;          /* holds the image on the leading edge */
  min-height:var(--svc-h);
  overflow:hidden;
}

.fm-card--service .fm-card__media{
  position:absolute;
  inset-block:0;
  left:0;
  width:var(--svc-media-w);
  aspect-ratio:auto;
  z-index:0;
  background:none;

  -webkit-mask-image:linear-gradient(to right,
    #000 var(--svc-fade-start),
    rgba(0,0,0,.90) 44%,
    rgba(0,0,0,.72) 56%,
    rgba(0,0,0,.48) 68%,
    rgba(0,0,0,.26) 79%,
    rgba(0,0,0,.10) 88%,
    transparent 100%);
  mask-image:linear-gradient(to right,
    #000 var(--svc-fade-start),
    rgba(0,0,0,.90) 44%,
    rgba(0,0,0,.72) 56%,
    rgba(0,0,0,.48) 68%,
    rgba(0,0,0,.26) 79%,
    rgba(0,0,0,.10) 88%,
    transparent 100%);
}
.fm-card--service .fm-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:38% center;
}
.fm-card--service .fm-card__media img.flip{ transform:scaleX(-1); }

/* colour bridge, inside the mask so it fades out with the image */
.fm-card--service .fm-card__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to right,
    transparent 24%,
    rgba(124,58,237,.16) 58%,
    rgba(109,40,217,.40) 100%);
  mix-blend-mode:multiply;
}

.fm-card--service .fm-card__body{
  position:relative;
  z-index:1;
  direction:rtl;
  text-align:right;
  width:62%;
  flex:none;
  justify-content:center;
  padding-block:var(--fm-space-4);
  padding-inline:var(--fm-space-5) var(--fm-space-4);
}

.fm-card--service .fm-card__title{
  margin:0 0 var(--fm-space-1);
  font-size:var(--fm-text-md);
  line-height:var(--fm-lh-md);
  font-weight:var(--fm-weight-bold);
}
.fm-card--service .fm-card__text{
  margin:0;
  font-size:var(--fm-text-xs);
  line-height:var(--fm-lh-xs);
  color:var(--fm-text-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;      /* one line of thought, never a paragraph */
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* an LTR host mirrors the whole strip */
[dir="ltr"] .fm-card--service{ direction:rtl; }
[dir="ltr"] .fm-card--service .fm-card__body{ direction:ltr; text-align:left; }

/* the image zoom on hover, borrowed from the media card */
.fm-card--service.fm-card--link:hover .fm-card__media img{ transform:scale(1.05); }
.fm-card--service.fm-card--link:hover .fm-card__media img.flip{ transform:scaleX(-1) scale(1.05); }
.fm-card--service .fm-card__media img{
  transition:transform var(--fm-dur-slow) var(--fm-ease-out);
}

/* still horizontal on a phone, only tighter */
@media (max-width:520px){
  .fm-card--service{ --svc-h:108px; --svc-media-w:52%; --svc-fade-start:20%; }
  .fm-card--service .fm-card__body{
    width:64%;
    padding-inline:var(--fm-space-4) var(--fm-space-3);
  }
  .fm-card--service .fm-card__title{ font-size:var(--fm-text-sm); }
  .fm-card--service .fm-card__text{ -webkit-line-clamp:2; }
}

/* a list of service strips stacks in one column by default */
.fm-cards--list{
  display:flex;
  flex-direction:column;
  gap:var(--fm-space-3);
}

/* =============================================================
   MEDIA CARD — image on top, for blog and result
   ============================================================= */

.fm-card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--fm-surface-3);
}
.fm-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--fm-dur-slow) var(--fm-ease-out);
}
.fm-card--link:hover .fm-card__media img{ transform:scale(1.04); }

/* the image dissolves into the card body — same idea as the banner,
   masked so it fades to the card's own surface */
.fm-card__media--fade::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 48%,
    color-mix(in srgb,var(--card-bg) 40%,transparent) 72%,
    color-mix(in srgb,var(--card-bg) 82%,transparent) 90%,
    var(--card-bg) 100%);
}

.fm-card__meta{
  display:flex; flex-wrap:wrap; gap:var(--fm-space-4);
  margin-bottom:var(--fm-space-3);
  font-size:var(--fm-text-2xs);
  color:var(--fm-text-muted);
  font-variant-numeric:tabular-nums;
}

/* =============================================================
   RESULT CARD — what a reading looks like
   ============================================================= */

.fm-card--result{
  --card-pad:var(--fm-space-6);
  border-color:var(--fm-border-accent);
  background:linear-gradient(135deg,var(--fm-tint-violet),transparent 60%),var(--card-bg);
}
.fm-card--result .fm-card__title{
  font-size:var(--fm-text-xl);
  line-height:var(--fm-lh-xl);
  font-weight:var(--fm-weight-display);
}
.fm-card--result .fm-card__text{
  font-size:var(--fm-text-base);
  line-height:var(--fm-lh-base);
  color:var(--fm-text-body);
}
/* the reading arrives on its own clock */
.fm-card--result.is-revealing{
  animation:fm-card-reveal var(--fm-dur-oracle,950ms) var(--fm-ease-out) both;
}
@keyframes fm-card-reveal{
  from{ opacity:0; transform:translateY(18px) scale(.985); }
  to  { opacity:1; transform:none; }
}

/* =============================================================
   PRICING CARD
   ============================================================= */

.fm-card--price{ --card-pad:var(--fm-space-6); text-align:center; }
.fm-card--price .fm-card__amount{
  font-size:var(--fm-text-3xl);
  line-height:var(--fm-lh-3xl);
  font-weight:var(--fm-weight-display);
  color:var(--fm-text-primary);
  font-variant-numeric:tabular-nums;
  margin-block:var(--fm-space-2);
}
.fm-card--price .fm-card__unit{
  font-size:var(--fm-text-sm);
  font-weight:var(--fm-weight-regular);
  color:var(--fm-text-muted);
}
.fm-card--price ul{
  list-style:none;
  margin:var(--fm-space-4) 0;
  padding:0;
  text-align:start;
  font-size:var(--fm-text-sm);
  color:var(--fm-text-body);
}
.fm-card--price li{
  display:flex; align-items:flex-start; gap:var(--fm-space-2);
  padding-block:var(--fm-space-2);
  border-bottom:1px solid var(--fm-border-subtle);
}
.fm-card--price li:last-child{ border-bottom:none; }
.fm-card--price li::before{ content:"✓"; color:var(--fm-success); flex:none; }
.fm-card--price li.off{ color:var(--fm-text-disabled); }
.fm-card--price li.off::before{ content:"–"; color:var(--fm-text-disabled); }

/* the recommended plan */
.fm-card--featured{
  border-color:var(--fm-border-accent);
  box-shadow:var(--fm-glow-aurora);
}
.fm-card__ribbon{
  align-self:center;
  margin-bottom:var(--fm-space-3);
  padding:4px var(--fm-space-4);
  border-radius:var(--fm-radius-full);
  background:var(--fm-gradient-button);
  color:var(--fm-text-on-brand);
  font-size:var(--fm-text-2xs);
  font-weight:var(--fm-weight-bold);
  box-shadow:inset 0 1px 0 var(--fm-highlight-top);
}

/* =============================================================
   GRID
   ============================================================= */

.fm-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--cards-min,250px),1fr));
  gap:var(--fm-space-4);
}
.fm-cards--wide{ --cards-min:320px; }

/* =============================================================
   RULES
   · One glow per screen. A featured pricing card and a hero
     banner on the same view is one too many.
   · Card radius is lg. xl belongs to banners and modals.
   · Hover lift is 3px, matching the button. Two lift distances
     in one system reads as a mistake.
   · Do not nest a card inside a card. Use a bordered row.
   · The reveal animation belongs to the result card and to
     nothing else.
   ============================================================= */