/*
 * ProSocial Agency - Term cards
 * 10-terms.css
 * Deferred tier. Service page intro.
 *
 * Replaces a wall of body copy with three definitions. Most buyers
 * cannot name the parts of these services yet, so the intro teaches
 * rather than sells, and the paid or earned status answers the money
 * question before the process section starts.
 *
 * The cards are frosted glass on the alternate ground, which is the
 * same material as the nav. They need a background with something in
 * it, so the section carries --color-bg-alt. Move the section to white
 * and the translucency stops reading.
 *
 * Cards stretch to a shared height and their footer is pinned by
 * margin-top auto, so the availability lines align no matter how long
 * the descriptions run.
 */

.terms {
  background: var(--color-bg-alt);
  padding-block: var(--section-pad-y);
}

.terms__head {
  max-width: 640px;
  margin-bottom: var(--space-16);
}

/* 02-typography sets max-width on p directly, and this element is a p,
   so the reset has to be on the element itself. Targeting a child p
   does nothing and leaves the lede capped at 50ch inside a 640px head. */
.terms__lede,
.terms__lede p {
  font-family: var(--font-body);
  font-size: 1.375rem;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  max-width: none;
}

/* Equal columns, and align-items stretch so every card matches the
   tallest. The card is a flex column, so the footer still sits at the
   bottom of each one. */
.terms__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.term {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-xl);

  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);

  /* Close soft shadow plus a light catch on the top edge, so the card
     sits on the page rather than being outlined on it. */
  box-shadow:
    0 1px 2px rgba(19, 30, 54, 0.03),
    0 10px 30px -18px rgba(19, 30, 54, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);

  transition:
    transform    460ms var(--ease-out),
    box-shadow   460ms var(--ease-out),
    background   460ms var(--ease-out),
    border-color 460ms var(--ease-out);
}

/* Elevation only. No rule, no color sweep. */
.term:hover,
.term:focus-within {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.82);
  border-color: #fff;
  box-shadow:
    0 2px 4px rgba(19, 30, 54, 0.03),
    0 26px 54px -24px rgba(19, 30, 54, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* -------- Status -------- */

.term__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-6);
}

.term__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-action);
  box-shadow: 0 0 0 3px var(--color-action-wash);
  display: block;
  flex-shrink: 0;
}

.term--earned .term__status i {
  background: var(--color-support);
  box-shadow: 0 0 0 3px rgba(201, 150, 62, 0.14);
}

.term__status span {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------- Body -------- */

.term__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  overflow-wrap: anywhere;
}

.term__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-body);
  max-width: none;
  overflow-wrap: anywhere;
}

/* Pinned to the bottom, so the availability lines align across cards
   of different description lengths. */
.term__foot {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  max-width: none;
}

.term__foot::before {
  content: '';
  flex: 0 0 18px;
  height: 1px;
  background: var(--color-border);
}

@media (max-width: 1024px) {
  .terms__grid { gap: var(--space-4); }
  .term { padding: var(--space-8) var(--space-6) var(--space-6); }
  .term__title { font-size: 1.325rem; }
}

@media (max-width: 880px) {
  .terms__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .terms__head { margin-bottom: var(--space-10); }
  .terms__lede { font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .term { transition: none; }
  .term:hover,
  .term:focus-within { transform: none; }
}