/********************************************************/
/*
/*      Cruises block CSS
/*
/********************************************************/
.wp-block-cke-cruises {
	grid-row: span var(--item-count, 1);
	display: grid;
	/* grid-template-columns: 27.5% 22.5% 27.5%; */
	grid-template-columns: 27.5% 35% 27.5%;
	/* grid-auto-rows: 100svh; */
	grid-auto-rows: max-content;
	justify-content: space-between;
	row-gap: var(--wp--preset--spacing--10);
	/* height: calc(100svh * var(--item-count, 1)) !important;	 */
	/* max-height: calc(100svh * var(--item-count, 1)) !important; */
	
	/* Overwrite editor style */
	&:not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer):not(.alignfull, .alignwide, .wp-block-spacer) {
		width: 100% !important;
		max-width: var(--wp--style--global--wide-size) !important;	
	}
	
	/* Margins */
	& > .cruise-infoboxes > .cruise-infobox * {
		margin-block: unset;
	}
	
	/* Images & infoboxes columns */
	& > :is(.cruise-images, .cruise-infoboxes) {
		grid-row: inherit;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: subgrid;
		width: 100%;
		height: 100%;
		margin-block: unset;
		
		/* Images */
		&.cruise-images {
			&.left {
				grid-column: 1;
			}
			
			&.right {
				grid-column: 3;
			}
			
			&.tablet-only {
				display: none;
				
				& > div {
					display: grid;
					grid-template-columns: 100%;
					grid-template-rows: repeat(2, minmax(0, 1fr));
					row-gap: var(--wp--custom--outer-pad);
					margin-block: calc(100svh / 6);
					
					figure {
						height: 100%;
					}
				}
			}
			
			figure {
				align-self: center;
				position: relative;
				height: calc(100svh * (2/3));
				margin: unset;
				border-radius: var(--wp--custom--border-radius--medium);
				overflow: clip;
				pointer-events: none;
				
				img {
					display: block;
					position: absolute;
					inset: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		
		/* Infoboxes */
		&.cruise-infoboxes {
			grid-column: 2;
			
			& > .cruise-infobox {
				align-self: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				height: max-content;
				max-height: calc(100svh * (2/3));
				text-align: center;
				/* margin-block-start: calc(100svh / 6); */
				/* opacity: 0;
				transition: opacity var(--wp--custom--speed--medium);
				
				&.active {
					opacity: 1;
				} */
				
				& > .cruise-images.mobile-only {
					display: none;
				}
				
				& > h6:first-child {
					margin-block-start: calc((1em + var(--wp--preset--spacing--1)) * -1);
				}
				
				& > :is(.cruise-title, .cruise-price) {
					margin-block-start: var(--wp--preset--spacing--1);
				}
				
				& > :is([class*="cruise-details"], .cruise-excerpt) {
					margin-block-start: var(--wp--preset--spacing--1-5);
				}
				
				& > [class*="cruise-details"] {
					--items-per-row: 3;
					--col-gap: var(--wp--preset--spacing--3);
					
					display: flex;
					justify-content: center;
					align-items: start;
					column-gap: var(--wp--preset--spacing--3);
					
					& > * {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: var(--wp--preset--spacing--0-25);
						max-width: calc((100% - (var(--col-gap) * (var(--items-per-row) - 1))) / var(--items-per-row));
						font-size: var(--wp--preset--font-size--medium);
						color: var(--wp--custom--color--default--text--headings);
						
						&::before {
							content: '';
							width: 25px;
							height: auto;
							min-height: 45px;
							aspect-ratio: 1;
							color: inherit;
							background-repeat: no-repeat;
							background-position: center;
							background-color: var(--wp--custom--color--default--text--headings);
							
							-webkit-mask: var(--svg, unset);
							mask: var(--svg, unset);
							mask-repeat: no-repeat;
							mask-position: center;
						}
						
						&.cruise-duration::before {
							--svg: url(../../assets/images/em-icon-captains-wheel.svg);
							
							width: 45px;
							aspect-ratio: 1;
						}
						
						&.cruise-meal::before {
							--svg: url(../../assets/images/em-icon-meal.svg);
							
							width: 22px;
							aspect-ratio: 23/47;
						}
						
						&.cruise-cocktail::before {
							--svg: url(../../assets/images/em-icon-cocktail.svg);
							
							width: 13px;
							aspect-ratio: 14/43;
						}
						
						&.cruise-entertainment::before {
							--svg: url(../../assets/images/em-icon-entertainment.svg);
							
							width: 38px;
							aspect-ratio: 39/43;
						}
						
						&.cruise-other::before {
							--svg: url(../../assets/images/em-lettrine.svg);
							
							width: 38px;
							aspect-ratio: 245/199;
							mask-size: contain;
						}
					}
				}
				
				& > .cruise-excerpt {
					max-width: 90%;
					margin-inline: auto;
				}
				
				& > .wp-block-buttons {
					margin-block-start: var(--wp--preset--spacing--2-5);
				}
			}
		}
	}
	
	/******************************/
	/* Backend style
	/******************************/
	:is(.edit-post-visual-editor, .editor-styles-wrapper) & {
		display: flex;
		/* grid-auto-rows: calc(100svh - 64px - 25px); */
		/* height: calc((100svh - 64px - 25px) * var(--item-count, 1)) !important;	 */
		
		/* Images & infoboxes columns */
		& > :is(.cruise-images, .cruise-infoboxes) {
			display: flex;
			flex-direction: column;
			row-gap: var(--wp--preset--spacing--6);
			
			/* Infoboxes */
			&.cruise-infoboxes {
				& > .cruise-infobox {
					opacity: 1;
				}
			}
			
			&.cruise-images {
				figure {
					width: 100%;
				}
			}
		}
	}
	
	/******************************/
	/* Responsive
	/******************************/
	/* @media (width <= 1600px) {
		grid-template-columns: 27.5% 35% 27.5%;
		
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-infoboxes {
				& > .cruise-infobox {
					& > .cruise-excerpt {
						max-width: 90%;
					}
				}
			}
		}
	} */
	
	@media (width <= 1200px) {
		grid-template-columns: 25% 40% 25%;
		
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-infoboxes {
				& > .cruise-infobox {
					& > .cruise-excerpt {
						max-width: 100%;
					}
				}
			}
		}
	}
	
	@media (width <= 1000px) {
		grid-template-columns: 55% 40%;
		
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-images {
				&:not(.tablet-only) {
					display: none;
				}
				
				&.tablet-only {
					display: grid;
					grid-column: 2;
				}
			}
			
			&.cruise-infoboxes {
				grid-column: 1;
			}
		}
	}
	
	@media (width <= 600px) {
		grid-template-columns: 100%;
		grid-auto-rows: max-content;
		
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-images {
				display: none;
			}
			
			&.cruise-infoboxes {
				& > .cruise-infobox {
					height: max-content;
					max-height: unset !important;
					
					& > .cruise-images.mobile-only {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						column-gap: var(--wp--preset--spacing--1-5);
						width: 100%;
						height: 50svh;
						margin-block-end: var(--wp--preset--spacing--3);
						
						figure {
							align-self: center;
							position: relative;
							width: 100%;
							height: 100%;
							margin: unset;
							border-radius: var(--wp--custom--border-radius--medium);
							overflow: clip;
							pointer-events: none;
							
							img {
								display: block;
								position: absolute;
								inset: 0;
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
	}
	
	@media (width <= 500px) {
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-infoboxes {
				& > .cruise-infobox {
					& > .cruise-images.mobile-only {
						column-gap: var(--wp--preset--spacing--1);
						height: calc(100svh / 3);
					}
				}
			}
		}
	}
	
	@media (width <= 400px) {
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-infoboxes {
				& > .cruise-infobox {
					& > .cruise-images.mobile-only {
						column-gap: var(--wp--preset--spacing--0-50);
						height: 25svh;
						margin-block-end: var(--wp--preset--spacing--1-5);
					}
				}
			}
		}
	}
	
	/**** Height queries ****/
	@media (height < 900px) {
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-images {
				&.tablet-only {
					& > div {
						margin-block: 12.5svh;
					}
				}
				
				figure {
					height: 75svh;
				}
			}
			
			&.cruise-infoboxes {
				& > .cruise-infobox {
					max-height: 75svh;
					margin-block-start: 12.5svh;
				}
			}
		}
	}
	
	@media (height < 750px) {
		& > :is(.cruise-images, .cruise-infoboxes) {
			&.cruise-images {
				&.tablet-only {
					& > div {
						margin-block: 5svh;
					}
				}
				
				figure {
					height: 90svh;
				}
			}
			
			&.cruise-infoboxes {
				& > .cruise-infobox {
					max-height: 90svh;
					margin-block-start: 5svh;
				}
			}
		}
	}
}