/* Final, source-level presentation rules. Loaded before the application mounts. */
html, html.light, html.dark { --selection-bg: #fff200; }
::selection { background: #fff200; color: #000; }
::-moz-selection { background: #fff200; color: #000; }
.svg-sign { display: none !important; }

/* The work cards are display-only on this portfolio. */
a[href^="#video-"] { pointer-events: none; cursor: default; }
a[href="#contact"] { white-space: pre-line; pointer-events: none; cursor: default; text-transform: none !important; }

/* Remove legacy external-only cards and contact links from the source layout. */
a[href*="twitter.com/wenhaoqi"],
a[href*="figma.com/@wenhaoqi"],
a[href*="github.com/wenhaoqiasd"],
a[href*="figma-shanghai-presents-see-hear-touch"],
a[href*="figma-shanghai-presents-design-system"] { display: none !important; }
article:has([data-external-link-disabled*="figma-shanghai-presents-see-hear-touch"]),
article:has([data-external-link-disabled*="figma-shanghai-presents-design-system"]) { display: none !important; }

@media (min-width: 1024px) {
  /* Fixed desktop grid: video dimensions no longer affect the surrounding rows. */
  article:has(a[href="#video-reunimos"]) { grid-column: 1 / span 12; grid-row: 1; }
  article:has(a[href="#video-inspire"]) { grid-column: 1 / span 6; grid-row: 2; }
  article:has(a[href="#video-wasm"]) { grid-column: 7 / span 6; grid-row: 2; }
  article:has(a[href="#video-ancient-love"]) { grid-column: 1 / span 4; grid-row: 3; }
  article:has(a[href="#video-vectorsymbols"]) { grid-column: 5 / span 4; grid-row: 3; }
  article:has(a[href="#video-darkside"]) { grid-column: 9 / span 4; grid-row: 3; }
  article:has(a[href="#video-serum"]) { grid-column: 1 / span 4; grid-row: 4; }
  article:has(a[href="#video-cat"]) { grid-column: 5 / span 4; grid-row: 4; }
  article:has(a[href="#video-fitness"]) { grid-column: 9 / span 4; grid-row: 4; }

  /* Portrait films use the same three column widths as the row above, while
     keeping their full 9:16 frame. */
  article:has(a[href="#video-serum"]) > a > div[aria-hidden="true"],
  article:has(a[href="#video-cat"]) > a > div[aria-hidden="true"],
  article:has(a[href="#video-fitness"]) > a > div[aria-hidden="true"] {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 9 / 16 !important;
  }

  article:has(a[href="#video-serum"]) video,
  article:has(a[href="#video-cat"]) video,
  article:has(a[href="#video-fitness"]) video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}