/* ==========================================================================
   product-detail.css — PRODUCT-LAB: category detail modals.

   Sub-cards use the SITE'S OWN card system (.card .card--rail + data-spotlight),
   so they inherit the cursor glow, the amber→blue hover rail, and the hover
   lift/shadow for free — driven by ambient.js. Vanilla; reuses site tokens.

   One backdrop for every modal — Style A: light panel, subtle navy PCB canvas,
   light cards. Categories without photos yet get a .pd-thumb--ph CSS placeholder.
   Nothing ships to public_html.
   ========================================================================== */

/* ---- triggers ------------------------------------------------------------ */
.pd-trigger{align-self:flex-start;margin-top:2px;display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--body);font-weight:600;
  font-size:var(--fs-md);color:var(--blue);transition:color .2s ease}
.pd-trigger span{font-family:var(--display);transition:transform .4s var(--ease-out-quint)}
.pd-trigger:hover{color:var(--blue-dark)}
.pd-trigger:hover span{transform:translateX(4px)}

.pd-media-trigger{position:absolute;inset:0;z-index:3;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:flex-start;padding:18px;border-radius:inherit}
.pd-media-trigger__cue{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;
  background:rgba(11,31,58,.72);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--body);font-weight:600;font-size:var(--fs-sm);opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .45s var(--ease-out-quint)}
.pd-media-trigger:hover .pd-media-trigger__cue,.pd-media-trigger:focus-visible .pd-media-trigger__cue{opacity:1;transform:none}

/* ---- modal shell --------------------------------------------------------- */
.pd-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:5vh 20px}
.pd-modal__backdrop{position:absolute;inset:0;background:rgba(6,14,30,.62);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .4s ease}
.pd-modal.is-open .pd-modal__backdrop{opacity:1}

/* the panel is overflow:hidden (so it can host the fixed ambient canvas); the
   inner .pd-modal__scroll is the real scroller, above the canvas */
.pd-modal__panel{position:relative;z-index:1;overflow:hidden;width:min(1080px,100%);max-height:90vh;
  display:flex;flex-direction:column;background:var(--bg);border-radius:24px;box-shadow:0 40px 100px rgba(6,14,30,.5);
  opacity:0;transform:translateY(24px) scale(.965);transition:transform .5s var(--ease-spring),opacity .4s ease}
.pd-modal.is-open .pd-modal__panel{opacity:1;transform:none}
.pd-modal__panel > canvas[data-particles]{z-index:0}   /* site.css already sizes it inset:0 */
.pd-modal__scroll{position:relative;z-index:1;flex:1;overflow-y:auto;padding:44px 44px 36px}

.pd-modal__close{position:absolute;top:18px;right:18px;z-index:4;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--surface);font-size:1.4rem;line-height:1;color:var(--ink-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,color .2s ease,transform .35s var(--ease-out-quint)}
.pd-modal__close:hover{border-color:rgba(43,107,228,.5);color:var(--blue);transform:rotate(90deg)}

.pd-modal__head{max-width:64ch;margin-bottom:30px}
.pd-modal__intro{margin:12px 0 0;font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--muted);text-wrap:pretty}

/* ---- sub-item cards (site .card provides bg/border/shadow/hover/glow/rail) - */
.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.pd-card{border-radius:18px;display:flex;flex-direction:column;opacity:0}
/* opacity-only cascade on open — leaves transform free for .card's hover lift */
.pd-modal.is-open .pd-card{opacity:1;animation:pdCardIn .5s ease both}
@keyframes pdCardIn{from{opacity:0}to{opacity:1}}
.pd-grid .pd-card:nth-child(1){animation-delay:.05s}
.pd-grid .pd-card:nth-child(2){animation-delay:.11s}
.pd-grid .pd-card:nth-child(3){animation-delay:.17s}
.pd-grid .pd-card:nth-child(4){animation-delay:.23s}
.pd-grid .pd-card:nth-child(5){animation-delay:.29s}
.pd-grid .pd-card:nth-child(6){animation-delay:.35s}
.pd-grid .pd-card:nth-child(n+7){animation-delay:.41s}

.pd-thumb{aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface-soft)}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out-quint)}
.pd-card:hover .pd-thumb img{transform:scale(1.06)}

