/* ============================================================
   HAMZIO — Work (index + case-study detail)
   Depends on styles.css (shared design system + inner-page components).
   Dark · glassy · neon-cyber glow · input→output motif
   ============================================================ */

/* ============================================================
   WORK INDEX
   ============================================================ */

/* ---- shared work meta row ---- */
.work-meta{ display:flex; align-items:center; gap:13px; font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); flex-wrap:wrap; }
.work-meta .svc{ color:var(--cyan); letter-spacing:0.04em; }
.work-meta .sep{ opacity:0.45; }

/* type flag (case study / live site / product) — top-left on visual */
.work-flag{ position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; border:1px solid var(--border-2); background:rgba(6,8,16,0.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--text-2); }
.work-flag .d{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px 1px var(--glow-cyan); }
.work-flag.live{ color:var(--mint); border-color:rgba(132,235,180,0.32); }
.work-flag.live .d{ background:var(--mint); box-shadow:0 0 9px 1px rgba(132,235,180,0.5); }
.work-flag.product{ color:var(--violet); border-color:rgba(var(--violet-rgb),0.32); }
.work-flag.product .d{ background:var(--violet); box-shadow:0 0 9px 1px var(--glow-violet); }

/* shared visual placeholder (striped + glow) */
.work-visual{ position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 13px, rgba(255,255,255,0.015) 13px 26px);
  display:flex; align-items:center; justify-content:center; }
.work-visual::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(360px 240px at 22% 14%, rgba(var(--cyan-rgb),0.16), transparent 62%),
             radial-gradient(320px 250px at 88% 100%, rgba(var(--violet-rgb),0.15), transparent 60%); }
.work-visual .ph-tag{ position:relative; z-index:1; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-3);
  border:1px dashed var(--border-2); padding:8px 14px; border-radius:10px; background:rgba(6,8,16,0.5); text-align:center; }

/* ---- FEATURED case study ---- */
.feat-work{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden;
  margin-top:18px; transition:transform .45s var(--ease), border-color .4s, box-shadow .45s; position:relative; }
.feat-work:hover{ transform:translateY(-4px); border-color:var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 40px 80px -50px var(--glow-cyan); }
.feat-work .work-visual{ min-height:360px; border-right:1px solid var(--hairline); }
.feat-work .feat-flag{ position:absolute; z-index:2; top:18px; left:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:#04111a; font-weight:600;
  padding:6px 12px; border-radius:999px; background:linear-gradient(180deg,var(--cyan),var(--cyan-2));
  box-shadow:0 8px 24px -10px var(--glow-cyan); }
.feat-work .fw-body{ padding:clamp(28px,4vw,46px); display:flex; flex-direction:column; justify-content:center; }
.feat-work .fw-body .work-meta{ margin-bottom:18px; }
.feat-work .fw-body h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.12;
  letter-spacing:-0.03em; margin:0; }
.feat-work .fw-body .dek{ color:var(--text-2); font-size:1.05rem; line-height:1.6; margin-top:16px; max-width:48ch; }
/* inline metrics for featured */
.fw-metrics{ display:flex; gap:30px; margin-top:26px; flex-wrap:wrap; }
.fw-metrics div b{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--text); display:block; line-height:1; }
.fw-metrics div span{ font-family:var(--font-mono); font-size:0.68rem; color:var(--text-3); margin-top:7px; display:block; }
.feat-work .read-link{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; color:var(--cyan); font-weight:600; font-size:0.95rem; transition:gap .3s; }
.feat-work:hover .read-link{ gap:13px; }

/* ---- filter toolbar (reuses .blog-toolbar look) ---- */
.work-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:14px; }
.filter-chips{ display:flex; gap:9px; flex-wrap:wrap; }
.chip{ font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.02em; color:var(--text-2);
  padding:9px 16px; border-radius:999px; border:1px solid var(--border); background:var(--glass);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:.28s var(--ease); white-space:nowrap; }
.chip:hover{ border-color:var(--border-2); color:var(--text); }
.chip.active{ color:#04111a; font-weight:600; background:linear-gradient(180deg,var(--cyan),var(--cyan-2));
  border-color:transparent; box-shadow:0 0 0 1px rgba(var(--cyan-rgb),0.4), 0 10px 28px -14px var(--glow-cyan); }
.result-count{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-3); white-space:nowrap; }

/* ---- WORK GRID ---- */
.work-grid{ display:grid; gap:20px; margin-top:34px; }

/* card primitive */
.work-card{ display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; position:relative; }
.work-card:hover{ transform:translateY(-5px); border-color:var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 60px -42px var(--glow-cyan); }
.work-card .work-visual{ aspect-ratio:16/10; border-bottom:1px solid var(--hairline); }
.work-card .wc-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.work-card .wc-body h3{ font-family:var(--font-display); font-weight:600; font-size:1.24rem; line-height:1.26;
  letter-spacing:-0.02em; margin-top:13px; transition:color .25s; }
