/* =========================================================
   0. GLOBAL RESET / BASE
========================================================= */

::-webkit-scrollbar {
  display: none;
}

html,
body {
  margin: 0;
}

/* =========================================================
   1. TYPOGRAPHY SYSTEM (GLOBAL TEXT RULES)
========================================================= */
@font-face {
font-family: Grot;
src: url(../fonts/VTNNQR+NewRailAlphabet-Medium.ttf);
}

p {
  font-family: Grot, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025rem;

  display: block;

  margin-block-start: 0.5em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;

  unicode-bidi: isolate;

  max-width: 70ch;
}

p:nth-child(1) {
  color: rgba(0, 0, 0, 0.9);
}

/* LINKS */
a {
  color: black;
  text-decoration: underline;
}

a:hover {
  color: black;
  text-decoration: none;
}

a:visited {
  color: black;
}

#overlay a:hover {
  text-decoration: underline;
}

/* =========================================================
   CONTACT LINK UNDERLINE CUSTOM
========================================================= */
.contact-text a{
text-decoration: none;
}

/* =========================================================
   2. PAGE LAYOUT CORE (SCROLL + PROJECTS)
========================================================= */

/* MAIN SCROLL CONTAINER */
#root {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* EACH FULLSCREEN SECTION */
.project {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  background: white;
}

/* =========================================================
   3. FIXED UI BASE STYLE LAYER
   (everything here uses blend mode overlay system)
========================================================= */

.logo,
.project-title,
.slide-counter,
.project-nav,
#infoBtn {
  mix-blend-mode: difference;
  color: white;
}

/* ensure inner elements inherit color */
.logo a,
.project-title a,
.project-title span,
.project-nav a {
  color: inherit !important;
}

/* =========================================================
   4. TOP LEFT: LOGO
========================================================= */

.logo {
  position: fixed;
  top: 0;
  z-index: 999;

  margin-top: 0.55rem;
  padding: 0.75rem;
  padding-top: clamp(0.75rem, 2.2vw, 0.4rem);

  font-size: clamp(0.8rem, 2.2vw, 1rem);
  line-height: 0;
}



















/* =========================================================
   5. BOTTOM NAV BAR (MAIN UI SYSTEM)
   ---------------------------------------------------------
   STRUCTURE:
   [ TITLE ]  [ META GROUP: counter + more + nav ]
========================================================= */


/* =========================================================
   PROJECT NAV SYSTEM
========================================================= */

.project-title {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 1000;

  padding: 1rem;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  gap: 0.45rem;

  width: 100%;

  font-size: clamp(0.8rem, 2.2vw, 1rem);
  line-height: 1.2;
}

/* =========================================
   TOP ROW
========================================= */

.project-top-row {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
}

.slide-counter {
  white-space: nowrap;
}

/* =========================================
   BOTTOM ROW
========================================= */

.project-bottom-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: end;

  width: 100%;
  gap: 1rem;
}

/* LEFT */

.project-left {
  display: flex;
  justify-content: flex-start;

  min-width: 0;
}

.title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CENTER */

.project-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RIGHT */

.project-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 1rem;

  white-space: nowrap;
}

/* BUTTON */

#plusBtn {
  cursor: pointer;

  opacity: 0;
  transition: opacity 0.2s ease;

  white-space: nowrap;
}

#plusBtn.visible {
  opacity: 1;
}

#plusBtn:hover {
  text-decoration: underline;
}

/* NAV */

.project-nav {
  text-decoration: none;
}

.project-nav:hover {
  text-decoration: underline;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

  .project-title {
    gap: 0.35rem;
  }

  .project-bottom-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .project-left,
  .project-center,
  .project-right {
    width: 100%;
  }

  .project-left {
    justify-content: flex-start;
  }

  .project-center {
    justify-content: flex-start;
  }

  .project-right {
    justify-content: flex-start;
  }

  .title-text {
    white-space: normal;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
  }
}





/* =========================================================
   7. SPACING HELPERS (CURRENT SYSTEM)
   NOTE: THESE ARE MANUAL SPACERS USED IN HTML
========================================================= */

.space-sm {
  display: inline-block;
  width: 0.6rem;
}

.space-md {
  display: inline-block;
  width: 1.2rem;
}

.space-lg {
  display: inline-block;
  width: 2rem;
}
























/* =========================================================
   8. INFO BUTTON (TOP RIGHT UI)
========================================================= */

