/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import (reference) "/apps/globalmarketingplatform/clientlibs/utils/variables.less";

.captioned-card {
  color: @brand-neutrals-gray-darkest;

  >.container * {
    margin-bottom: 0;
  }

  .captioned-card--top {
    margin-bottom: 40px;
  }

  .captioned-card-title {
    font-size: 28px;
    line-height: 36px;
    text-align: center;
    letter-spacing: -0.42px;
    font-weight: 500;
    margin-bottom: 24px;
    font-family: @family-metlife;
  }

  .captioned-card-subtitle {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    font-family: @family-noto;
  }

  .captioned-card__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .captioned-card__card .captioned-card__card--content-container {
    background-color: @brand-neutrals-gray-lightest;
  }

  .captioned-card__card--content-top {
    padding: 30px 15px 24px;
    display: block;

    .captioned-card__card-container {
      display: block;
    }
  }

  .captioned-card__card__copy-container {
    padding: 0px 15px 30px;
  }

  .captioned-card__image {
    height: 138px;
  }

  .captioned-card__card__title-container {
    background-image: -o-linear-gradient(left, @undefined-gradient-black -1%, @undefined-gradient-blue 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(-1%, @undefined-gradient-black), to(@undefined-gradient-blue));
    background-image: linear-gradient(to right, @undefined-gradient-black -1%, @undefined-gradient-blue 100%);
  }

  .captioned-card__card__title-text {
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 1.5px;
    font-weight: 500;
    font-family: @family-metlife;
    color: @brand-neutrals-white;
    padding: 12px;
  }

  .captioned-card__card__copy-text {
    font-size: 14px;
    line-height: 21px;
    font-family: @family-noto;
    color: @brand-neutrals-black;
  }

  .captioned-card--bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  &.price-card {
    background-color: @swatches-beta-blue-blue-lightest;
    padding-bottom: 60px;
    padding-top: 60px;

    .captioned-card--top {
      margin-bottom: 32px;
    }

    .captioned-card-title {
      font-size: 30px;
      line-height: 45px;
      margin-bottom: 0;
    }

    .captioned-card-subtitle {
      font-family: @family-metlife;
      font-size: 18px;
      line-height: 27px;
      margin-top: 12px;
    }


    .captioned-card__card {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      img{
        height: 100%;
      }

      .captioned-card__card__copy-container,
      .captioned-card__card--content-container {
        background-color: @brand-neutrals-white;
      }

      .captioned-card__card--content-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-style: solid;
        border-width: 3px;
        border-image-source: linear-gradient(258deg, @brand-primary-ml-b1-base, @brand-primary-ml-green-base);
        border-image-slice: 1;
        -webkit-box-shadow: 4px 4px 12px 2px rgba(182, 182, 182, 0.25);
        box-shadow: 4px 4px 12px 2px rgba(182, 182, 182, 0.25);
        padding: 0;
      }

      .captioned-card__card--content-top{
        width: 100%;
        padding: 0;
        border-style: solid;
        border-width: 3px;
        border-image-source: linear-gradient(258deg, @brand-primary-ml-b1-base, @brand-primary-ml-green-base);
        border-image-slice: 1;
        border-right: none;
        border-left: none;
        border-top: none;
      }

      .captioned-card__card__copy-container {
        padding: 20px 15px;
        width: 100%;
      }
    }

    .captioned-card__card__title-text{
      color: @brand-neutrals-gray-darkest;
      font-family: @family-noto;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      padding: 0;
      letter-spacing: normal;
      text-align: center;
    }

    .captioned-card__card__button {
      text-align: center;
      margin-top: 8px;
      a {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }

    .captioned-card__card__button svg {
      width: 8px;
      height: 11px;
      color: @brand-primary-ml-b2;
      fill: none;
      stroke: @brand-primary-ml-b2;
      margin-top: 3px;
      margin-left: 8px;
    }
  }
    &.prominent-caption
  	{
    background-color: #e6f4fb;
	padding-top: 80px;
    padding-bottom: 80px;

      .captioned-card-title
     {
	margin-bottom: 16px;

    }
	.captioned-card--top {
      margin-bottom: 48px;
    }
	
    .captioned-card__card {
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
 	 -ms-flex-direction: column;
 	 flex-direction: column;
}

   .captioned-card__card--content-container {
       background-color: #ffffff;
       border-radius: 8px;

      }

   .captioned-card__card--content-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border:1px solid #a7a8aa;
        -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
        padding: 0;
      }

   .captioned-card__card--content-top
            {
         width: 100%;
        padding: 0;
        border-style: solid;
        border-width: 1px;
        border-bottom: #a7a8aa;

        border-right: none;
        border-left: none;
        border-top: none;
        }

    .captioned-card__card {
        img
            {
            height: auto;
            border-radius: 8px 8px 0 0;
		

        	}
    	}

	.captioned-card__copy-container
            {
            background-color: #ffffff;
		padding-top: 24px;
            padding-bottom: 24px;
		sup {
            font-size: 12px;
        }

        }
     .captioned-card__card__title-text
            {
	padding: 0 0 8px 0;           
 	color: #333;
			}
	.captioned-card__card__copy-text
            {
            text-align: center;
        }
	.captioned-card__card__button 
            {
	width: 100%;
        padding-top: 16px;
        padding-bottom: 16px;
	border-top:  1px solid #a7a8aa;
        }
	.captioned-card__card__link{
            justify-content: center;
        }
	
    }

  @media screen and (max-width: 767px) {
    .captioned-card__card {
      margin-bottom: 30px;

      &:last-of-type {
        margin-bottom: 0px;
      }
    }

    &.price-card {
      .captioned-card__card {
        margin-bottom: 40px;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
	&.prominent-caption
   {
   .captioned-card-title
     {
	text-align: left;
    }

   .captioned-card-subtitle
     {
    text-align: left;

        }
   .captioned-card__card {
      margin-bottom: 32px;
	 &:last-of-type {
        margin-bottom: 0px;
      }

        }
	.captioned-card__card__button{
	   svg {
      width: 11.314px;
      height: 11.314px;
	margin-top: 3px;

    		}
        }
       
  }
}

  @media screen and @tablet-width-min {
    .captioned-card-title {
      font-size: 38px;
      line-height: 57px;
    }

    .captioned-card-subtitle {
      font-size: 18px;
      line-height: 27px;
    }

    .captioned-card__card__title-text {
      padding: 12px;
    }

    .captioned-card__card:nth-of-type(n+4) {
      margin-top: 30px;
    }

    &.price-card {
      padding-bottom: 64px;
      padding-top: 64px;

      .captioned-card__card:nth-of-type(n+3) {
        margin-top: 30px;
      }

      .captioned-card--top {
        margin-bottom: 36px;
      }

      .captioned-card-subtitle {
        margin-top: 16px;
      }
    }
  }

  @media screen and @desktop-width-min {
    .captioned-card--top {
      margin-bottom: 60px;
    }

    .captioned-card-title {
      font-size: 44px;
      line-height: 50px;
      letter-spacing: -0.99px;
    }

    .captioned-card__card--content-top {
      padding: 30px 48px;
    }

    .captioned-card__card__copy-container {
      background-color: @brand-neutrals-gray-lightest;
      padding: 0px 24px 30px;
    }

    .captioned-card__card--content-top {
      a.captioned-card__card-container>div {

        &:hover,
        &:focus {
          text-decoration: none;
        }

        &:hover {
          -webkit-transform: translateY(-6px);
          -ms-transform: translateY(-6px);
          transform: translateY(-6px);
          -webkit-box-shadow: 0 10px 0 -4px @brand-neutrals-gray-medium;
          box-shadow: 0 10px 0 -4px @brand-neutrals-gray-medium;
        ;
        }
      }
    }

    &.price-card {
      padding-bottom: 80px;
      padding-top: 80px;

      .captioned-card--top {
        margin-bottom: 32px;
      }

      .captioned-card__card:nth-of-type(n+3) {
        margin-top: 0;
      }

      .captioned-card__card:nth-of-type(n+4) {
        margin-top: 30px;
      }

      .captioned-card-title {
        font-size: 32px;
        line-height: 48px;
      }
    }
        &.prominent-caption{
        .captioned-card__card__copy-container
            {
            background-color: @brand-neutrals-white;
                padding: 0;
        }
        }
  }
}

.keyboard-active {
  .captioned-card {
    a.captioned-card__card-container:focus {
      outline-offset: 3px;
      outline-width: 3px;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
    }
  }
}