/* Section 05: planogram deep dive. A numbered process rail; each step = label, short copy, media. */
#planogram .pg-lede { margin-top: 12px; }
#planogram .pg-path {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
#planogram .pg-path a {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px/1 var(--font-display); color: var(--text); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: var(--surface);
  transition: border-color .2s ease;
}
#planogram .pg-path a:hover { border-color: var(--text); }
#planogram .pg-path a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#planogram .pg-path span { color: var(--muted); }

#planogram .pg-steps { list-style: none; margin: 56px 0 0; padding: 0; position: relative; }
#planogram .pg-steps::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: var(--line);
}
#planogram .pg-step {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 24px;
  padding-bottom: 72px; scroll-margin-top: 96px;
}
#planogram .pg-step:last-child { padding-bottom: 0; }
#planogram .pg-dot {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line);
  font: 500 14px/1 var(--font-display); color: var(--text);
}
#planogram .pg-step.final .pg-dot { background: var(--card-yellow); border-color: transparent; color: var(--text); }
#planogram .pg-body { min-width: 0; padding-top: 6px; }
#planogram .pg-kicker {
  margin: 0 0 6px; font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
#planogram .pg-body h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; line-height: 1.3; text-wrap: balance; }
#planogram .pg-body > p { max-width: 62ch; margin: 0 0 12px; }
#planogram .pg-media { margin-top: 24px; }
#planogram .pg-media figure { margin: 0; }
#planogram .pg-media figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
#planogram .pg-media img { display: block; width: 100%; height: auto; border-radius: var(--radius, 12px); border: 1px solid var(--line); background: var(--surface); }
#planogram .pg-media .zoom { all: unset; display: block; cursor: zoom-in; }
#planogram .pg-media .zoom:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 12px; }

/* several wireframe directions side by side */
#planogram .pg-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#planogram .pg-option { position: relative; }
#planogram .pg-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
/* every option the same frame: wireframes shown from the top, labels underneath, never on the image */
#planogram .pg-option img, #planogram .pg-option .pg-ph { aspect-ratio: 3 / 4; min-height: 0; width: 100%; object-fit: contain; object-position: center; background: #fff; }
#planogram .pg-option figcaption b { display: block; color: var(--text); font-family: var(--font-display); font-weight: 500; font-size: 15px; margin-bottom: 2px; }
#planogram .pg-option.kept img { outline: 3px solid var(--card-yellow); outline-offset: 3px; }

/* negotiation: three columns of give and take */
#planogram .pg-tradeoffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
#planogram .pg-tradeoffs > div { border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 18px; background: var(--surface); }
#planogram .pg-tradeoffs > div.ship { background: var(--card-yellow); border-color: transparent; color: var(--text); }
#planogram .pg-tradeoffs h4 { margin: 0 0 8px; font: 500 15px/1.3 var(--font-display); }
#planogram .pg-tradeoffs ul { margin: 0; padding-left: 18px; font-size: 15px; list-style: disc; }
#planogram .pg-tradeoffs li + li { margin-top: 6px; }

/* placeholders: content still to come from Abhi. Delete .todo/.pg-ph once filled. */
#planogram .todo { background: #fdf3c8; color: #7a5c00; border-radius: 4px; padding: 0 4px; font-style: normal; }
#planogram .pg-ph {
  display: grid; place-items: center; text-align: center; min-height: 240px; padding: 24px;
  border: 1.5px dashed var(--line); border-radius: var(--radius, 12px); color: var(--muted); font-size: 14px;
}
#planogram .pg-ph b { display: block; color: var(--text); font-family: var(--font-display); font-weight: 500; margin-bottom: 4px; }

@media (max-width: 720px) {
  #planogram .pg-options, #planogram .pg-tradeoffs { grid-template-columns: minmax(0, 1fr); }
  #planogram .pg-options, #planogram .pg-options.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #planogram .pg-step { grid-template-columns: 32px minmax(0, 1fr); gap: 0 16px; padding-bottom: 56px; }
  #planogram .pg-steps::before { left: 15px; }
  #planogram .pg-dot { width: 32px; height: 32px; font-size: 13px; }
}

