/*
 * Translated from
 * styleguide/components/04-layouts/05-centers/centers.scss. Found missing
 * entirely -- this SDC had no CSS file at all, despite its own
 * component.yml description already stating it "depends on hover-box-
 * section's own CSS via libraryOverrides" for the shared ".hover-box-wrapper"
 * root class -- these are the ADDITIONAL ".centers"-specific rules that
 * were never actually added (found via a systematic post-Phase-7 audit of
 * every non-component Fractal source file). Real call site:
 * hover-box-section-centers.twig, rendered on the "Centers" landing page
 * (node 60). Without these rules, the Centers page's distinct
 * hover-box layout/hover-reveal behavior (as opposed to the base/-zoom
 * variants, which are correctly styled) was entirely missing.
 */
@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers {
    padding: var(--space-triple) var(--space-sextuple) var(--space-sextuple) var(--space-sextuple);
  }
}

.hover-box-wrapper.centers .title {
  font-size: 1.5rem;
  font-weight: bold;
}

@media only screen and (min-width: 500px) {
  .hover-box-wrapper.centers .hover-box {
    margin: 0;
  }
}

@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers .hover-box {
    margin: var(--space);
  }
}

.hover-box-wrapper.centers .hover-box-text {
  color: var(--color-grey-darkest);
}

@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers .hover-box-text {
    color: var(--color-white);
  }
}

.hover-box-wrapper.centers .hover-box-content {
  position: inherit;
}

@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers .hover-box-content {
    position: absolute;
    bottom: calc(var(--space-triple) * -1);
    height: 165px;
  }
}

.hover-box-wrapper.centers .hover-box-content p {
  padding: 0 var(--space-triple) 0 0;
}

@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers .hover-box-content p {
    visibility: hidden;
  }
}

@media only screen and (max-width: 769px) {
  .hover-box-wrapper.centers .hover-box-content::after {
    font-family: var(--font-awesome);
    content: "\f105";
    font-size: 6rem;
    color: var(--color-blue-arrow);
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}

@media only screen and (min-width: 769px) {
  .hover-box-wrapper.centers .hover-box:hover .hover-box-content,
  .hover-box-wrapper.centers .hover-box:focus .hover-box-content {
    bottom: var(--space-double);
  }

  .hover-box-wrapper.centers .hover-box:hover .hover-box-content p,
  .hover-box-wrapper.centers .hover-box:focus .hover-box-content p {
    visibility: visible;
  }
}

.hover-box-wrapper.centers .hover-box:last-of-type {
  border: 0;
}

.hover-box-wrapper.centers .hover-box-cta .hover-box-content {
  position: relative;
  bottom: inherit !important;
  height: inherit;
}

.hover-box-wrapper.centers .hover-box-cta .hover-box-content::after {
  display: none;
}

@media only screen and (max-width: 769px) {
  .hover-box-wrapper.centers .hover-box-image {
    display: none;
  }

  .hover-box-wrapper.centers .hover-box-text {
    position: inherit;
  }
}