/**
 * WORK PAGE - styles unique to public/work.html (the portfolio/selected
 * work page, linked from the nav as "Work"). The nav bar and footer on
 * this page reuse nav.css/footer.css, same as every other marketing
 * page; this file covers the hero, the project showcases, the device
 * mockups, and the closing call-to-action. The Design Library itself is
 * its own page now (public/designs.html / designs.css), reached via the
 * "Work" nav dropdown (see nav.css) - this page no longer has a teaser
 * card of its own for it.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the hero heading/subtext: .wk-hero;
 *   - change one project's layout (number, name, description, tags,
 *     button): .wk-project / .wk-num / .wk-name / .wk-category /
 *     .wk-desc / .wk-tags / .wk-actions (add .wk-project--rev to a
 *     project to flip it to visual-left / text-right, alternating the
 *     editorial rhythm down the page; .wk-project--first only tightens
 *     the gap right under the hero, see the comment next to it);
 *   - change the laptop/phone device image: .wk-devices-shot (just sizes
 *     the one ready-made per-project mockup image - see that section's
 *     own comment for where those images live and why there's no
 *     separate screenshot-compositing system here anymore);
 *   - change the closing call-to-action band: .wk-final (same soft
 *     glow technique and centered layout as partner-program.css's
 *     .pp-final / index.html's .contact - this section also needs the
 *     shared .sec class in the HTML alongside .wk-final for the same
 *     vertical padding those two get).
 *
 * Requires base.css to be linked first.
 */

/* ── HERO ─────────────────────────────────────────── */
/* Deliberately shorter than a typical section hero - the projects
   themselves are the focus of this page, not the hero. */
.wk-hero { padding-top: 168px; padding-bottom: 20px; }
.wk-hero-in { max-width: 640px; }
.wk-hero h1 {
  font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  margin: 14px 0 16px;
}
.wk-hero h1 span { color: var(--accent); }
.wk-hero p { font-size: 1rem; color: var(--text-3); line-height: 1.7; max-width: 480px; }

/* ── ONE PROJECT SHOWCASE ─────────────────────────────
   Text column + visual column, side by side. .wk-project--rev flips
   the order (visual left, text right) for the alternating rhythm - add
   it to every other project in the HTML. */
.wk-project { padding: 88px 0; }
.wk-project + .wk-project { border-top: 1px solid var(--border); }
/* The very first project sits right under the shortened hero above -
   its own top padding would otherwise stack on top of the hero's
   bottom padding and leave too large a gap before "01" appears. */
.wk-project--first { padding-top: 32px; }
/* The section itself only handles vertical rhythm; .wk-project-wrap
   (the actual .wrap div inside it) is the flex row that alternates
   direction, since .wrap also needs to keep its usual centering/max-
   width/side-padding job. */
.wk-project-wrap { display: flex; align-items: center; gap: 64px; }
.wk-project--rev .wk-project-wrap { flex-direction: row-reverse; }
.wk-text { flex: 0 0 auto; width: 36%; min-width: 280px; }
.wk-visual { flex: 1 1 auto; min-width: 0; position: relative; }

.wk-num {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-size: .92rem; font-weight: 700;
  color: var(--accent); letter-spacing: .1em; margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.wk-num::after { content: ''; width: 44px; height: 1px; background: var(--border-mid); flex-shrink: 0; }
.wk-name {
  font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  margin-bottom: 8px;
}
.wk-category { font-size: .9rem; color: var(--text-3); margin-bottom: 18px; }
.wk-desc { font-size: .92rem; color: var(--text-2); line-height: 1.75; max-width: 42ch; margin-bottom: 20px; }
.wk-tags { font-size: .78rem; color: var(--text-3); letter-spacing: .02em; margin-bottom: 28px; }

/* Each project's one action - a plain .btn-ghost (already defined in
   base.css) with a small external-link glyph, so it reads as clearly
   interactive without competing with the screenshot next to it the
   way a solid accent-filled button would. */
.wk-actions { display: flex; align-items: center; }
.wk-actions .btn svg { width: 12px; height: 12px; }

/* ── DEVICE PRESENTATION ──────────────────────────────
   Each project's laptop+phone visual is now one single, ready-made
   mockup image per project (public/assets/work/<project>/<proj>-devices
   .png/.webp) with that project's real screenshots already composited
   in by the tool that generated them - not the earlier custom VigiWorks
   transparent-frame system (reusable blank hardware + CSS-positioned
   screenshots layered live). That system is gone; see git history if a
   reusable, independently-updatable compositing approach is wanted
   again later. Because the screenshots are baked into the image itself,
   there's nothing to position/crop here - .wk-devices-shot just sizes
   the image as a block. */
.wk-devices-shot { width: 100%; max-width: 620px; }
.wk-devices-shot img { display: block; width: 100%; height: auto; }
.wk-project--rev .wk-devices-shot { margin-left: auto; }

/* ── CLOSING CALL TO ACTION ───────────────────────────
   Same soft bottom-anchored glow technique and centered single-column
   composition as index.html's Contact section and partner-program.css's
   .pp-final (see css/marketing/contact.css's .contact/.contact::before/
   .contact-in/.contact-h) - this section also carries the shared .sec
   class in the HTML for the same vertical padding those two get, rather
   than a shorter one of its own. An earlier version of this section
   used a left-text/right-button split layout with its own smaller glow,
   which read as two disconnected halves and left too little vertical
   room for the glow to fade out before the section's own edge (visible
   as a hard-edged arc instead of a soft glow) - reusing the proven
   pattern from those two other sections fixes both at once. */
.wk-final { position: relative; overflow: hidden; }
.wk-final::before {
  content: ''; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 1000px; pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 50% 80%, rgba(0,255,140,.24) 0%, rgba(0,255,140,.08) 50%, transparent 72%);
}
.wk-final-in {
  position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto;
}
.wk-final-h {
  font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 10px 0 18px;
}
.wk-final-h span { color: var(--accent); display: block; }
.wk-final-sub { font-size: .98rem; color: var(--text-3); line-height: 1.7; max-width: 480px; margin: 0 auto 30px; }
/* Get a Quote stays the one solid/filled button (primary); Explore
   Design Library is deliberately the quieter .btn-ghost treatment right
   next to it, so the two don't compete for attention. */
.wk-final-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

/* ============================================================
   MOBILE / TABLET OVERRIDES
   ============================================================ */
@media (max-width: 960px) {
  .wk-project { padding: 64px 0; }
  .wk-project--first { padding-top: 24px; }
  .wk-project-wrap { flex-direction: column; gap: 44px; }
  .wk-project--rev .wk-project-wrap { flex-direction: column; }
  .wk-text { width: 100%; }
  /* .wk-project-wrap's align-items:center (needed for the side-by-side
     row layout above) sizes a column flex item to its content instead
     of stretching it, so .wk-visual needs an explicit full width here -
     without it, .wk-devices-shot's own width:100% has nothing to
     resolve against. Once stacked, .wk-visual is full width, so the
     device image can also render larger (in viewport terms) than it did
     squeezed into a side-by-side column - raise the cap accordingly. */
  .wk-visual { width: 100%; }
  .wk-devices-shot { max-width: 480px; }
  .wk-project--rev .wk-devices-shot { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .wk-hero { padding-top: 140px; }
  .wk-devices-shot { max-width: 400px; margin-left: auto; margin-right: auto; }
  .wk-final-actions { flex-direction: column; align-items: stretch; }
}