/*
 * Call to action: full-bleed band with a background image, a dark overlay and
 * a right-aligned content block. Ported from the Gutenberg block's style.scss
 * (SCSS nesting flattened); every selector is namespaced under .ergostil-cta
 * so the theme's global heading/link/button rules stay contained.
 *
 * Mobile-first: the unqualified blocks are the PHONE cascade (the old
 * max-width: 575px values merged over the max-width: 991px and desktop
 * rules), min-width: 576px re-declares the 576–991px values, min-width: 992px
 * the desktop values.
 */

/* Edge-to-edge band: the component renders inside the page container, so the
   viewport-width + centering trick reproduces the block's "align: full"
   support (same approach as .ergostil-steps and .ergostil-hero). */
.ergostil-cta {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Phone band is shorter (old max-width: 575px block). */
  min-height: 320px;
}

.ergostil-cta .cta-overlay {
  display: flex;
  align-items: center;
  /* Left-aligned content from 991px down (old max-width: 991px block);
     the desktop rule flex-end comes back at min-width: 992px. */
  justify-content: flex-start;
  /* Phone: 320px high with tight padding - the 400px/40px/60px values are
     restored at min-width: 576px (old max-width: 575px block). */
  min-height: 320px;
  padding: 30px 20px;
  /* Solid dark veil that keeps the white text readable over any photo. */
  background: rgba(0, 0, 0, 0.5);
}

.ergostil-cta .cta-content {
  /* Full-width text column on phones (old max-width: 575px block). */
  max-width: 100%;
  text-align: left;
}

.ergostil-cta .cta-content .cta-subtitle {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #ccc;
}

.ergostil-cta .cta-content h2 {
  /* Phone sizes (old max-width: 575px block); the desktop 36px/30px/2px
     values return at min-width: 576px. */
  margin: 0 0 20px 0;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ergostil-cta .cta-content .cta-button {
  display: inline-block;
  padding: 14px 20px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  /* Phone-only full-width button (old max-width: 575px block). box-sizing
     and width have no desktop counterpart, so min-width: 576px resets them
     (border-box is what Bootstrap's reboot gives every element, width auto
     is the initial value); text-align reverts to the value inherited from
     .cta-content. */
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.ergostil-cta .cta-content .cta-button:hover,
.ergostil-cta .cta-content .cta-button:focus {
  background: #fff;
  color: #1a1a2e;
}

/* Without a URL the control is a real <button>: browsers paint their own grey
   background on it, so it is reset to match the link variant exactly. */
.ergostil-cta .cta-content button.cta-button {
  background-color: transparent;
  border-radius: 0;
}

/* 576-991px (old max-width: 991px + max-width: 575px blocks): taller band,
   padded overlay, capped content, desktop type scale, inset button. */
@media (min-width: 576px) {
  .ergostil-cta {
    min-height: 400px;
  }

  .ergostil-cta .cta-overlay {
    min-height: 400px;
    padding: 40px 24px;
  }

  .ergostil-cta .cta-content {
    max-width: 500px;
  }

  .ergostil-cta .cta-content h2 {
    margin: 0 0 30px 0;
    font-size: 36px;
    letter-spacing: 2px;
  }

  .ergostil-cta .cta-content .cta-button {
    padding: 15px 30px;
    box-sizing: border-box;
    width: auto;
    text-align: left;
  }
}

/* Desktop (the old unconstrained rules): only the overlay differed from the
   576-991px cascade (right-aligned content, 60px padding). */
@media (min-width: 992px) {
  .ergostil-cta .cta-overlay {
    justify-content: flex-end;
    padding: 60px;
  }
}