/* ================================
   Projects Section v11
================================ */

/* Tokens */
:root {
  --ink-900: #10131a;
  --ink-500: #5d6a7e;
  --brand: #398fba;
  --brand-2: #7fb7d3;

  --panel-bg: rgba(10, 14, 20, 0.35);
  --radius-card: 12px;
  --radius-btn: 12px;

  --shadow-card: 0 16px 38px rgba(0, 0, 0, 0.16);
  --shadow-raise: 0 22px 50px rgba(16, 19, 26, 0.26);
}

/* Section wrapper */
.projects.v11 {
  padding: clamp(40px, 6vw, 88px) 0;
}

/* Match the same start and end as the section above */
.projects.v11 .projects-rail {
  max-width: 1200px;                 /* match your main container width */
  margin: 0 auto;
  padding-left: clamp(16px, 5vw, 5%); /* same side paddings as above */
  padding-right: clamp(16px, 5vw, 5%);
}

.projects.v11 .projects-head {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.projects.v11 .projects-title {
  font: 800 clamp(1.35rem, 2.6vw, 2rem) / 1.2 "Montserrat", sans-serif;
  margin: 0 0 6px;
  color: #0f1115;
}

.projects.v11 .projects-tag {
  margin: 0;
  color: var(--ink-500);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

/* Grid */
.projects.v11 .projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.6vw, 30px);
  list-style: none;
  padding: 0;
  margin: clamp(18px, 3vw, 28px) 0 0;
  align-items: start;               /* top align all cards */
}

/* Keep 3 across on desktop */
.projects.v11 .project-card {
  position: relative;
  grid-column: span 4;              /* 12 / 4 = 3 cards per row */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #f6f9fb;
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  display: flex;
  flex-direction: column;
  height: 100%;                     /* equal card heights */
}

@media (max-width: 1024px) {
  .projects.v11 .project-card { grid-column: span 6; } /* 2 across */
}
@media (max-width: 640px) {
  .projects.v11 .project-card { grid-column: span 12; } /* 1 across */
}

.projects.v11 .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex-grow: 1;
}

/* Figure */
.projects.v11 .card-fig {
  position: relative;
  aspect-ratio: 16/11;
  border-radius: inherit;
  background: #eaf3f8;
}

/* Image */
.projects.v11 .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.4s ease;
}

/* Accent edge */
.projects.v11 .card-fig::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 rgba(57, 143, 186, 0);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .projects.v11 .project-card:hover .card-img {
    transform: scale(1.06) translateY(-2px);
  }
  .projects.v11 .project-card:hover .card-fig::after {
    box-shadow: inset 0 0 0 2px rgba(57, 143, 186, 0.95);
  }
}

/* Top chip */
.projects.v11 .chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #0f2430;
  font: 700 0.72rem/1 "Montserrat", sans-serif;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* Tap to view chip */
.projects.v11 .tap-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  color: #0f2430;
  font: 700 0.72rem/1 "Montserrat", sans-serif;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  z-index: 3;
}

/* Hide tap hint on touch devices */
@media (hover: none) and (pointer: coarse) {
  .projects.v11 .tap-hint { display: none; }
}

/* Overlay */
.projects.v11 .card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.projects.v11 .card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0,0,0,.65) 18%, rgba(0,0,0,0) 60%);
  z-index: 0;
}

/* Overlay content */
.projects.v11 .overlay-content {
  position: relative;
  z-index: 1;
  width: min(94%, 560px);
  margin: clamp(12px, 2.2vw, 18px);
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: 14px;
  background: var(--panel-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}

.projects.v11 .overlay-title {
  margin: 0 0 4px;
  font: 800 clamp(1.05rem, 1.7vw, 1.3rem) / 1.25 "Montserrat", sans-serif;
}
.projects.v11 .overlay-sub {
  margin: 0 0 4px;
  color: rgba(255,255,255,.9);
  font: 600 0.9rem/1 "Montserrat", sans-serif;
}
.projects.v11 .overlay-desc {
  margin: 0 0 10px;
  color: rgba(255,255,255,.95);
  font-size: 0.98rem;
  line-height: 1.45;
}
.projects.v11 .overlay-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius-btn);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  font-weight: 800;
  border: 1px solid var(--brand);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  user-select: none;
}

/* Desktop hover/focus */
@media (hover: hover) {
  .projects.v11 .project-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-raise);
  }
  .projects.v11 .project-card:hover .card-overlay { opacity: 1; }
  .projects.v11 .project-card:hover .overlay-content {
    transform: translateY(0);
    opacity: 1;
  }
}
.projects.v11 .project-card:focus-within .card-overlay { opacity: 1; }
.projects.v11 .project-card:focus-within .overlay-content {
  transform: translateY(0);
  opacity: 1;
}

/* On mobile/touch: overlay always visible */
@media (hover: none) and (pointer: coarse) {
  .projects.v11 .card-overlay { opacity: 1 !important; }
  .projects.v11 .overlay-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Small screens */
@media (max-width: 420px) {
  .projects.v11 .overlay-content { padding: 14px; }
  .projects.v11 .overlay-title { font-size: 1rem; }
  .projects.v11 .overlay-desc { font-size: 0.94rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .projects.v11 .card-img,
  .projects.v11 .card-overlay,
  .projects.v11 .overlay-content { transition: none; }
}

/* =========================
   Page wipe animation
========================= */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f1115;
  background-image:
    radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(26,30,36,1) 0%, rgba(15,17,21,1) 100%);
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(0.22, 0.9, 0.24, 1);
}
.page-wipe.is-active { transform: translateY(0); }