/* work.html — page-specific styles + perf optimizations
   Loaded after app.min.css so it overrides default .stagger / .reveal behavior
   for the portfolio grid (instant render, no fade-in delay, no layer explosion). */

/* ═════════════════════════════════════════════════════════════════════════
   PORTFOLIO GRID — RENDER PERFORMANCE
   ═════════════════════════════════════════════════════════════════════════ */

/* Layout containment limits browser style/layout work to inside the grid */
.work-portfolio .work-grid{ contain: layout style; }

/* Skip rendering offscreen cards. Above-fold (3-col desktop = first 6 / 9,
   mobile = first 1) renders immediately, rest deferred until near viewport. */
.work-portfolio .work-card:nth-child(n+10){
  content-visibility: auto;
  contain-intrinsic-size: 540px 380px;
}
@media (max-width: 768px){
  .work-portfolio .work-card:nth-child(n+3){
    content-visibility: auto;
    contain-intrinsic-size: 360px 320px;
  }
}

/* Disable stagger fade-in for portfolio cards — instant paint, no will-change
   layers for 30 elements. Cards still inherit .stagger for backward compat
   but never animate. */
.work-portfolio .work-grid.stagger > *,
.work-portfolio .work-grid.stagger.vis > *{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Card styling — no GPU layer promotion (was causing 30-layer explosion on
   mobile, leading to scroll jank + VRAM pressure). Plain elements + reserved
   image space below = smooth scroll. */
.work-portfolio .work-card{
  -webkit-font-smoothing: subpixel-antialiased;
  transition: none !important;
}
.work-portfolio .work-card:hover{ transition: none !important; }

/* Card image — solid placeholder background prevents white flash before
   decode; no transform/transition (compositor sees a static raster). */
.work-portfolio .work-card-img{
  background-color: #14181c;
  transition: none !important;
}
.work-portfolio .work-card:hover .work-card-img{ transform: none !important; }

/* Card → clickable anchor reset */
.work-portfolio a.work-card{
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.work-portfolio a.work-card:hover{ text-decoration: none !important; }

/* Fortune Fried Chicken — shift image content + slight scale-up */
.work-portfolio .work-card .work-card-img[src*="fortune-fried-chicken"]{
  object-position: center top !important;
  transform: scale(1.1) !important;
  transform-origin: center top !important;
}

/* Hide testimonial icon site-wide (HTML now removed too) */
.work-testimonial-icon{ display: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
   HERO STATS
   ═════════════════════════════════════════════════════════════════════════ */
.work-hero-stats{
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.work-hero-stat{
  text-align: left !important;
  align-items: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
}
.work-hero-stat-num,
.work-hero-stat-label{
  text-align: left !important;
  align-self: flex-start !important;
  display: block !important;
  width: 100% !important;
}

@media (max-width: 768px){
  .work-hero-stat{ padding-left: 0 !important; padding-right: 0 !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  /* Featured Case Study — tighter card padding */
  .work-case-cell{ padding: 1.25rem !important; }
  .work-case-cell-label{ margin-bottom: 0.85rem !important; }
  .work-case-cell p{ font-size: 14px !important; line-height: 1.7 !important; }
  .work-case-grid{ gap: 1rem !important; }
  .work-case-stack{ padding: 1.25rem !important; }
  .work-case-outcome-note{ font-size: 13px !important; margin-top: 1rem !important; }

  /* What Partners Say — tighter cards */
  .work-testimonial-card{
    padding: 1.5rem !important;
    gap: 0.85rem !important;
  }
  .work-testimonial-quote{ font-size: 15px !important; line-height: 1.65 !important; margin: 0 !important; }
  .work-testimonial-attr{ font-size: 13px !important; margin: 0 !important; }
  .work-testimonials-grid{ gap: 1rem !important; }
  .work-testimonials-header{ margin-bottom: 2rem !important; }

  /* Hero illustration — show on mobile (overrides .work-hero-right{display:none}) */
  .work-hero-right{ display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
  .work-hero-right .whi-wrap{ width: 100%; max-width: 360px; margin: 0 auto; padding: 0; line-height: 0; }
  .work-hero-right .whi-svg{ width: 100% !important; height: auto !important; max-width: 360px; display: block; margin: 0 !important; }

  /* Hero — relax 100vh so content + illustration fits */
  .work-hero{ height: auto !important; min-height: 0 !important; padding: calc(72px + 2rem) 0 0.75rem !important; }
  .work-hero-grid{ gap: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
  .work-hero-content h1{ font-size: clamp(2rem, 8vw, 2.6rem) !important; line-height: 1.15 !important; margin: 0.5rem 0 1rem !important; }

  /* Hero stats — stacked, identical top lines (same width, color, thickness, spacing) */
  .work-hero-stats{
    flex-direction: column !important;
    gap: 0 !important;
    border: none !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  .work-hero-stat{
    flex: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 1.25rem 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(60,234,199,0.18) !important;
  }
  .work-hero-stat-num{ font-size: 2rem !important; }

  /* Portfolio — fix spacing between title (filter) and cards */
  .work-portfolio{ padding: 2.618rem 0 3rem !important; }
  .work-filter{ padding: 1.25rem !important; margin-bottom: 1.5rem !important; }
  .work-filter-bottom{ gap: 0.75rem !important; }
  .work-grid-meta{ margin-bottom: 1.25rem !important; }
  .work-portfolio .work-grid{ grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .work-portfolio .work-card{ border-radius: 14px !important; }
  .work-portfolio .work-card-body{ padding: 1.25rem !important; }
}