/*!
Theme Name: Alain Wohlgemuth

Author: Alain Wohlgemuth

Description: Description
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/



/* reset */ 

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior-y: contain; /* stops that “rubber band” scroll */
}


body {
	font-family: "neue-haas-grotesk-text", sans-serif;
	font-weight: 500;
	font-style: normal;
    margin: 0;
    overflow-x: hidden;
}

/* Normal vertical scrolling for home page */
body.mode-page {
  overflow: auto;
}

/* Lock vertical scroll on slideshow pages */
body.mode-slideshow {
  overflow: hidden;
}




::-webkit-scrollbar {
  width: 18px;
  background-color: white;
   /* Width of the vertical scrollbar */
}

::-webkit-scrollbar-thumb:hover{
    background-color: rgb(51, 255, 123); /* Color of the thumb */
    border-radius: 10px; 
    border: 5px solid white;
    box-shadow: inset 0 0 4px rgb(255, 255, 255);

}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0); /* Color of the thumb */
  border-radius: 10px; 
  border: 5px solid rgb(255, 255, 255);
    box-shadow: inset 0 0 4px rgb(51, 255, 123);

  /*Make the thumb fatter */
}



/* Style the scrollbar track on Firefox */
/* This is necessary because Firefox uses a different pseudo-element */
/* for styling the scrollbar::-moz-scrollbar-track {
    border: 3px solid white;
    } */

::-moz-scrollbar {
  width: 18px;
  background-color: white;
}



::-moz-scrollbar-thumb {
  background-color: rgb(0, 0, 0); /* Color of the thumb */
  border-radius: 10px; 
  border: 5px solid rgb(255, 255, 255);
    box-shadow: inset 0 0 4px rgb(51, 255, 123);
}

::-moz-scrollbar-thumb:hover {
    background-color: rgb(51, 255, 123); /* Color of the thumb */
    border-radius: 10px; 
    border: 5px solid white;
    box-shadow: inset 0 0 4px rgb(255, 255, 255);
}




@font-face {
    font-family: 'arrows.woff2';
    src: url('/wp-content/themes/AlainWohlgemuth/fonts/arrows.woff2') format('woff2'),
    url('/wp-content/themes/AlainWohlgemuth/fonts/arrows.woff') format('woff'),
    url('/wp-content/themes/AlainWohlgemuth/fonts/arrows.ttf') format('ttf');
}


.h-60 {
    height: 60%!important;
}



/* Center the loading content */
.loading-animation img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-animation {
    display: none;
  }
  
  /* White background for the loading animation */
  .show-animation .loading-animation {
    display: block;
    background-color: white;
    position: fixed;
    transition: opacity 0.3s ease-out;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* Ensure the loading animation is on top of all other content */

  }

  .fade-out .loading-animation {
    opacity: 0;
  }


/* INDEX */

tspan {
    transform:scale(+1,-1);
    font-family: "neue-haas-grotesk-text", sans-serif;
    font-size: 1.5vmin;
    font-size: 2.5vmax;

}

#text-path1{
    cursor: pointer;
}

#flip-image-div{
    perspective: 850px;
}

.custom-size {
  width: 50%;
  height: 50%;
}

@media (max-width: 768px) { /* mobile breakpoint */
  .custom-size {
    width: 40%;
    height: 40%;
  }
}

#flip-image-div:hover {
    cursor: pointer;
    
}

.flip-images{
    height: 100%;
    width: auto ;
    transform-style: preserve-3d;
}


/*
@media (max-width: 767px) {
	.flip-images {
		height: 80%;
	}
}*/




/* Single */

.gallery-count {
    text-align: center;
	font-size: 0.8em;
}



.project-div-bottom{
    z-index: 1000;
}



.x-link {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 1000;
    text-decoration: none;
}

.x-icon {
    display: inline-block;
    font-size: 3em;
	line-height: normal;
	font-weight: 400;
    color: #000;
}


.prev {
    left: 0;
    width: 50%;
    height: 100%;
    top: 0;
    z-index: 100;
}

.next {
    left: 50%;
    width: 50%;
    height: 100%;
    top: 0;
    z-index: 100;
}

.left-cursor:hover {
    /*cursor: url(/wp-content/themes/AlainWohlgemuth/img/cursor/links.svg) 30 30, auto;*/
    cursor: w-resize;

}

.right-cursor:hover {
    /*cursor: url(/wp-content/themes/AlainWohlgemuth/img/cursor/rechts.svg) 170 170, auto;*/
    cursor: e-resize;

}



/*AOUTME END*/

.mobile-left {
    display: none;
}

.mobile-right {
    display: none;
}


@media (max-width: 767px) {
    .mobile-left {
        display: block; 
        position: fixed;
        width: 13px;
        margin-left: 5px;
        top: 45%; 
        left: 0; 
        transform: translateY(-50%); 
        z-index: 10; 
    }
}

