@charset "UTF-8";
/**
 * @file
 * Resource card styles — mobile-first.
 * Figma: Desktop 26:1958, Mobile 26:5413.
 *
 * Mobile: 24px radius, auto height, mobile shadows.
 * Desktop (>=992px): 38px radius, fixed height, desktop shadows.
 */
/* ==========================================================================
   Mobile base (xs)
   ========================================================================== */
.vel-resource-card {
  background: var(--vel-gradient-card-subtle), var(--vel-bg-white);
  border: 0.6px solid var(--vel-border);
  border-radius: var(--vel-card-radius-mobile); /* 24px */
  padding: 25px; /* Figma mobile: ~24px uniform */
  box-shadow: var(--vel-shadow-sm-mobile);
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.vel-resource-card:hover {
  box-shadow: var(--vel-shadow-deep-mobile);
  transform: translateY(-2px);
}

/* Icon wrapper: fixed height so title always starts at the same Y.
   Mobile: 48px container. Desktop (xxl): 88px container.
   Icon scales via object-fit:contain, aligned to bottom-left. */
.vel-resource-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--vel-space-md);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom left;
     object-position: bottom left;
}

.vel-resource-card__title {
  font-family: var(--vel-font-heading);
  font-size: var(--vel-text-2xl); /* 24px */
  font-weight: 800;
  color: var(--vel-primary);
  letter-spacing: var(--vel-tracking-snug);
  line-height: var(--vel-leading-card-title);
  margin: 0 0 var(--vel-space-md);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.vel-resource-card__body {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-base); /* 16px */
  font-weight: 500;
  color: var(--vel-primary);
  line-height: var(--vel-leading-card-body);
  margin: 0;
  flex: 1;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.vel-resource-card__link {
  font-family: var(--vel-font-body);
  font-size: var(--vel-text-lg); /* 18px */
  font-weight: 900;
  color: var(--vel-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--vel-space-xs);
  margin-top: 12px; /* Figma mobile: 12px between body and link */
  flex-shrink: 0; /* Never shrink — always visible */
  padding-top: 12px;
}

.vel-resource-card__link:hover,
.vel-resource-card__link:focus {
  color: var(--vel-primary);
}

.vel-resource-card__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==========================================================================
   md (768px)
   ========================================================================== */
@media (min-width: 768px) {
  .vel-resource-card {
    padding: 48px 28px 28px;
  }
  .vel-resource-card__icon {
    width: 64px;
    height: 52px;
  }
  .vel-resource-card__title {
    font-size: 26px;
    line-height: var(--vel-leading-card-title);
  }
}
/* ==========================================================================
   lg (992px) — Desktop
   ========================================================================== */
@media (min-width: 992px) {
  .vel-resource-card {
    border-radius: 38px; /* Figma: 38.27px */
    padding: 56px 30px 30px;
    border-width: 0.6px; /* Figma: 0.598px */
    box-shadow: var(--vel-shadow-sm);
  }
  .vel-resource-card:hover {
    box-shadow: var(--vel-shadow-deep);
  }
  .vel-resource-card__icon {
    width: 72px;
    height: 56px;
  }
  .vel-resource-card__title {
    font-size: 28px;
    line-height: 34px;
  }
  .vel-resource-card__body {
    font-size: var(--vel-text-lg);
    line-height: var(--vel-leading-body);
  }
  .vel-resource-card__link {
    font-size: var(--vel-text-xl);
    margin-top: auto; /* Desktop: push link to bottom of fixed-height card */
  }
  .vel-resource-card__arrow {
    width: 24px;
    height: 24px;
  }
}
/* ==========================================================================
   xl (1200px)
   ========================================================================== */
@media (min-width: 1200px) {
  .vel-resource-card {
    padding: 64px 34px 34px;
  }
}
/* ==========================================================================
   xxl (1600px) — Full Figma spec sizes
   ========================================================================== */
@media (min-width: 1600px) {
  .vel-resource-card {
    border-radius: 38px;
    height: 382px;
    padding: 45px 34px 34px; /* Uniform top padding — icon container handles alignment */
  }
  .vel-resource-card__icon {
    width: 88px;
    height: 88px; /* Fixed container height — all icons aligned */
    margin-bottom: 17px;
  }
  .vel-resource-card__title {
    font-size: var(--vel-text-3xl);
    line-height: 36px;
  }
  .vel-resource-card__body {
    max-width: 407px;
  }
}
/*# sourceMappingURL=resource-card.css.map */