@layer publitec-solutions-showcase {
	.solutions-showcase {
		--pss-radius-small: .3125rem;
		--pss-radius-medium: 0.5rem;
		--pss-transition: 180ms ease;
		--pss-content-gap: clamp(1.5rem, 3vw, 3rem);
		--pss-section-gap: clamp(2rem, 5vw, 5rem);

		container-type: inline-size;
		inline-size: 100%;
		margin-block: var(--pss-section-gap);

		&,
		& *,
		& *::before,
		& *::after {
			box-sizing: border-box;
		}

		button,
		a {
			-webkit-tap-highlight-color: transparent;
		}

		img {
			display: block;
			max-inline-size: 100%;
		}

		[hidden] {
			display: none !important;
		}

		.solutions-showcase__categories {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			/* border-block: 1px solid var(--wp--preset--color--border); */
			/* border-inline-start: 1px solid var(--wp--preset--color--border); */
		}

		.solutions-showcase__category {
			position: relative;
			display: grid;
            background-color: #FFF;
			grid-template-columns: auto minmax(0, 1fr) auto;
			align-items: center;
			gap: clamp(0.75rem, 1.5vw, 1.25rem);
			min-block-size: clamp(5.25rem, 8vw, 7.5rem);
			padding: clamp(1rem, 2vw, 1.75rem);
			border: 1px solid var(--wp--preset--color--trennlinie);
			border-bottom-width: 3px;
			/* border-inline-end: 1px solid var(--wp--preset--color--accent); */
			text-align: start;
			inset: 0 0 auto;
			cursor: pointer;
			transition:
				background-color var(--pss-transition),
				color var(--pss-transition),
				transform var(--pss-transition);

			&::after {
				content: "";
				position: absolute;
                top: 100% !important;
				inset: 0 0 auto;
				block-size: 0.0rem;
				background: transparent;
                transform: translateY(-100%);
				transition: 
					background-color var(--pss-transition),
					block-size var(--pss-transition);
			}

			&:hover {
				background: var(--wp--preset--color--background);
			}

			&:focus-visible {
				z-index: 1;
				outline: 0.2rem solid var(--wp--preset--color--accent);
				outline-offset: -0.2rem;
			}

			&.is-active {
				background: #FFF;

				&::after {
					block-size: 0.25rem;
					background: var(--wp--preset--color--accent);
				}

				.solutions-showcase__category-icon {
                    border-color: var(--wp--preset--color--accent);
                    background-color: var(--wp--preset--color--accent-pale);
				}
				.solutions-showcase__category-label {
					color: var(--wp--preset--color--accent) !important;	
				}
			}

            &:first-of-type {
                border-left: none;
            }

            &:last-of-type {
                border-right: none;
            }

			&:hover > span:last-child,
			&.is-active > span:last-child {
				/* transform: translateX(0.25rem); */
				color: var(--wp--preset--color--accent);
				
					&::after {
						transform: translateX(0.25rem);
						filter:
							brightness(0)
							saturate(100%)
							invert(55%)
							sepia(36%)
							saturate(2687%)
							hue-rotate(332deg)
							brightness(100%)
							contrast(100%) !important;
					}
			}
		}

		.solutions-showcase__category-icon {
            border: 1px solid var(--wp--preset--color--border);
            border-radius: 9px;
            padding: 6px;
            background-color: var(--wp--preset--color--background);
			/* inline-size: clamp(2rem, 3vw, 3rem);
			block-size: clamp(2rem, 3vw, 3rem); */
			width: 80px;
			height: 80px;
			object-fit: contain;
		}

		.solutions-showcase__category-label {
			/* font-size: clamp(0.95rem, 1.25vw, 1.15rem); */
			font-weight: 700;
			
			&::after {
				display:inline-block;
				vertical-align:center;
				margin-left:10px;
				height:23px;
				width:13px;
				transition: 0.2s transform ease;
				filter:
					brightness(1) saturate(24%) brightness(85%);
					
			}
		}

		.solutions-showcase__category-panel {
			padding-block-start: clamp(2.5rem, 6vw, 6rem);
		}

		.solutions-showcase__category-header {
			display: grid;
			grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
			align-items: end;
			gap: var(--pss-content-gap);
			margin-block-end: clamp(2rem, 5vw, 4.5rem);
		}

		.solutions-showcase__category-heading {
			h2 {
				max-inline-size: 18ch;
				margin: 0;
				color: var(--wp--preset--color--headline);
				text-wrap: balance;
			}
		}

		.solutions-showcase__eyebrow,
		.solutions-showcase__sidebar-kicker {
			font-family: var(--wp--preset--font-family--syne);
			margin: 0 0 1rem;
			color: var(--wp--preset--color--accent) !important;
			letter-spacing: 0.1em;
			font-weight: 600;
			font-size: var(--wp--preset--font-size--body);
		}

		.solutions-showcase__category-intro {
			/* max-inline-size: 58ch; */
			color: var(--wp--preset--color-muted);
			font-weight: 300;

			> :first-child {
				margin-block-start: 0;
			}

			> :last-child {
				margin-block-end: 0;
			}
		}

		.solutions-showcase__content {
			display: grid;
			grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.82fr);
			
			align-items: stretch;
			gap: 0;
		}

		.solutions-showcase__projects {
			min-inline-size: 0;
		}

		.solutions-showcase__project-navigation {
			overflow-x: auto;
			border-block: 1px solid var(--wp--preset--color--border);
			border-inline-start: 1px solid var(--wp--preset--color--border);
			scrollbar-width: thin;
			scroll-snap-type: x proximity;
            background-color: var(--wp--preset--color--background);
            padding: 1rem clamp(1.25rem, 2.8vw, 2rem);

			display: flex;
			gap: 16px;
		}

		.solutions-showcase__project-button {
			position: relative;
			padding: 0.9rem 1.25rem;
			border: 1px solid var(--wp--preset--color--trennlinie);
			background: #FFF;
			color: var(--wp--preset--color--navigation);
            border-radius: 4px;
			white-space: nowrap;
			font-family: var(--wp--preset--font-family--inter);
			font-weight: 600;
			font-size: var(--wp--preset--font-size--body);
			cursor: pointer;
			scroll-snap-align: start;
			transition:
				background-color var(--pss-transition),
				color var(--pss-transition);

			/* &:hover {
				background: var(--pss-color-surface-muted);
			} */

			&:focus-visible {
				z-index: 1;
				outline: 0.18rem solid var(--wp--preset--color--accent);
				outline-offset: -0.18rem;
			}

			&.is-active, &:hover {
                border-color: var(--wp--preset--color--accent);
				background: var(--wp--preset--color--accent-pale);
				color: var(--wp--preset--color--accent);
			}
		}

		.solutions-showcase__project-panels {
			background: var(--wp--preset--color-muted);
		}

		.solutions-showcase__project-panel {
			figure {
				display: grid;
				margin: 0;
			}
		}

		.solutions-showcase__main-image {
			/* inline-size: 100%;
			aspect-ratio: 16 / 9; */
			/* object-fit: contain; */
			
			max-height: 750px;
			width: 100%;
			/* height: auto; */
			background: var(--wp--preset--color-muted);

			@media (max-width: 1400px) {
				max-height: 520px;
			}
			@media (max-width: 750px) {
				max-height: 350px;
			}
			
			&.image_fit__cover {
				object-fit: cover;
				height: auto;
			}
			&.image_fit__contain {
				object-fit: contain;
			}
		}

		.solutions-showcase__project-description {
			padding: clamp(1.25rem, 2.8vw, 2rem);
			/* color: rgb(255 255 255 / 0.88); */
			/* font-size: clamp(0.95rem, 1.15vw, 1.08rem); */
			/* line-height: 1.7; */
			font-weight: 300;

			> :first-child {
				margin-block-start: 0;
			}

			> :last-child {
				margin-block-end: 0;
			}
		}

		.solutions-showcase__thumbnails {
			/* display: grid; */
			/* grid-auto-columns: minmax(6rem, 1fr);
			grid-auto-flow: column; */
			gap: 0.75rem;
			overflow-x: auto;
			background: var(--wp--preset--color--background);
            padding: 1rem clamp(1.25rem, 2.8vw, 2rem);
			border-block-start: 0;
			/* background: var(--pss-color-surface); */
			scroll-snap-type: x proximity;
			counter-reset: thumbnail-counter;
		}

		.solutions-showcase__thumbnail {
			position: relative;
			overflow: hidden;
			padding: 0;
			border: 1px solid var(--wp--preset--color--trennlinie);
			border-radius: var(--pss-radius-small);
			background: #FFF;
			cursor: pointer;
			scroll-snap-align: start;
			transition:
				border-color var(--pss-transition),
				transform var(--pss-transition),
				opacity var(--pss-transition);
			counter-increment: thumbnail-counter;
				
			img {
				max-width: 5.8125rem;
				height: 4.8125rem;
				inline-size: 100%;
				aspect-ratio: 4 / 3;
				&.image_fit__cover {
					object-fit: cover;
				}
				&.image_fit__contain {
					object-fit: contain;
				}
			}

			&::after {
				content: counter(thumbnail-counter, decimal-leading-zero);
				position: absolute;
				font-family: var(--wp--preset--font-family--syne);
				font-weight: 700;
				color: var(--wp--preset--font-size--paragraph);
				inset-block-end: 0.3rem;
				inset-inline-end: 0.3rem;
				font-size: .75rem;
				/* inset: 0;
				background: rgb(7 31 73 / 0.18);
				transition: opacity var(--pss-transition); */
			}

			&:hover {
				transform: translateY(-0.15rem);

				&::after {
					color: var(--wp--preset--color--accent);
				}
			}

			&:focus-visible {
				outline: 0.18rem solid var(--wp--preset--color--accent);
				outline-offset: 0.15rem;
			}

			&.is-active {
				border-color: var(--wp--preset--color--accent);

				&::after {
					color: var(--wp--preset--color--accent);
				}
			}
		}

		.solutions-showcase__sidebar {
			display: flex;
			flex-direction: column;
			min-inline-size: 0;
			background: var(--wp--preset--color--background);
			border-left: 2px solid var(--wp--preset--color--border);
		}

		.solutions-showcase__possibilities,
		.solutions-showcase__industries-section {
			padding: clamp(1.5rem, 3vw, 1.75rem);

			h3 {
				margin: 0 0 1.5rem;
				text-wrap: balance;
			}
		}
		.solutions-showcase__sidebar,
		.solutions-showcase__industries-section {
			h3 {
				font-weight: 600 !important;
			}
		}
		.solutions-showcase__industries-section {
            background: #FFF;
			padding-top: 1rem;
			padding-bottom: 1rem;
        }
        
        .solutions-showcase__sidebar-header {
            padding: 1rem clamp(1.5rem, 3vw, 1.75rem);
            background-color: #FFF;
			border: 1px solid var(--wp--preset--color--trennlinie);
			border-left: none;
			border-right: none;

            p, h3 {
                margin-bottom: 0;
                margin-top: 0;
            }
        }

		.solutions-showcase__possibilities {
			border-block-end: 1px solid var(--wp--preset--color--trennlinie);


			ul {
				display: grid;
				/* gap: 0.9rem; */
				margin: 0;
				padding: 0;
				list-style: none;
			}

			li {
				position: relative;
				padding-inline-start: 1.35rem;
				color: var(--wp--preset--color-muted);
				padding: 9px;
				padding-left: 30px;
				
				&:hover {
					background-color: var(--wp--preset--color--accent-pale);
				}

				&::before {
					content: "";
					position: absolute;
					inset-block-start: 1.3em;
					inset-inline-start: 10px;
					inline-size: 0.45rem;
					block-size: 0.45rem;
					border-radius: 50%;
					background: var(--wp--preset--color--accent);
				}
			}
		}

		.solutions-showcase__industries {
			display: flex;
			flex-wrap: wrap;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: .5rem .875rem;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: grid;
				grid-template-columns: auto minmax(0, 1fr);
				align-items: center;
				gap: 0.7rem;

				color: var(--wp--preset--color--headline);

				border: 1px solid var(--wp--preset--color--trennlinie);
				border-radius: 4px;
				background-color: var(--wp--preset--color--background);
				padding: 5px 12px;
				font-family: var(--wp--preset--font-family--syne);
				font-weight: 600;
				&:hover {
					background-color: var(--wp--preset--color--accent-pale);
					color: var(--wp--preset--color--accent);
					border-color: var(--wp--preset--color--accent);
					img {
						filter:
							brightness(0)
							saturate(100%)
							invert(55%)
							sepia(36%)
							saturate(2687%)
							hue-rotate(332deg)
							brightness(100%)
							contrast(100%) !important;
					}
				}
			}

			img {
				inline-size: 2.25rem;
				block-size: 2.25rem;
				object-fit: contain;
				width: 1rem;
				height: 1rem;
				filter:
					brightness(1) saturate(24%) brightness(85%);
			}
		}

		.cta-area {
			padding: clamp(1.5rem, 3vw, 2.75rem);
		}

		.solutions-showcase__cta {
			
			margin-block-start: auto;
			padding: 1.25rem clamp(1.5rem, 3vw, 2.75rem);
			text-decoration: none;
			height: auto !important;
			transition:
				background-color var(--pss-transition),
				padding-inline-end var(--pss-transition);

			span {
				line-height: 1;
				transition: transform var(--pss-transition);
			}

			&:hover {
				/* background: var(--wp--preset--color--accent); */

				span {
					transform: translateX(0.3rem);
				}
			}

			&:focus-visible {
				outline: 0.2rem solid var(--wp--preset--color--accent);
				outline-offset: -0.35rem;
			}
		}

		
		@container (width < 100rem) {
			.solutions-showcase__content {
				grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.2fr);
			}
		}

		
		@container (width < 81.25rem) {
			.solutions-showcase__content {
				grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.6fr);
			}
			.solutions-showcase__category-icon {
				width: 70px;
				height: 70px;
			}
		}

		@container (width < 62rem) {
			
			.solutions-showcase__category {
				&::after {
					block-size: 0.15rem !important;
				}
			}
			
		}

		@container (width < 50rem) {
			.solutions-showcase__categories {
				grid-template-columns: 1fr;
			}


			.solutions-showcase__content {
				grid-template-columns: 1fr;
			}			

			.solutions-showcase__category-header {
				grid-template-columns: 1fr;
				align-items: start;
			}

			.solutions-showcase__sidebar {
				border-right: 2px solid var(--wp--preset--color--border);
			}

			.solutions-showcase__project-navigation {
				border-inline-end: 1px solid var(--wp--preset--color--border);
			}
			.solutions-showcase__category-panel {
				margin-bottom: 30px;
				border-bottom: 2px solid var(--wp--preset--color--border);
			}
			.solutions-showcase__category {
				&:first-of-type {
					border-left: 1px solid var(--wp--preset--color--border);
				}
				&:last-of-type {
					border-right: 1px solid var(--wp--preset--color--border);
				}
			}
/*


			.solutions-showcase__possibilities {
				border-block-end: 0;
				border-inline-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
			}

			.solutions-showcase__cta {
				grid-column: 1 / -1;
			} */
			
		}

		@container (width < 40rem) {

			.solutions-showcase__category {
				min-block-size: 4.75rem;
			}


			.solutions-showcase__main-image {
				aspect-ratio: 4 / 3;
			}

			.solutions-showcase__thumbnails {
				grid-auto-columns: 5.5rem;
			}

			.solutions-showcase__sidebar {
				display: flex;
			}

			.solutions-showcase__possibilities {
				border-inline-end: 0;
				border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
			}

			.solutions-showcase__industries {
				grid-template-columns: 1fr;
				li {
					font-size: 12px;
				}
			}
		}

		@media (prefers-reduced-motion: reduce) {
			*,
			*::before,
			*::after {
				scroll-behavior: auto !important;
				transition-duration: 0.01ms !important;
			}
		}
	}
}