@media (max-width: 767px) {
    .mobile-right {
        display: block; 
        position: fixed;
        width: 13px;
        margin-right: 5px;
        top: 45%; 
        right: 0; 
        transform: translateY(-50%); 
        z-index: 10; 
    }
}




/*



cursor: w-resize;
cursor: e-resize;

*/


/* Formatting */

.project-description {
  font-size: 1em;
  line-height:1.4;
  margin: 0;
  max-width: none;
}

@media (max-width: 767px) {
	.project-description {
		font-size: 0.8em;
		line-height:1.2;
	}
}



.jahrzahl {
    text-align: center;
    letter-spacing: 0.4vw;
    z-index:100;
	font-size: 0.8em;
}


/* ====== PROJECT GRID / LAYERS (CLEAN VERSION) ====== */

/* Container */
.project-page {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ---------------- Text layer (fixed, centered) ---------------- */
.text-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;       /* full viewport */
  z-index: 10;
  pointer-events: none;
  padding: 1rem 2rem;
  display: grid;
  grid-template-rows: repeat(4, 1fr); /* 4 vertical rows */
}

.text-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 horizontal columns */
  gap: 1rem;
  grid-row: 4; /* put the entire grid in the bottom row of text-layer */
  align-self: start; /* stick to the top of that row */
	margin-top: 2vw;
}

.text-grid > * {
  pointer-events: auto; /* keep text selectable/clickable */
}

/* Desktop placement */
.text-grid .year {
  grid-column: 1 / span 1; /* col 1 */
	text-transform: uppercase;
letter-spacing: 0.1em;
}
.text-grid .category {
  grid-column: 2 / span 2; /* cols 2–3 */
text-transform: uppercase;
letter-spacing: 0.1em;
}
.text-grid .title-desc {
  grid-column: 6 / span 5; /* cols 6–10 */
}

.year, .category {
 margin:0;
	line-height: 1;

}

/* Mobile: stacked layout */
@media (max-width: 768px) {
  .text-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .text-grid .title-desc {
    grid-column: 1 / span 10; /* full width */
  }
  .text-grid .year {
    grid-column: 1 / span 5; /* left half */
  }
  .text-grid .category {
    grid-column: 6 / span 5; /* right half */
  }
}



/* ---------------- Responsive behaviour ---------------- */
@media (max-width: 992px) {
  .text-grid {
    grid-template-columns: repeat(10, 1fr);
  }
  .text-grid .year { grid-column: span 5; }
  .text-grid .category { grid-column: span 5; }
  .text-grid .title-desc { grid-column: 1 / span 10; }
}

/* --- Horizontal Image Slideshow --- */

.slideshow-viewport {
  touch-action: pan-x;
  overscroll-behavior: contain;
}

:root {
--slide-gap: 20px;
--track-height: 66vh;
}

@media (max-width: 768px) {
  :root {
    --track-height: 50vh;
  }
}

.slideshow-root {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.slideshow-viewport {
  position: absolute;
  top: 7vh;        /* works now */
  left: 0;
  right: 0;
  bottom: auto;    /* don’t stretch down */
  height: 66vh;    /* if you want slideshow height */
}



.slideshow-track {
  position: absolute;
  left: 0;
  will-change: transform;
  display: inline-flex;
  align-items: center;
  gap: var(--slide-gap);
  cursor: grab;
}



.slideshow-track.dragging {
  cursor: grabbing;
}


/* Basic slideshow container */
.slideshow {
  overflow: hidden;
  position: relative;
}

.slide {
  display: flex;
  width: max-content;
  will-change: transform;
}

.slide {
  flex: 0 0 auto;
  height: var(--track-height);
  margin: 0;                  /* ✅ reset default figure margin */
}

.slide img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  max-width: none;            /* ✅ ignore global img max-width */
}

.slide.spacer {
  flex: 0 0 auto;
  height: var(--track-height);
  width: 0;                /* placeholder; JS will set exact width */
}
/* Medium Zoom overlay */
.medium-zoom-overlay {
  z-index: 99999 !important;
}
.medium-zoom-image--opened {
  z-index: 100000 !important;
}

/* Video slide same rules as image */
/* Video slide same rules as image */
.video-slide {
  flex: 0 0 auto;
  height: var(--track-height);
  margin: 0;
  position: relative;
  width: auto;
  object-fit: contain;
  display: block;
}

.video-slide iframe,
.video-slide video {
  display: block;
  height: var(--track-height);     /* let width scale naturally */
  max-width: none;  /* don't clamp width */
 width: auto;
  object-fit: contain;
  pointer-events: auto; /* allow clicking inside video */
}

.video-slide iframe {
	width: 800px;
}