/* Converted from src/components/site/home/Statement.module.css (CSS Module): local classes are prefixed "home-statement__". */
/* Elementor sections 2449406 (12vh gap), 2847c4d / d9f6c69 (statement + card) and 9c1c88f (8vh gap). */
.home-statement__statement {
  position: relative; /* paints over the profile cards pushed down by the scroll effect */
  overflow-x: clip; /* horizontal entrance animations */
  padding: 12vh 0 8vh;
  background-color: var(--color-bg);
}

/* Theme "clb__dark_mode_light": in dark mode the section becomes an 8% light fill over the page. */
html[data-theme="dark"] .home-statement__statement {
  background-color: var(--color-fill);
}

.home-statement__grid {
  display: grid;
  grid-template-columns: 66% 34%;
  max-width: var(--container-boxed);
  margin-inline: auto;
}

.home-statement__textCol {
  min-width: 0;
  padding: calc(7vh + 20px) 16px;
}

.home-statement__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: var(--h2-leading);
  letter-spacing: -0.04em;
  color: var(--color-heading);
}

.home-statement__cardCol {
  display: flex;
  min-width: 0;
  padding: 0 20px 0 30px;
}

.home-statement__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: calc(12vh + 20px) 32px;
  color: #fff;
  text-align: end;
  background-color: #23252b;
  border-radius: 5px;
}

/* Elementor hover overlay */
.home-statement__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}

.home-statement__card:hover::before {
  opacity: 0.5;
}

/* The icon does not move when the card is hovered (Elementor's "push" effect was overridden by
   the theme). Hovering the icon itself draws the theme's link underline under it (it was a
   separate link on the original): a .18em band at 0 110% of the 32px box, swept by the theme's
   "underline" animation. */
.home-statement__icon {
  position: relative;
  align-self: flex-end;
  margin-bottom: 27px;
  font-size: 32px; /* .18em = 5.76px band */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 110%;
  background-size: 0 0.18em;
}

.home-statement__icon svg {
  display: block;
}

.home-statement__icon:hover {
  background-size: 100% 0.18em;
}

@media (prefers-reduced-motion: no-preference) {
  .home-statement__icon:hover {
    animation: home-statement__icon-underline 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
  }
}

@keyframes home-statement__icon-underline {
  0% {
    background-size: 100% 0.18em;
    background-position: 0 110%;
  }
  50% {
    background-size: 0 0.18em;
    background-position: 0 110%;
  }
  50.01% {
    background-size: 0 0.18em;
    background-position: right 0 top 110%;
  }
  100% {
    background-size: 100% 0.18em;
    background-position: right 0 top 110%;
  }
}

.home-statement__headline {
  position: relative;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* The rotating word always starts its own line: on the original it never fits after the plain
   text, so its width changes never re-wrap the headline. */
.home-statement__plain {
  display: block;
  color: #fff;
}

.home-statement__headline .home-statement__dynamic {
  color: #a3a3a3;
}

/* Narrow tablets: the card is too narrow for the longest sector name at 27px ("Transportation"),
   which overflowed the card on the original; shrink just enough for it to fit. */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-statement__headline {
    font-size: min(27px, 5.5vw - 18.5px);
  }
}

/* Same up to ~1265px with the full names: at 27px "Construction & Real Estate" (306px) is wider
   than the card, which the original let grow past the viewport (horizontal page scroll). */
@media (min-width: 1025px) and (max-width: 1265px) {
  .home-statement__headline {
    font-size: min(27px, 3vw - 11px);
  }
}

@media (max-width: 767px) {
  .home-statement__statement {
    padding: 6vh 0;
  }

  .home-statement__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-statement__textCol {
    padding: calc(6vh + 20px) 16px 0;
  }

  .home-statement__title {
    font-size: 2.25rem;
  }

  .home-statement__cardCol {
    padding: 20px 16px 5vh;
  }

  .home-statement__card {
    padding: calc(6vh + 20px) 30px calc(6vh + 20px) 0;
  }

  /* Phones get another section on the original (d9f6c69) whose card column has no entrance
     animation: cancel the Reveal (fade-left) of the card column here. */
  html[data-js] .home-statement__grid > .home-statement__cardCol.home-statement__cardCol {
    opacity: 1;
    animation: none;
  }
}