/* Shared homepage text-link and button hovers.
   Guide card layout: home-guides.css. Typography: home-typography.css */

.o3-project-card {
  display: flex;
  cursor: pointer;
}

.o3-card-link {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  color: var(--o3-red, var(--mv-color-red));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.o3-project-card:focus-visible {
  outline: 2px solid var(--o3-red, var(--mv-color-red));
  outline-offset: 4px;
}

.o3-text-action,
.o3-card-link,
.o3-card-body > a,
.o3-all-projects,
.o3-deliveries-link,
.o3-guides .o3-section-head > a,
.o3-trust-content > a,
.o3-guides-link {
  transition: color var(--mv-motion-fast), gap var(--mv-motion-fast);
}

.o3-text-action svg,
.o3-card-link svg,
.o3-card-body > a svg,
.o3-all-projects svg,
.o3-deliveries-link svg,
.o3-guides .o3-section-head > a svg,
.o3-trust-content > a svg,
.o3-guide-cta svg {
  transition: transform var(--mv-motion-standard);
}

.option-three .o3-button {
  transition:
    transform var(--mv-motion-standard),
    box-shadow var(--mv-motion-fast),
    background-color var(--mv-motion-fast),
    border-color var(--mv-motion-fast);
}

@media (hover: hover) {
  .o3-card-link:hover,
  .o3-card-body > a:hover,
  .o3-all-projects:hover,
  .o3-deliveries-link:hover,
  .o3-guides .o3-section-head > a:hover,
  .o3-trust-content > a:hover {
    color: var(--mv-color-red-hover);
  }

  .o3-text-action:hover {
    color: var(--mv-color-red-bright);
    gap: 15px;
  }

  .o3-about-copy .o3-text-action:hover {
    color: var(--mv-color-red-hover);
  }

  .o3-text-action:hover svg,
  .o3-card-link:hover svg,
  .o3-card-body > a:hover svg,
  .o3-all-projects:hover svg,
  .o3-deliveries-link:hover svg,
  .o3-guides .o3-section-head > a:hover svg,
  .o3-trust-content > a:hover svg,
  .o3-project-card:hover .o3-card-link svg,
  .o3-guide:hover .o3-guide-cta svg {
    transform: translateX(5px);
  }

  .option-three .o3-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(0, 0, 0, .18);
  }
}