/* research step: tool types compared, with the gap they left */
#planogram .pg-research { margin-top: 24px; }
#planogram .pg-eg { margin: -4px 0 10px; font-size: 13px; color: var(--muted); }
#planogram .pg-tradeoffs > div.ship .pg-eg { color: inherit; }
#planogram .pg-validate { margin-top: 24px !important; padding-left: 14px; border-left: 3px solid var(--card-yellow); }
#planogram .pg-validate b { font-family: var(--font-display); font-weight: 500; }

#planogram .pg-research > div p { margin: 0; font-size: 15px; }
#planogram .pg-validate + .pg-validate { margin-top: 14px !important; }

/* beat 2: the two sides of the disagreement */
#planogram .pg-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; margin-top: 24px; }
#planogram .pg-sides .side { border-radius: var(--radius, 12px); padding: 20px; color: var(--text); }
#planogram .pg-sides .client { background: var(--card-lavender); }
#planogram .pg-sides .eng { background: var(--card-sky); }
#planogram .pg-sides h4 { margin: 0 0 10px; font: 500 16px/1.3 var(--font-display); }
#planogram .pg-sides ul { margin: 0; padding-left: 18px; list-style: disc; font-size: 15px; }
#planogram .pg-sides li + li { margin-top: 6px; }
#planogram .pg-vs { align-self: center; font: 500 14px/1 var(--font-display); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* beat 3: what we agreed */
#planogram .pg-agreed { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius, 12px); overflow: hidden; }
#planogram .pg-agreed .row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; }
#planogram .pg-agreed .row > * { padding: 14px 16px; font-size: 15px; border-top: 1px solid var(--line); }
#planogram .pg-agreed .row > b { background: var(--card-yellow); color: var(--text); font-weight: 600; }
#planogram .pg-agreed .row.head > * { border-top: 0; font: 600 12px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); }

/* beat 4: Figma prototype, loads only on click */
#planogram .pg-proto { margin-top: 32px; padding: 20px; border-radius: var(--radius, 12px); background: var(--card-yellow); color: var(--text); }
#planogram .pg-proto .pg-kicker { color: var(--muted); }
#planogram .pg-proto-task { margin: 0 0 16px; font: 500 17px/1.4 var(--font-display); }
#planogram .pg-proto-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; }
#planogram .pg-proto-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: blur(2px) saturate(.8); opacity: .45; }
#planogram .pg-proto-play { position: relative; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font-body); padding: 14px 22px; border-radius: 999px; border: 0; background: #1b1d22; color: #fff; cursor: pointer; box-shadow: 0 14px 28px -12px rgba(0,0,0,.45); transition: translate .2s ease; }
#planogram .pg-proto-play:hover:not(:disabled) { translate: 0 -2px; }
#planogram .pg-proto-play:focus-visible { outline: 2px solid #1b1d22; outline-offset: 3px; }
#planogram .pg-proto-play:disabled { opacity: .55; cursor: default; }
#planogram .pg-proto-soon { position: absolute; bottom: 14px; margin: 0; font-size: 13px; color: #4a4f57; }
#planogram .pg-proto iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#planogram .pg-proto-link { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 720px) {
  #planogram .pg-sides { grid-template-columns: minmax(0, 1fr); }
  #planogram .pg-vs { justify-self: center; }
  #planogram .pg-agreed .row { grid-template-columns: 1fr; }
  #planogram .pg-agreed .row.head { display: none; }
  #planogram .pg-agreed .row > span:nth-child(1)::before { content: "Client: "; font-weight: 600; }
  #planogram .pg-agreed .row > span:nth-child(2)::before { content: "Engineering: "; font-weight: 600; }
  #planogram .pg-agreed .row > * { border-top: 0; padding: 6px 16px; }
  #planogram .pg-agreed .row { border-top: 1px solid var(--line); padding: 8px 0; }
  #planogram .pg-agreed .row > b { margin: 4px 12px 0; border-radius: 8px; padding: 10px 12px; }
  #planogram .pg-agreed .row.head + .row { border-top: 0; }
  /* phones get a link, not the embed */
  #planogram .pg-proto-stage { display: none; }
}
#planogram .pg-proto-link[hidden] { display: none; }