/* ==========================================================================
   Split Content — double-column intro + cut-line + logo carousel
   --------------------------------------------------------------------------
   Source markup: page-templates/new-service-template.php (lines 406–475)
   Collected from:
     1. style.css                            (base layout, typography, carousel)
     2. css/influencer-marketing-style.css   (every-influencer + image rules)
     3. css/homepage-style.css               (.mobile-inactive — mobile rule)
     4. inline <style> in new-service-template.php  (per-page overrides)
   Order below preserves the original cascade so visuals stay identical.

   All selectors are scoped under the wrapper `.split-content` so the block's
   generic class names (.centered-title, .centered-content, .left-column,
   .right-column, .logo-carousel, .slide, .slide-track, .mobile-title,
   .desktop-title, .attention, .wrap, .text-wrap, .double-column, .left-text,
   .right-text, .mobile-inactive, .every-influencer) do not collide with the
   same names used on other pages.

   Note on keyframes: the original animation is named `scroll`, which clashes
   with style.css. We rename it to `split-content-scroll` here so the block's
   carousel uses its own animation regardless of load order.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) Base styles — from style.css
   -------------------------------------------------------------------------- */

/* lines to cut images */
.split-content .row-cutted-right {
  background-color: #0e141f;
  height: 80px;
  transform: rotate(1.5deg);
  width: 110%;
  margin-left: -2vw;
}
.split-content .row-cutted-left {
  background-color: #0e141f;
  height: 80px;
  transform: rotate(-1.5deg);
  margin-top: -2vw;
  width: 110%;
  margin-left: -2vw;
}

/* double columns */
.split-content .double-column {
  display: block;
  margin: auto;
  width: 80%;
}

.split-content .mobile-title {
  display: none;
}
.split-content .mobile-title span {
  float: right;
}

@media screen and (min-width: 667px) {
  .split-content .double-column {
    display: flex;
  }
  .split-content .left-column,
  .split-content .right-column {
    float: left;
    width: 50%;
  }
  .split-content .right-column {
    padding-left: 4%;
  }
  .split-content .mobile-title {
    display: none;
  }
}

.split-content .centered-title {
  font: normal normal normal 94px/70px Knockout-HTF67-FullBantamwt;
  letter-spacing: -0.94px;
  color: #18161a;
  text-transform: uppercase;
  opacity: 1;
  margin-bottom: 1em;
}
.split-content .centered-content {
  text-align: left;
  font: normal normal normal 18px/33px Rubik;
  letter-spacing: 0.18px;
  color: #161616;
  opacity: 1;
}
.split-content .left-text {
  width: 100%;
}

/* keyframes for the logo carousel — renamed to avoid clashing with the
   global `scroll` keyframes defined in style.css. Must stay at root level
   (keyframes can't be nested inside a class selector). */
