@charset "UTF-8";
/* CSS Document */

/*PROJECTS --------------------------------------------------------------------------------------*/

.project-grid-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 95vw;
  margin: 0 auto;
 /* height: calc(100dvh - 20dvh); */
  height: calc(100lvh - 20lvh); 
  overflow-y: hidden;
  overflow-x: auto;
  /*outline: 2px dashed red;*/
  scroll-behavior: smooth;
  transform: translateZ(0);
  will-change: scroll-position;
}

.project-grid {
  display: grid;
  grid-auto-flow: column;
  /*grid-auto-columns: minmax(36dvh, auto);
  grid-template-rows: repeat(3, 24dvh);*/
  grid-auto-columns: minmax(36lvh, auto);
  grid-template-rows: repeat(3, 24lvh);
  /*grid-auto-rows: 25dvh;*/
  grid-auto-rows: 25lvh;
  gap: 1rem;
  width: 100%;
  margin: 0 auto;
}

.project-card {
  position: relative;
  display: block;
  width: 100%;
	height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-card .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(16, 41, 50, 0);
  color: white;
  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: background-color 0.3s, opacity 0.3s;
}

.project-card:hover .overlay {
  background-color: rgba(16, 41, 50, 0.85);
  opacity: 1;
}

.project-card .overlay h4 {
  text-align: right;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.project-card .overlay p {
  margin: 0.2rem 0 0 0;
  font-size: 0.95rem;
  font-weight: 200;
  opacity: 0.85;
}

/* Flexible Größen */
.project-card.size-1x1 {
	grid-column: span 1;
  grid-row: span 1;
}
.project-card.size-1x2 {
	grid-column: span 1;
  grid-row: span 2;
}

.project-card.size-2x1 {
	grid-column: span 2;
  grid-row: span 1;
}

.project-card.size-2x2 {
	grid-column: span 2;
  grid-row: span 2;
}

@media (min-width: 481px) and (min-aspect-ratio: 5/8) and (max-aspect-ratio: 8/10) and (orientation: portrait){

	#samples {
      display: flex;
      align-items: center;
	  flex-direction: column;
}
    /* Anpassung des Wrappers für mobiles, horizontales Scrollen */
    .project-grid-wrapper {
        margin-top: 2rem;
		max-width: 100vw;
        height: auto; 
        overflow-x: scroll;
        overflow-y: hidden;
        
        padding: 0 10px; 
        -ms-overflow-style: none; 
        scrollbar-width: none; 
        -webkit-overflow-scrolling: touch; 
    }
    .project-grid-wrapper::-webkit-scrollbar {
        display: none; 
    }

    /* Anpassung des Grid */
.project-grid {
        width: auto; 
        grid-auto-columns: calc((100vw - 30px) / 2);
        /*grid-template-rows: repeat(3, 20dvh); */
		grid-template-rows: repeat(3, 20lvh); 
        /*grid-auto-rows: 20dvh;*/
		grid-auto-rows: 20lvh;
        gap: 10px; 
    }	
	
}

/*--------------- Smartphone Landscape ---------------------------------------------------------------------*/
@media (max-height: 480px) and (orientation: landscape){
	
	#samples {
		display: flex;
		align-items: center;
	}
	.project-grid-wrapper{
		margin-top: 10px;
	}
	 .project-card .overlay {
		align-items: flex-end;
		justify-content: flex-end;
		text-align: right;
		hyphens: manual;
	}
	
	 .project-card:hover .overlay {
        opacity: 1;
        background-color: rgba(16, 41, 50, 0.7);
    }
    
    .project-card:hover img {
        transform: none;
    }
    
    .project-card .overlay h4 {
        font-size: 0.75rem;
    }
    .project-card .overlay p {

        font-size: 0.75rem;
    }
}

/* ------ Smartphone Portrait---------------------------------------------------------------------------*/
@media (max-width: 481px) {
  
/* Zentrierung des Project Grid Wrappers */
#samples {
display: flex;
align-items: center;
}
    /* Anpassung des Wrappers für mobiles, horizontales Scrollen */
    .project-grid-wrapper {
		max-width: 100vw;
        height: auto; 
        overflow-x: scroll;
        overflow-y: hidden;
        
        padding: 0 10px; 
        -ms-overflow-style: none; 
        scrollbar-width: none; 
        -webkit-overflow-scrolling: touch; 
    }
    .project-grid-wrapper::-webkit-scrollbar {
        display: none; 
    }

    /* Anpassung des Grid */
.project-grid {
        width: auto; 
        grid-auto-columns: calc((100vw - 30px) / 2);
       /* grid-template-rows: repeat(3, 20dvh); 
        grid-auto-rows: 20dvh;*/
		grid-template-rows: repeat(3, 20lvh);
		grid-auto-rows: 20lvh;
        gap: 10px; 
    }

    /* Overlay-Anpassung für bessere Sichtbarkeit auf Mobile */
    .project-card .overlay {
		align-items: flex-end;
		justify-content: flex-end;
		text-align: right;
		hyphens: manual;	
      /*  opacity: 1;*/
       /* background-color: rgba(16, 41, 50, 0.7); */
        /* Hover-Effekte deaktivieren */
        /*transition: none; */
    }
    
    .project-card:hover .overlay {
        opacity: 1;
        background-color: rgba(16, 41, 50, 0.7);
    }
    
    .project-card:hover img {
        transform: none;
    }
    
    .project-card .overlay h4 {
        font-size: 0.75rem;
    }
    .project-card .overlay p {
        font-size: 0.75rem;
		
    }
    

}