.work-card:hover .wc-body h3{ color:var(--cyan); }
.work-card .wc-body .summary{ color:var(--text-2); font-size:0.92rem; line-height:1.55; margin-top:11px; }
/* card metrics (toggleable via Tweaks) */
.wc-metrics{ display:flex; gap:22px; margin-top:18px; }
.wc-metrics div b{ font-family:var(--font-display); font-size:1.32rem; font-weight:600; color:var(--text); display:block; line-height:1; }
.wc-metrics div span{ font-family:var(--font-mono); font-size:0.64rem; color:var(--text-3); margin-top:6px; display:block; }
.work-card .wc-link{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:18px; color:var(--cyan);
  font-weight:600; font-size:0.88rem; transition:gap .3s; }
.work-card:hover .wc-link{ gap:12px; }
.work-card .wc-link.ext::after{ content:'↗'; font-size:0.9em; }

/* hide metrics when Tweaks turns them off */
.work-grid.no-metrics .wc-metrics,
.work-grid.no-metrics .fw-metrics{ display:none; }

/* ---- LAYOUT A: SHOWCASE (default) — 2-col image-led cards ---- */
.work-grid[data-layout="showcase"]{ grid-template-columns:repeat(2,1fr); }

/* ---- LAYOUT B: EDITORIAL — single-column horizontal split rows ---- */
.work-grid[data-layout="editorial"]{ grid-template-columns:1fr; }
.work-grid[data-layout="editorial"] .work-card{ flex-direction:row; align-items:stretch; }
.work-grid[data-layout="editorial"] .work-card .work-visual{ aspect-ratio:auto; width:42%; min-width:240px; flex:none;
  border-bottom:none; border-right:1px solid var(--hairline); }
.work-grid[data-layout="editorial"] .work-card .wc-body{ padding:clamp(24px,3vw,38px); justify-content:center; }
.work-grid[data-layout="editorial"] .work-card .wc-body h3{ font-size:1.5rem; margin-top:14px; }
.work-grid[data-layout="editorial"] .work-card .wc-body .summary{ font-size:0.98rem; max-width:54ch; }

/* ============================================================
   CASE-STUDY DETAIL
   ============================================================ */
.case-hero .ph-inner{ max-width:860px; }
.case-hero .work-meta{ margin-top:20px; }
.case-hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem,4.8vw,3.5rem);
  line-height:1.06; letter-spacing:-0.035em; margin:18px 0 0; }
.case-hero .dek{ font-size:1.18rem; color:var(--text-2); margin-top:20px; max-width:62ch; line-height:1.6; }

/* hero cover (21:9) */
.case-cover{ position:relative; aspect-ratio:21/9; border-radius:var(--radius-lg); overflow:hidden; margin-top:40px; }
.case-cover.work-visual .ph-tag{ font-size:0.78rem; padding:9px 16px; }

/* ---- OVERVIEW strip (client / services / year / role) ---- */
.case-overview{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:40px;
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--border); }
.case-overview .ov{ background:var(--bg-2); padding:24px 26px; }
.case-overview .ov-label{ font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); }
.case-overview .ov-val{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; letter-spacing:-0.015em; margin-top:10px; color:var(--text); }
.case-overview .ov-val a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(var(--cyan-rgb),0.4); transition:.25s; }
.case-overview .ov-val a:hover{ text-decoration-color:var(--cyan); }
.case-overview .ov-val .small{ display:block; font-family:var(--font-body); font-weight:500; font-size:0.86rem; color:var(--text-2); margin-top:4px; line-height:1.5; }

/* ---- section block ---- */
.case-block{ max-width:760px; }
.case-block + .case-block{ margin-top:52px; }
.case-block .blk-label{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); }
.case-block h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-0.025em;
  line-height:1.18; margin-top:14px; }

/* ---- OUTCOME metrics band ---- */
.outcome-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; }
.outcome-stat{ padding:28px 26px; border-radius:var(--radius); text-align:left; }
.outcome-stat b{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); line-height:1;
  background:linear-gradient(110deg, var(--cyan), var(--violet) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:block; }
.outcome-stat span{ font-family:var(--font-mono); font-size:0.72rem; color:var(--text-2); margin-top:14px; display:block; line-height:1.5; }
.outcome-stat em{ font-family:var(--font-mono); font-size:0.64rem; font-style:normal; color:var(--text-3); display:block; margin-top:6px; }