@keyframes split-content-scroll {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}
@-webkit-keyframes split-content-scroll {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

.split-content .logo-carousel {
  position: relative;
  background-color: #0e141f;
  overflow: hidden;
}
.split-content .logo-carousel::before,
.split-content .logo-carousel::after {
  background: -webkit-linear-gradient(left, #0e141f 0%, rgba(6, 6, 6, 0) 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.split-content .logo-carousel::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.split-content .logo-carousel::before {
  left: 0;
  top: 0;
}
.split-content .logo-carousel .slide-track {
  animation: split-content-scroll 150s linear infinite;
  -webkit-animation: split-content-scroll 150s linear infinite;
  display: flex;
  width: fit-content;
}
.split-content .logo-carousel .slide-track:hover {
  animation-play-state: paused;
}
.split-content .logo-carousel .slide {
  height: 100px;
  width: 250px;
  text-align: center;
  padding: 2rem;
}

/* style.css mobile media query — typography + carousel */
@media screen and (max-width: 667px) {
  .split-content .left-text .left-column {
    margin: 5%;
  }
  .split-content .left-text {
    display: flex;
    flex-direction: column-reverse;
  }
  .split-content .wrap {
    padding-bottom: 12vw;
  }
  .split-content .mobile-title {
    display: block;
  }
  .split-content .desktop-title {
    display: none;
  }
  .split-content .attention {
    text-align: left;
    font: normal normal normal 60px/53px Knockout-HTF67-FullBantamwt;
    letter-spacing: -0.6px;
  }
  .split-content .mobile-inactive {
    display: none;
  }
  .split-content .slide-track {
    display: grid !important;
    grid-gap: 2rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
  }
  .split-content .logo-carousel .slide {
    width: 150px;
    height: 100px;
    text-align: center;
    padding: 0px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .split-content .logo-carousel {
    overflow: hidden;
  }
  .split-content .logo-carousel .slide-track {
    display: flex !important;
    margin: auto;
    animation: split-content-scroll 80s linear infinite;
  -webkit-animation: split-content-scroll 80s linear infinite;
  }
  .split-content .logo-carousel::before,
  .split-content .logo-carousel::after {
    background: none;
  }
}


/* --------------------------------------------------------------------------
   2) Per-page styles — from css/influencer-marketing-style.css
   -------------------------------------------------------------------------- */

/* every influencer */
.split-content .every-influencer {
  margin-top: -8vw;
}
.split-content .every-influencer .left-column {
  width: 60%;
}
.split-content .every-influencer .right-column {
  width: 40%;
  padding-left: 0%;
}
.split-content .every-influencer img {
  max-width: none;
  width: 110%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 10%;
}
.split-content .every-influencer .text-wrap {
  padding-top: 12vw;
  padding-bottom: 12vw;
}
.split-content .every-influencer .centered-content {
  width: 80%;
}

.split-content .wrap {
  position: relative;
  float: left;
  overflow: hidden;
  margin-top: -5vw;
}

@media screen and (min-width: 1619px) {
  .split-content .every-influencer .text-wrap {
    padding-left: 4vw;
  }
  .split-content .wrap {
    margin-top: 0px;
  }
}

@media screen and (max-width: 667px) {
  .split-content .split-content-img {
    min-width: auto;
    max-width: fit-content;
    max-height: initial;
    margin-left: 1vw;
    width: 160%;
  }
  .split-content .every-influencer .left-column {
    width: auto;
  }
  .split-content .every-influencer .right-column {
    width: auto;
  }
  .split-content .every-influencer .wrap {
    padding-bottom: 0px;
  }
  /* Original rule was scoped to `.influencer-marketing .every-influencer`.
     Since this block doesn't sit inside that wrapper anymore, we apply the
     column-reverse directly under .split-content. The .left-text rule above
     also produces column-reverse on mobile, so this is a belt-and-braces
     fallback for the swap_layout=true (.right-text) case. */
  .split-content .every-influencer {
    display: flex;
    flex-direction: column-reverse;
  }
  .split-content .every-influencer .centered-content {
    width: 100%;
  }
  .split-content .every-influencer img {
    position: initial;
  }
}

/* logo carousel — page override */
.split-content .logo-carousel {
  padding-bottom: 8vw;
}

/* mobile typography helpers */
.split-content .mobile-title {
  display: none;
}
.split-content .desktop-title {
  display: block;
}
@media screen and (max-width: 667px) {
  .split-content .mobile-title {
    display: block;
    font: normal normal normal 56px/53px Knockout-HTF67-FullBantamwt;
    letter-spacing: -0.6px;
    text-align: left;
  }
  .split-content .desktop-title {
    display: none;
  }
}

/* tablet / mid-desktop attention size */
@media screen and (min-width: 668px) and (max-width: 1200px) {
  .split-content .attention {
    font: normal normal normal 84px/70px Knockout-HTF67-FullBantamwt;
  }
}


/* --------------------------------------------------------------------------
   3) Mobile carryover — from css/homepage-style.css
   -------------------------------------------------------------------------- */

@media screen and (max-width: 667px) {
  .split-content .mobile-inactive {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   4) Per-page overrides — from inline <style> in new-service-template.php
   -------------------------------------------------------------------------- */

.split-content .every-influencer {
  margin-top: auto;
}
.split-content .every-influencer .text-wrap {
  padding-top: 4vw;
}
.split-content .logo-carousel {
  padding-top: 2vw;
  padding-bottom: 8vw;
  margin-top: -2vw;
}

@media screen and (max-width: 667px) {
  .split-content .logo-carousel {
    padding-bottom: 100px;
  }
}