/* Home page "Test Panel" section. Uses the tokens and the Hanken Grotesk font defined in site-nav.css.
   A panel of six tiles on the section's own generated background (assets/images/bg/tests-lab-1376.webp, -900.webp).
   2026-11-12, the user chose concept B "Side by side" (docs/concept/tests/): two wide tiles a row, the words on the
   left, the photo of the carton on its stage on the right, the status as a chip above the name. The markup in
   index.php is unchanged: the tile is a grid with named areas, so the picture and the status are placed by CSS.
   Motion: GSAP in index.php (background drift, tiles enter on scroll, hover lift). */
.ps-tests{position:relative;overflow:hidden;isolation:isolate;font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);background:var(--tile);-webkit-font-smoothing:antialiased}
.ps-tests *,.ps-tests *::before,.ps-tests *::after{box-sizing:border-box}
.ps-tests .ps-tests-bg{position:absolute;inset:0;z-index:-1;margin:0}
.ps-tests .ps-tests-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:0% 50%}
/* flat white wash: keeps the photograph in the site's pale tone */
.ps-tests .ps-tests-bg::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.45)}
/* same frame as the nav bar and the About section */
.ps-tests .ps-tests-in{padding:clamp(80px,9vw,140px) var(--frame)}
.ps-tests h2{margin:0 0 clamp(40px,5vw,64px);font-family:inherit;font-size:clamp(40px,4.6vw,66px);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--accent)}
.ps-tests ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ps-tests li{margin:0;display:flex}
/* the tile: words in the left column (status, name, description), the stage with the carton in the right column */
.ps-tests .ps-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(190px,16vw,232px);grid-template-rows:auto auto 1fr;grid-template-areas:"st pic" "h pic" "ds pic";column-gap:8px;width:100%;padding:12px;background:#fff;border:2px solid transparent;border-radius:var(--radius-lg);box-shadow:var(--shadow-1);transition:border-color .3s,box-shadow .3s}
/* hover: the accent border (transparent at rest, so nothing moves) and a raised shadow */
.ps-tests .ps-tile:hover{border-color:var(--accent);box-shadow:var(--shadow-2)}
/* the stage holding the photo of the carton, with the white pebble behind it */
.ps-tests .ps-pic{grid-area:pic;position:relative;min-height:240px;display:grid;place-items:center;background:linear-gradient(180deg,var(--tile),var(--navy-25));border-radius:var(--radius-md);overflow:hidden}
.ps-tests .ps-pic::before{content:"";position:absolute;left:50%;top:50%;width:min(212px,92%);aspect-ratio:212/206;transform:translate(-50%,-50%);background:#fff;border-radius:var(--pebble);opacity:.8}
.ps-tests .ps-pic img{position:relative;display:block;max-width:74%;max-height:196px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(18,23,53,.16))}   /* max-height in px: a % does not resolve in the stage's auto grid row */
.ps-tests h3{grid-area:h;margin:0 14px 0 20px;font-family:inherit;font-size:clamp(24px,2.2vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.ps-tests .ds{grid-area:ds;margin:12px 14px 20px 20px;font-family:inherit;font-size:20px;line-height:1.5;color:var(--ink);text-align:left}
/* the status as a chip (design system: Available / Soon), placed above the name */
.ps-tests .st{grid-area:st;justify-self:start;display:inline-flex;align-items:center;gap:7px;height:30px;margin:20px 14px 20px 20px;padding:0 13px;font-family:inherit;font-size:15px;font-weight:500;line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--success-text);background:var(--success-bg);border-radius:var(--radius-pill)}
.ps-tests .st::before{content:"";flex:none;width:7px;height:7px;background:currentColor;border-radius:50%}
.ps-tests .st.soon{color:var(--muted);background:var(--slate-50)}
/* below this width two tiles a row leave too little room for the words: one wide tile a row */
@media (max-width:1180px){
  .ps-tests ul{grid-template-columns:1fr}
  .ps-tests .ps-tile{grid-template-columns:minmax(0,1fr) 232px}
}
/* phone: the stage on top, the words below */
@media (max-width:640px){
  .ps-tests .ps-tests-in{padding-top:72px;padding-bottom:72px}
  .ps-tests h2{font-size:clamp(36px,10vw,44px)}
  .ps-tests ul{gap:16px}
  .ps-tests .ps-tile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"pic" "st" "h" "ds";padding:10px 10px 8px;border-radius:20px}
  .ps-tests .ps-pic{min-height:220px}
  .ps-tests .ps-pic img{max-height:180px}
  .ps-tests .st{margin:18px 12px 14px}
  .ps-tests h3{margin:0 12px}
  .ps-tests .ds{margin:10px 12px 18px}
}
@media (prefers-reduced-motion:reduce){
  .ps-tests .ps-tile{transition:none}
}