/* ===========================
   PROJECT-PAGE.CSS — Kteam Architects
   =========================== */


/* ============================================================
   HERO — Full-height image
   ============================================================ */
.pp-hero {
  position: relative;
  height: 740px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
	margin-top: -96px;
}
.pp-hero  .container {
    height: 100%;}
.pp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}


.pp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transform-origin: center center;
  animation: ppHeroBgZoomIn 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform;
}

@keyframes ppHeroBgZoomIn {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-hero__bg img {
    animation: none;
    transform: none;
  }
}

.pp-hero__overlay {
  position: absolute;
  inset: 0;
  background: #322518;
  opacity: 0.68;
}

/* Nav — transparent with white text */
.nav--transparent {
  background: transparent;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.nav--white a,
.nav--white .nav__menu a {
  color: #fff;
}

.nav__cta--white {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.nav__hamburger--white {
  color: #fff;
}

/* Hero inner layout */
.pp-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
}

.pp-hero__inner > .container {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 24px;
  padding: 0 clamp(24px, 3.17vw, 48px) 0 0;
}

.pp-hero__rail {
  width: var(--side-rail-w);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-right: 1px solid var(--color-border);
  padding-bottom: 230px;
  align-self: stretch;
}

.pp-hero__label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1.68px;
  color: rgba(255, 255, 255, 0.6);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  text-transform: uppercase;
}

.pp-hero__content {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  padding-bottom: 238px;
}

.pp-hero__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.pp-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.23vw, 64px);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.pp-hero__scroll {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
  align-self: flex-start;
	margin-top: auto;
}

.pp-hero__scroll:hover {
  background: rgba(255, 255, 255, 0.15);
}


/* ============================================================
   GENERAL INFO — Stats
   ============================================================ */

	 #info .section__side-rail{
		padding-top: 48px;
	 }
.pp-info__main {
  gap: 0;
	    padding: 48px  24px 70px 48px;
}

.pp-info__stats {
  display: flex;
  gap: 100px;
  width: 100%;
}

.pp-info__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 64px;
  border-right: 1px solid var(--color-border);
}

.pp-info__stat:last-child {
  border-right: none;
  padding-right: 0;
}

.pp-info__stat-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-gray);
}

.pp-info__stat-value {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: #000;
}


/* ============================================================
   GALLERY
   ============================================================ */
.pp-gallery__main {
  gap: 24px;
}

.pp-gallery__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.pp-gallery__item {
  width: 100%;
  overflow: hidden;
}

.pp-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   OTHER PROJECTS
   ============================================================ */
.pp-other__main {
  gap: 48px;
  align-items: center;
}

.pp-other__h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 3.7vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: #000;
  margin: 0;
  width: 100%;
}

.pp-other__cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pp-other__cards::-webkit-scrollbar {
  display: none;
}

.pp-other__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 calc((100% - 24px) / 2);
  min-width: 0;
  scroll-snap-align: start;
}

.pp-other__card:only-child {
  flex-basis: 100%;
}

.pp-other__image {
  position: relative;
  overflow: hidden;
  height: 392px;
}

.pp-other__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.pp-other__filter {
  position: absolute;
  inset: 0;
  background: #322518;
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.pp-other__card:hover .pp-other__filter,
.pp-other__card:focus-visible .pp-other__filter {
  opacity: 0;
}

.pp-other__card:hover .pp-other__image img,
.pp-other__card:focus-visible .pp-other__image img {
  transform: scale(1.06);
}

.pp-other__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pp-other__name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.12vw, 32px);
  font-weight: 400;
  line-height: 1.3;
  color: #000;
}

.pp-other__location {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-gray);
  flex-shrink: 0;
}


/* ============================================================
   OTHER PROJECTS — header (title + nav buttons)
   ============================================================ */
.pp-other__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.pp-other__nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.pp-other__nav--hidden {
  display: none;
}


/* ============================================================
   MOBILE — @media (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
.pp-gallery__main {
    gap: 24px;
}
  /* HERO */
  .pp-hero {
    height: 695px;
		margin-top: -80px;
  }

  .pp-hero__inner {
    gap: 0;
  }

  .pp-hero__inner > .container {
    padding: 0 16px;
    gap: 0;
    position: relative;
    height: 100%;
  }

  .pp-hero__rail {
    display: flex;
    position: absolute;
    bottom: 85px;
    left: 16px;
    width: auto;
    border-right: none;
    padding-bottom: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .pp-hero__label {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
  }

  .pp-hero__content {
    padding-bottom: 16px;
  }

  .pp-hero__title {
    font-size: 40px;
  }

  /* INFO */
  .pp-info__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .pp-info__stat {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 24px;
    width: 100%;
  }

  .pp-info__stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* GALLERY */
  .pp-gallery__grid {
    gap: 24px;
  }

 

  /* OTHER PROJECTS */
  .pp-other__main {
    align-items: flex-start;
    gap: 24px;
  }

  .pp-other__h2 {
    font-size: 32px;
    text-align: left;
  }

  .pp-other__nav {
    display: flex;
    align-self: flex-end;
  }

  .pp-other__cards {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0;
    align-items: stretch;
  }

  .pp-other__cards::-webkit-scrollbar { display: none; }

  .pp-other__card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .pp-other__image {
    height: 238px;
  }
}