/* =========================================================================
   Project case-study pages - extends styles.css
   ========================================================================= */
:root{
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2L5.4 12l-1.4 1.4 5.6 5.6L20.4 7.8 19 6.4z'/%3E%3C/svg%3E");
}

.case-hero{position:relative;overflow:hidden;padding-top:clamp(7rem,13vh,9rem);
  padding-bottom:clamp(2.5rem,5vw,4rem)}
.case-hero__orbs{position:absolute;inset:0;z-index:0;filter:blur(64px);opacity:.45;pointer-events:none}
.case-hero .wrap{position:relative;z-index:1}
.crumbs{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.76rem;
  color:var(--ink-2);margin-bottom:1.8rem;flex-wrap:wrap}
.crumbs a{color:var(--pink);transition:color .25s}
.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.5}
.case-hero__meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem}
.case-hero__title{font-size:var(--step-4);max-width:16ch;margin-bottom:.7rem;font-weight:800}
.case-hero__title em{font-style:normal;color:var(--pink)}
.case-hero__lede{font-size:var(--step-1);color:var(--ink-2);max-width:60ch;line-height:1.5}
.case-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

.case-figure{margin-top:clamp(2rem,5vw,3.2rem);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-md);border:1px solid var(--line);background:#000;position:relative}
.case-figure video,.case-figure img{width:100%;display:block}
.case-figure figcaption{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;color:var(--ink-2);
  background:var(--cream);padding:.85rem 1.2rem;border-top:1px solid var(--line);text-align:center}

/* Case body layout: sticky side-nav + content */
.case-body{display:grid;grid-template-columns:210px 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;padding-block:var(--section-y)}
.case-nav{position:sticky;top:110px;display:grid;gap:.2rem}
.case-nav a{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink-2);
  padding:.5rem .8rem;border-left:2px solid var(--line);transition:.25s}
.case-nav a:hover{color:var(--ink);border-color:var(--mauve)}
.case-nav a.active{color:var(--pink);border-color:var(--pink);background:var(--cream-2)}

.case-content{max-width:70ch}
.case-block{padding-bottom:clamp(2.6rem,5vw,3.6rem);margin-bottom:clamp(2.6rem,5vw,3.6rem);
  border-bottom:1px solid var(--line);scroll-margin-top:110px}
.case-block:last-child{border-bottom:0;margin-bottom:0}
.case-block > .eyebrow{margin-bottom:.9rem}
.case-block h2{font-size:var(--step-2);margin-bottom:1.1rem}
.case-block p{color:var(--ink-2);margin-bottom:1.1rem;line-height:1.65}
.case-block p strong{color:var(--ink);font-weight:600}
.case-block ul.ticks{display:grid;gap:.8rem;margin:.4rem 0 1.2rem}
.case-block ul.ticks li{position:relative;padding-left:1.9rem;color:var(--ink-2);line-height:1.55}
.case-block ul.ticks li::before{content:"";position:absolute;left:0;top:.15rem;width:20px;height:20px;
  border-radius:6px;background:var(--pastel);
  -webkit-mask:var(--tick) center/13px no-repeat;mask:var(--tick) center/13px no-repeat;
  background-color:var(--pink)}
.case-block ul.ticks li strong{color:var(--ink)}

/* Role split */
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:.5rem}
.role-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem;
  transform-style:preserve-3d;will-change:transform;transition:transform .2s ease-out,box-shadow .3s}
.role-card:hover{box-shadow:var(--shadow-sm)}
.role-card h4{font-family:var(--f-mono);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink);margin-bottom:.5rem}
.role-card p{font-size:.92rem;margin:0;color:var(--ink-2)}

/* Tech grid */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tech-col{background:var(--cream);padding:1.2rem 1.3rem}
.tech-col h4{font-family:var(--f-mono);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink);margin-bottom:.8rem}
.tech-col .chips{gap:.4rem}

/* Challenge cards */
.challenge{background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--cherry);
  border-radius:var(--radius-sm);padding:1.3rem 1.4rem;margin-bottom:1rem}
.challenge h4{font-size:1.05rem;font-family:var(--f-display);margin-bottom:.5rem;color:var(--ink)}
.challenge .tag{font-family:var(--f-mono);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pink);display:block;margin-bottom:.5rem}
.challenge p{margin:0;font-size:.95rem}
.challenge p + p{margin-top:.6rem}

/* Architecture diagram frame */
.diagram{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.2rem,3vw,2rem);margin:.5rem 0 1rem;overflow-x:auto}
.diagram svg{width:100%;height:auto;min-width:520px}
.diagram figcaption{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);text-align:center;margin-top:1rem}

/* Results metric strip inside case */
.case-block .metrics{margin:.5rem 0 1.2rem}

/* Next project */
.next-proj{background:linear-gradient(180deg,var(--cream-2),var(--cream));border-top:1px solid var(--line)}
.next-proj a{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:clamp(1.5rem,4vw,2.5rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s}
.next-proj a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.next-proj .t{font-family:var(--f-mono);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.next-proj .n{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);margin-top:.3rem}
.next-proj .go{width:52px;height:52px;border-radius:50%;background:var(--mauve-deep);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;transition:transform .35s var(--ease)}
.next-proj a:hover .go{transform:translateX(5px)}

@media (max-width:860px){
  .case-body{grid-template-columns:1fr}
  .case-nav{position:relative;top:0;display:flex;flex-wrap:wrap;gap:.4rem;
    padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
  .case-nav a{border-left:0;border:1px solid var(--line);border-radius:100px;padding:.45rem .9rem}
  .case-nav a.active{border-color:var(--pink)}
}

/* ----- Live embed: click-to-load iframe of the real deployed demo ------- */
.live-embed{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);margin:1.4rem 0}
.live-embed__launch{width:100%;padding:clamp(2.6rem,6vw,4rem) 1.5rem;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;text-align:center;
  background:linear-gradient(180deg,var(--surface),var(--cream-2));color:var(--ink)}
.live-embed__launch svg{width:44px;height:44px;color:var(--pink);transition:transform .3s var(--ease)}
.live-embed__launch:hover svg{transform:scale(1.1)}
.live-embed__launch strong{font-family:var(--f-display);font-size:1.15rem}
.live-embed__launch span{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);max-width:44ch}
.live-embed iframe{width:100%;height:min(70vh,680px);border:0;display:block;background:#fff}
/* Desktop-framed variant: the embedded page is rendered at a laptop viewport and scaled
   down to fit the column, so it reads as the desktop product instead of the mobile
   breakpoint a narrow iframe would otherwise trigger. JS sets the scale and the height. */
.live-embed--desktop{background:var(--cream-2)}
.live-embed--desktop .live-embed__bar{display:flex;align-items:center;gap:.7rem;
  padding:.55rem .9rem;background:var(--surface);border-bottom:1px solid var(--line)}
.live-embed--desktop .live-embed__dots{display:inline-flex;gap:.35rem}
.live-embed--desktop .live-embed__dots i{width:9px;height:9px;border-radius:50%;
  background:var(--line-strong)}
.live-embed--desktop .live-embed__url{font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.02em;color:var(--ink-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.live-embed--desktop .live-embed__viewport{position:relative;overflow:hidden}
.live-embed--desktop iframe{width:1280px;height:800px;transform-origin:0 0;background:#0b0d10}
.live-embed__note{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-2);margin-top:.7rem}
.live-embed__note a{color:var(--pink);text-decoration:underline}