/* =========================================================
   STUDIO NOVO — Our Work page
   Shared tokens, reset, buttons, header, footer and the
   scroll-reveal helper live in common.css (loaded first).
   ========================================================= */

/* ---------- Hero ---------- */
.work-hero{ padding: 92px 0 40px; text-align:center; }
.work-hero__inner h1{ font-size: clamp(2.1rem, 4.4vw, 3rem); line-height:1.15; max-width: 760px; margin: 0 auto; }
.work-hero__desc{ margin: 22px auto 0; max-width: 640px; color: var(--ink-soft); }

/* ---------- Projects (alternating image / text) ---------- */
.projects{ padding: 60px 0 40px; }
/* Screenshot (with the client's review underneath) takes the wider
   column, the same width for every project; the text column sits beside
   it. Both columns start at the same top line, alternating sides. */
.project{
  display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 56px; align-items:start;
  padding: 64px 0; border-top: 1px solid var(--line);
}
.project:first-child{ border-top: none; padding-top: 0; }
.project:nth-child(even){ grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.project:nth-child(even) .project__visual{ order: 2; }
.project__visual{ display:flex; flex-direction:column; gap: 22px; }
.project__body{ padding-top: 6px; }
.project__body .btn{ margin-top: 4px; }

.project__media{
  display:block; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); background: var(--paper); aspect-ratio: 1280 / 692;
  box-shadow: 0 30px 60px -34px rgba(20,40,29,.3);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.project__media:hover{ transform: translateY(-5px); box-shadow: 0 36px 64px -30px rgba(20,40,29,.34); }
.project__media img{ width:100%; height:100%; object-fit: cover; object-position: top center; }

.project__tag{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--green); background: var(--green-mist); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.project__tag--concept{ color: var(--ink-soft); background: var(--cream-2); border: 1px solid var(--line); }
.project__body h2{ font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: 6px; }
.project__meta{ font-size:.86rem; color: var(--ink-faint); margin-bottom: 20px; }
.project__summary{ color: var(--ink-soft); margin-bottom: 24px; }

.project__details{ margin: 0 0 26px; display:flex; flex-direction:column; gap: 14px; }
.project__details div{ display:grid; grid-template-columns: 90px 1fr; gap: 12px; }
.project__details dt{ font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ink); padding-top: 2px; }
.project__details dd{ margin:0; font-size:.92rem; color: var(--ink-soft); }
.project__plan{
  color: var(--green); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--green-mist); text-underline-offset: 3px;
  transition: text-decoration-color .25s var(--ease);
}
.project__plan:hover{ text-decoration-color: var(--green); }

.project__quote{
  margin: 0; padding: 18px 22px; background: var(--paper);
  border-left: 3px solid var(--green); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.project__quote p{ font-size:.93rem; color: var(--ink-soft); font-style: italic; }
.project__quote cite{ display:block; margin-top: 10px; font-style: normal; font-size:.84rem; font-weight:600; color: var(--ink); }

/* ---------- Next project CTA ---------- */
.work-next{ padding: 40px 0 100px; }
.work-next__card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 56px 48px; text-align:center; max-width: 820px; margin: 0 auto;
}
.work-next__card h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; }
.work-next__card p{ color: var(--ink-soft); max-width: 520px; margin: 0 auto; }
.work-next__actions{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .project, .project:nth-child(even){ grid-template-columns: 1fr; gap: 28px; }
  .project:nth-child(even) .project__visual{ order: 0; }
  /* stacked: screenshot, then the text, then the review */
  .project__visual{ display: contents; }
  .project__media{ order: 0; }
  .project__body{ order: 1; padding-top: 0; }
  .project__quote{ order: 2; }
}

@media (max-width: 680px){
  .work-hero{ padding: 48px 0 20px; }
  .projects{ padding: 36px 0 20px; }
  .project{ padding: 44px 0; }
  .project__details div{ grid-template-columns: 1fr; gap: 4px; }
  .work-next{ padding: 20px 0 64px; }
  .work-next__card{ padding: 40px 24px; }
}