/* ==========================
   Feature Box
========================== */

.feature-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--feature-radius);
  isolation: isolate;
  cursor: pointer;
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.feature-box:hover {
  transform: translateY(var(--feature-hover-lift));
  box-shadow: var(--feature-hover-shadow);
}
.feature-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

/* Overlay */
.feature-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2.5rem;
  text-align: center;

  background: linear-gradient(
    160deg,
    var(--feature-overlay-bg-start),
    var(--feature-overlay-bg-end)
  );

  opacity: 0;
  transform: translateY(var(--feature-overlay-translate));

  transition:
    opacity var(--feature-transition-speed) ease,
    transform var(--feature-transition-speed) ease;
}




/* Hover / Focus */
.feature-box:hover img,
.feature-box:focus-within img {
  transform: scale(1.08);
}

.feature-box:hover .feature-overlay,
.feature-box:focus-within .feature-overlay {
  opacity: var(--feature-overlay-opacity);
  transform: translateY(0);
}

/* Typography */
.feature-overlay h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin: 0;
}

.feature-overlay h3 {
  margin: 0;
  color: var(--feature-title-color);
  font-size: var(--feature-title-size);
}

.feature-overlay p {
  margin: 0;
  max-width: 28ch;
  color: var(--feature-text-color);
  font-size: var(--feature-text-size);
  line-height: var(--feature-text-line-height);
  text-align:var(--text-align);
}

.feature-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(
    180deg,
    var(--feature-label-bg-start),
    var(--feature-label-bg-end)
  );
  transition:
    opacity var(--feature-transition-speed) ease,
    transform var(--feature-transition-speed) ease;
}

.feature-label h3 {
  margin: 0;
  color: var(--feature-label-color);
  font-size: var(--feature-label-size);
  font-weight: var(--feature-label-weight);
  letter-spacing: var(--feature-label-letter-spacing);
  text-shadow: 0 8px 22px rgba(0,0,0,.45);
  border-bottom:var(--feature-label-border);
}

.feature-box:hover .feature-label,
.feature-box:focus-within .feature-label {
  opacity: 0;
  transform: translateY(-6px);
}

/* CTA */
.feature-cta {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: var(--feature-cta-padding);
  border-radius: 999px;
  background: var(--feature-cta-bg);
  color: var(--feature-cta-color);
  font-size: var(--feature-cta-size) !important;
  font-weight: var(--feature-cta-font-weight);
  line-height: 1;
  text-decoration: none;

  transition:
    background .3s ease,
    transform .3s ease;
}

.feature-box:hover .feature-cta {
  background: var(--feature-cta-bg-hover);
}

.feature-cta .arrow {
  display: inline-block;
  transition: transform .3s ease;
}

.feature-box:hover .arrow {
  transform: translateX(var(--feature-arrow-shift));
}

.feature-box:hover .feature-cta {
  color: var(--feature-cta-hover-color);
}

.feature-box:hover .arrow {
  transform: translateX(var(--feature-arrow-shift));
}

.feature-box:hover img,
.feature-box:focus-within img {
  transform: scale(var(--feature-img-scale));
  transition: transform .6s var(--feature-transition-ease);
}
/* ==========================
   Animation Variants
========================== */

.fx-fade .feature-overlay {
  transform: none;
}

.fx-slide .feature-overlay {
  transform: translateY(25px);
}

.fx-zoom .feature-overlay {
  transform: scale(.96);
}

.feature-box:hover.fx-zoom .feature-overlay {
  transform: scale(1);
}

/* ==========================
   Touch Support
========================== */

.feature-box.is-active .feature-overlay {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .feature-overlay {
    opacity: 1;
    transform: none;
    position: relative;
  }
}