/* Photo Lab outer shell - makes the page belong to the same site as Menu / Events / Gallery. Loaded ONLY by photo-lab.php,
   after photo-lab.css, photo-lab-compact.css and page-consistency.css.
   What changed (and what did not):
   - The public header is the shared header again (photo-lab.css no longer repositions it; its poster-header rules were removed).
   - The giant split "PHOTO LAB" poster title is replaced by the shared pc-* introduction (eyebrow / title / rule / subtitle).
   - The six-step wizard keeps its approved "design pixel" composition (--u). Desktop: the stage is now an ordinary block in the page
     flow, pulled up under the introduction by the height of the old poster header (252 design px), so every step panel, the progress
     track and the dock keep their exact relative positions. Wizard logic, markup of the steps, souvenir rendering: untouched.
   Selector note: legacy rules are `.pl-app:is([data-pl-step=...]) X` (0,2,0); these use body.pl-app[data-pl-step]:not(...) so they win
   without !important. */

/* ---------- shared (all widths) ---------- */
/* photo-lab.css sets --header-height (76px, and 88px on step 1) on .pl-app for its poster header. Restore the shared Stage-1 header values
   (stage1-tb.css, loaded before this file) with enough specificity to beat those per-step rules. */
body.pl-app[data-pl-step] { --header-height: 96px; }
@media (max-width: 1100px) { body.pl-app[data-pl-step] { --header-height: 88px; } }
@media (max-width: 900px) { body.pl-app[data-pl-step] { --header-height: 76px; } }
/* the fixed photo + scrim layers of body.pl-app (z-index 0) must sit under the page: legacy `.pl-app > .pl-shell { position: relative; z-index: 1 }` no longer matches because the shell is now inside .pl-page */
body.pl-app .pl-page { position: relative; z-index: 1; }
body.pl-app .pl-hero-shell { position: relative; z-index: 4; padding-bottom: clamp(14px, 1.6vw, 22px); }

/* ---------- phones and tablets (< 1100px): same container edges as the introduction ---------- */
@media (max-width: 1099px) {
  
  body.pl-app .pl-page { width: 100%; }
  body.pl-app .pl-page > .pl-shell { width: var(--pc-wrap); max-width: none; margin-inline: auto; padding-inline: 0; }
}

/* ---------- desktop (>= 1100px) ---------- */
@media (min-width: 1100px) {
  html.pl-html:has(body.pl-app[data-pl-step]:not([data-pl-step="success"])) { overflow-x: hidden; overflow-y: auto; }

  body.pl-app[data-pl-step]:not([data-pl-step="success"]) {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pl-page {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: calc(12 * var(--u));
  }

  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pl-hero-shell { padding-top: clamp(20px, 2.4vw, 36px); }

  body.pl-app[data-pl-step]:not([data-pl-step="success"]) .pl-page > .pl-shell {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    width: calc(1672 * var(--u));
    max-width: 100%;
    height: calc(941 * var(--u));
    margin: calc(-1 * var(--pl-pt, 252) * var(--u)) auto 0;
    padding: 0;
    display: block;
  }

  /* the approved design places the progress track at 252 design px (step 4: 203); that line is aligned to the bottom of the introduction */
  body.pl-app[data-pl-step="4"]:not([data-pl-step="success"]) { --pl-pt: 203; }
}

/* readable introduction over the photograph: a soft dark scrim that fades out under the subtitle (full-bleed, decorative) */
body.pl-app .pl-hero-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -18px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: linear-gradient(180deg, rgba(5, 2, 4, 0.8) 0%, rgba(5, 2, 4, 0.6) 62%, rgba(5, 2, 4, 0) 100%);
  pointer-events: none;
}

/* Inter is self-hosted at 400-700 only: legacy Photo Lab rules ask for 800 on buttons, price and labels, which the browser can only map to
   the 700 face. Say 700 explicitly so nothing relies on weight mapping. Souvenir / personalization fonts (canvas) are not touched. */
body.pl-app :is(.pl-btn, .pl-btn *, .pl-price, .pl-price *, .pl-field label, .pl-lane label, .pl-fields label, .pl-copies label) { font-weight: 700; }
body.pl-app.pl-app[data-pl-step] .pl-send-card :is(label, span, strong, b, button, .pl-btn) { font-weight: 700; }

/* Step 6 field grid (responsive correction). Root cause of the overflow: the old `1fr 1fr` tracks are minmax(auto, 1fr), so the intrinsic width of a text
   input made the tracks wider than the card. Tracks are now bounded (min(100%, max(200px, 50% - 7px)) .. 1fr) and every item may shrink: two equal columns while both
   fields keep >= 200px, otherwise one stacked column. Lane number spans the full row; copies, button and info box share the same edges. */
body.pl-app .pl-send-card .pl-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(200px, calc(50% - 7px))), 1fr)); gap: 12px 14px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
body.pl-app .pl-send-card .pl-fields > p { min-width: 0; max-width: 100%; margin: 0; }
body.pl-app .pl-send-card .pl-fields > p.pl-lane { grid-column: 1 / -1; }
body.pl-app .pl-send-card .pl-field { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
body.pl-app .pl-send-card .pl-field input { box-sizing: border-box; flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
body.pl-app .pl-send-card .pl-field > svg, body.pl-app .pl-send-card .pl-field > .pl-nico { flex: 0 0 auto; }
body.pl-app .pl-send-card .pl-fields label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.pl-app .pl-send-card .pl-copies, body.pl-app .pl-send-card .pl-send-cta, body.pl-app .pl-send-card .pl-info { box-sizing: border-box; max-width: 100%; }