/* Technical Projects page. Uses style.css (colours, CV button, transitions)
   and about.css (back link, chips) */

/* ========== Layout: one screen tall ========== */
.projects {
  height: 100vh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  gap: 4vh;
  padding: 12vh 5vw 5vh;
  overflow: hidden;
}

.projects-title {
  margin-top: 1.4vh;
  font-size: min(3.6vw, 6vh);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
}
.projects-title em { font-style: normal; font-weight: 700; color: var(--burgundy-light); }

.group-title {
  font-size: min(0.8vw, 1.5vh);
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-bottom: 1.6vh;
}

/* ========== Featured cards ========== */
.featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4vw;
}

.feature {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 34vh;
  min-height: 230px;
  padding: 3vh 1.8vw;
  border-radius: 18px;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.feature.burg { background: rgba(176, 58, 85, 0.18); border: 1px solid rgba(176, 58, 85, 0.5); }
.feature.gold { background: rgba(226, 177, 60, 0.09); border: 1px solid rgba(226, 177, 60, 0.4); }
.feature:hover { transform: translateY(-5px); border-color: var(--gold); }

.feature-img {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 60%;
  height: 80%;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transition: opacity 0.35s ease, transform 0.6s ease;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent);
          mask: radial-gradient(closest-side, #000 30%, transparent);
}
.feature:hover .feature-img { opacity: 0.55; transform: scale(1.06); }
.feature > *:not(.feature-img):not(.go) { position: relative; }

.go { position: absolute; top: 3vh; right: 1.6vw; color: var(--gold); transition: transform 0.3s ease; }
.feature:hover .go { transform: translate(3px, -3px); }

.feature-meta { font-size: min(0.8vw, 1.5vh); letter-spacing: 0.2em; color: var(--gold); }

.feature h2 {
  margin-top: 1.4vh;
  font-size: min(1.65vw, 3vh);
  font-weight: 500;
  color: var(--white);
}

.feature-text {
  margin-top: 1vh;
  max-width: 92%;
  font-size: min(1vw, 1.85vh);
  line-height: 1.55;
  color: #D9CDC0;
}

.feature-stat { margin-top: auto; }
.feature-stat b { font-size: min(2.1vw, 3.8vh); font-weight: 600; color: var(--gold); }
.feature-stat span { margin-left: 8px; font-size: min(0.85vw, 1.6vh); color: var(--muted); }

/* ========== More projects ========== */
.more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2vh 0.9vw;
}

.tile {
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1.8vh 1.2vw;
  border-radius: 12px;
  background: rgba(14, 10, 12, 0.6);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.tile:hover { border-color: var(--gold); background: rgba(226, 177, 60, 0.06); transform: translateY(-2px); }
.tile b { display: block; font-size: min(1.1vw, 2vh); font-weight: 500; color: var(--white); }
.tile span { display: block; margin-top: 0.5vh; font-size: min(0.85vw, 1.6vh); color: var(--muted); }

/* ========== Side panel ========== */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 4, 5, 0.7);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(620px, 92vw);
  overflow-y: auto;
  padding: 7vh 3vw 5vh;
  background: #120D0F;
  border-left: 1px solid rgba(176, 58, 85, 0.5);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer.open { transform: none; }

.close {
  position: absolute;
  top: 3vh;
  right: 2vw;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(237, 227, 211, 0.25);
  background: transparent;
  color: var(--beige);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.close:hover { border-color: var(--gold); }

.dproj { display: none; }
.dproj.active { display: block; }

.drawer .meta { font-size: 12px; letter-spacing: 0.2em; color: var(--gold); }
.drawer h2 {
  margin-top: 12px;
  padding-right: 40px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
}

.case-list { list-style: none; margin-top: 24px; }
.case-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #D9CDC0;
}
.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 8px;
  height: 2px;
  background: var(--gold);
}
.case-list b { font-weight: 500; color: var(--gold); }

.tools-label { margin-top: 24px; font-size: 11px; letter-spacing: 0.3em; color: var(--muted); }
.drawer .chip { font-size: 13px; padding: 6px 12px; }
.drawer .chips { gap: 8px; margin-top: 12px; }

/* ========== Tablets & phones: stack, allow scrolling ========== */
@media (max-width: 900px) {
  .projects { height: auto; overflow: visible; gap: 32px; padding: 80px 20px 48px; }
  .projects-title { font-size: 38px; }
  .group-title { font-size: 11px; margin-bottom: 14px; }

  .featured { grid-template-columns: 1fr; gap: 16px; }
  .feature { height: auto; min-height: 220px; padding: 24px 22px; }
  .go { top: 22px; right: 20px; }
  .feature-meta { font-size: 11px; }
  .feature h2 { font-size: 22px; }
  .feature-text { font-size: 15px; }
  .feature-stat { margin-top: 18px; }
  .feature-stat b { font-size: 28px; }
  .feature-stat span { font-size: 13px; }

  .more { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 14px; }
  .tile b { font-size: 15px; }
  .tile span { font-size: 12px; }

  .drawer { padding: 64px 22px 40px; }
  .close { top: 16px; right: 16px; }
  .drawer h2 { font-size: 24px; }
  .case-list li { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .overlay, .feature, .feature-img, .tile { transition: none; }
}