/* https://freefrontend.com/css-carousels/ */
/* TO DO
  - Arrows need better positioning
  - softer card edges or shadows
  - more responsive carousel
  - Some intruductory text under the heading?
*/

.carousel-wrapper {
  height: 100%;
  width: max-content;
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 500px;
  /* grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr; */
  align-items: center;
  justify-items: center;
}

.carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 65vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 400px;
  --items: 5;
  --middle: 3;
  --position: 3;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.carousel-button
{
   	&:hover .arrow {
		&.left,
		&.right {
			&::after {
				border-color: var(--arrow-color-hover);
			}
		}

		&.left {
			&::after {
				box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}

		&.right {
			&::after {
				box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
			}
		}
	} 
}

.project-card {
  padding: 10px;
  /* width: 100%; */
  /* aspect-ratio: 2 / 3; */
  border-radius: 16px;
  /* overflow: hidden; */
  /* background: white; */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;

  position: absolute;
  width: 300px;
  height: 450px;
  background-color: var(--card-color-top);
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
    translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

.project-card:nth-of-type(odd) {
  background-color: var(--card-color-top);
}

.project-card:nth-of-type(even) {
  background-color: var(--accent-color);
}

.project-card:nth-of-type(1) {
  --offset: 1;
}
.project-card:nth-of-type(2) {
  --offset: 2;
}
.project-card:nth-of-type(3) {
  --offset: 3;
}
.project-card:nth-of-type(4) {
  --offset: 4;
}
.project-card:nth-of-type(5) {
  --offset: 5;
}

.radio-input {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.radio-input input {
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: var(--weak-black-color);
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
  border-radius: 50%;
  transition: .4s ease-in-out;
}

.radio-input input:hover {
  scale: 1.2;
  cursor: pointer;
  box-shadow: none;
  border: 1px solid var(--button-alt-color);
}

.radio-input .circle {
  position: relative;
  top: 0.1em;
  left: -1.31em;
  width: 0.6em;
  height: 0.6em;
  background-color: var(--button-alt-color);
  scale: 0;
  border-radius: 10px;
  transition: .4s ease-in-out;
}

.radio-input input:checked {
  box-shadow: none;
  border: 1px solid var(--button-alt-color);
}

.radio-input input:checked + .circle {
  transform: rotate(360deg);
  scale: 1;
}

.radio-input:has(input:nth-of-type(1):checked) ~ .carousel {
  --position: 1;
}
.radio-input:has(input:nth-of-type(2):checked) ~ .carousel {
  --position: 2;
}
.radio-input:has(input:nth-of-type(3):checked) ~ .carousel {
  --position: 3;
}
.radio-input:has(input:nth-of-type(4):checked) ~ .carousel {
  --position: 4;
}
.radio-input:has(input:nth-of-type(5):checked) ~ .carousel {
  --position: 5;
}

.card-image {
  pointer-events: auto;
  position: relative;
  height: 45%;
  display: block;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  object-fit: cover;
  display: block;
}

.card-title {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  color: var(--font-color);
  font-weight: bold;
  background: rgba(0,0,0,0.5);
  width: min-content;
  text-wrap: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
}

.card-content {
  height: 55%;
  padding: calc(var(--spacing)*4);;
  font-size: 1rem;
  /* line-height: 1.4; */
  overflow: hidden;
}

.arrow {
	--arrow-size: 2rem;
	--arrow-color: var(--button-alt-color);
	--arrow-color-hover: var(--button-alt-hover-color);
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	width: var(--arrow-size);
	height: var(--arrow-size);
	overflow: hidden;
	
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		box-sizing: border-box;
		display: inline-block;
		width: calc( var(--arrow-size) * .7071);
		height: calc( var(--arrow-size) * .7071);
		border-top: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
		transition: all 0.3s ease-in-out;
	}

  &:hover{
    transform: scale(1.2);
  }
	
	&.left {
		&::after {
			left: calc( var(--arrow-size) / 5 );
			border-left: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top left;
			rotate: -45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / -8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}

	&.right {
		&::after {
			right: calc( var(--arrow-size) / 5 );
			border-right: calc( var(--arrow-size) / 5 ) solid var(--arrow-color);
			transform-origin: top right;
			rotate: 45deg;
		}

		&:hover::after {
			box-shadow: calc( var(--arrow-size) / 8 ) calc( var(--arrow-size) / -8 ) 0 var(--arrow-color);
		}
	}
}