/* placeholder thumb — no image yet. A soft gradient tile + hatch carrying the
   item name; swaps to a real <img> with zero markup churn (build flips has_images). */
.pd-thumb--ph{display:flex;align-items:center;justify-content:center;padding:16px 20px;position:relative;
  background:linear-gradient(158deg,var(--surface) 0%,var(--surface-soft) 100%)}
.pd-thumb--ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,transparent 0 11px,rgba(11,31,58,.022) 11px 12px)}
.pd-thumb__label{position:relative;z-index:1;text-align:center;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-micro);line-height:1.5;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--muted-2)}
.pd-card:hover .pd-thumb--ph::after{opacity:.7}

.pd-card__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 22px 24px}
.pd-card__name{margin:0;font-family:var(--display);font-weight:700;font-size:var(--fs-d6);line-height:var(--lh-tight);letter-spacing:var(--tr-snug)}
.pd-card__desc{margin:0;flex:1;font-size:var(--fs-sm);line-height:1.6;color:var(--muted);text-wrap:pretty}
.pd-card__brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pd-chip{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);padding:4px 10px;border-radius:999px;
  background:var(--surface-soft);border:1px solid var(--line);color:var(--ink-3)}

/* ---- footer CTA ---------------------------------------------------------- */
.pd-modal__foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}

/* ---- mobile: full-screen sheet ------------------------------------------- */
/* The sheet has to be pinned to the TOP, not centred, and sized in svh.
   `align-items:center` (line 30) plus `max-height:100vh` is the combination that
   made this modal unclosable on iOS: 100vh there is the LARGE viewport, i.e. the
   height with the URL bar retracted, so with the bar showing the panel is taller
   than what is on screen. Centring then splits that excess across both edges and
   the top of the panel — carrying .pd-modal__close at top:18px — is pushed off
   the screen. Measured in an 812px viewport with the panel at iOS's 872px:
   panel top -30, close button spanning -12..30, i.e. entirely above the fold.
   With the page scroll-locked, no backdrop reachable and no Esc key on a phone,
   the visitor was trapped in the site's main product interaction and had to
   reload to get out.
   flex-start makes the top edge unconditionally 0, and svh (already used for
   .cine in hero-cinematic.css:25) is the unit that means "what is actually
   visible". The 100vh line stays first as the fallback for engines without svh —
   on those it is no worse than before, and flex-start alone already saves the
   close button. */
@media(max-width:620px){
  .pd-modal{padding:0;align-items:flex-start}
  .pd-modal__panel{width:100%;height:100vh;height:100svh;max-height:none;border-radius:0}
  .pd-modal__scroll{padding:64px 20px 28px}
  .pd-grid{grid-template-columns:1fr}

  /* The two footer CTAs are flex items that shrink to their text, so on a phone
     they wrapped to two lines at two different widths — 247px above 146px, left
     aligned against a full-width card stack. Stretching them matches .btn-row's
     own phone rule in site.css (`.btn-row .btn{flex:1 1 100%}`). */
  .pd-modal__foot{flex-direction:column;align-items:stretch;gap:12px}
  .pd-modal__foot .btn{width:100%;justify-content:center}
}

/* ---- touch: no hover, so hover-only affordances have to be shown ---------- */
/* The category photo is a 335x266 button whose only affordance is a cue that
   appears on :hover / :focus-visible (line 27). A phone has neither, so on every
   handset the six category images were silently tappable with nothing on screen
   saying so — the modal is the page's main interaction and it advertised itself
   only to mice. On a coarse pointer the cue is simply always on. */
@media(hover:none){
  .pd-media-trigger__cue{opacity:1;transform:none}
  /* 148x20 as an inline flex line box, i.e. under the 24x24 that WCAG 2.2 AA
     2.5.8 asks for — the same shortfall the footer links were given a
     min-height for (site.css:2281). This one is a modal trigger, so it gets a
     full 44px thumb target rather than the 24px floor. align-self:flex-start
     (line 14) keeps it from stretching, so the height costs no layout. */
  .pd-trigger{min-height:44px}
}

/* ---- reduced motion ------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .pd-modal__panel,.pd-modal__backdrop,.pd-media-trigger__cue,.pd-trigger span,.pd-modal__close,.pd-thumb img{transition:none!important}
  .pd-card{opacity:1!important;animation:none!important}
}