/* ==========================================================
   SHS VISUALS — photo-header cards
   Loaded after shs-theme.css on marketing pages.
   Photos: Unsplash CDN (images.unsplash.com), Unsplash License.
   ========================================================== */

/* ── 1. Photo cards (image header that fades into the card) ── */
.card.card--photo {
  --pad: 28px;
  display: flex;
  flex-direction: column;
}
.card--photo .card__media {
  position: relative;
  height: 168px;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  overflow: hidden;
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  flex: none;
}
.card--photo .card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.05);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.card--photo:hover .card__media img {
  transform: scale(1.1);
  filter: saturate(1.15) brightness(1.04);
}
.card--photo .card__media::after {             /* fade image into the white card body */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 42%,
    rgba(239,246,255,.55) 72%,
    rgba(255,255,255,.92) 92%,
    #fff 100%);
  pointer-events: none;
}
/* Icon sits on the seam between photo and text */
.card--photo .card__icon {
  position: relative;
  z-index: 2;
  margin-top: -30px;
  box-shadow: 0 0 0 4px #fff, 0 10px 20px -10px rgba(37,99,235,.7);
}
/* Cards without an icon: just a little breathing room */
.card--photo .card__media + .card__title,
.card--photo .card__media + h3 { margin-top: 14px; }

@media (max-width: 640px) {
  .card--photo .card__media { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .card--photo .card__media img { transition: none; transform: none; }
}

/* ── 2. Side photo (image beside a text column) ─────────── */
.shs-side-photo {
  position: relative;
  margin: 0 0 20px;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #DBEAFE, #EFF6FF);
  box-shadow: 0 24px 50px -24px rgba(15,23,42,.35);
}
.shs-side-photo img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.shs-side-photo:hover img { transform: scale(1.05); }
.shs-side-photo::after {               /* soft brand tint at the bottom */
  content: '';
  position: absolute; inset: 55% 0 0 0;
  background: linear-gradient(180deg, rgba(37,99,235,0), rgba(30,64,175,.28));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .shs-side-photo img { transition: none; } }