/* Shared image/title/date/action cards used by Visit and Garden Club.
 * Page CSS owns rail placement, section surfaces and source-bound crops. */
.ssm-content-card {
  min-width: 0;
  border: 1px solid var(--ssm-line);
  background: #fff;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ssm-content-card > a {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  color: var(--ssm-ink);
  text-decoration: none;
}

.ssm-content-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ssm-lime);
}

.ssm-content-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ssm-motion-duration) var(--ssm-motion-ease);
}

.ssm-content-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: start;
  gap: var(--ssm-block-gap-meta);
  padding: var(--ssm-block-inset-roomy);
}

.ssm-content-card__copy strong {
  font-family: "futura-pt", Futura, sans-serif;
  --ssm-card-title-base-size: clamp(1.7rem, 2.4vw, 2.35rem);
  font-size: var(--ssm-card-title-base-size);
  line-height: 1;
}

.ssm-content-card__meta {
  font-weight: 700;
  line-height: 1.45;
}

.ssm-content-card__action {
  justify-self: start;
  margin-top: 0.35rem;
}

.ssm-content-card--calendar > a {
  color: var(--ssm-ink);
  background: var(--ssm-lime);
}

.ssm-content-card__calendar-mark {
  display: grid;
  aspect-ratio: 4 / 3;
  color: #fff;
  background: var(--ssm-deep);
  place-items: center;
  font-family: "futura-pt", Futura, sans-serif;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
}

.ssm-content-card__calendar-copy {
  display: grid;
  align-content: start;
  gap: var(--ssm-block-gap-meta);
  padding: var(--ssm-block-inset-roomy);
  border: 1px solid var(--ssm-line);
  border-top: 0;
}

.ssm-content-card__calendar-copy strong {
  font-family: "futura-pt", Futura, sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  line-height: 1;
}

.ssm-content-card__copy .ssm-content-card__action {
  margin-top: auto;
  padding-top: var(--ssm-block-gap-action);
}

@media (hover: hover) and (pointer: fine) {
  .ssm-content-card > a:hover img {
    transform: scale(1.035);
  }
}

@media (max-width: 720px) {
  .ssm-content-card__copy strong {
    --ssm-card-title-base-size: var(--ssm-mobile-card-title-size);
  }

  .ssm-content-card__copy strong,
  .ssm-content-card__calendar-copy strong {
    font-size: var(--ssm-mobile-card-title-size);
  }
}

@media (hover: none), (pointer: coarse) {
  .ssm-content-card__media img {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ssm-content-card img {
    transform: none;
    transition: none;
  }
}