/* ========================================================================== Work */

.work-list { display: grid; gap: var(--s-32); margin-bottom: var(--s-32); }

.work-link {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  padding: var(--s-8);
  margin-inline: calc(var(--s-8) * -1);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.work-link:hover { border-color: var(--hairline); background: rgba(229,180,95,.03); }

/* Every row uses the SAME layout — media left, copy right — rather than an
   alternating zigzag. An every-other-row flip read as misaligned rather than
   deliberate once real content was in it. */

/* The device frame is drawn in CSS rather than loaded as a 729 KB PNG —
   a few hundred bytes, and crisp at every device pixel ratio. */
.work-media {
  display: grid;
  place-items: center;
  padding-block: var(--s-8);
  position: relative;
}
/* A gold pool of light behind the phone, so it sits in the scene. */
.work-media::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  background: radial-gradient(ellipse at center, rgba(229,180,95,.13), transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.device {
  position: relative;
  width: min(268px, 72%);
  aspect-ratio: 327 / 663;
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(155deg, #33384A, #14171F 45%, #0E1017 70%, #2A2F3D);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 24px 60px -18px rgba(0,0,0,.85),
    0 0 48px -14px rgba(229,180,95,.22);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.device-lg { width: min(400px, 88%); }

.device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 26px;
  background: var(--surface-2);
}

/* Notch. */
.device::before {
  content: '';
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 18px;
  background: #0B0D13;
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
/* Screen sheen — a single diagonal highlight reads as glass. */
.device::after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 26px;
  background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, transparent 34%, transparent 70%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
  z-index: 3;
}

.work-link:hover .device {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(229,180,95,.22),
    0 34px 70px -18px rgba(0,0,0,.9),
    0 0 64px -12px rgba(229,180,95,.34);
}

/* ---- Laptop / browser-window frame ---------------------------------------
   For a web product — a browser chrome rather than a phone body, in the
   same brushed-metal gradient and gold-glow shadow as .device so the two
   read as one family. Aspect ratio matches the source screenshot
   (3022 x 1892) rather than a fixed device ratio, since this is a browser
   window, not a specific physical screen size. */
.device-laptop {
  position: relative;
  width: min(560px, 92%);
  aspect-ratio: 3022 / 1892;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(155deg, #33384A, #14171F 45%, #0E1017 70%, #2A2F3D);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 30px 70px -20px rgba(0,0,0,.85),
    0 0 54px -16px rgba(229,180,95,.22);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.device-laptop-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding-inline: 11px;
  background: #0B0D13;
}
.device-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.device-dot:last-child { background: var(--gold-600); }
.device-laptop-url {
  margin-inline: auto;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--text-3);
  font-size: .5625rem;
  letter-spacing: .08em;
}
.device-laptop img {
  display: block;
  width: 100%;
  height: calc(100% - 28px);
  object-fit: cover;
  object-position: top center;
}
.work-link:hover .device-laptop,
.case-figure:hover .device-laptop {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(229,180,95,.22),
    0 38px 80px -20px rgba(0,0,0,.9),
    0 0 64px -12px rgba(229,180,95,.34);
}

/* Pairs a laptop with a phone for a case study that ships on both — plain
   flex, bottom-aligned so their bases sit on one implied surface, and it
   wraps to a stack on narrow widths rather than needing absolute-position
   overlap math that would have to be re-tested at every breakpoint. */
.device-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-8);
  width: 100%;
}
.device-duo .device-laptop { width: min(640px, 100%); }
.device-duo .device { width: min(215px, 46%); }

.work-meta { margin-bottom: var(--s-4); }
.work-name { font-size: var(--step-5); margin-bottom: var(--s-4); }
.work-summary { font-size: var(--step-1); color: var(--text-2); margin-bottom: var(--s-6); max-width: 40ch; }

.work-outcomes { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.work-outcomes li {
  font-size: var(--step--1);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.work-outcomes b { font-family: var(--font-display); font-weight: 300; margin-right: var(--s-2); }

.work-stack { margin-bottom: var(--s-6); color: var(--text-3); }

.work-more {
  color: var(--gold-500);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: letter-spacing var(--dur-2) var(--ease);
}
.work-link:hover .work-more { letter-spacing: .2em; }

.work-also-h { margin-bottom: var(--s-8); }
.work-also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
}
.work-mini h4 { margin-bottom: var(--s-2); }
.work-mini .mono { margin-bottom: var(--s-4); display: block; }
.work-mini p { font-size: var(--step--1); }

@media (max-width: 860px) {
  .work-link { grid-template-columns: 1fr; gap: var(--s-8); }
  .work-list { gap: var(--s-24); }
  /* The bleed-out negative margin made the row wider than the viewport. */
  .work-link { padding: var(--s-4); margin-inline: calc(var(--s-4) * -1); }
  .device { width: min(232px, 66%); }
}

@media (max-width: 420px) {
  .work-link { padding: var(--s-2); margin-inline: 0; }
}

/* The CTA arrow was wrapping onto its own line. */
.work-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}
.work-name a { transition: color var(--dur-1) var(--ease); }
.work-link:hover .work-name a { color: var(--gold-300); }

/* The whole card is clickable as an enhancement; the real anchors above
   are what keyboard and screen-reader users actually traverse. */
.work-link[data-href] { cursor: pointer; }

/* ==========================================================================
   Placeholder row — the third main-feed slot, awaiting the next product.

   Must read as deliberate, not as a broken card: it keeps the exact row
   geometry, so dropping the real product in later changes nothing about
   the layout. Deliberately makes no claim it cannot support.
   ========================================================================== */

.work-link--pending { cursor: default; }
.work-link--pending:hover { border-color: transparent; background: none; }

.device--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #1B1F2B, #0E1017 60%, #171B26);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 24px 60px -22px rgba(0,0,0,.8);
}
.device--empty::before,
.device--empty::after { display: none; }

.device-pending {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  color: var(--text-3);
}
.device-pending .mono { letter-spacing: .32em; font-size: .625rem; }

/* The shaft motif, seen end-on — the same mark as the nav and preloader,
   here standing in for a product not yet revealed. */
.device-pending-shaft {
  width: 2px;
  height: 84px;
  background: linear-gradient(180deg, transparent, var(--gold-600), transparent);
  box-shadow: 0 0 18px rgba(229,180,95,.45);
  animation: pending-pulse 3.2s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { opacity: .35; transform: scaleY(.72); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

.work-row--pending .work-name { color: var(--text-2); }
.work-row--pending .work-summary { max-width: 38ch; }
.work-row--pending .work-more { color: var(--gold-500); }

/* ---- "Also shipped" minis that link to a case study --------------------- */

.work-mini-link { display: grid; gap: 0; }
.work-mini-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  color: var(--gold-500);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: letter-spacing var(--dur-2) var(--ease);
}
.work-mini:hover .work-mini-more { letter-spacing: .18em; }

/* ---- Visit-now CTA -------------------------------------------------------
   Chanakya AI is a web product, not an app-store listing — this replaces
   the App Store / Google Play badges for that one row only. Sized and
   positioned to match where the store badges sat on the other rows, so the
   row rhythm holds even though the CTA itself is different. */
.visit-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* margin-top: var(--s-4); */
  height: 34px;
  padding-inline: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-500);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.visit-cta .icon { width: 1em; height: 1em; }
.visit-cta:hover {
  border-color: var(--gold-500);
  background: rgba(229, 180, 95, .08);
  color: var(--gold-300);
}