/* =========================================================================
   QALadder — "Where to practise QA automation" (loads AFTER theme.css +
   article.css). The site cards reuse article.css's .sc collapsible; this
   file only adds the zero-setup hero, the practise-method block, the domain
   chip and the outbound "Open ↗" link. Everything is theme tokens.
   ========================================================================= */

/* ---- zero-setup hero: the three in-browser practice surfaces ------------ */
.ps-tools{
  display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:8px 0 0;
}
.article a.ps-tool{
  display:flex;flex-direction:column;gap:5px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:15px 16px;
  color:var(--text);text-decoration:none;
  transition:border-color var(--t-fast),transform var(--t-fast);
}
.article a.ps-tool:hover{border-color:var(--accent);transform:translateY(-2px);}
.ps-tool b{font-family:var(--font-display);font-size:var(--fs-base);}
.ps-tool span{font-size:14px;line-height:1.55;color:var(--text-soft);}

/* ---- the practise-method block (four steps) ----------------------------- */
.ps-method{
  list-style:none;margin:22px 0 30px;padding:22px;
  background:var(--grad-brand-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:grid;gap:16px;grid-template-columns:repeat(2,1fr);
}
.ps-method li{
  display:flex;flex-direction:column;gap:5px;margin:0;
  padding-left:14px;border-left:2px solid var(--accent);
}
.ps-method .ps-mn{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  color:var(--accent-deep);letter-spacing:.08em;
}
.ps-method b{font-family:var(--font-display);font-size:var(--fs-md);line-height:1.25;}
.article .ps-method li p{margin:0;font-size:15px;line-height:1.6;color:var(--text-soft);}

/* ---- domain chip inside a site card's collapsed summary ----------------- */
.article .sc .ps-dom{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-2xs);
  font-weight:700;color:var(--accent-deep);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:1px 7px;margin-right:9px;
  letter-spacing:.02em;white-space:nowrap;
}

/* ---- the outbound link inside an open card ------------------------------ */
.article a.ps-go{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;
  color:var(--accent);text-decoration:none;
  border:1px solid var(--border-strong);border-radius:var(--r);
  padding:8px 14px;margin-top:2px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.article a.ps-go:hover{border-color:var(--accent);background:var(--grad-brand-soft);}

@media(max-width:640px){
  .ps-tools{grid-template-columns:1fr;}
  .ps-method{grid-template-columns:1fr;padding:16px;}
}