/* TiltedCard adapted to the site's static HTML and existing modality grid. */
.page-home .modality-card.modality-card-image {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.page-home .tilted-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 220px;
  margin: 0;
  perspective: 800px;
}

.page-home .tilted-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) scale(1);
}

.page-home .modality-card.is-tilting { z-index: 2; }
.page-home .tilted-card.is-tilting .tilted-card-inner,
.page-home .tilted-card.is-tilting .tilted-card-caption { will-change: transform, opacity; }

.page-home .modality-card-image .tilted-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: translateZ(0);
  transition: none;
}

.page-home .modality-card-image.modality-card-muay .tilted-card img {
  object-position: center 38%;
}

.page-home .modality-card-image:hover .tilted-card img {
  filter: none;
  transform: translateZ(0);
}

.page-home .tilted-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding: 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(12, 14, 20, .75), rgba(12, 14, 20, .16) 55%, transparent);
  pointer-events: none;
  transform: translateZ(30px);
}

.page-home .modality-card .tilted-card h3 {
  max-width: 100%;
  color: #fff;
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 700;
  line-height: 1.06;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .48);
}

.page-home .tilted-card-caption {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  padding: 5px 9px;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.page-home .modality-card-image .modality-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 23px;
}

.page-home .modality-card-image .modality-card-content p {
  max-width: 100%;
  margin: 0 0 18px;
  color: #62646a;
}

.page-home .modality-card-image .card-link {
  min-height: 44px;
  margin-top: 0;
  padding: 5px 6px 5px 13px;
  border: 1px solid #dededb;
}

.page-home .modality-card .card-arrow {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: var(--gold);
}

.page-home .modality-card .card-arrow-echo { right: 6px; }

@media (min-width: 879px) and (max-width: 1000px) {
  .page-home .modality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 878px) {
  .page-home .tilted-card { height: 210px; }
  .page-home .modality-card .tilted-card h3 { font-size: 30px; }
  .page-home .tilted-card-caption { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .page-home .tilted-card-caption { display: none; }
}