/* sm-prizes.css: the Prizes section in the SM look (unit PRIZES-UI). Loads after sm-ar.css.
   Scene on top (sm-jacc), the head over the zenith sky, the three places as hud-panels on the ground below.
   Podium order 2 | 1 | 3 is physical in both languages; each panel's text runs in its own direction. --hud-* tokens only. */

.sm .pz-stage { position: relative; background: var(--ground-1, var(--hud-n1)); overflow: hidden; padding-block: 0; }
.sm .pz-scene-box { position: relative; inline-size: 100%; block-size: 760px; overflow: hidden; background: var(--hud-n1); }
.sm .pz-scene {
  position: absolute; inset-block-start: 0; left: 0; inline-size: 1440px; block-size: 760px;
  direction: ltr; image-rendering: pixelated;
}
.sm .pz-scene.is-placeholder { background: var(--hud-n1); }

.sm .pz-head { z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sm .pz-head p, .sm .pz-head h2 { margin: 0; }
.sm .pz-label { line-height: 25px; }
.sm .pz-title { font-size: 50px; line-height: 56px; text-wrap: balance; }

.sm .pz-prom { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 48px var(--gutter) 96px; }
.sm .pz-places {
  position: relative; z-index: 2; inline-size: 100%; max-inline-size: 1008px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: end;
}
.sm .pz-place { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; padding: 18px 20px 20px; }
.sm .pz-place--1 { padding-block-start: 48px; }
.sm .pz-rank { line-height: 25px; letter-spacing: 2px; }
.sm .pz-prize { margin: 0; }
.sm .pz-facts { inline-size: 100%; max-inline-size: 1008px; box-sizing: border-box; margin-block-start: -16px; padding-block-start: 24px; display: flex; flex-direction: column; gap: 20px; }
.sm .pz-lede, .sm .pz-body { margin: 0; max-inline-size: 62ch; }
.sm .pz-readout { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 2px solid var(--hud-frame); }
.sm .pz-cell { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 0 0; min-inline-size: 0; }
.sm .pz-cell + .pz-cell { border-inline-start: 2px solid var(--hud-frame); padding-inline-start: 14px; }
.sm .pz-cat { line-height: 25px; letter-spacing: 2px; text-wrap: balance; }
[dir="rtl"] .sm .pz-stage .pz-facts { direction: rtl; }

/* Arabic: pixel parity (EN 50 = AR 40, EN 25 = AR 20); specificity (0,4,0) beats sm-ar.css whatever the load order */
[dir="rtl"] .sm .pz-stage .pz-title { font-size: 40px; line-height: 52px; font-weight: 400; }
[dir="rtl"] .sm .pz-stage .pz-rank { font-size: 20px; line-height: 28px; font-weight: 700; }
[dir="rtl"] .sm .pz-stage .pz-cat { font-size: 20px; line-height: 28px; font-weight: 700; }
[dir="rtl"] .sm .pz-stage .pz-place { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .sm .pz-stage .pz-title .hud-hl { white-space: normal; }

/* art-locked head, 768 and up (the How clamp: never closer to the edge than the smaller of the gutter and 72 px) */
@media (min-width: 768px) {
  .sm .pz-stage { --ox: var(--stage-ox, 0px); --oxr: var(--stage-ox-r, 0px); }
  .sm .pz-scene { inline-size: round(up, 100%, 2px); }
  .sm .pz-head {
    --x: 72px;
    position: absolute; inset-block-start: 48px; z-index: 2; direction: ltr;
    left: calc(var(--ox) + max(calc(min(var(--gutter), var(--x)) - var(--ox)), var(--x)));
    inline-size: fit-content;
    max-inline-size: min(760px, calc(100% - var(--ox) - var(--x) - var(--gutter)));
  }
  [dir="rtl"] .sm .pz-stage .pz-head {
    direction: rtl; left: auto; align-items: flex-end;
    right: calc(var(--oxr) + max(calc(min(var(--gutter), var(--x)) - var(--oxr)), var(--x)));
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sm .pz-places { gap: 12px; }
  .sm .pz-place { padding-inline: 14px; }
}

/* phone: the scene runs at scale 1 and spans the width (manifest.phone); head, places and certificate stack on the one ground */
@media (max-width: 767px) {
  .sm .pz-stage { overflow: visible; }
  .sm .pz-scene-box { block-size: 380px; }   /* scale 1 on phones: 380 art px = 380 css px */
  .sm .pz-scene { inline-size: 100%; block-size: 380px; left: 0; inset-block-start: 0; }   /* the engine spans the element and centres art x 360 (manifest.phone, scale 1): podium 250-470 whole at 360 and wider */
  .sm .pz-paper { padding: 28px 22px 0; }
  .sm .pz-title { font-size: 37.5px; line-height: 44px; }
  [dir="rtl"] .sm .pz-stage .pz-title { font-size: 30px; line-height: 42px; }
  .sm .pz-prom { padding: 24px 22px 56px; gap: 28px; }
  .sm .pz-places { display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-inline-size: none; }
  .sm .pz-place--1 { order: 1; padding-block-start: 18px; }
  .sm .pz-place--2 { order: 2; }
  .sm .pz-place--3 { order: 3; }
  .sm .pz-facts { margin-block-start: 0; padding-block-start: 20px; gap: 16px; }
  .sm .pz-readout { grid-template-columns: 1fr; }
  .sm .pz-cell, .sm .pz-cell + .pz-cell { border-inline-start: 0; padding: 12px 0; border-block-end: 2px solid var(--hud-frame); }
  .sm .pz-cell:last-child { border-block-end: 0; }
}