/* ------------------------------------------------------------------
   Shared project popup LAYOUT.
   Geometry only. Colour, type, borders, shadows and motion stay in each
   project's own stylesheet so every popup keeps its own character.
   Loaded last so it wins over any legacy layout rules.
   ------------------------------------------------------------------ */

/* Standard popup size: taken from Karapop. */
.pj-dialog {
  inset: 0;
  width: min(1380px, calc(100vw - 24px));
  height: min(920px, calc(100dvh - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

/* Shell: fixed title bar, then one flexible body row. */
.pj-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Title bar: brand mark, context line, close button. */
.pj-bar {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 68px;
  padding: 8px 10px 8px 18px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.pj-bar > p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-bar-mark { flex: none; width: auto; object-fit: contain; object-position: left center; }

.pj-close {
  min-width: 106px;
  min-height: 48px;
  padding: 0 13px;
  cursor: pointer;
}

/* Body: hero image left, copy and interactivity right. */
.pj-layout {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
}

.pj-hero {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.pj-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.pj-hero figcaption {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 8px;
}

.pj-hero-readout {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  left: 14px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 11px;
}

.pj-copy {
  --pj-pad-x: clamp(28px, 3.6vw, 56px);
  --pj-pad-y: clamp(28px, 3.6vw, 56px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--pj-pad-y) var(--pj-pad-x) 0;
  overflow-y: auto;
}

.pj-copy > * { flex: none; }
/* Keeps a gap above the docked action when the column is short enough not to scroll. */
.pj-copy > :nth-last-child(2) { margin-bottom: 34px; }

/* Standard reading order inside the copy column. */
.pj-copy > h2 { max-width: 770px; margin: 0 0 26px; }
.pj-copy > h2:focus { outline: 0; }
.pj-summary { max-width: 760px; }
.pj-summary p { margin: 0 0 14px; }
.pj-summary p:last-child { margin-bottom: 0; }

/* Interactive module. Each project fills this with its own toy. */
.pj-module {
  margin-top: clamp(32px, 5vh, 54px);
  padding: 17px;
}

.pj-module-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.pj-module-head h3 { margin: 0; }

/* Three-up meta strip below the headline: category, status, type. */
.pj-facts {
  display: grid;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
}

.pj-facts div { min-width: 0; padding: 12px; }
.pj-facts dt { margin-bottom: 6px; }
.pj-facts dd { margin: 0; }

/* The call to action stays docked at the foot of the scrolling column. */
.pj-cta-dock {
  position: sticky;
  z-index: 3;
  bottom: 0;
  margin: auto calc(-1 * var(--pj-pad-x)) 0;
  padding: 14px var(--pj-pad-x);
}

/* Main call to action: full-width bar, label left, arrow right. */
.pj-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 0 20px;
  text-decoration: none;
}

/* Per-project notes library. */
.pj-notes {
  display: grid;
  gap: 9px;
  margin-top: 28px;
  padding-top: 19px;
}

.pj-notes > span { margin-bottom: 4px; }

@media (max-width: 900px) {
  .pj-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .pj-layout { grid-template-columns: 1fr; grid-template-rows: minmax(280px, 40dvh) minmax(0, 1fr); }
  .pj-copy { --pj-pad-x: 24px; --pj-pad-y: 32px; }
}

@media (max-width: 560px) {
  .pj-dialog { width: 100vw; height: 100dvh; }
  /* The context line drops out, so the bar becomes mark + close. */
  .pj-bar { min-height: 58px; padding: 6px 7px 6px 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
  .pj-bar > p { display: none; }
  .pj-bar > :first-child { justify-self: start; }
  .pj-close { min-width: 49px; width: 49px; min-height: 46px; padding: 0; font-size: 0; }
  .pj-layout { grid-template-rows: minmax(218px, 31dvh) minmax(0, 1fr); }
  .pj-hero figcaption { right: 9px; bottom: 8px; left: 9px; }
  .pj-hero figcaption span:last-child { display: none; }
  .pj-hero-readout { top: 9px; right: 9px; left: 9px; padding: 7px 9px; }
  .pj-copy { --pj-pad-x: 14px; --pj-pad-y: 25px; }
  .pj-copy > h2 { margin-bottom: 22px; }
  .pj-cta-dock { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .pj-module { margin-top: 32px; padding: 13px; }
  .pj-facts { grid-template-columns: 1fr; }
  .pj-facts div { display: grid; grid-template-columns: 105px 1fr; align-items: baseline; padding: 10px 12px; }
  .pj-facts dt { margin: 0; }
  .pj-cta { min-height: 58px; padding: 0 15px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .pj-dialog { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .pj-bar { min-height: 52px; }
  .pj-layout { grid-template: 1fr / minmax(0, .8fr) minmax(430px, 1.2fr); }
  .pj-copy { --pj-pad-y: 22px; }
}