/*
 * card-styles.css
 * Reusable information-card / box system for moval.org.
 *
 * A card is a self-contained box with an optional IMAGE, a HEADER, and
 * INFORMATION (text, links, lists). Colors are chosen with modifier classes.
 *
 * Sits on top of the site design tokens defined in main-style.css
 * (--primary, --accent, --radius, etc.). Every custom property below has a
 * hard-coded fallback, so this sheet also works on its own.
 *
 * ---------------------------------------------------------------------------
 * QUICK START
 * ---------------------------------------------------------------------------
 * <article class="card card--blue">
 *   <img class="card__img" src="img/example.jpg" alt="">
 *   <div class="card__body">
 *     <h3 class="card__title">Card header</h3>
 *     <p class="card__text">Supporting information goes here.</p>
 *     <a class="card__link" href="#">Learn more</a>
 *   </div>
 * </article>
 *
 * Lay cards out with the grid utilities in grid-styles.css, e.g.
 *   <ul class="grid grid--3"> <li class="card ...">...</li> ... </ul>
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --card-radius:        var(--radius, 10px);
  --card-gap:           1.6rem;
  --card-img-h:         190px;
  --card-pad:           1.5rem 1.6rem 1.7rem;
  --card-shadow:        0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.15);
  --card-accent:        var(--primary, #1a3a6b);   /* bottom bar + title on light cards */

  /* Palette used by the color modifiers */
  --card-blue:   var(--primary, #1a3a6b);
  --card-navy:   #0e1e46;
  --card-green:  #2e7d32;
  --card-teal:   #176b6b;
  --card-maroon: #7a1f2b;
  --card-red:    #c4262e;
  --card-gold:   var(--accent, #f5a800);
  --card-gray:   #f4f6f9;
}

/* ==========================================================================
   2. BASE CARD
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;                 /* equal-height when used inside a grid */
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border-bottom: 4px solid var(--card-accent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

/* ---------- Image ---------- */
.card__img,
.card__media img {
  width: 100%;
  height: var(--card-img-h);
  object-fit: cover;
  display: block;
}

/* ---------- Body ---------- */
.card__body {
  padding: var(--card-pad);
  flex: 1 1 auto;               /* pushes footer/links to the bottom */
}

/* ---------- Header ---------- */
.card__title {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--card-accent);
}

.card__eyebrow {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-accent);
}

/* ---------- Information ---------- */
.card__text {
  margin: 0 0 0.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #23282f;
}
.card__text:last-child { margin-bottom: 0; }

.card__list {
  margin: 0.4rem 0 0.8rem;
  padding-left: 1.7rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: #23282f;
}

/* ---------- Links ---------- */
.card__link,
.card__body a {
  color: var(--card-accent);
  font-weight: 700;
  text-decoration: none;
}
.card__link:hover,
.card__body a:hover { text-decoration: underline; }

/* ==========================================================================
   3. COLOR MODIFIERS  (choose one)
   --------------------------------------------------------------------------
   Light fills keep dark text; dark fills flip text to white automatically.
   ========================================================================== */

/* ---- Light backgrounds (dark text, colored accent bar) ---- */
.card--white { background: #fff; }
.card--gray  { background: var(--card-gray); }
.card--gold  { background: var(--card-gold); border-bottom-color: rgba(0, 0, 0, 0.18); }

.card--gold .card__title,
.card--gold .card__eyebrow { color: #3a2a00; }
.card--gold .card__text,
.card--gold .card__list    { color: #3a2a00; }
.card--gold .card__link,
.card--gold .card__body a  { color: #0e1e46; }

/* ---- Dark / saturated backgrounds (white text) ---- */
.card--blue   { background: var(--card-blue); }
.card--navy   { background: var(--card-navy); }
.card--green  { background: var(--card-green); }
.card--teal   { background: var(--card-teal); }
.card--maroon { background: var(--card-maroon); }
.card--red    { background: var(--card-red); }

.card--blue,
.card--navy,
.card--green,
.card--teal,
.card--maroon,
.card--red { border-bottom-color: rgba(255, 255, 255, 0.4); }

.card--blue   .card__title, .card--blue   .card__eyebrow,
.card--navy   .card__title, .card--navy   .card__eyebrow,
.card--green  .card__title, .card--green  .card__eyebrow,
.card--teal   .card__title, .card--teal   .card__eyebrow,
.card--maroon .card__title, .card--maroon .card__eyebrow,
.card--red    .card__title, .card--red    .card__eyebrow { color: #fff; }

.card--blue   .card__text, .card--blue   .card__list,
.card--navy   .card__text, .card--navy   .card__list,
.card--green  .card__text, .card--green  .card__list,
.card--teal   .card__text, .card--teal   .card__list,
.card--maroon .card__text, .card--maroon .card__list,
.card--red    .card__text, .card--red    .card__list { color: rgba(255, 255, 255, 0.92); }

.card--blue   .card__link, .card--blue   .card__body a,
.card--navy   .card__link, .card--navy   .card__body a,
.card--green  .card__link, .card--green  .card__body a,
.card--teal   .card__link, .card--teal   .card__body a,
.card--maroon .card__link, .card--maroon .card__body a,
.card--red    .card__link, .card--red    .card__body a { color: var(--card-gold); }

/* ==========================================================================
   4. STYLE / LAYOUT MODIFIERS  (optional, mix with any color)
   ========================================================================== */

/* Flat: drop shadow + accent bar for a minimal boxed look */
.card--flat {
  box-shadow: none;
  border: 1px solid var(--card-gray, #e2e6ec);
  border-bottom-width: 4px;
}

/* No lift on hover */
.card--static:hover { transform: none; box-shadow: var(--card-shadow); }

/* Center the header and text */
.card--center .card__body { text-align: center; }

/* Horizontal: image beside the body (stacks on small screens) */
.card--row { flex-direction: row; }
.card--row .card__img,
.card--row .card__media img { width: 40%; height: 100%; min-height: 160px; }
.card--row .card__body { flex: 1 1 0; }
@media (max-width: 670px) {
  .card--row { flex-direction: column; }
  .card--row .card__img,
  .card--row .card__media img { width: 100%; height: var(--card-img-h); }
}

/* Whole-card link: wrap the card in <a class="card card--link"> */
a.card--link { text-decoration: none; color: inherit; }
a.card--link:hover { text-decoration: none; }

/*
 * Layout note: cards are placed with the grid utilities in grid-styles.css
 * (.grid, .grid--2/3/4, .grid--auto). This sheet intentionally contains no
 * grid rules so layout has a single source of truth.
 */