#infoBtn {
  position: fixed;
  top: clamp(1rem, 2.2vw, 0.5rem);
  right: clamp(1rem, 2.2vw, 0.5rem);

  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(1.3rem, 4vw, 2rem);
  height: clamp(1.3rem, 4vw, 2rem);

  margin: 0;

  border: 2px solid white;
  border-radius: 999px;

  padding: 2px;

  font-size: clamp(1rem, 2.2vw, 1rem);

  cursor: pointer;

  opacity: 0;
  transition: opacity 0.2s ease;
}

/* =========================================================
   9. CAROUSEL SYSTEM (PROJECT CONTENT AREA)
========================================================= */

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  user-select: none;
  -webkit-user-select: none;
}

/* SLIDES */
.slide {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.35s ease;
}

.slide.active {
    opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* MEDIA */
.slide img,
.slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* FIT MODES */
.slide[data-fit="contain"] img,
.slide[data-fit="contain"] video {
  object-fit: contain;
  padding: 5vw;
  box-sizing: border-box;
}

.slide[data-fit="cover"] img,
.slide[data-fit="cover"] video {
  object-fit: cover;
}

.slide[data-fit="max"] {
  align-items: center;
  justify-content: center;
  padding: 20vw !important;
}

.slide[data-fit="max"] img,
.slide[data-fit="max"] video {
  width: auto;
  height: auto;
  max-width: calc(var(--max-w, 80) * 1vw);
  max-height: calc(var(--max-h, 80) * 1vh);
  object-fit: contain;
}


.carousel.has-shadow .slide {
  filter: drop-shadow(0 6px 7px rgba(120, 120, 120, 0.8));
}




/* =========================================================
   10. OVERLAY SYSTEM (INFO PANEL)
========================================================= */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;

  width: 100vw;
  height: 100vh;

  overflow-y: auto;

  background: rgba(255, 255, 255, 0.96);
  color: black;

  /* animation state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

/* ACTIVE OVERLAY */
#overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* CONTENT CONTAINER */
#overlayContent {
  display: grid;
  grid-template-columns: 1fr;

  gap: 0rem;

  margin: clamp(0.8rem, 2.2vw, 4rem);
  padding: 1rem;
  padding-right: 1.5rem;

  /* animated entrance */
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

  margin-bottom: 50vh;
}

/* CONTENT ACTIVE STATE */
#overlay.active #overlayContent {
  opacity: 1;
  transform: translateY(0);
}

/* BLOCKS INSIDE OVERLAY */
.overlay-block {
  display: flex;
  align-items: baseline;

  gap: 0rem;

  margin-bottom: 0rem;
  padding: 0rem;

  font-family: Arial, sans-serif;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  line-height: 1.3;
}

/* SPECIAL SPACING RULE */
.overlay-block:nth-child(2) {
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

/* LABEL + CONTENT */
.block-label {
  flex: 0 0 100px;
  margin: 0;
}

.block-content {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.block-content p {
  margin: 0 0 0.5rem;
}

.block-content * {
  text-align: left;
}

/* =========================================================
   11. COPYRIGHT
========================================================= */

.copyright {
  position: fixed;
  right: 1rem;
  bottom: 0.75rem;

  z-index: -999;

  font-size: 0.75rem;
  color: black;
}

/* =========================================================
   12. UTILITIES
========================================================= */

.spacer {
  display: inline-block;
}

/* =========================================================
   13. MOBILE OVERRIDES
========================================================= */

@media (max-width: 900px) {
  #overlayContent {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .project-title {
    padding: 0.75rem;
    gap: 0.4rem;
  }

  .project-top-row {
    justify-content: center;
  }

  .slide-counter {
    padding-left: 0;
    padding-right: 0;
  }

  .project-bottom-row {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: end;
  }

  .project-left {
    justify-content: flex-start;
    min-width: 0;
  }

  .project-center {
    justify-content: center;
  }

  .project-right {
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .title-text {
    white-space: normal;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
  }
}

/* =========================================================
   14. TOUCH DEVICE OPTIMISATION
========================================================= */



@media (hover: none) and (pointer: coarse) {

  .project-link.armed .hover-image {
    opacity: 1;
    visibility: visible;
  }

}

/* =========================================================
   MOBILE OVERRIDE: COVER BECOMES "MAX MODE"
========================================================= */

@media (max-width: 768px) {

  /* ONLY when mobile behaviour toggle is active */
  .slide[data-mobile-contain="true"][data-fit="cover"] {
    align-items: center;
    justify-content: center;
  }

  .slide[data-mobile-contain="true"][data-fit="cover"] img,
  .slide[data-mobile-contain="true"][data-fit="cover"] video {

    /* override cover completely */
    object-fit: contain !important;

    /* treat like max/fullscreen constrained */
    width: auto !important;
    height: auto !important;

    max-width: 97vw !important;
    max-height: 97vh !important;
  }

}