/* ==========================================================================
   AD HOLIC — /web-development

   The page recedes so the work can be itself. Ad Holic's ribbon is used
   only for chrome and CTAs; every card wears --accent, sampled from that
   client's own live site. Five cards glowing the same brand magenta would
   read as five mockups, which is the one thing this page cannot afford.
   ========================================================================== */

/* ---------- Intro ---------- */

.wk-intro .lede { margin-top: var(--s-5); }

/* The domains, printed as themselves. Proof before any picture loads:
   these are addresses, and they resolve. */
.wk-domains {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
}
.wk-domains a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--lilac-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.wk-domains a:hover { color: var(--ice); border-bottom-color: var(--magenta); }

/* ---------- A project ---------- */

.wk-list { padding-top: 0; }

.wk {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-9);
  border-top: 1px solid var(--plum-high);
}
.wk:first-child { border-top: 0; padding-top: var(--s-7); }

@media (min-width: 900px) {
  .wk {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--s-8);
    align-items: center;
  }
  /* Alternate which side the viewport sits on. At five projects this
     reads as rhythm; in a grid, five reads as a shortage. */
  .wk:nth-child(even) .wk__frame { order: 2; }
}

/* ---------- The browser frame ---------- */

.wk__frame {
  position: relative;
  border: 1px solid var(--plum-high);
  border-radius: var(--r-2);
  background: var(--plum);
  overflow: hidden;
  box-shadow: var(--sh-2);
  transition: transform var(--dur-3) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}
.wk__frame[data-href] { cursor: pointer; }
.wk:hover .wk__frame,
.wk:focus-within .wk__frame {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: var(--sh-3), 0 0 44px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* The chrome bar carries three true things: it is live, this is the real
   address, and this is what it was built with. */
.wk__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-4);
  border-bottom: 1px solid var(--plum-high);
  background: rgba(19, 7, 20, .72);
}
.wk__dots { display: inline-flex; gap: 5px; flex: none; }
.wk__dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--plum-lift);
}
.wk__dots i:first-child { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.wk__addr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--lilac);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk__stack {
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--plum-high);
  border-radius: var(--r-pill);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--lilac-dim);
  white-space: nowrap;
}

/* The viewport. Fixed aspect so the row height never depends on how tall
   the captured page happens to be. */
.wk__view {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--void);
}
.wk__shot {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  display: block;
  /* work.js drives this. Left alone it shows the top of the page, which
     is the correct still frame. */
  will-change: transform;
}

/* ---------- The words beside it ---------- */

.wk__industry {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-lang="ar"] .wk__industry { text-transform: none; }

.wk__name {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.wk__blurb {
  margin-top: var(--s-4);
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: var(--lilac);
}
/* Two asks per card: go and look at it, or ask for one. They sit on one
   row so neither is buried, and wrap rather than shrink on a phone. */
.wk__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
}
.wk__cta { margin-top: 0; }
.wk__cta:hover { border-color: var(--accent); }

/* Deliberately lighter than "View live". The client's own site is the
   evidence this page exists to show — the sales ask should not out-shout
   it, but it should be there the moment someone is convinced. */
.wk__ask {
  min-height: 44px;
  padding-inline: var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
}
.wk__ask:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--ice);
}

/* The "how we build" grid moved to sections.css when /contact started
   using it too — a component two pages share does not belong in the
   stylesheet only one of them loads. */

/* ---------- Systems ---------- */

.wk-sys {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(75, 72, 199, .10), transparent 62%),
    rgba(29, 11, 34, .5);
  border-block: 1px solid var(--plum-high);
}
.wk-sys .lede { margin-top: var(--s-5); }

.wk-sys__grid {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-8);
}
@media (min-width: 760px)  { .wk-sys__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .wk-sys__grid { grid-template-columns: repeat(4, 1fr); } }

.wk-sys__item {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--plum-high);
  border-radius: var(--r-2);
  background: var(--plum);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.wk-sys__item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.wk-sys__shot {
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-bottom: 1px solid var(--plum-high);
  background: var(--void);
}
.wk-sys__shot img { width: 100%; height: auto; display: block; }
/* The two systems with no capture keep the same frame, filled with the
   reason there isn't one. An empty box the exact size of the screenshots
   on either side reads as a broken image. */
.wk-sys__shot--none {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--void);
  color: color-mix(in srgb, var(--accent) 70%, var(--lilac-dim));
}
.wk-sys__shot--none svg { width: 34px; height: 34px; }
.wk-sys__kind {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-lang="ar"] .wk-sys__kind { text-transform: none; }
.wk-sys__name {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
}
.wk-sys__blurb {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--lilac);
}
.wk-sys__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.wk-sys__link svg { width: 15px; height: 15px; }
.wk-sys__link:hover { color: var(--ice); }
/* Saying it plainly beats a dead button that looks like it should work. */
.wk-sys__private {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--lilac-dim);
}

/* The band closes on its own ask. Somebody reading about internal tools is
   not shopping for a website, and sending them to a website CTA wastes the
   only moment they were thinking about it. */
.wk-sys__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--plum-high);
}
.wk-sys__closetxt {
  flex: 1 1 30ch;
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--lilac);
}

/* The closing CTA moved to sections.css — /about closes the same way,
   and it will not be the last page that does. */

/* ---------- Motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  .wk:hover .wk__frame,
  .wk:focus-within .wk__frame { transform: none; }
  .wk-sys__item:hover { transform: none; }
  .wk__shot { transform: none !important; }
}