/* =============================================================
 * Two Column Image and Text block
 * ============================================================= */
.two-col-text-img-block {
  position: relative;
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 1rem;
  padding-bottom: 1rem;
  overflow: hidden;
  /* Size of the angled corner cut on images. */
  --slant: 4.5rem;
}
.two-col-text-img-block .row {
  display: flex;
  align-items: stretch;
}
.two-col-text-img-block .container {
  position: relative;
}

/* ---- Background video ------------------------------------- */
.two-col-video-background {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  overflow: hidden;
}
.two-col-video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

/* ---- Gradient overlay (always left -> right) -------------- */
.two-col-text-img-block .two-col-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--black) 0%,
    var(--secondarycolor) 100%
  );
  opacity: 0.85;
}

/* ---- Full-bleed cover image behind a text column ---------- */
.two-col-text-img-block .bgmagic {
  width: 50%;
  position: absolute;
  background-size: cover;
  background-position: center;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: 0;
}
.two-col-text-img-block .bgmagic.txtimg {
  right: 0;
}
.two-col-text-img-block .bgmagic.imgtxt {
  left: 0;
}

/* ---- Angled bottom corner on images ----------------------- */
/* The cut always lands on the inside bottom corner: bottom right when the
 * image sits on the left, bottom left when it sits on the right. */
.two-col-text-img-block .slant-br {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--slant)),
    calc(100% - var(--slant)) 100%,
    0 100%
  );
  border-radius: 0;
}
.two-col-text-img-block .slant-bl {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--slant) 100%,
    0 calc(100% - var(--slant))
  );
  border-radius: 0;
}

/* ---- Text column ------------------------------------------ */
.two-col-text-img-block .text-box {
  padding: 1rem 4rem;
}

/* Headline color */
.two-col-text-img-block .text-box h2 {
  color: var(--primarycolor);
}

/* Text color options (pair White with the gradient overlay) */
.two-col-text-img-block .text-box.text-black,
.two-col-text-img-block .text-box.text-black p,
.two-col-text-img-block .text-box.text-black li,
.two-col-text-img-block .text-box.text-black ul,
.two-col-text-img-block .text-box.text-black h4 {
  color: var(--generalfont);
}
.two-col-text-img-block .text-box.text-white,
.two-col-text-img-block .text-box.text-white p,
.two-col-text-img-block .text-box.text-white li,
.two-col-text-img-block .text-box.text-white ul,
.two-col-text-img-block .text-box.text-white h4 {
  color: var(--white);
}
.two-col-text-img-block .text-box.text-white h2 {
  color: var(--white);
}

/* Button row spacing */
.two-col-text-img-block .btn-row .btn {
  margin-right: 0.5rem;
}

/* ---- Inline text link with sliding arrow ------------------ */
.two-col-text-img-block .btn-row .two-col-text-link {
  display: inline-flex;
  align-items: center;
  color: var(--tertiarycolor);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  margin-right: 1.5rem;
}
.two-col-text-img-block .btn-row .two-col-text-link:last-child {
  margin-right: 0;
}
.two-col-text-img-block .btn-row .two-col-text-link::after {
  content: "\f061"; /* arrow-right */
  font-family: "Font Awesome 7 Pro", "FontAwesome";
  font-weight: 900;
  font-size: 1.25em;
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.25s ease;
}
.two-col-text-img-block .btn-row .two-col-text-link:hover,
.two-col-text-img-block .btn-row .two-col-text-link:focus {
  color: var(--tertiarycolor);
  text-decoration: none;
}
.two-col-text-img-block .btn-row .two-col-text-link:hover::after,
.two-col-text-img-block .btn-row .two-col-text-link:focus::after {
  transform: translateX(6px);
}

/* ---- Images ----------------------------------------------- */
.two-col-text-img-block img {
  border-radius: 8px;
}
.two-col-text-img-block .leftcol,
.two-col-text-img-block .rightcol {
  min-height: 250px;
}

/* ---- Lazy YouTube thumbnail / play button ----------------- */
.two-col-text-img-block .yt-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
.two-col-text-img-block .yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .25s ease;
}
.two-col-text-img-block .yt-thumb:hover img {
  transform: scale(1.02);
}
.two-col-text-img-block .yt-thumb::after {
  content: "\f144"; /* play-circle */
  font-family: "Font Awesome 7 Pro", "FontAwesome";
  font-weight: 500;
  font-size: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  pointer-events: none;
  text-shadow: 0 0 6px var(--darkgray);
  transition: transform .25s ease;
}
.two-col-text-img-block .yt-thumb:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ---- Video modal ------------------------------------------ */
.two-col-vid-modal .modal-content {
  border-radius: 8px;
  overflow: hidden;
}
.two-col-vid-modal .ratio iframe {
  border: 0;
}

/* ---- Responsive ------------------------------------------- */
@media only screen and (max-width: 767px) {
  .two-col-text-img-block {
    --slant: 2.5rem;
  }
  .two-col-text-img-block .bgmagic {
    width: 100%;
    height: 300px;
    bottom: auto;
    top: auto;
    position: relative;
  }
  .two-col-text-img-block .leftcol,
  .two-col-text-img-block .rightcol {
    min-height: 0;
  }
  .two-col-text-img-block .text-box {
    padding: 1rem 1.5rem;
  }
}