/* === Projects grid (no filters) === */

/* GRID 3/2/1 same rhythm as materials */
.projects-wrap .projects-grid{
  display:grid; gap:24px; grid-template-columns:1fr;
}
@media (min-width:640px){ .projects-wrap .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .projects-wrap .projects-grid{ grid-template-columns:repeat(3,1fr); } }

/* Card & flip (same animation + fixed height) */
.projects-wrap .project-card{ perspective:1000px; }
.projects-wrap .project-card .project-card-inner{
  position:relative; width:100%; height:var(--card-h, 420px);
  -webkit-transform-style:preserve-3d; /* FIX: WebKit 3D */
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.projects-wrap .project-card:hover .project-card-inner,
.projects-wrap .project-card:focus-within .project-card-inner{ transform: rotateY(180deg); }

.projects-wrap .project-front,
.projects-wrap .project-back{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; /* FIX: WebKit backface */
  backface-visibility:hidden; height:100%;
}

/* Front: bg image + 50% black overlay, centered title; color applies even with image */
.projects-wrap .project-front{
  background-size:cover; background-position:center center;
  background-color:#a8c0c6; position:relative;
  transform:rotateY(0deg); /* FIX: explicit 0deg */
}
.projects-wrap .project-front-overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
}
.projects-wrap .project-front-center{
  position:relative; z-index:1;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center;
}

/* Yhteiset otsikkotyylit (front + back) + varmistus clampaamisella */
.projects-wrap .project-title,
.projects-wrap .project-title-back{
  margin:0;
  color:#ffffff;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:800;
  font-size: clamp(16px, 3.8vw, 24px);
  line-height: 1.1;
  text-wrap:balance;
  hyphens:auto;
  word-break:break-word;
}

/* Front-väri pysyy valkoisena, back saa oman värinsä */
.projects-wrap .project-title{ color:#ffffff; }
.projects-wrap .project-title-back{ color:#3B5A4C; }

/* Back */
.projects-wrap .project-back{ transform: rotateY(180deg); }
.projects-wrap .project-back{
  background:#D6D2C4; border:0;
}
.projects-wrap .project-back-content{
  display:flex; flex-direction:column;
  justify-content:space-between; align-items:flex-start;
  gap:18px; height:100%; padding:24px; box-sizing:border-box;
}
/* Centered variant (used now) */
.projects-wrap .project-back-content.centered{
  justify-content:center; align-items:center; text-align:center;
}

/* Brief */
.projects-wrap .project-brief{
  color:#000;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400; font-size:20px; line-height:1.2;
}
.projects-wrap .project-brief p{ margin:0 0 .75em 0; }

/* Button */
.projects-wrap .project-btn{
  display:inline-block;
  background:#ffffff;
  color:#3B5A4C;
  text-decoration:none;
  font-family:"Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:600; /* Semibold */
  font-size:24px; line-height:1.2;
  padding:12px 18px;
  border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.projects-wrap .project-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* Clickability: ensure back is clickable when flipped */
.projects-wrap .project-back{ pointer-events:none; }
.projects-wrap .project-card:hover .project-back,
.projects-wrap .project-card:focus-within .project-back{ pointer-events:auto; }
.projects-wrap .project-card:hover .project-front,
.projects-wrap .project-card:focus-within .project-front{ pointer-events:none; }

/* Title overflow safety + wrapping */
.projects-wrap .project-front-center,
.projects-wrap .project-back-content.centered{
  overflow:hidden;
}

/* (Pidetään erillään, jos joskus tarvitaan eri max-koot) */
.projects-wrap .project-front .project-title{ /* mahdollinen front-spesifi säätö tänne */ }
.projects-wrap .project-back .project-title-back{ /* mahdollinen back-spesifi säätö tänne */ }

/* === Compact title size for cards with back="no-page" === */
/* Oletusotsikko 42px → tämä 36px (6px pienempi) */
.projects-wrap--no-page .project-title--compact,
.projects-wrap--no-page .project-title-back--compact{
  font-size: 36px;
}

/* Halutessa mobiiliin vähän pienempi edelleen */
@media (max-width: 640px){
  .projects-wrap--no-page .project-title--compact,
  .projects-wrap--no-page .project-title-back--compact{
  font-size: 24px;
  }
}