/*
.wp-block-button.has-size-large .wp-block-button__link {
	padding: 25px 45px;
}

.wp-block-button.has-size-small .wp-block-button__link {
	padding: 5px 15px;
}
*/
.webexpo-speakers {

	transition: transform 0.5s, opacity 0.5s;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	&.overview-display {
		position: relative;

		.speaker-grid-overview-cta {
			display: none;
			position: static;
			z-index: 2;
			width: fit-content;
			padding: 0;
			box-sizing: border-box;
			margin-top: 1em;
			flex-basis: 100%;
			order: 999;
			display: flex;
			justify-content: center;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button {
			width: auto;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button a,
		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button span {
			white-space: nowrap;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button a {
			width: 100%;
			display: inline-flex;
			justify-content: center;
			position: relative;
			padding-left: 0;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button a.includeIcon::before {
			position: absolute;
			left: 0;
			margin: 0;
			float: none;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button a.includeIcon span {
			flex: 1;
			text-align: center;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button a.includeIcon {
			padding-left: calc(48px * var(--webexpo-size) + 1rem);
		}
	}

	&.overview-display.overview-display-all {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0;

		.speaker-grid-overview-cta {
			display: flex;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			margin-top: 0;
			padding: 0 12px;
			width: 100%;
		}

		.speaker-grid-overview-cta .wp-block-webexpo-blocks-button {
			width: 100%;
		}

		.grid-box {
			width: auto;
			margin: 0;
		}

		.grid-box:nth-of-type(1n + 10) {
			display: none;
		}

		.grid-person,
		.presenterPosition,
		.session-tags {
			display: none;
		}

		.grid-image {
			width: 100%;
			aspect-ratio: 1 / 1;
		}

		.grid-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		a.grid-link {
			display: block;
		}
	}

	&.overview-display.overview-display-small {
		.speaker-grid-overview-cta {
			display: flex;
		}

		@media only screen and (max-width: 782px) {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 0;

			.speaker-grid-overview-cta {
				display: flex;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-top: 0;
				padding: 0 12px;
				width: 100%;
			}

			.speaker-grid-overview-cta .wp-block-webexpo-blocks-button {
				width: 100%;
			}

			.grid-box {
				width: auto;
				margin: 0;
			}

			.grid-box:nth-of-type(1n + 10) {
				display: none;
			}

			.grid-person,
			.presenterPosition,
			.session-tags {
				display: none;
			}

			.grid-image {
				width: 100%;
				aspect-ratio: 1 / 1;
			}

			.grid-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			a.grid-link {
				display: block;
			}
		}
	}

	&.overview-display.overview-display-large {
		.speaker-grid-overview-cta {
			display: flex;
		}

		@media only screen and (min-width: 783px) {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 0;

			.speaker-grid-overview-cta {
				display: flex;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-top: 0;
				padding: 0 12px;
				width: 100%;
			}

			.speaker-grid-overview-cta .wp-block-webexpo-blocks-button {
				width: 100%;
			}

			.grid-box {
				width: auto;
				margin: 0;
			}

			.grid-box:nth-of-type(1n + 10) {
				display: none;
			}

			.grid-person,
			.presenterPosition,
			.session-tags {
				display: none;
			}

			.grid-image {
				width: 100%;
				aspect-ratio: 1 / 1;
			}

			.grid-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			a.grid-link {
				display: block;
			}
		}
	}


	.cols-4 {
		.grid-box {
			margin: 6px 2px 0;

			@media only screen and (min-width: 1280px) {
				width: calc(25% - 4px);
			}
		}
	}


	&.noFilters {

		/* for screens between 782px and 1280px, we want to hide the last item */
		@media only screen and (min-width: 782px) and (max-width: 1280px) {

			/* hack for hiding 10th item on homepage for now, cause we don't want single box on its own */
			.grid-box:nth-of-type(11) {
				display: none;
			}
		}


	}

	&.useFilters {
		min-height: 40vh;
	}

	&.loading {
		opacity: 0;
	}


	.grid-box {
		display: flex;
		/*justify-content: space-between;*/
		flex-direction: column;
		position: relative;

		transition: opacity 0.5s ease, transform 0.5s ease;
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
		height: fit-content;


		&.adding {
			opacity: 0;
			/* Start invisible */
			transform: scale(0.8);
			/* Start slightly smaller */
		}

		&.removing {
			display: none;
			/* Keep visible to snap out */
			transform: scale(1);
			/* Maintain scale for snapping */
		}

		.grid-person {
			height: 70px;
		}

		.grid-details {
			height: 90px;
		}

		background-color: var(--webx-void-60);

		overflow: hidden;

		a.grid-link {
			display: contents;

			.grid-flexi {
				border-style: solid;
				border-width: 1px;
				width: 100%;
				text-transform: uppercase;
				justify-content: center;
				text-align: center;
				background-color: var(--webx-void-60);
				border-left-width: 10px;
				border-color: rgba(255, 255, 255, 0.5);

				display: flex;
				align-items: center;
				background-image: var(--webexpo-buttonPattern);
				background-repeat: repeat-y;
				background-size: auto;
				background-position: -35px 0;
			}

			.grid-person {
				&::after {
					content: "";

					transition: all 0.5s;

					mask-image: var(--webexpo-right-triangle);
					aspect-ratio: 1;
					width: 5%;
					position: absolute;
					top: 4px;
					right: 4px;
					background-color: var(--webx-ice-50);
				}
			}

			.grid-image {
				cursor: pointer;
				
				aspect-ratio: 1;

				&::before {
					filter: saturate(4) sepia(0.6) hue-rotate(140deg);
					left: 4px;
				}

				&::after {
					filter: saturate(10) sepia(0.6) hue-rotate(310deg);
					left: -4px;
					margin-top: -100%;
				}
			}

			&:hover::after {
				background: repeating-linear-gradient(transparent,
						transparent 4px,
						rgba(0, 0, 0, 0.7) 4px,
						rgba(0, 0, 0, 0.9) 3px);
				background-position-y: 8px;
			}

			&:hover .grid-person::after {
				/*rotate: 180deg;*/
				width: 24px;
				top: 0px;
				right: 0px;
			}
		}
	}


	/* default */
	&.cols-5 {
		.grid-box {
			@media only screen and (min-width: 1280px) {
				width: calc(20% - 4px);
				margin: 6px 2px 0;

				
			}
		}
	}

	&.cols-7 {
		.grid-box {

			@media only screen and (min-width: 1280px) {
				width: calc(14% - 4px);
				margin: 6px 2px 0;


				.grid-person {
					font-size: 20px;
				}

				.presenterPosition{
					font-size: 14px;
				}

				span.tag {
					font-size: 12px;
				}
			}
		}
	}

	&.cols-6 {
		.grid-box {

			@media only screen and (min-width: 1280px) {
				width: calc(16.6% - 4px);
				margin: 6px 2px 0;
			}
		}
	}

	&.cols-4 {
		.grid-box {
			@media only screen and (min-width: 1280px) {
				width: calc(25% - 4px);
				margin: 6px 2px 0;
			}
		}
	}

	&.cols-3 {
		.grid-box {
			@media only screen and (min-width: 1280px) {
				width: calc(33% - 4px);
				margin: 6px 2px 0;
			}
		}
	}

	.grid-box {
		@media only screen and (min-width: 782px) {
			width: calc(33% - 2px);
			margin: 6px 2px 0;
		}


		@media only screen and (max-width: 782px) {
			width: calc(50% - 4px);
			margin: 6px 2px 0;
		}
	}
}




.speaker-grid.cols-1 {
	grid-template-columns: repeat(1, 1fr);
}

.speaker-grid.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* Ensure disabled speaker links do not show pointer cursor */
.webexpo-speakers .grid-box a.grid-link.disabled,
.webexpo-speakers .grid-box a.grid-link.disabled:hover {
	cursor: default !important;
}
.webexpo-speakers .grid-box a.grid-link.disabled .grid-image,
.webexpo-speakers .grid-box a.grid-link.disabled .grid-image:hover {
	cursor: default !important;
}

.speaker-grid.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.speaker-grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.speaker-grid.cols-5 {
	grid-template-columns: repeat(5, 1fr);
}

/* reduce the number of columns on mobile */
@media (max-width: 1280px) {
	.speaker-grid.cols-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 992px) {
	.speaker-grid.cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.speaker-grid.cols-5 {
		grid-template-columns: repeat(2, 1fr);

		&.mobilelimit {
			.grid-box:nth-of-type(1n+5) {
				display: none;
			}

			/* ideally this wouldn't just hide content, need to fix */
		}
	}

}

.tabs-ul .tab-content {
	padding-top: 0;
}

.tab-content .wp-block-webexpo-blocks-panel-heading.is-style-heading-group {
	width: 100%;
	margin-top: -1em;
}

.tab-content .wp-block-columns {
	padding: 1em;
}

.tab-content .wp-block-webexpo-blocks-panel-heading {
	margin: 0;
}

.tab-content .roundedLogo {
	background: white;
	border-radius: 10px;
}


.grid-link:hover .session-tags {
	opacity: 1;
	left: 4px;
}

.session-tags {
	display: flex;
	opacity: 0;
	position: absolute;
	bottom: 94px;
	left: 4px;
	left: -200px;
	height: 100%;
	flex-direction: column;
	justify-content: flex-end;
	transition: all 0.5s ease;
}

.grid-image img {
	width: 100%;
	aspect-ratio: 1;
}

span.tag {
	background-color: var(--webx-brand-1-100);
	color: var(--webx-title-color);
	width: fit-content;
	padding-right: 1em;
	margin-bottom: .25em;
	padding-left: .5em;
	clip-path: polygon(0 0px, calc(100% - 0.25em) 0, 100% 50%, calc(100% - 0.25em) 100%, 0 100%);
}

button#resetFilters {
	color: var(--webexpo-pink-100);
	font-weight: bold;
	font-family: "Ladislav-Bold";
	border-color: var(--webexpo-pink-100);
	height: 30px;
	padding: 0 10px 1px;
	background-color: var(--webx-void-80);
	border: var(--filter-border) solid var(--webexpo-pink-100);
}

button#resetFilters:hover {
	background-color: var(--webx-brand-1-100);
}




.webexpo-list-item {
	display: flex;
	padding-bottom: .25em;
	list-style-type: none !important;
	font-size: 1.5em;
}

.webexpo-list-item span.webexpo-list-icon {
	margin: 0 0.5em 0 0em;
}


body.disabled {
	height: 100vh !important;
	overflow: hidden;
	transform: all 1s;
}

.wrap {
	flex-wrap: wrap;
}

/* In your FloatingCart.vue or global stylesheet */
.disabled div#floating-cart-container {
	background: rgba(0, 0, 0, .4);
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 1000000;
	top: 0;
	left: 0;
	backdrop-filter: blur(2px);
	overflow: hidden;
}

.floating-cart {
	position: fixed;
	max-height: 90vh;
	overflow: scroll;
	bottom: 0%;
	height: auto;
	background-color: #fff;
	color: #000;
	z-index: 9999;
	/* Show on top of everything */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	padding: 1rem;

	max-width: 1600px;
	width: 100%;
	/* Makes it responsive */
	margin-left: calc((100vw - min(100%, 1600px)) / 2);
}

@media (max-width: 992px) {
	.floating-cart {
		margin-left: 0;
	}
}

.floating-cart a {
	color: black;
	text-decoration-line: underline;
}

.cart-items li .item {
	display: contents;
}

.disabled .floating-cart {
	/*
    left: calc((100vw - min(100%, 1280px)) / 2);
    width: 1280px;
	height: auto;
	*/
	max-height: 90vh;
	top: 10vh;
	bottom: inherit;
	overflow: auto;
}


.left.cart-items {
	flex-grow: 1;
}



.floating-cart {
	/* In case you want to style the inner container */

	h3 {
		font-size: 1.3em;
		font-weight: bold;
	}
}

/*
  .add-to-cart button.minus_qty, .add-to-cart button.plus_qty {
    aspect-ratio: 1;
    background-color: white;
    color: var(--webx-system);
    font-size: 2em;
    font-weight: bold;
    padding: 0em 0.5em;
}

.floating-cart button.continue, .floating-cart button.back{
	font-size: 2em;
    border-radius: 5px;
    padding: 0 1em;
}
.floating-cart button.continue {
    background-color: green;
    color: white;
}

.floating-cart button.back {
	background-color: rgb(142, 142, 142);
	color: rgb(36, 36, 36);
}
*/

.currency-picker {
	font-size: 1.35em;
}

.currency-picker.currency {
	font-weight: bold;
}

.attendee-fields {
	/*
	margin: 0.25em;
    margin-left: 1em;
	margin-right: 1rem;
	*/
}

#promo,
.billing-info input,
.billing-info select,
.attendee-fields input {
	border: solid 1px black;
	margin: 2px;
	border-radius: 2px;
	padding: 0.25em 1em;
}

.floating-cart button.close {
	border: solid;
	border-color: rgba(0, 0, 0, .7);
	color: rgba(0, 0, 0, .7);
	background: white;
	border-radius: 100%;
	padding: revert;
	font-family: 'webexpo24';
}

.floating-cart button.close:hover {
	color: rgba(0, 0, 0, 1);
	border-color: rgba(0, 0, 0, 1);

}

.webexpo-speakers.overview-display.overview-display-all .grid-box a.grid-link .grid-person,
.webexpo-speakers.overview-display.overview-display-all .grid-box a.grid-link .presenterPosition,
.webexpo-speakers.overview-display.overview-display-all .grid-box a.grid-link .session-tags {
	display: none;
}

.webexpo-speakers.overview-display.overview-display-all .grid-box a.grid-link {
	display: block;
}

.webexpo-speakers.overview-display.overview-display-all .grid-box .grid-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 0;
}

.webexpo-speakers.overview-display.overview-display-all .grid-box .grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

@media only screen and (max-width: 782px) {
	.webexpo-speakers.overview-display.overview-display-small .grid-box a.grid-link .grid-person,
	.webexpo-speakers.overview-display.overview-display-small .grid-box a.grid-link .presenterPosition,
	.webexpo-speakers.overview-display.overview-display-small .grid-box a.grid-link .session-tags {
		display: none;
	}

	.webexpo-speakers.overview-display.overview-display-small .grid-box a.grid-link {
		display: block;
	}

	.webexpo-speakers.overview-display.overview-display-small .grid-box .grid-image {
		width: 100%;
		aspect-ratio: 1 / 1;
		border: 0;
	}

	.webexpo-speakers.overview-display.overview-display-small .grid-box .grid-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border: 0;
	}
}

@media only screen and (min-width: 783px) {
	.webexpo-speakers.overview-display.overview-display-large .grid-box a.grid-link .grid-person,
	.webexpo-speakers.overview-display.overview-display-large .grid-box a.grid-link .presenterPosition,
	.webexpo-speakers.overview-display.overview-display-large .grid-box a.grid-link .session-tags {
		display: none;
	}

	.webexpo-speakers.overview-display.overview-display-large .grid-box a.grid-link {
		display: block;
	}

	.webexpo-speakers.overview-display.overview-display-large .grid-box .grid-image {
		width: 100%;
		aspect-ratio: 1 / 1;
		border: 0;
	}

	.webexpo-speakers.overview-display.overview-display-large .grid-box .grid-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border: 0;
	}
}