/* Úcademy · service pictures: card images on the home page + hero banner on each service page */

/* ---- home page cards ---- */
.service-card { padding: 0 0 20px; overflow: hidden; }
.service-card > :not(.card-media) { margin-left: 20px; margin-right: 20px; }
.service-card > .card-action { align-self: flex-start; }
.card-media {
  position: relative; align-self: stretch; width: 100%; aspect-ratio: 16 / 9;
  margin-bottom: 16px; background: #e9edf5; overflow: hidden;
}
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-card:hover .card-media img { transform: scale(1.04); }
.card-media .badge { position: absolute; top: 12px; left: 12px; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
@media (max-width: 760px) { .card-media { aspect-ratio: 2 / 1; } }
@media (prefers-reduced-motion: reduce) { .card-media img { transition: none; } .service-card:hover .card-media img { transform: none; } }

/* ---- service pages ---- */
.service-hero {
  position: relative; margin: 12px 0 22px; height: clamp(140px, 22vw, 260px);
  background: #e9edf5; border-radius: 12px; overflow: hidden;
}
.service-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.service-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, .4), transparent 55%); pointer-events: none; }
.service-hero__label {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; padding: 4px 10px;
  font: 600 12px/1.4 "Inter", system-ui, sans-serif; color: #405ed0;
  background: rgba(255, 255, 255, .94); border-radius: 7px;
}