/* USAMAGROWTH.COM | components.css v1.0 | Phase 3 additions (load after main.css) */

/* ---------- Portfolio ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.filter-btn{font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.6px;text-transform:uppercase;padding:11px 20px;border-radius:100px;border:1.5px solid var(--grey-300);background:#fff;color:var(--grey-700);cursor:pointer;transition:all .2s var(--ease)}
.filter-btn:hover{border-color:var(--black);color:var(--black)}
.filter-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;aspect-ratio:1/1;background:var(--grey-100);border:1px solid var(--grey-300)}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.work-item:hover img{transform:scale(1.05)}
.work-item .work-cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(15,15,15,.85));color:#fff;padding:40px 18px 16px;font-family:var(--font-head);font-weight:600;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.work-item:hover .work-cap{opacity:1;transform:none}
.work-item.hidden{display:none}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:400;display:none;align-items:center;justify-content:center;padding:5vh 4vw}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-close{position:absolute;top:22px;right:26px;background:none;border:0;color:#fff;font-size:40px;cursor:pointer;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:24px;cursor:pointer;transition:background .2s}
.lb-nav:hover{background:var(--red)}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#ddd;font-size:14.5px;font-family:var(--font-head);font-weight:600;text-align:center;max-width:80vw}

/* ---------- Case study pages ---------- */
.cs-hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;position:relative}
.cs-hero-meta div{font-size:14px;color:#bdbdbd}
.cs-hero-meta b{display:block;font-family:var(--font-head);font-size:15px;color:#fff;letter-spacing:.4px}
.snapshot{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:-58px;position:relative;z-index:5}
.snap-item{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:26px 22px;text-align:center;border-top:4px solid var(--red)}
.snap-item b{font-family:var(--font-head);font-weight:800;font-size:34px;color:var(--black);display:block}
.snap-item b .up{color:var(--success);font-size:.6em;vertical-align:middle}
.snap-item span{font-size:13.5px;color:var(--grey-500)}
.chart-block{background:#fff;border:1px solid var(--grey-300);border-radius:var(--radius-lg);padding:34px;position:relative}
.chart-block h3{margin-bottom:6px}
.chart-block .chart-sub{font-size:14.5px;color:var(--grey-500);margin-bottom:24px}
.chart-wrap{position:relative;height:340px}
.chart-summary{margin-top:18px;font-size:14.5px;color:var(--grey-700);border-left:3px solid var(--red);padding-left:14px}
/* data lock overlay: remove the .data-lock div once real numbers are in */
.data-lock{position:absolute;inset:0;background:rgba(255,255,255,.86);backdrop-filter:blur(2px);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius-lg);text-align:center;padding:24px}
.data-lock b{font-family:var(--font-head);font-weight:800;letter-spacing:1.5px;color:var(--red);text-transform:uppercase;font-size:15px}
.data-lock small{color:var(--grey-700);max-width:420px;font-size:13.5px}
.quote-block{border-left:5px solid var(--red);background:var(--grey-100);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:36px 40px;font-size:21px;font-family:var(--font-head);font-weight:600;line-height:1.5;color:var(--black)}
.quote-block footer{margin-top:16px;font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--grey-500)}
.cs-nav{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cs-nav a{border:1px solid var(--grey-300);border-radius:var(--radius-lg);padding:24px 26px;color:var(--black);transition:border-color .2s,transform .2s,box-shadow .2s;background:#fff}
.cs-nav a:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.cs-nav small{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red)}
.cs-nav strong{display:block;font-family:var(--font-head);font-size:18px;margin-top:6px}

/* ---------- Tools page ---------- */
.tool-group{margin-bottom:64px}
.tool-group h3{margin-bottom:8px}
.tool-group>p{color:var(--grey-700);max-width:760px;margin-bottom:26px}
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tool-card{border:1px solid var(--grey-300);border-radius:var(--radius);padding:20px 18px;display:flex;align-items:center;gap:12px;background:#fff;transition:transform .2s var(--ease),box-shadow .2s}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tool-dot{width:38px;height:38px;border-radius:10px;background:var(--red-tint);color:var(--red);font-family:var(--font-head);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.tool-card span{font-family:var(--font-head);font-weight:600;font-size:15px}

/* ---------- Process page ---------- */
.proc-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:64px 0;position:relative}
.proc-row:nth-child(even) .proc-text{order:2}
.proc-visual{border-radius:var(--radius-lg);background:linear-gradient(150deg,#f2f2f2,#e6e6e6);aspect-ratio:9/7;position:relative;overflow:hidden;transition:transform .35s var(--ease);transform-style:preserve-3d;box-shadow:var(--shadow)}
.proc-visual:hover{transform:perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-4px)}
.proc-big-num{font-family:var(--font-head);font-weight:800;font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:2px var(--red);opacity:.9}
.proc-text h2{margin:10px 0 16px}
.proc-text p{color:var(--grey-700)}
.proc-text ul{margin-top:18px}
.proc-spine{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(var(--red),rgba(255,0,0,.15));transform:translateX(-50%);display:none}

@media (max-width:1080px){
  .tool-grid{grid-template-columns:repeat(3,1fr)}
  .snapshot{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .proc-row{grid-template-columns:1fr;gap:28px;padding:44px 0}
  .proc-row:nth-child(even) .proc-text{order:0}
  .tool-grid{grid-template-columns:repeat(2,1fr)}
  .cs-nav{grid-template-columns:1fr}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr}
  .snapshot{grid-template-columns:1fr 1fr;margin-top:-40px}
  .snap-item b{font-size:26px}
  .chart-wrap{height:260px}
  .tool-grid{grid-template-columns:1fr 1fr}
  .quote-block{padding:26px;font-size:18px}
}