/* ---- GALLERY ---- */
.case-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px; }
.case-gallery .shot{ aspect-ratio:16/10; border-radius:var(--radius); cursor:zoom-in; border:1px solid var(--border); }
.case-gallery .shot.wide{ grid-column:span 2; aspect-ratio:21/9; }
.case-gallery .shot:hover{ border-color:var(--border-2); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:5vw;
  background:rgba(4,6,12,0.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.lightbox.open{ display:flex; }
.lightbox .lb-inner{ width:min(1100px,92vw); aspect-ratio:16/9; border-radius:var(--radius-lg); border:1px solid var(--border-2); position:relative; }
.lightbox .lb-close{ position:absolute; top:-14px; right:-14px; width:42px; height:42px; border-radius:50%;
  background:var(--glass-strong); border:1px solid var(--border-2); color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.lightbox .lb-close:hover{ border-color:rgba(var(--cyan-rgb),0.5); color:var(--cyan); }

/* ---- TESTIMONIAL / pull quote ---- */
.case-quote{ position:relative; margin-top:56px; padding:clamp(34px,5vw,56px); border-radius:var(--radius-lg); overflow:hidden; text-align:center; }
.case-quote::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(540px 300px at 18% 0%, rgba(var(--cyan-rgb),0.15), transparent 64%),
             radial-gradient(520px 300px at 92% 120%, rgba(var(--violet-rgb),0.15), transparent 64%); }
.case-quote .mark{ font-family:var(--font-display); font-size:3rem; line-height:0.6; color:var(--cyan); opacity:0.5; }
.case-quote blockquote{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.4;
  letter-spacing:-0.02em; color:var(--text); max-width:24ch; margin:18px auto 0; }
.case-quote .qt-author{ display:flex; align-items:center; justify-content:center; gap:13px; margin-top:28px; }
.case-quote .avatar{ width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--cyan);
  background:var(--glass-2); border:1px solid rgba(var(--cyan-rgb),0.3); box-shadow:0 0 22px -8px var(--glow-cyan); }
.case-quote .qt-name{ font-family:var(--font-display); font-weight:600; font-size:0.98rem; letter-spacing:-0.01em; text-align:left; }
.case-quote .qt-role{ font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); margin-top:3px; text-align:left; }

/* ---- SERVICES USED ---- */
.svc-used{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.svc-used a{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.78rem; color:var(--text-2);
  padding:11px 16px; border-radius:999px; border:1px solid var(--border); background:var(--glass); transition:.28s; }
.svc-used a:hover{ border-color:rgba(var(--cyan-rgb),0.4); color:var(--cyan); transform:translateY(-2px); }
.svc-used a .arw{ color:var(--cyan); transition:transform .3s var(--ease); }
.svc-used a:hover .arw{ transform:translateX(3px); }

/* ---- NEXT PROJECT nav ---- */
.next-project{ display:block; margin-top:56px; padding:clamp(30px,4vw,48px); border-radius:var(--radius-lg);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; position:relative; overflow:hidden; }
.next-project:hover{ transform:translateY(-3px); border-color:var(--border-2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 36px 70px -48px var(--glow-cyan); }
.next-project .np-label{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-3); }
.next-project h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-0.03em;
  line-height:1.12; margin-top:12px; transition:color .25s; }
.next-project:hover h3{ color:var(--cyan); }
.next-project .np-go{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; color:var(--cyan); font-weight:600; font-size:0.95rem; transition:gap .3s; }
.next-project:hover .np-go{ gap:13px; }

/* shared detail CTA (matches services detail) */
.detail-cta{ position:relative; text-align:center; padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px); border-radius:var(--radius-lg); overflow:hidden; }
.detail-cta::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(620px 360px at 50% -20%, rgba(var(--cyan-rgb),0.18), transparent 62%),
             radial-gradient(520px 320px at 50% 120%, rgba(var(--violet-rgb),0.16), transparent 64%); }
.detail-cta h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08;
  letter-spacing:-0.03em; margin-top:16px; }
.detail-cta p{ color:var(--text-2); font-size:1.06rem; margin:16px auto 0; max-width:52ch; }
.dc-actions{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .work-grid[data-layout="showcase"]{ grid-template-columns:repeat(2,1fr); }
  .feat-work{ grid-template-columns:1fr; }
  .feat-work .work-visual{ border-right:none; border-bottom:1px solid var(--hairline); min-height:240px; }
  .case-overview{ grid-template-columns:repeat(2,1fr); }
  .outcome-band{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .work-grid[data-layout="showcase"]{ grid-template-columns:1fr; }
  .work-grid[data-layout="editorial"] .work-card{ flex-direction:column; }
  .work-grid[data-layout="editorial"] .work-card .work-visual{ width:100%; min-width:0; aspect-ratio:16/10;
    border-right:none; border-bottom:1px solid var(--hairline); }
  .case-overview{ grid-template-columns:1fr; }
  .outcome-band{ grid-template-columns:1fr 1fr; gap:12px; }
  .case-gallery{ grid-template-columns:1fr; }
  .case-gallery .shot.wide{ grid-column:span 1; }
}