/**
 * SML Cards — responsive
 */

/* ── Base card ── */
.sl-card {
  background: var(--sl-color-bg);
  border: var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: var(--sl-space-4) var(--sl-space-5);
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-card--hoverable { cursor: pointer; }
.sl-card--hoverable:hover { border-color: var(--sl-navy-mid); box-shadow: var(--sl-shadow-sm); }

/* ── Specialty card ── */
.sl-specialty-card {
  background: var(--sl-color-bg);
  border: var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: var(--sl-space-4);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color var(--sl-transition), transform var(--sl-transition), box-shadow var(--sl-transition);
}
.sl-specialty-card:hover {
  border-color: var(--sl-navy-mid);
  transform: translateY(-2px);
  box-shadow: var(--sl-shadow-md);
  text-decoration: none;
}
.sl-specialty-card__icon {
  width: 36px;
  height: 36px;
  background: var(--sl-navy-ghost);
  border-radius: var(--sl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sl-space-3);
  flex-shrink: 0;
}
.sl-specialty-card__icon svg { width: 18px; height: 18px; stroke: var(--sl-navy); fill: none; stroke-width: 1.5; }
.sl-specialty-card__name { font-size: var(--sl-text-md); font-weight: var(--sl-weight-medium); color: var(--sl-color-text); margin-bottom: var(--sl-space-2); }
.sl-specialty-card__desc { font-size: var(--sl-text-sm); color: var(--sl-color-text-muted); line-height: var(--sl-leading-normal); }

/* ── News card ── */
.sl-news-card {
  background: var(--sl-color-bg);
  border: var(--sl-border);
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--sl-transition), transform var(--sl-transition);
}
.sl-news-card:hover { box-shadow: var(--sl-shadow-md); transform: translateY(-1px); text-decoration: none; }
.sl-news-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sl-news-card__image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--sl-gray-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-news-card__body  { padding: var(--sl-space-4); flex: 1; display: flex; flex-direction: column; }
.sl-news-card__tag   { font-size: var(--sl-text-xs); font-weight: var(--sl-weight-medium); color: var(--sl-teal-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sl-space-2); }
.sl-news-card__title { font-size: var(--sl-text-md); font-weight: var(--sl-weight-medium); color: var(--sl-color-text); line-height: var(--sl-leading-normal); flex: 1; }
.sl-news-card__date  { font-size: var(--sl-text-xs); color: var(--sl-color-text-muted); margin-top: var(--sl-space-3); }

/* Specialty grid */
.sl-specialty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sl-space-4);
}

@media (max-width: 1023px) {
  .sl-specialty-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sl-specialty-grid { grid-template-columns: 1fr; }
  .sl-specialty-card { flex-direction: row; gap: var(--sl-space-3); }
  .sl-specialty-card__icon { margin-bottom: 0; }
}