/* ============================================================================
 * Master dossier popup — SHARED across pages.
 *
 * A single reusable <dialog> (see src/_includes/dossier.njk) that any page can
 * drop in: include the dialog markup + this stylesheet + dossier.js, then give
 * any trigger element `data-master="<slug>"`. The build emits one JSON dossier
 * per Master at /assets/masters/<slug>.json (headline, bio HTML, price).
 *
 * This file owns ONLY the popup. How the trigger cards themselves look is each
 * page's business (masters.css styles .rocard; studio/homepage style their own)
 * — a page opts a card in with the data attribute and nothing more.
 *
 * Consumes tokens from tokens.css and .btn / penDraw from base.css.
 * ========================================================================== */

/* Trigger affordances. JS/build add .dz-trigger (or data-master) to whatever
   opens the popup; each shape gets a fitting cue. Testimonials wire only the
   avatar + name (the quote stays selectable); full Master cards wire the whole
   card. Roster .rocard sets its own cursor in masters.css. */
.pf.dz-trigger{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.pf.dz-trigger:hover,.pf.dz-trigger:focus-visible{transform:translateY(-2px);box-shadow:0 8px 18px rgba(21,21,28,.16)}
.pf.dz-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the name as a trigger — a quote card's <b>, or a hero name-chip's <h4> */
b.dz-trigger,h4.dz-trigger{cursor:pointer;transition:color .15s ease}
b.dz-trigger:hover,h4.dz-trigger:hover{color:var(--red-deep)}
b.dz-trigger:focus-visible,h4.dz-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}

/* Full Master cards (.mcard) — the whole card opens the popup. */
.mcard[data-master]{cursor:pointer}
.mcard[data-master]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* A name heading that itself carries data-master (e.g. the for-builders hero
   master-card <h3>): make just the name interactive, like a testimonial name.
   Don't touch `display` — the caption layout depends on it staying block. The
   :hover targets the text via a nested span-less color change; width is not
   constrained so only the glyphs light up, but the click area spans the line. */
.mc-name h3[data-master]{cursor:pointer;transition:color .15s ease}
.mc-name h3[data-master]:hover{color:var(--red-deep)}
.mc-name h3[data-master]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}

/* margin:auto restores native dialog centering (the base * reset zeroes it) */
.dossier{border:none;padding:0;background:transparent;margin:auto;
  max-width:min(860px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 48px)}
.dossier::backdrop{background:rgba(21,21,28,.55);backdrop-filter:blur(5px)}
.dossier[open]{animation:dzIn .38s cubic-bezier(.2,.7,.2,1)}
@keyframes dzIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.dz-grid{display:grid;grid-template-columns:322px 1fr;background:#fff;
  border-radius:18px;overflow:hidden;box-shadow:0 32px 80px rgba(21,21,28,.35)}
.dz-close{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border:none;
  border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(21,21,28,.18);transition:transform .15s ease,background .15s ease}
.dz-close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}

/* portrait panel — full-bleed */
.dz-photo{position:relative;margin:0;background:var(--photo);min-height:340px}
.dz-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}

/* dossier body — the reading side */
.dz-body{display:flex;flex-direction:column;padding:30px 34px 26px;min-width:0}
.dz-role{font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--red-deep)}
.dz-name{position:relative;display:inline-block;align-self:flex-start;
  font-size:1.72rem;font-weight:800;letter-spacing:-.018em;line-height:1.15;margin:6px 0 2px}
/* the editor's red pen, drawn under the name on open (same stroke family
   as the Masters hero's "influencers" cross-out) */
.dz-pen{position:absolute;left:0;bottom:-.28em;width:min(100%,7.5em);height:.34em;overflow:visible;pointer-events:none}
.dz-pen path{stroke:var(--red);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.dossier[open] .dz-pen path{animation:penDraw .5s ease-out .3s forwards}
.dz-headline{margin:14px 0 0;font-size:.94rem;line-height:1.55;color:var(--gray)}

/* the bio scroll — build-time-rendered markdown */
.dz-bio{margin-top:18px;padding-top:18px;padding-right:10px;border-top:1px solid var(--line);
  overflow-y:auto;max-height:270px;flex:1;min-height:0;
  font-size:.89rem;line-height:1.65;color:var(--gray);overscroll-behavior:contain}
.dz-bio::-webkit-scrollbar{width:8px}
.dz-bio::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
/* Bios use mixed heading levels (#, ##, ###, ####) inconsistently — flatten
   them all to one quiet small-caps label so a section never shouts. */
.dz-bio h1,.dz-bio h2,.dz-bio h3,.dz-bio h4,.dz-bio h5,.dz-bio h6{
  font-family:'Poppins',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:20px 0 8px;line-height:1.3}
.dz-bio :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}
.dz-bio p{margin:0 0 10px}
/* emphasis by tone, not weight — bio markdown is bold-heavy, and at full
   weight it shouts; ink-on-gray reads as a quiet highlight instead */
.dz-bio strong{color:var(--ink);font-weight:500}
.dz-bio ul,.dz-bio ol{margin:0 0 12px;padding-left:20px}
.dz-bio li{margin-bottom:5px}
.dz-bio hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.dz-bio hr:last-child{display:none} /* a bio ending in --- would double the footer rule */
.dz-bio a{color:var(--red-deep);font-weight:600}
.dz-bio em{color:var(--ink)}
.dz-loading{color:var(--mist);font-style:italic}

.dz-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.dz-price{font-size:.88rem;color:var(--gray)}
.dz-price b{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin-left:2px}

@media (max-width:700px){
  .dossier{max-height:calc(100dvh - 24px)}
  .dz-grid{grid-template-columns:1fr;max-height:inherit;overflow-y:auto}
  /* explicit height, not aspect-ratio: the img inside is position:absolute,
     so an aspect-ratio height never transfers into the grid track (the
     portrait row collapsed to 0 and the body rendered over the photo) */
  .dz-photo{min-height:0;height:240px}
  .dz-photo img{object-position:center 18%}
  .dz-body{padding:22px 20px 20px}
  .dz-name{font-size:1.45rem}
  .dz-bio{max-height:none;overflow-y:visible;padding-right:0}
  .dz-foot .btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion: reduce){
  .dossier[open]{animation:none}
  .dossier[open] .dz-pen path,.dz-pen path{animation:none;stroke-dashoffset:0}
  .dz-close,.dz-close:hover{transition:none;transform:none}
}