/* Last year: CyberThon 2025 (unit SM-LY). Loads after sm-hud.css and sm-page.css; uses their tokens and role classes
   (.hud-label, .px-type, .hud-panel, .hud-frame, .sec-prose). One flat N1 ground continuing How; no scene art.
   Content column = the proof's: 1296 px centred, and below ~1388 the gutter on both edges (the How stations' edges).
   The screen is the 336 x 224 master at an integer scale (--k: 2 on desktop and tablet, 1 on phone), pixelated, never resampled.
   Photos are never mirrored; the columns are logical, so the screen sits on the end side in both languages. */

.sm .ly-stage { position: relative; background: var(--hud-n1); padding-block: 72px 112px; }
.sm .ly-in { box-sizing: border-box; inline-size: min(1296px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ── the carousel: ONE pixel screen at an integer scale k of the 336 x 224 master ─────────────────────── */
.sm .ly-grid { --k: 2; display: grid; grid-template-columns: minmax(0, 1fr) calc(336px * var(--k) + 4px); column-gap: 64px; align-items: stretch; }
.sm .ly-car { display: flex; flex-direction: column; gap: 14px; inline-size: calc(336px * var(--k) + 4px); max-inline-size: 100%; }
.sm .ly-screen { box-sizing: border-box; inline-size: calc(336px * var(--k) + 4px); max-inline-size: 100%; overflow: visible; }
.sm .ly-screen::before { z-index: 3; }                      /* the corner brackets sit over the picture's corners */
.sm .ly-viewport { position: relative; inline-size: calc(336px * var(--k)); block-size: calc(224px * var(--k)); max-inline-size: 100%; overflow: hidden; overflow: clip; background: var(--hud-n0); touch-action: pan-y pinch-zoom; }   /* clip, not a scroll container: an RTL overflow:hidden box can be scrolled by the crop */
.sm .ly-slide { position: absolute; inset: 0; }
.sm .ly-slide[hidden] { display: none; }
/* the image is always the master at k: where the screen is narrower than 336 k (under ~384 px) it is cropped, centred on whole pixels, never scaled */
.sm .ly-slide img { position: absolute; inset-block-start: 0; left: calc(50% - 168px * var(--k)); left: round(down, calc(50% - 168px * var(--k)), 1px); display: block; inline-size: calc(336px * var(--k)); max-inline-size: none; block-size: 100%; image-rendering: pixelated; object-fit: fill; }
.sm .ly-cells { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; image-rendering: pixelated; pointer-events: none; z-index: 2; }

.sm .ly-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sm .ly-cap, .sm .ly-count { margin: 0; line-height: 32px; letter-spacing: 1px; }
.sm .ly-cap { min-inline-size: 0; text-wrap: balance; }
.sm .ly-count { flex: none; color: var(--hud-l0); white-space: nowrap; }
.sm .ly-meta { min-block-size: 32px; }

.sm .ly-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sm .ly-btn {
  box-sizing: border-box; flex: none; inline-size: 44px; block-size: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--hud-n1); border: 2px solid var(--hud-ifc); border-radius: 0; box-shadow: none; cursor: pointer; color: var(--hud-l3);
}
.sm .ly-btn svg { fill: var(--hud-l3); display: block; }
.sm .ly-btn:hover { border-color: var(--hud-c3); }
.sm .ly-next svg { transform: scaleX(-1); }                  /* the chevron points to the end side; in RTL both flip, so next points left */
[dir="rtl"] .sm .ly-prev svg { transform: scaleX(-1); }
[dir="rtl"] .sm .ly-next svg { transform: none; }
.sm .ly-btn:focus-visible, .sm .ly-dot:focus-visible { outline: 2px solid var(--hud-ifc); outline-offset: 3px; }
.sm .ly-dots { flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; justify-content: center; }
.sm .ly-dot { box-sizing: border-box; flex: 1 1 0; min-inline-size: 0; max-inline-size: 24px; /* hit area 24 x 44 (the marker stays 8 or 12 px, centred) */ inline-size: 24px; block-size: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sm .ly-dot::before { content: ''; display: block; inline-size: 8px; block-size: 8px; background: #3c6ed5; }   /* B3: 4:1 on the N1 ground (WCAG 1.4.11) */
.sm .ly-dot:hover::before { background: var(--hud-c1); }
.sm .ly-dot[aria-current="true"]::before { inline-size: 12px; block-size: 12px; background: var(--hud-c2); }

/* ── copy cell ───────────────────────────────────────────────────────────────────────────────────── */
.sm .ly-copy { display: flex; flex-direction: column; align-items: flex-start; min-inline-size: 0; }
.sm .ly-copy > * { margin: 0; }
.sm .ly-label { line-height: 25px; letter-spacing: var(--hud-track); }
.sm .ly-title { margin-block-start: 18px; font-size: 50px; line-height: 56px; letter-spacing: 2px; text-wrap: balance; }
/* Arabic roles take their size by pixel parity (sm-ar.css, loaded after this file): EN 25 = AR 20, EN 37.5 = AR 30, EN 50 = AR 40 */
[dir="rtl"] .sm .ly-stage .ly-title { font-size: 40px; line-height: 52px; letter-spacing: 0; font-weight: 400; }
[dir="rtl"] .sm .ly-title .hud-hl { white-space: normal; }
.sm .ly-body { margin-block-start: 18px; max-inline-size: 52ch; }

.sm .ly-winners { box-sizing: border-box; inline-size: 100%; margin-block-start: 28px; padding: 20px 24px 22px; }
.sm .ly-wt { line-height: 25px; letter-spacing: 2px; }
.sm .ly-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; align-items: baseline; }
.sm .ly-list li { display: contents; }
.sm .ly-rank { line-height: 25px; letter-spacing: 2px; }
.sm .ly-name { margin: 0; text-wrap: pretty; }
.sm .ly-wt--2 { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 2px solid var(--hud-frame); }   /* the second heading: a dim rule and 14 px above it */

/* ── desktop (1280 up): the copy and the winners in one column, the screen in the other; the panel's foot meets the controls' foot ── */
@media (min-width: 1280px) {
  .sm .ly-winners { margin-block-start: auto; }
  /* tightened so the two columns end together (the panel holds two headings and two ranked lists) */
  .sm .ly-grid { column-gap: 48px; }
  .sm .ly-title { margin-block-start: 8px; }
  .sm .ly-body { margin-block-start: 8px; margin-block-end: 14px; }   /* the panel never touches the body when the copy column is the taller one */
  .sm .ly-winners { padding: 14px 20px 16px; }
  .sm .ly-list { margin-block-start: 6px; gap: 2px 14px; }
  .sm .ly-wt--2 { margin-block-start: 8px; padding-block-start: 8px; }
  .sm .ly-winners .ly-rank { line-height: 22px; }
  .sm .ly-copy { padding-block-end: 0; }
}

/* ── below 1280: the copy runs full width above the screen, which centres at its integer scale ─────── */
@media (max-width: 1279px) {
  .sm .ly-stage { padding-block: 56px 80px; }
  .sm .ly-grid { display: block; }
  .sm .ly-car { margin: 48px auto 0; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sm .ly-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .sm .ly-copy > :not(.ly-winners) { grid-column: 1; }
  .sm .ly-winners { grid-column: 2; grid-row: 1 / span 3; margin-block-start: 0; }
}

/* ── phone: k = 1 (the master at its own size) ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sm .ly-grid { --k: 1; }
  .sm .ly-stage { padding-block: 40px 56px; }
  .sm .ly-in { inline-size: calc(100% - 44px); }
  .sm .ly-car { margin-block-start: 32px; }
  .sm .ly-title { font-size: 37.5px; line-height: 44px; letter-spacing: 0; }
  [dir="rtl"] .sm .ly-stage .ly-title { font-size: 30px; line-height: 42px; font-weight: 400; }
  .sm .ly-winners { padding: 16px 16px 18px; margin-block-start: 24px; }
  .sm .ly-list { grid-template-columns: 1fr; gap: 0; }
  .sm .ly-rank { margin-block-start: 10px; }
  .sm .ly-cap { font-size: 18px; line-height: 22px; letter-spacing: 1px; block-size: 44px; }
  [dir="rtl"] .sm .ly-cap { font-size: 20px; line-height: 28px; block-size: 56px; }
  .sm .ly-count { line-height: 22px; }
  .sm .ly-meta { min-block-size: 44px; }
  [dir="rtl"] .sm .ly-meta { min-block-size: 56px; }
}


/* ── narrow phones (under 384): the column fits the frame; under 372 the frame shrinks and the picture is cropped from both sides ─────────── */
@media (max-width: 383px) {
  .sm .ly-in { inline-size: calc(100% - 32px); }
}
@media (forced-colors: active) { .sm .ly-dot::before { background: ButtonText; } .sm .ly-dot[aria-current="true"]::before { background: Highlight; } .sm .ly-btn svg { fill: ButtonText; } }