/* ==========================================================================
   COMPONENT: Appeal card
   --------------------------------------------------------------------------
   The highest-value pattern found in Phase 1B: conversion happens ON the card.
   Image · category tag · title · description · impact metric · inline INR
   chips · donate. The detail page is optional, not required.

   Hover is image parallax inside a fixed frame + a girih border-draw.
   Explicitly NOT lift-and-shadow.
   ========================================================================== */

/* The filter wrapper is the grid item, not the card. `[data-filter-item]` is a
   plain div the filter script toggles, and it was stretching to the row height
   while the .c-appeal inside it kept its own natural height — so the card's
   `margin-block-start: auto` had no slack to work with and the DONATE buttons
   in a row landed up to 34px apart. Making the wrapper a stretching flex
   container hands the row height down to the card, which is what the
   bottom-alignment below has always assumed. */
[data-filter-item] {
  display: flex;
  flex-direction: column;
}

[data-filter-item] > .c-appeal { flex: 1 1 auto; }

.c-appeal {
  position: relative;
  /* Flex column, not grid: the give-block needs margin-block-start:auto to sit
     flush at the bottom, so every card in a row lands its DONATE button on the
     same line regardless of how long its description is. */
  display: flex;
  flex-direction: column;
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   MEDIA — parallax inside a fixed frame, so nothing in the layout moves
   -------------------------------------------------------------------------- */

.c-appeal__media {
  position: relative;
  overflow: hidden;
  /* 4:3 rather than 3:2 — at card width this is the difference between the
     photograph being a header strip and being the thing you actually look at. */
  aspect-ratio: 4 / 3;
  background-color: var(--surface-sunken);
  flex: none;
}

.c-appeal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Rests at 1. The card images are 1200×900 and the frame above is 4:3, so
     they fit exactly — a resting scale(1.06) was throwing away 6% of every
     card photograph for no reason, cropping the edges of faces the images were
     composed around. The zoom belongs on hover, where it is a response to the
     pointer rather than a permanent tax on the picture. */
  transform: scale(1);
  transition: transform var(--d-slow) var(--e-out);
}

@media (hover: hover) {
  .c-appeal:hover .c-appeal__media img,
  .c-appeal:focus-within .c-appeal__media img {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-appeal__media img { transition: none; }
  .c-appeal:hover .c-appeal__media img,
  .c-appeal:focus-within .c-appeal__media img { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   BORDER DRAW — traces the geometry motif on hover.
   stroke-dashoffset only; no layout, no shadow.
   -------------------------------------------------------------------------- */

.c-appeal__trace {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--c-verdigris);

  /* SVG is a REPLACED element: `inset: 0` alone does not stretch it, so it
     fell back to its intrinsic size and drew a box roughly two-thirds down the
     card. Explicit 100% is what makes it fill. */
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.c-appeal__trace rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  rx: 16;
  /* preserveAspectRatio="none" stretches the viewBox non-uniformly, which would
     otherwise squash the stroke thin on one axis and fat on the other. */
  vector-effect: non-scaling-stroke;
  /* 1792 = the rect perimeter in viewBox user units, (398 + 498) x 2. It is
     constant regardless of rendered card size, because preserveAspectRatio is
     "none". Measuring the card in CSS pixels — which is what this used to do —
     was the wrong unit entirely. */
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  transition: stroke-dashoffset var(--d-slow) var(--e-out);
}

.c-appeal:hover .c-appeal__trace rect,
.c-appeal:focus-within .c-appeal__trace rect { stroke-dashoffset: 0; }

/* Corner motif, revealed with the trace. */
.c-appeal__corner {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 56px;
  height: 56px;
  z-index: 2;
  color: var(--c-verdigris);
  opacity: 0;
  transform: translate(6px, -6px);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
  pointer-events: none;
}

.c-appeal:hover .c-appeal__corner,
.c-appeal:focus-within .c-appeal__corner { opacity: 0.5; transform: translate(0, 0); }

/* --------------------------------------------------------------------------
   TAGS
   -------------------------------------------------------------------------- */

/* .c-appeal__tags removed — cards no longer overlay a category badge on the
   photograph. The category is still carried by the filter on /appeals/ and by
   the tag on each appeal's own page, so no information is lost. .c-tag itself
   stays: it is used for district lists and the detail-page header. */

.c-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  padding: 0.25rem var(--sp-2);
  border-radius: var(--r-sm);
  background-color: var(--c-paper);
  color: var(--c-ink);
  white-space: nowrap;
}

.c-tag--urgent   { background-color: var(--c-danger);      color: var(--c-white); }
.c-tag--zakat    { background-color: var(--c-verdigris);   color: var(--c-white); }
.c-tag--sadaqah  { background-color: var(--c-indigo);      color: var(--c-white); }
.c-tag--seasonal { background-color: var(--c-plaster);     color: var(--c-ink); }

/* --------------------------------------------------------------------------
   BODY
   -------------------------------------------------------------------------- */

.c-appeal__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;      /* fill the card so the give-block can bottom-align */
  min-height: 0;
}

