/* N4 Studio clone — work index + case study pages
   reuses tokens from styles.css (bg/ink/muted/accent, Favoritpro) */

/* ---------- work index hero ---------- */
.whero { padding: 160px 40px 70px; max-width: 1280px; margin: 0 auto; }
.whero-h1 {
  font-size: clamp(1.75rem, 1.443rem + 1.25vw, 2.9438rem);
  line-height: 1.2; letter-spacing: -0.02em; font-weight: 400; max-width: 880px;
}
.whero-sub { color: var(--muted); margin-top: 20px; font-size: 17px; max-width: 520px; }

/* ---------- project grid ---------- */
.pgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 24px; max-width: 1280px; margin: 0 auto; padding: 0 40px 110px;
}
.pcard { display: block; }
.pcard-visual {
  position: relative; aspect-ratio: 1 / 0.72; overflow: hidden;
  border-radius: 2px; background: #0d1418;
}
.pcard-bg, .pcard-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pcard-bg { transition: transform .8s var(--ease); }
.pcard:hover .pcard-bg { transform: scale(1.04); }
/* site screenshot slides up from bottom edge on hover (original pattern) */
.pcard-shot {
  top: auto; bottom: 0; left: 3.5%; right: 3.5%; height: 82%;
  transform: translateY(103%);
  transition: transform .7s var(--ease);
  border-radius: 4px 4px 0 0; box-shadow: 0 -18px 44px rgba(0,0,0,.5);
}
.pcard:hover .pcard-shot { transform: translateY(0); }
.pcard-logo {
  position: absolute; top: 20px; left: 20px; height: 26px; max-width: 40%;
  width: auto; object-fit: contain; object-position: left top; z-index: 2;
}
.pcard-meta { padding: 16px 2px 0; }
.pcard-meta b { font-weight: 500; font-size: 17px; }
.pcard-meta span { display: block; color: var(--muted); font-size: 14px; margin: 4px 0 10px; }

/* ---------- case study: hero ---------- */
.case-hero { padding-top: 132px; }
.case-hero-head { max-width: 1280px; margin: 0 auto 44px; padding: 0 40px; }
.case-hero-head h1 {
  font-size: clamp(2.2rem, 1.6rem + 3.2vw, 4.2rem);
  line-height: 1.08; letter-spacing: -0.02em; font-weight: 400;
}
.case-sub { color: var(--muted); font-size: clamp(17px, 1.9vw, 22px); margin-top: 14px; max-width: 680px; }
.case-hero-img { position: relative; overflow: hidden; }
.case-hero-img img { width: 100%; height: 100%; max-height: 78vh; object-fit: cover; display: block; }
.case-hero-img::after { /* subtle bottom edge line, flat */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
}

/* overview grid: narrative left, meta right */
.case-over {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 40px; max-width: 1280px; margin: 0 auto; padding: 64px 40px 24px;
}
.case-desc { grid-column: 1 / span 7; font-size: 17.5px; line-height: 1.55; color: #d9dee2; }
.case-desc p + p { margin-top: 20px; }
.case-meta { grid-column: 9 / span 4; display: flex; flex-direction: column; }
.case-meta-group { border-top: 1px solid var(--line); padding: 16px 0 22px; }
.case-meta-group h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500; margin-bottom: 10px;
}
.case-meta-group p { font-size: 14.5px; color: #c8c8c8; }
.case-visit {
  display: inline-block; margin-top: 6px; align-self: flex-start;
  font-size: 14.5px; color: var(--ink); border: 1px solid var(--line);
  border-radius: 99px; padding: 10px 22px; transition: background .25s, color .25s, border-color .25s;
}
.case-visit:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- case body: visual grid ---------- */
.case-body { max-width: 1280px; margin: 0 auto; padding: 40px 40px 0; }
.cv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.cv { grid-column: span var(--w, 12); border-radius: 2px; overflow: hidden; }
.cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-landscape { aspect-ratio: 16 / 10; }
.cv-portrait  { aspect-ratio: 3 / 4; }
.cv-square    { aspect-ratio: 1 / 1; }
.cv + .cv { margin-top: 0; }
.cv-grid + .cv-grid { margin-top: 20px; }

/* narrative blocks between visuals */
.case-sec { max-width: 1280px; margin: 0 auto; padding: 90px 40px 0; }
.case-sec h2 { font-size: clamp(24px, 2.6vw, 33px); font-weight: 400; line-height: 1.25; letter-spacing: -0.4px; margin-bottom: 26px; }
.case-sec .case-sec-p { max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.case-sec .case-sec-p p + p { margin-top: 18px; }

/* ---------- quotes ---------- */
.case-words { max-width: 1280px; margin: 0 auto; padding: 120px 40px 0; }
.case-quote + .case-quote { margin-top: 80px; }
.case-quote blockquote {
  font-size: clamp(22px, 2.8vw, 33px); line-height: 1.3; font-weight: 300;
  letter-spacing: -0.4px; max-width: 980px;
}
.case-quote figcaption { color: var(--muted-2); font-size: 14px; margin-top: 18px; }

/* ---------- results ---------- */
.case-results { max-width: 1280px; margin: 0 auto; padding: 110px 40px 0; }
.cstats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
}
.cstat { border-bottom: 1px solid var(--line); padding: 26px 18px 26px 0; }
.cstat + .cstat { padding-left: 26px; }
.cstat span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.cstat b { font-size: clamp(34px, 3.6vw, 50px); font-weight: 400; letter-spacing: -1.5px; line-height: 1; }

/* ---------- up next ---------- */
.case-next { display: block; position: relative; margin-top: 120px; overflow: hidden; }
.case-next-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case-next:hover .case-next-img { transform: scale(1.045); }
.case-next::before { content: ''; position: absolute; inset: 0; background: rgba(10,15,18,.55); transition: background .5s; }
.case-next:hover::before { background: rgba(10,15,18,.4); }
.case-next-inner {
  position: relative; z-index: 2; min-height: 46vh; max-width: 1280px; margin: 0 auto;
  padding: 60px 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.case-next-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case-next-logo { height: clamp(30px, 4vw, 46px); width: auto; max-width: 60vw; object-fit: contain; object-position: left bottom; margin-top: 16px; }
.case-next-explore { font-size: 15px; color: var(--ink); white-space: nowrap; border-bottom: 1px solid var(--muted); padding-bottom: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .case-desc { grid-column: 1 / span 12; }
  .case-meta { grid-column: 1 / span 12; flex-direction: row; flex-wrap: wrap; gap: 0 48px; }
  .case-meta-group { flex: 1 1 200px; }
}
@media (max-width: 768px) {
  .whero { padding: 140px 20px 50px; }
  .pgrid { grid-template-columns: 1fr; padding: 0 20px 70px; gap: 52px; }
  .pcard-logo { height: 22px; }
  /* no hover on touch: show the site screenshot at rest */
  @media (hover: none) {
    .pcard-shot { transform: translateY(0); height: 62%; }
  }
  .case-hero-head { padding: 0 20px; }
  .case-over { padding: 44px 20px 10px; gap: 36px; }
  .case-body, .case-sec, .case-words, .case-results { padding-left: 20px; padding-right: 20px; }
  .cv { grid-column: span 6; }
  .cv.cv-landscape { grid-column: span 12; }
  .cstat + .cstat { padding-left: 0; }
  .cstats { grid-template-columns: 1fr 1fr; }
  .case-next-inner { padding: 44px 20px; min-height: 38vh; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .cv { grid-column: span 12; }
  .cstats { grid-template-columns: 1fr; }
}