/* =========================================================
   CoffeeNCoders — work.css: /work/ only (work.php). Loaded after main.css.
   Dark hero (centred badge, title and words over a slow, tilted wall of the live sites in browser windows, copper edge)
   → grid-paper list: a centred heading, then two projects per row, each the site in an outlined frame over a small spec sheet
   → the shared WhatsApp band (includes/wa-end.php, main.css). Type follows the home hero scale.
   ========================================================= */

/* ---------- Hero ---------- */
.wk-hero {
  position: relative; overflow: hidden; color: var(--cream);
  padding: clamp(130px, 17vh, 190px) 0 clamp(70px, 8vw, 110px);
  background:
    radial-gradient(40% 60% at 85% 35%, rgba(226, 117, 58, .24), transparent 70%),
    radial-gradient(35% 45% at 5% 95%, rgba(244, 168, 90, .08), transparent 70%),
    var(--espresso);
}
.wk-hero::before {   /* faint dot grid that fades towards the words */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 236, 220, .09) 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(100deg, transparent 30%, #000 75%); mask: linear-gradient(100deg, transparent 30%, #000 75%);
}
.wk-hero::after {    /* the copper edge the page's light part starts from */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 117, 58, .8) 30%, rgba(244, 168, 90, .9) 50%, rgba(226, 117, 58, .8) 70%, transparent);
  box-shadow: 0 0 24px 2px rgba(226, 117, 58, .45);
}
.wk-hero { padding-bottom: 0; }
.wk-hero::before { -webkit-mask: linear-gradient(180deg, #000, transparent 60%); mask: linear-gradient(180deg, #000, transparent 60%); }   /* the dot grid fades out over the wall */
.wk-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* hero label: a glass pill with round crops of the live sites (like the home hero's project avatars) + two lines of words */
.wk-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 236, 220, .12); backdrop-filter: blur(8px);
}
.wk-badge__faces { display: flex; padding-left: 2px; }
.wk-badge__faces img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top left; border: 2px solid var(--espresso); background: var(--espresso-2); }
.wk-badge__faces img + img { margin-left: -10px; }
.wk-badge__text { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.25; color: var(--muted-dark); }
.wk-badge__text b { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.wk-hero__title { margin-top: 18px; font-family: var(--display); font-size: clamp(32px, 3.8vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; }   /* the About hero's type size (shared look on every inner hero) */
.wk-hero__title b { display: block; font-weight: inherit; color: var(--copper); }
.wk-hero__lead { max-width: 660px; margin: 22px auto 0; font-size: 18px; line-height: 1.65; color: rgba(247, 242, 235, .8); }

/* browser window (hero wall): a top bar with three dots and the address */
.wk-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #261c17; border-bottom: 1px solid rgba(255, 236, 220, .07); }
.wk-bar > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 236, 220, .18); }
.wk-bar > i:nth-child(1) { background: #ff6159; }
.wk-bar > i:nth-child(2) { background: #ffbd2e; }
.wk-bar > i:nth-child(3) { background: #28c941; }
.wk-bar__url {
  flex: 1; min-width: 0; max-width: 260px; margin: 0 auto; padding: 4px 12px; border-radius: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 500; text-align: center; color: var(--muted-dark); background: rgba(255, 236, 220, .06);
}

/* the wall: two rows of browser windows drifting in opposite directions, tilted back, fading out at the sides and into the copper edge */
.wk-wall {
  position: relative; display: grid; gap: 18px; margin-top: clamp(50px, 6vw, 80px); transform: perspective(1400px) rotateX(18deg); transform-origin: 50% 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.wk-wall::after { content: ""; position: absolute; inset: auto -40px -2px; z-index: 2; height: 75%; background: linear-gradient(180deg, rgba(27, 20, 17, 0), var(--espresso) 92%); pointer-events: none; }
.wk-wall__row { display: flex; gap: 18px; width: max-content; animation: wk-drift 60s linear infinite; }
.wk-wall__row--1 { animation-direction: reverse; margin-left: -180px; }
.wk-wall:hover .wk-wall__row { animation-play-state: paused; }
.wk-wall__win { flex: none; width: clamp(280px, 26vw, 420px); overflow: hidden; border-radius: 12px; background: #261c17; border: 1px solid rgba(255, 236, 220, .1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.wk-wall__win img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }
@keyframes wk-drift { to { transform: translateX(-50%); } }

/* ---------- Projects ---------- */
.wk-list {
  position: relative; padding-block: clamp(70px, 9vw, 120px);
  background:   /* grid paper (the user's pick) */
    linear-gradient(rgba(29, 23, 18, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(29, 23, 18, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper);
  scroll-margin-top: -60px;   /* the user's value: "See the projects" lands with the heading just under the header */
}
.wk-head { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(44px, 5.5vw, 72px); text-align: center; }
.wk-head__title { font-family: var(--display); font-size: clamp(30px, 3.4vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; color: var(--ink); }
.wk-head__title b { display: block; font-weight: inherit; color: var(--copper); }
.wk-head__lead { max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.wk-empty { font-size: 17px; text-align: center; color: var(--muted); }
.wk-empty a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }

/* two projects per row: the site in a thin outlined frame (copper on hover), then name + Visit, the story and a spec table */
.wk-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 90px) clamp(30px, 4vw, 60px); }
.wk-spec__shot { padding: 8px; border-radius: 14px; border: 1px solid rgba(29, 23, 18, .18); background: rgba(255, 255, 255, .5); transition: border-color .4s; }
.wk-spec:hover .wk-spec__shot { border-color: var(--copper); }
.wk-spec__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: 0 30px 60px -40px rgba(27, 20, 17, .6); }
.wk-spec__blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 10; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--muted); background: radial-gradient(60% 60% at 50% 40%, rgba(244, 168, 90, .25), transparent 70%), #f1e6d8; }
.wk-spec__blank img { width: 34px; height: 34px; opacity: .5; }
.wk-spec__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 22px; }
.wk-spec__cat { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); }
.wk-spec__name { margin-top: 6px; font-family: var(--display); font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; color: var(--ink); }
.wk-spec__btn { flex: none; }
.wk-spec__btn svg { width: 14px; height: 14px; }
.wk-spec__text { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.wk-spec__table { margin: 14px 0 0; border-top: 1px solid var(--line); }
.wk-spec__table div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.wk-spec__table dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wk-spec__table dd { margin: 0; color: var(--ink); }
.wk-spec__table .wk-spec__live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: #1f8a4c; }
.wk-spec__live i { width: 7px; height: 7px; border-radius: 50%; background: #2fa866; box-shadow: 0 0 0 3px rgba(47, 168, 102, .2); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) { .wk-specs { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .wk-hero { padding-top: 110px; }
  .wk-wall, .wk-wall__row { gap: 12px; }
  .wk-wall__win { width: 240px; border-radius: 10px; }
  .wk-bar { height: 28px; padding: 0 9px; gap: 5px; }
  .wk-bar > i { width: 6px; height: 6px; }
  .wk-bar__url { font-size: 10.5px; padding: 3px 8px; }
  .wk-spec__top { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-spec__shot { transition: none; }
  .wk-wall__row { animation: none; }
}