/*
	- as of 2022.07.21, only AddPromo.cshtml
*/


/* ======================== PROMOS ======================== */
/* ======================== PROMOS ======================== */
/* ======================== PROMOS ======================== */
.promos {
	display: flex;
	width: 100%;
	position: relative;
	flex-flow: column nowrap;
}
.promos.loading:before {
	left: calc(50% - 30px); /* assuming default size of 60px */
	top: 3rem;
}
.promos > .promo-code {
	width: 100%;
	overflow: hidden;
}

.promo {
	width: 100%;
	flex-flow: column nowrap;
	position: relative;
	margin-bottom: 3rem;
	justify-content: center;
	border: 1px solid #ccc;
}


/* non-linked img */
/*.promo > img { width: 100%; }*/
.promo img {
/*	display: none;*/
	width: 100%;
	margin: 0 auto;
}

/*
.promo .portrait-image,
.promo .responsive-image { display: block; }
*/

.promo-image-wrapper,
.promo-copy-wrapper {
	width: 100%;
	max-width: 600px;
	margin: auto;
}
.promo-copy-wrapper:has(.promo-copy-heading:not(:empty), .promo-copy:not(:empty)) { margin-bottom: .6rem; } /* To Hide the space and both if both promo heading and promo description are empty */

.promo-image-wrapper > a { display: block; }

.promo-copy-wrapper:has(.promo-copy-heading:empty, .promo-copy:empty) {
    display: none; /* Hide the wrapper if both elements are empty */
}
.promo-copy-wrapper:has(.promo-copy-heading:not(:empty), .promo-copy:not(:empty)) {
    display: block; /* Show the wrapper if either element has content */
}
.portrait-image { max-width: 600px; }
.landscape-image { display: none; }

/*
@media all and (min-width: 600px) {
	.portrait-image { display: none; }
	.landscape-image { display: block; }
}
*/

/*
	if one image only? DNU .portrait-image, DNU .landscape-image ??? not yet ...
	... .promo-image-wrapper.responsive-image-wrapper > .responsive-image ???
*/
.responsive-image-wrapper {
	width: 100%;
	max-width: 600px;
	margin-bottom: 1.5rem;
}
.responsive-image {
	display: block;
	max-width: 600px
}



/*
.content-preview .promo.portrait,
.content-preview .promo.landscape,
.content-live .promo.portrait,
.content-live .promo.landscape { display: flex; }
*/

.promo-copy-heading,
.promo-copy-wrapper {
	width: 100%;
	margin: 0 auto;
}

/* unset @ MQ */
.promo-copy-wrapper {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
}



.promo-copy-heading {
	width: auto;
	max-width: 90%;
	margin: 0 auto .9rem;
	font-size: 1.35rem;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}

.promo-copy {
	max-width: 60ch;
	margin: 0 auto 1.11rem;
	padding: 0 .9rem;
	font-size: .9rem;
	text-align: center;
}

@media all and (min-width: 900px) {
	.promo { max-width: 100vw; }
	.promo.responsive { flex-flow: row nowrap; }

	.promo-image-wrapper,
	.promo-copy-wrapper { max-width: unset; }
	.promo-copy-wrapper:has(.promo-copy-heading:not(:empty), .promo-copy:not(:empty)) { margin-bottom: .9rem; }  /* To Hide the space and both if both promo heading and promo description are empty */

	.portrait-image { display: none; }
	.landscape-image { display: block; }
} /* MQ */


@media all and (min-width: 900px) {
	.responsive-image-wrapper { margin-bottom: unset; }
} /* MQ */





.promo:not(.unilingual) { display: none; }
/* .promo:not(.unilingual) { display: none; } */
/*.en .promo.en,*/
/*.fr .promo.fr,*/
/*.es .promo.es,*/

.content-preview .promo-en,
.content-preview .promo-fr,
.content-preview .promo-es,
.en .promo-en,
.fr .promo-fr,
.es .promo-es,
.promo.unilingual { display: flex; }


@media all and (min-width: 900px) {
/*
	.promo.portrait,
	.promo.portrait.on,
	.promo.portrait.unilingual { display: none; }

	.promo.landscape.on,
	.promo.landscape.unilingual { display: flex; }

*/
} /* MQ */