/* =========================================
   Industry Posts Template Styles
   single-industry.php
   ========================================= */

.single-industry {

  & .headline {text-wrap-style: balance;}

  &>section+* {
    padding-top: 100px;

    @media (max-width: 991.98px) {
      padding-top: 1rem;
    }
  }

  /* =========================================
     Hero Band
     ========================================= */



  & .rm-section__hero {


    & .button-wrap {
      margin-top: 1rem;
    }

    @media only screen and (max-width: 999px) {
      margin-bottom: 0;
    }


    @media only screen and (max-width: 599px) {
      & .mobile-image {
        display: block;
        position: relative;
      }

      & .image {
        display: none;
      }
    }
  }


  /* =========================================
     Problem Band
     ========================================= */

  & .problem-band {
    & .copy ul li {
      font-size: 1rem !important;
      line-height: 1.75em !important;
      text-transform: none !important;
      font-weight: 400 !important;
      padding-left: 0 !important;
    }

    .copy ul {
      list-style: circle;
    }

    @media only screen and (min-width: 600px) {
      .copy ul {
        column-count: 2; column-gap: 2rem;
      }
    }

  }

  /* =========================================
     Value Propositions Band
     ========================================= */

  & .value-propositions-band {

    & .info {
      width: 1100px;
      width:75%;
      margin: 0 auto;
      text-align: center;
    }

    & .half-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }


    & .col-text {
      display: flex;
      align-items: center;
      background: #000;
      order: 2;

      & .inner-content-wrap {
        padding: 60px 55px;
      }
    }

    & .col-image {
      position: relative;
      order: 1;

      overflow: hidden;

      & img {

        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
@media only screen and (min-width: 768px) {
     & .half-wrap.reversed {
       & .col-text {
         order: 1;
       }

       & .col-image {
         order: 2;
       }
     }
    }

    @media only screen and (max-width: 767px) {

      & .info {
     
      width:90%;
      margin: 0 auto;
      text-align: left;
    }

      & .half-wrap {
        grid-template-columns: 1fr;
      }

      & .col {
        width: 100%;
      }

      & .col-image {
        min-height: 260px;
      }
    }
  }

  /* =========================================
     Metrics Band
     ========================================= */

  & .metrics-band {
    padding: 80px 0;
    background: #000;

    & .metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: 1390px;
      margin: 0 auto;

      @media only screen and (max-width: 1549px) {
        width: 90%;
      }

      @media only screen and (max-width: 599px) {
        grid-template-columns: 1fr 1fr;
      }

      @media only screen and (max-width: 399px) {
        grid-template-columns: 1fr;
      }
    }

    & .metrics-card {
      padding: 50px 20px;
      text-align: center;
      border-right: 1px solid rgba(255, 255, 255, 0.15);

      &:last-child {
        border-right: none;
      }

      & .metrics-value {
        display: block;
        font-family: rift, Helvetica, Arial, sans-serif;
        font-size: 90px;
        font-weight: 700;
        color: #d0021b;
        line-height: 1;
      }

      & .metrics-suffix {
        display: block;
        font-family: rift, Helvetica, Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 12px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s ease, transform 0.7s ease;

        &.is-visible {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }

  /* =========================================
     Testimonials Band
     ========================================= */

  & .testimonial-wrap {
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 100px;

    & .slide-container {
      height: 630px;
      position: relative;
      margin: 80px auto 0;
    }

    & .slide-container:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: rgba(0, 0, 0, .5);
    }

    & .swiper-container {
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    & .swiper-button-next,
    & .swiper-button-prev {
      width: 41px;
      height: 41px;
      position: absolute;
      bottom: 0;
      right: 43px;
      top: auto;
      left: auto;
      margin: 0;
      background: #d0021b url(svg/slider-arrow-left-white.svg) 50% no-repeat;
      background-size: 8px 16px;
    }

    & .swiper-button-next {
      right: 0;
      background: #d0021b url(svg/slider-arrow-right-white.svg) 50% no-repeat;
      background-size: 8px 16px;
    }

    & blockquote {
      width: 820px;
      margin: 0 auto;

      & p {
        margin-bottom: 0;
        font-family: roboto, Helvetica, Arial, sans-serif;
        font-size: 35px;
        font-weight: 700;
        line-height: 1.25em;
        color: #fff; font-style: italic;
      }

      & cite {
        display: block;
        margin-top: 25px;

        & .image {
          display: inline-block;
          vertical-align: middle;
          width: 175px;
          height: 175px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 35px;
        }

        & .info {
          display: inline-block;
          vertical-align: middle;
        }

        & span {
          display: block;
        }

        & .name {
          font-family: rift, Helvetica, Arial, sans-serif;
          font-size: 23px;
          font-weight: 700;
          color: #fff;
          text-transform: uppercase;
        }

        & .title {
          margin-top: 10px;
          font-family: rift, Helvetica, Arial, sans-serif;
          font-size: 1rem;
          font-weight: 700;
          color: #fff;
          text-transform: uppercase;
        }
      }
    }

    @media only screen and (max-width: 991.98px) {
      padding-bottom: 1rem;

      & .slide-container {
        margin-top: 1rem;
      }
    }

    @media only screen and (max-width: 1399px) {
      width: 90%;
    }

    @media only screen and (max-width: 1159px) {
      & blockquote {
        width: 80%;
      }
    }

    @media only screen and (max-width: 999px) {

      & blockquote {
        padding-block: 2rem;
      }

      & blockquote p {
        font-size: 28px;
      }

      & blockquote cite .image {
        width: 135px;
        height: 135px;
        margin-right: 25px;
      }
    }

    @media only screen and (max-width: 599px) {

      & .slide-container {
        height: auto;
      }



      & blockquote p {
        font-size: 24px;
        line-height: 1.3em;
      }

      & blockquote cite .image {
        width: 100px;
        height: 100px;
        margin-right: 20px;
      }
    }
  }

  /* =========================================
     Comparison Band
     ========================================= */

  & .comparison-band { 
    
    
    &:has(.comparison-table-wrap) {padding-bottom:100px }

    & .info {
      max-width: 1100px;
      width: 90%;
      margin: 0 auto;
      text-align: center;
    }


    & .comparison-table-wrap {
      max-width: 1100px;
      width: 90%;
      margin: 0 auto;
      overflow-x: auto;
    }

    & .comparison-grid {
      min-width: 480px;
    }

    & .comparison-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;

      &:not(.is-header) .comparison-cell {
        transition: background-color 0.2s ease;
      }

      &:not(.is-header):hover .comparison-cell {
        background: rgba(208, 2, 27, 0.05);
      }

      &:not(.is-header):hover .comparison-cell.cell-heading {
        background: rgba(208, 2, 27, 0.1);
      }

      &.is-header .comparison-cell {
        font-weight: 700;
        background: #1a1a1a;
        color: #fff;
        font-family: rift, Helvetica, Arial, sans-serif;
        font-size: 1.1rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      &.is-header .comparison-cell.cell-heading {
        background: #d0021b;
      }
    }

    & .comparison-cell {
      padding: 16px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-family: roboto, Helvetica, Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.5;
      color: #1a1a1a;

      &.cell-heading {
        font-weight: 700;
        background: #f5f5f5;
      }
    }

    @media only screen and (max-width: 767px) {
      & .info {
        width: 90%;
        margin: 0 auto;
        text-align: left;
      }
    }

    @media only screen and (max-width: 599px) {
      & .comparison-table-wrap {
        overflow-x: visible;
      }

      & .comparison-grid {
        min-width: 0;
      }

      & .comparison-row {
        grid-template-columns: 1fr;
        border-bottom: 2px solid rgba(0, 0, 0, 0.12);
        margin-bottom: 8px;

        &.is-header {
          display: none;
        }

        & .comparison-cell {
          border-bottom: none;
        }
      }

      & .comparison-cell.cell-a::before,
      & .comparison-cell.cell-b::before {
        content: attr(data-col-header);
        display: block;
        font-family: rift, Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #d0021b;
        margin-bottom: 3px;
      }
    }

  }

  /* =========================================
     WYSIWYG Band
     ========================================= */

  & .rm-section__wysiwyg-band {
    padding-block: 75px;
    background: #fff;

    & .inner-wrap {
      max-width: 84%;
      margin: 0 auto;
      position: relative;
    }
  }



  


}