/* =============================================================
   CANDIDATE SCREENING — a Playground project: the design
   assignment for the UI/UX Design Intern role at Nuvama Wealth,
   presented as a miniature product case study rather than an
   assignment walkthrough.

   Uses the portfolio's own default accent (--color-accent). The
   product itself is a neutral B2B dashboard with no brand colour
   of its own, so borrowing the shell's terracotta is the honest
   choice — the same call Testing with Stitch AI makes.

   Everything structural — type, colour, spacing, the chapter
   rhythm, the hero masthead — comes from the shared portfolio
   tokens (variables.css, base.css, components.css,
   project-shell.css). This file adds only what is specific:

     · a large hero thumbnail stage, the one thing this page does
       that Nerve doesn't (echoing the Rootel hero composition)
     · ONE image treatment (.cs-shot) for every specimen, since
       every asset here is a light screen on a light page
     · the two-column explanation rows in 02 and 04, where an
       argument and its evidence sit side by side
     · plain hairline lists for the brief and the next steps —
       no cards, no timelines, no roadmap graphics

   Every image on this page is a real Figma export. Nothing here
   recreates or decorates the work.
   ============================================================= */

.pg-project--cs {
  --project-accent: var(--color-accent);
}

/* The subtitle runs longer than most — give the masthead a touch
   more measure so it doesn't break into a narrow column. */
.pg-project--cs .proj-hero__masthead { max-width: 60ch; }
.pg-project--cs .proj-hero__oneline  { max-width: 56ch; }

/* A quiet caption, always ABOVE its visual, never inside it.
   Same language as Nerve's .nerve-cap and More KLYMB's .mk-tag. */
.cs-cap {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* =============================================================
   THE ONE IMAGE TREATMENT
   Every asset on this page is a light interface on a porcelain
   page, so each needs the same small lift off the background: a
   hairline border, clipped corners, a soft shadow. One treatment,
   used everywhere — no per-section framing.
   ============================================================= */
.cs-shot {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}

.cs-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-figure { display: block; margin: 0; }

/* =============================================================
   HERO THUMBNAIL — the one structural difference from Nerve. The
   dashboard is the product; showing it immediately, large, means
   the page is understood before a word of it is read. Kept plain:
   the export already carries its own margin and crop, so it only
   needs the page's corner radius and a hairline.
   ============================================================= */
.cs-thumb {
  /* the same distance Rootel puts between its masthead and its
     hero stage, so the two pages open with one rhythm */
  padding-top: var(--space-7);
}

.cs-thumb__stage {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.cs-thumb__stage img {
  display: block;
  width: 100%;
  height: auto;
}

/* =============================================================
   01 · THE ASSIGNMENT — the brief in one container, in three
   plain parts: the background, the six problems as given, and
   the goal. A summary, not a reproduction.
   ============================================================= */
.cs-brief {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.cs-brief__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cs-brief__label--accent { color: var(--project-accent); }

/* A short underline under each label, before its text — the
   divider the three blocks share. */
.cs-brief__rule {
  display: block;
  height: 1px;
  width: 2.5rem;
  margin-top: var(--space-3);
  background: var(--color-border-strong);
}

.cs-brief__text {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  max-width: 62ch;
}

/* Blocks two and three sit below a hairline — the same container
   continuing, not three new ones. */
.cs-brief__block + .cs-brief__block {
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
}

/* The six problems: a plain two-column list. Each is a named
   problem and one short line — no icons, no cards. */
.cs-problems {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) clamp(1.5rem, 4vw, 3rem);
}

.cs-problems__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.cs-problems__num {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--project-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.cs-problems__text {
  margin-top: var(--space-1);
  /* line up under the title, past the number */
  padding-left: calc(1.25rem + var(--space-3));
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 36ch;
}

/* The goal, as the brief gave it — one serif line, the last word
   of the section. */
.cs-brief__goal {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 40ch;
}

@media (max-width: 720px) {
  .cs-problems { grid-template-columns: 1fr; }
}

/* =============================================================
   02 · THE THINKING — two rows, each an argument beside its
   evidence. The reasoning is text; the proof is a real export.
   Nothing between them.
   ============================================================= */
.cs-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}

.cs-row + .cs-row {
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 7vw, 5rem);
  border-top: 1px solid var(--color-border);
}

/* The candidate card is a single wide, short strip — give its
   column the extra room so the row of information stays legible.
   The explanation runs as a narrower editorial note beside it. */
.cs-row--wide-visual {
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  align-items: center;
}

.cs-row__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

.cs-row__text {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .cs-row,
  .cs-row--wide-visual {
    grid-template-columns: 1fr;
  }
  .cs-row__text { max-width: none; }
}

/* =============================================================
   03 · STRUCTURE TO INTERFACE — almost entirely visual. The same
   screen twice, side by side, at the same size, so the change
   from one to the other is read rather than explained.
   ============================================================= */
.cs-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

/* One caption under the pair, not a paragraph per image. */
.cs-compare__note {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 62ch;
}

@media (max-width: 720px) {
  .cs-compare { grid-template-columns: 1fr; }
}

/* =============================================================
   04 · THE SIDE PANEL — the panel itself beside a breakdown of
   what it holds, in the order a recruiter needs it. An editorial
   list, not documentation: a name and one line each.
   ============================================================= */
.cs-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  /* both columns take the row's full height — see the list below */
  align-items: stretch;
}

/* The panel is a very tall specimen and the breakdown is short, so
   the seven rows are stretched to share the panel's height evenly.
   Each entry then sits roughly beside the region it describes, and
   the section has no dead space under the list. */
.cs-anatomy__list {
  display: grid;
  grid-auto-rows: minmax(min-content, 1fr);
  gap: 0;
  counter-reset: anatomy;
}

.cs-anatomy__item {
  counter-increment: anatomy;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-content: start;
  padding-block: clamp(1rem, 2.5vw, 1.4rem);
  border-bottom: 1px solid var(--color-border);
}

.cs-anatomy__item:first-child { padding-top: 0; }
.cs-anatomy__item:last-child  { border-bottom: 0; }

/* The number is drawn by CSS — the list order is the panel's
   order, so it never needs to be written into the markup. */
.cs-anatomy__item::before {
  content: counter(anatomy, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--project-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.cs-anatomy__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.cs-anatomy__text {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  max-width: 44ch;
}

@media (max-width: 860px) {
  .cs-anatomy { grid-template-columns: 1fr; }
  /* stacked, there is no sibling height to share — rows go back to
     being sized by their own content */
  .cs-anatomy__list { grid-auto-rows: auto; }
  /* the panel is very tall — beside a list it reads fine, but
     stacked above one it would push the breakdown off-screen */
  .cs-anatomy__visual { max-width: 24rem; }
}

/* =============================================================
   05 · AI IN THE PROCESS — plain prose, one column, kept short.
   A note, not a section about tooling.
   ============================================================= */
.cs-prose {
  max-width: 60ch;
  display: grid;
  gap: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

.cs-prose b {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* =============================================================
   06 · WHAT I'D IMPROVE NEXT — a plain hairline list. Deliberately
   not cards, not a timeline, not a roadmap: these are open ends,
   and dressing them up would overstate them.
   ============================================================= */
.cs-next {
  display: grid;
  max-width: 52ch;
}

.cs-next li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-md);
  color: var(--color-text);
}

.cs-next li:last-child { border-bottom: 0; }

.cs-next li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--project-accent);
  flex: none;
  transform: translateY(-3px);
}