.c-appeal__title {
  font-family: var(--ff-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 1.22;
  letter-spacing: var(--tr-tight);
}

/* Stretched link: the whole card is clickable, but only the title is a link,
   so screen readers announce one target rather than a card of duplicates.
   The chips and donate button sit above it via z-index. */
.c-appeal__title a { text-decoration: none; }

.c-appeal__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Clamped to three lines. Descriptions vary from one line to four; without a
   clamp the cards in a row end up wildly different heights and the whole grid
   looks accidental. */
.c-appeal__desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* The impact metric — the single most persuasive element on the card. */
/* Block, NOT flex. As a flex container the amount and the sentence became two
   separate flex items sitting side by side, squeezing the text into half the
   width and wrapping it into a narrow column. It is one sentence — it should
   flow as one. */
.c-appeal__impact {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-verdigris-05);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-verdigris-ink);
}

.c-appeal__impact strong {
  font-family: var(--ff-utility);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-inline-end: 0.3em;
}

/* Inline conversion block — sits above the stretched link. */
.c-appeal__give {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
}

/* auto-fit rather than a fixed 3 columns: ₹21,000 does not fit a third of a
   card, and a clipped amount is worse than a wrapped one. */
.c-appeal__chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
  gap: var(--sp-2);
}

.c-appeal__chips .c-chip {
  min-height: 40px;
  padding-inline: var(--sp-1);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   PROGRESS — only rendered when a target genuinely exists.
   -------------------------------------------------------------------------- */

.c-appeal__progress {
  display: grid;
  gap: var(--sp-2);
}

.c-progress {
  height: 6px;
  background-color: var(--surface-sunken);
  border-radius: var(--r-full);
  overflow: hidden;
}

.c-progress__fill {
  height: 100%;
  background-color: var(--c-verdigris);
  border-radius: var(--r-full);
  transform-origin: left center;
  transform: scaleX(var(--pct, 0));
  transition: transform var(--d-reveal) var(--e-out);
}

.c-appeal__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   VARIANTS
   -------------------------------------------------------------------------- */

/* Compact — used in "related appeals" and the mega-menu. */
.c-appeal--compact .c-appeal__body { padding: var(--sp-4); gap: var(--sp-2); }
.c-appeal--compact .c-appeal__title { font-size: var(--fs-base); }
.c-appeal--compact .c-appeal__give,
.c-appeal--compact .c-appeal__impact { display: none; }

/* Feature — first card in the carousel, spans two columns on wide screens. */
@media (min-width: 900px) {
  .c-appeal--feature { grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; }
  .c-appeal--feature .c-appeal__media { aspect-ratio: auto; height: 100%; }
  .c-appeal--feature .c-appeal__body { padding: var(--sp-6); }
  .c-appeal--feature .c-appeal__title { font-size: var(--fs-2xl); font-family: var(--ff-display); }
}

.is-inverted .c-appeal {
  background-color: var(--c-indigo);
  border-color: rgb(255 255 255 / 0.14);
}

.is-inverted .c-appeal__impact {
  background-color: rgb(127 227 214 / 0.1);
  color: var(--c-verdigris-lt);
}

/* ==========================================================================
   GIVING LADDER
   --------------------------------------------------------------------------
   Carried from the UK site's "How You Can Help": each amount states the
   outcome it buys, ascending. It converts because the donor chooses an
   outcome, not a number.

   Each row is a real link, so the whole ladder works with JS disabled.
   ========================================================================== */

.c-ladder {
  display: grid;
  border-block-start: 1px solid var(--c-line);
}

.c-ladder__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--c-line);
  transition: background-color var(--d-fast) var(--e-out);
}

@media (min-width: 700px) {
  .c-ladder__row { grid-template-columns: 7rem 1fr auto; }
}

.c-ladder__row:hover { background-color: var(--surface-raised); }

.c-ladder__amount {
  font-family: var(--ff-display);
  /* inline-flex with a floor, because below 700px .c-ladder__cta is hidden and
     this amount is the row's only link — a 36px-tall tap target for the whole
     giving ladder. The row's own padding does not help; the anchor is what the
     thumb has to hit. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}

.c-ladder__what {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--c-text-muted);
  grid-column: 2;
}

/* On narrow screens the per-row button is redundant — the amount itself is
   already a link to the same place, and two CTAs per row is noise. */
.c-ladder__cta { display: none; }

@media (min-width: 700px) {
  .c-ladder__cta {
    display: inline-flex;
    /* One width for every button in the column. Sized to the widest label the
       ladder carries ("Give ₹21,000"), so the left edges line up instead of
       stepping in and out as the amounts get longer — six buttons ragged down
       the right of the page was the untidiest thing in this section. */
    min-width: 9.5rem;
  }

  .c-ladder__what { grid-column: auto; }
}

/* The row is a link target end to end, so it should acknowledge the pointer as
   one object rather than only under the button. */
@media (hover: hover) {
  .c-ladder__row {
    /* Pull the tint out past the text column so it reads as a full-width row
       rather than a box drawn around the words. */
    box-shadow: 0 0 0 0 transparent;
    transition:
      background-color var(--d-fast) var(--e-out),
      box-shadow var(--d-fast) var(--e-out);
  }

  .c-ladder__row:hover {
    background-color: var(--surface-raised);
    box-shadow: inset 3px 0 0 0 var(--c-verdigris);
  }
}

.is-inverted .c-ladder,
.is-inverted .c-ladder__row { border-color: rgb(255 255 255 / 0.14); }
.is-inverted .c-ladder__amount { color: var(--c-text-inv); }