/*
 block scroll
*/

body:has(.js-popin-visible) {
    overflow: hidden;
}

.popin{
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;

  background-color: #00000059;
  overflow: scroll;
	justify-content: center;
	align-items: center;

	.popin-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
    background-color: var(--color-neutral);
		padding: 20px;
		padding-top: 40px;
		padding-bottom: 40px;

		display: flex;
		flex-direction: column;

		.left {

      img {
        object-fit: cover;
        max-height: 500px;
      }
			padding-top: 20px;
			/* overflow: hidden; */
		}

		.right {
			padding: 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.right-content {
        max-width: 662px;
        padding-bottom: 80px;

				h2 {
					font-weight: 250;
					text-transform: uppercase;
				}

				hr {
					width: 80px;
					height: 1px;
					background-color: var(--color-primary);
					margin-top: 32px;
					margin-bottom: 32px;
					margin-left : 0;
				}
			}
		}


		.close_button {
			z-index: 102;
			position: absolute;
			right: 20px;
			top: 20px;
			width: 30px;
			height: 30px;
			background-image: url(../../images/popin/cross.svg);
			background-repeat: no-repeat;
			background-size: contain;
		}

		.cta-wrapper {
			display: flex;
			justify-content: end;
			margin:0;
		}
	}
}

@media all and (min-width: 700px) {
	.popin{


		.popin-wrapper {
      .left {
        img {
          max-height: 700px;
        }
      }

			.close_button {
				right: 40px;
				top: 40px;
				width: 30px;
				height: 30px;
			}
		}
	}
}
@media all and (min-width: 1200px) {
	.popin{
    overflow: unset;
		.popin-wrapper {
			padding:40px;
			overflow-y: auto;
      justify-content: center;
			flex-direction: row-reverse;

			.left{
				padding-top: unset;
				/* height: calc(100% - 80px); */
				overflow-y: hidden;

        img {
          max-height: 100%;
        }
			}
			.right{
				padding: 40px 40px 40px 40px;

        .right-content {
          padding-bottom: 0;
        }
			}
			.close_button {
				right: 40px;
				top: 40px;
				width: 40px;
				height: 40px;
			}
		}
	}
}


/*
Pop in visibility control
*/

.js-popin-visible {
    display: flex;
}