/* ==========================================================================
   4. Cards  (spec 7)
   Thumbnail ratios use padding-bottom boxes so images never cause layout
   shift, matching the reference technique.
   ========================================================================== */

.wg-card{ margin:0; }
.wg-card__body{ min-width:0; }

.wg-card__title{
  font-family:var(--wg-font-display);
  font-weight:400;
  letter-spacing:.5px;
  color:var(--wg-heading);
  margin:0;
}
.wg-card__title a{ text-decoration:none; }
.wg-card__title a:hover,
.wg-card__title a:focus{ color:var(--wg-nav-hover); text-decoration:none; }

.wg-card__title--xs{ font-size:var(--wg-card-xs); line-height:var(--wg-card-xs-lh); }
.wg-card__title--sm{ font-size:var(--wg-card-sm); line-height:var(--wg-card-sm-lh); }
.wg-card__title--md{ font-size:var(--wg-card-md); line-height:var(--wg-card-md-lh); }
.wg-card__title--lg{ font-size:var(--wg-card-lg); line-height:var(--wg-card-lg-lh); }

.wg-card__excerpt{
  margin-top:8px;
  font-family:var(--wg-font-body);
  font-size:var(--wg-fs-body);
  line-height:var(--wg-lh-body);
  color:var(--wg-text);
}
.wg-card__excerpt p{ margin:0; }

/* --- Thumbnail boxes ------------------------------------------------------ */
.wg-thumb{
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--wg-fill);
  box-shadow:var(--wg-img-edge);   /* spec 9.4 */
}
.wg-thumb__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.wg-thumb__img--empty{ background:var(--wg-fill); }

.wg-thumb--hero  { padding-bottom:50%;    }  /* 2:1   */
.wg-thumb--rail  { padding-bottom:86%;    }  /* 152x131 */
.wg-thumb--strip { padding-bottom:64%;    }  /* 227x145 */
.wg-thumb--row   { padding-bottom:74%;    }  /* 192x142 */
.wg-thumb--square{ padding-bottom:100%;   }  /* 1:1   */

/* --- Hero ----------------------------------------------------------------- */
.wg-card--hero .wg-card__body{ padding-top:14px; }

/* --- Rail (sidebar) ------------------------------------------------------- */
.wg-rail{ display:flex; flex-direction:column; }

.wg-card--rail{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding-bottom:var(--wg-gap-row);
  border-bottom:1px solid var(--wg-rule);
  margin-bottom:var(--wg-gap-row);
}
.wg-card--rail:last-child{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0;
}
.wg-card--rail .wg-thumb{ flex:0 0 152px; width:152px; }

/* --- Strip (4-up) --------------------------------------------------------- */
.wg-card--strip .wg-card__body{ padding-top:10px; }

/* --- Wide row ------------------------------------------------------------- */
.wg-card--row{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding-bottom:var(--wg-gap-tight);
  border-bottom:1px solid var(--wg-rule);
}
.wg-rows > .wg-card--row:last-child{ border-bottom:0; }
.wg-card--row .wg-thumb{ flex:0 0 192px; width:192px; }

/* --- Square --------------------------------------------------------------- */
.wg-card--square{ display:flex; align-items:flex-start; gap:16px; }
.wg-card--square .wg-thumb{ flex:0 0 205px; width:205px; }

/* --- Archive lead --------------------------------------------------------- */
.wg-card--archive .wg-card__body{ padding-top:14px; }

/* --- Meta ----------------------------------------------------------------- */
.wg-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  font-family:var(--wg-font-display);
  font-size:var(--wg-fs-meta);
  font-style:italic;
  color:var(--wg-muted);
}
.wg-meta a{ color:inherit; }
.wg-meta a:hover{ color:var(--wg-heading); }
.wg-meta__sep{ color:var(--wg-rule); }

/* --- Lead composition: rail + hero ---------------------------------------- */
.wg-lead{
  display:grid;
  grid-template-columns:304px minmax(0,1fr);
  gap:var(--wg-gap);
  margin-bottom:44px;
}