/*!********************************************************************************!*\
  !*** ../src/features/post-types/project/elements/project-box/project-box.scss ***!
  \********************************************************************************/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.project-box {
  --box-padding-y: /* grow(16, 35) */ clamp(1rem, 0.6761363636rem + 1.4393939394vw, 2.1875rem);
  --box-padding-x: /* grow(16, 40) */ clamp(1rem, 0.5909090909rem + 1.8181818182vw, 2.5rem);
  --subtitle-distance: 0.5rem;
  position: relative;
  max-width: 794px;
  display: grid;
  color: var(--white);
  align-items: flex-end;
  border-radius: var(--rounded);
  overflow: hidden;
}
.project-box:focus:not(:focus-visible) {
  outline: none;
}
.project-box:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.project-box > * {
  grid-area: 1/1;
}
.project-box .show-project {
  pointer-events: none;
}
.project-box img {
  z-index: 1;
  transition: transform 500ms;
}
@media (not (prefers-reduced-motion: reduce)) and (hover: hover) and (pointer: fine) {
  .project-box img:is(.project-box:hover *) {
    transform: scale(1.05);
  }
}
.project-box::before {
  content: "";
  grid-area: 1/1;
  height: 100%;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 40%);
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .project-box:hover {
    --subtitle-offset-distance: 0px;
  }
}
.project-box .content {
  z-index: 3;
  position: relative;
  margin: var(--box-padding-y) var(--box-padding-x);
}
.project-box .content h3 {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform 500ms;
}
@media (hover: none), (pointer: coarse) {
  .project-box .content h3 {
    transform: translateY(calc(-1 * (var(--base-font-size) * var(--base-line-height) + var(--subtitle-distance))));
  }
}
@media (hover: hover) and (pointer: fine) {
  .project-box .content h3:is(.project-box:hover *) {
    transform: translateY(calc(-1 * (var(--base-font-size) * var(--base-line-height) + var(--subtitle-distance))));
  }
}
.project-box .content .button {
  transition-property: transform, opacity;
  transition-duration: 500ms;
}
@media (hover: hover) and (pointer: fine) {
  .project-box .content .button {
    transform: translateY(100%) translateY(var(--subtitle-distance));
    opacity: 0;
  }
  .project-box .content .button:is(.project-box:hover *) {
    transform: none;
    opacity: 1;
  }
}

/*# sourceMappingURL=css-shared-template--project-box.css.map*/