Layout: Sidebar

.Layout {
	&__head, &__main {
		.Layout__title {
			@apply mb-6
			lg:mb-10
			2xl:text-5xl
		}
	}

	&__head {
		.container {
			@apply pb-0;
		}
	}

	&__body {
		& > .container {
			@apply pt-0;
		}

		&:has(+.Layout__foot) {
			.Layout__main {
				@apply lg:mb-0;
				
				.Layout__related {
					@apply mb-0;
				}
			}
		}
	}

	&__main {
		@apply mb-10
			sm:max-lg:mb-12;

		.Block:not(.Theme__bg) + .Block:not(.Theme__bg) {
			.container {
				@apply pt-1
					md:pt-3
					2xl:pt-4;
			}
		}
		/* reduce the container padding of a themed block without a background if it's the first child */
		.CardsBlock.Theme:not(.Theme__bg, .Theme--featured, .Theme--gray) {
			&:first-child {
				.container {
					@apply pt-0 
						2xl:pt-4;
				}
			}
		}

		:not(.Block.Theme__bg) + .Block.Theme:has(.Theme__bg.Block__contents) {
			.container {
				@apply pt-0;
			}
		}

		.LayoutBlock {
			.LayoutBlock__column {
				@apply mb-0 #{!important};

				&.Theme__bg:not(.Theme--none) {
					@apply p-6
						xl:p-8
						rounded-md;
	
					.container {
						@apply p-0;
					}
				}
			}
		}
	}

	&__sidebar {
		@apply max-lg:grid
			sm:max-lg:grid-cols-2
			sm:max-lg:gap-8
			self-start;

		& > * {
			@apply not-last:mb-8
				not-last:sm:max-lg:mb-0;
		}
	}

	&--full {
		.Layout__body {
			& > .container {
				@apply max-w-full
					px-0
					pb-0;
			}

			.Block {
				.Block {
					.container {
						@apply py-8
							lg:py-12
							3xl:py-16;
					}

					&:last-child {
						.container {
							@apply pb-0;
						}
					}
				}
			}

			.Block.Theme--none + .Block:not(.Theme__bg), .Block:not(.Theme__bg) + .Block.Theme--none {
				.container {
					@apply pt-0;
				}
			}
		}

		.Layout__main {
			/* remove margin bottom if last block is themed */
			&:has(.Block.Theme__bg:not(.Theme--none):last-child) {
				@apply mb-0;
			}
		}

		/* reduce the top padding of the container of the first Block */
		&:not(.HomepageTemplate) {
			.Layout__head:has(.Breadcrumbs) + .Layout__body, .Layout__head:not(:has(.HeroBlock)) + .Layout__body {
				.Layout__main {
					.Block {
						&:first-child.Theme--none {
							& > .container {
								@apply pt-0;
							}
						}
					}
				}
			}
		}
	}

	&--sidebar {
		.Layout__body {
			@apply mt-14;

			& > .container {
				@apply grid
					lg:grid-cols-[1fr_20rem]
					xl:grid-cols-[1fr_22rem]
					3xl:grid-cols-[1fr_24rem]
					gap-x-8
					md:gap-x-12
					xl:gap-x-16
					2xl:gap-x-20
					3xl:gap-x-44;
			}

			.HeroBlock {
				.container {
					@apply px-8;
				}
			}

			.Layout__main {
				.Theme {
					&--green, &--orange, &--turquoise, &--violet, &--gray {
						&.Theme__bg:not(.Theme--nested):not(.Brochure) {
							@apply not-last:mb-8 
								p-6
								xs:p-8
								2xl:px-12
								2xl:py-14
								rounded-md;
	
							.container {
								@apply p-0;
							}
						}

						& + .Theme--none {
							.container {
								@apply pt-2 
									md:pt-8;
							}
						}
					}
				}

				.Block:not(.Theme--none, .Theme__bg) {
					.container {
						@apply 
							pb-10
							md:pb-12
							xl:pb-16;
					}

					&:last-child {
						.container {
							@apply last:pb-0;
						}
					}
				}
			}
		}

		.Layout__main {
			.container {
				@apply px-0;
			}
			
			.Block {
				.container {
					@apply pt-6
						md:pt-10
				}

				&.Theme--none {
					.container {
						@apply 
							pb-8
							md:pb-10
							2xl:pb-12;
					}

					&:first-child {
						.container {
							@apply pt-0;
						}
					}
				}

				.Block {
					.container {
						@apply py-4
							lg:py-8;
					}
				}
			}
		}

		.Layout__related {
			@apply mt-14 
				mb-5
				lg:mt-20
				lg:mb-10
				3xl:mt-20;

			.Layout__submenu {
				@apply max-lg:hidden;
			}

			.Block {
				.container {
					@apply py-0;
				}
			}

			.Block + .Block {
				.container {
					@apply pt-16;
				}
			}

			&:has(.Layout__submenu:only-child) {
				@apply max-lg:hidden;
			}
		}

		.Block:not(.Theme__bg):has(+.Layout__related) {
			& > .container {
				@apply pb-0;
			}
		}

		.Layout--left {
			& > .container {
				@apply lg:grid-cols-[20rem_1fr]
					xl:grid-cols-[22rem_1fr]
					3xl:grid-cols-[24rem_1fr];
				
				.Layout__sidebar {
					@apply lg:order-first;
				}
			}
		}

		.Theme:has(.Theme__bg.Block__contents) {
			.container {
				@apply p-0;
			}
		}
	}

	.Breadcrumbs {
		@apply mb-10;
	}

	&:not(.HomepageTemplate, .Layout--full) {
		.Layout__main {
			.Block:first-child, .Layout__title + .Block {
				& > .container {
					@apply pt-0;
				}
			}
		}
	}
}