/*
 * Layout system
 * Edit this file for spacing, columns, and responsive composition.
 * Visual styling, typography, motion, and CMS controls remain in styles.css.
 */
:root {
  --grid-cols: 12;
  --grid-margin: 48px;
  --grid-gutter: 24px;
  --grid-baseline: 8px;
  --grid-leading: 24px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --pad: var(--grid-margin);
}

/* Shared horizontal field: every public view uses the same column geometry. */
.top,
.igrid,
.pcols,
.playwrap,
.iwrap,
.pnav,
.foot {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.top {
  padding: var(--space-3) var(--grid-margin) 0;
}

.top .brand {
  grid-column: 1 / 5;
}

.top .playlink {
  grid-column: 5 / 9;
  justify-self: center;
}

.top .infolink {
  grid-column: 9 / -1;
  justify-self: end;
}

/* Index: one cover occupies exactly three of twelve columns. */
.igrid {
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--space-10) var(--grid-gutter);
  padding: var(--space-15) var(--grid-margin) var(--space-6);
}

.igrid .item {
  grid-column: span 3;
  min-width: 0;
}

/* Playground: all sections remain tied to the shared twelve-column field. */
.playwrap {
  padding: var(--space-12) var(--grid-margin) var(--space-15);
}

.playintro,
.playlist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  column-gap: var(--grid-gutter);
}

@supports not (grid-template-columns: subgrid) {
  .playintro,
  .playlist {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  }
}

.play-label {
  grid-column: 1 / 4;
}

.play-title {
  grid-column: 4 / 10;
}

.play-note {
  grid-column: 10 / 13;
}

.playlist {
  margin-top: var(--space-15);
  row-gap: var(--space-15);
}

.playitem:nth-child(4n+1) {
  grid-column: 1 / 9;
}

.playitem:nth-child(4n+2) {
  grid-column: 9 / 13;
}

.playitem:nth-child(4n+3) {
  grid-column: 1 / 5;
}

.playitem:nth-child(4n+4) {
  grid-column: 5 / 13;
}

/* Project: metadata 3 columns, English 5 columns, Chinese 4 columns. */
.pwrap {
  padding: var(--space-12) var(--grid-margin) 0;
}

.pcols {
  gap: 0 var(--grid-gutter);
  align-items: start;
}

.pcol-cred {
  grid-column: 1 / 4;
}

.ptext.en {
  grid-column: 4 / 9;
}

.ptext.cn {
  grid-column: 9 / 13;
}

.pcred {
  margin-top: var(--space-8);
}

.ptext p {
  margin-bottom: var(--space-3);
}

.pimgs {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--project-media-gap, var(--space-15));
  padding: var(--space-12) var(--grid-margin) 0;
}

.pimgs .imgblock {
  grid-column: 1 / -1;
  width: var(--project-media-width, 100%);
  justify-self: center;
  margin: 0;
  padding-inline: 0;
}

.pimgs .project-text-block {
  grid-column: 1 / -1;
}

.pimgs .project-text-block.size-large {
  grid-column: 1 / -1;
}

.pimgs .project-split-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
}

.project-split-text {
  grid-column: var(--split-text-start) / var(--split-text-end);
}

.project-split-media {
  grid-column: var(--split-media-start) / var(--split-media-end);
}

.pnav {
  padding: var(--space-15) var(--grid-margin) 0;
}

.pnav a:first-child {
  grid-column: 1 / 7;
}

.pnav a:last-child {
  grid-column: 7 / -1;
  justify-self: end;
  text-align: right;
}

/* Info uses the same twelve-column field instead of an independent max-width. */
.iwrap {
  padding: var(--space-15) var(--grid-margin) 0;
}

.ist {
  grid-column: 1 / 10;
  max-width: none;
}

.ist .cn {
  margin-top: var(--space-4);
}

.icols {
  grid-column: 1 / 10;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  margin-top: var(--space-12);
  max-width: none;
}

.icols > :first-child {
  grid-column: 1 / 5;
}

.icols > :last-child {
  grid-column: 6 / 10;
}

/* Fixed footer aligns to the same column lines as the page above it. */
.foot {
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: 0 var(--grid-gutter);
  padding: var(--space-4) var(--grid-margin) var(--space-3);
}

.foot > #footL {
  grid-column: 1 / 5;
}

.foot > .fr {
  grid-column: 5 / 9;
  justify-self: center;
}

.foot > .gridbtn {
  grid-column: 10 / 11;
  justify-self: end;
}

.foot > .editbtn {
  grid-column: 11 / 13;
  justify-self: end;
}

.gridbtn {
  align-self: end;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .07em;
  border: 1px solid var(--ink);
  padding: 5px 10px;
  background: var(--paper);
}

.gridbtn:hover,
.gridbtn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Diagnostic overlay: it shares the exact margin, columns, and gutters above. */
.grid-guides {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(228, 0, 43, .10) 0,
      rgba(228, 0, 43, .10) 1px,
      transparent 1px,
      transparent var(--grid-baseline)
    );
  transition: opacity .18s ease, visibility .18s ease;
}

.grid-guides::before,
.grid-guides::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(228, 0, 43, .72);
}

.grid-guides::before {
  left: var(--grid-margin);
}

.grid-guides::after {
  right: var(--grid-margin);
}

.grid-guides span {
  min-width: 0;
  border-inline: 1px solid rgba(228, 0, 43, .34);
  background: rgba(228, 0, 43, .035);
}

body.grid-on .grid-guides {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1200px) {
  :root {
    --grid-margin: 32px;
  }
}

@media (max-width: 1000px) {
  :root {
    --grid-cols: 6;
    --grid-gutter: 16px;
  }

  .top .brand {
    grid-column: 1 / 3;
  }

  .top .playlink {
    grid-column: 3 / 5;
  }

  .top .infolink {
    grid-column: 5 / -1;
  }

  .igrid .item {
    grid-column: span 2;
  }

  .play-label {
    grid-column: 1 / 3;
  }

  .play-title {
    grid-column: 3 / 6;
  }

  .play-note {
    grid-column: 3 / 6;
    margin-top: var(--space-4);
  }

  .playitem:nth-child(4n+1),
  .playitem:nth-child(4n+4) {
    grid-column: 1 / -1;
  }

  .playitem:nth-child(4n+2),
  .playitem:nth-child(4n+3) {
    grid-column: span 3;
  }

  .pcol-cred {
    grid-column: 1 / -1;
    display: block;
  }

  .pcol-cred .ptitle {
    grid-column: auto;
  }

  .pcol-cred .pcred {
    grid-column: auto;
    margin-top: var(--space-4);
  }

  .ptext.en {
    grid-column: 1 / 4;
    margin-top: var(--space-6);
  }

  .ptext.cn {
    grid-column: 4 / -1;
    margin-top: var(--space-6);
  }

  .pimgs .imgblock,
  .pimgs .project-text-block,
  .pimgs .project-text-block.size-large,
  .pimgs .project-split-block,
  .project-split-text,
  .project-split-media {
    grid-column: 1 / -1;
  }

  .project-text-block.size-large p {
    line-height: 48px;
  }

  .ist,
  .icols {
    grid-column: 1 / -1;
  }

  .icols {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .icols > :first-child {
    grid-column: 1 / 4;
  }

  .icols > :last-child {
    grid-column: 4 / -1;
  }

  .pnav a:first-child {
    grid-column: 1 / 4;
  }

  .pnav a:last-child {
    grid-column: 4 / -1;
  }

  .foot > #footL {
    grid-column: 1 / 3;
  }

  .foot > .fr {
    grid-column: 3 / 5;
  }

  .foot > .gridbtn {
    grid-column: 5 / 6;
  }

  .foot > .editbtn {
    grid-column: 6 / 7;
  }

  .grid-guides span:nth-child(n+7) {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --grid-cols: 4;
    --grid-margin: 24px;
  }

  .top {
    padding-top: var(--space-2);
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    row-gap: var(--space-1);
  }

  .top .brand {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .top .playlink {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .top .infolink {
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .igrid {
    gap: var(--space-8) var(--grid-gutter);
    padding-top: var(--space-10);
  }

  .igrid .item {
    grid-column: span 2;
  }

  .playwrap {
    padding-top: var(--space-10);
  }

  .play-label,
  .play-title,
  .play-note,
  .playitem:nth-child(4n+1),
  .playitem:nth-child(4n+2),
  .playitem:nth-child(4n+3),
  .playitem:nth-child(4n+4) {
    grid-column: 1 / -1;
  }

  .play-title {
    margin-top: var(--space-4);
  }

  .playlist {
    margin-top: var(--space-12);
    row-gap: var(--space-12);
  }

  .pwrap,
  .iwrap {
    padding-top: var(--space-10);
  }

  .pcol-cred,
  .ptext.en,
  .ptext.cn {
    grid-column: 1 / -1;
  }

  .pcol-cred {
    display: block;
  }

  .pcol-cred .pcred {
    margin-top: var(--space-4);
  }

  .ptext.en,
  .ptext.cn {
    margin-top: var(--space-8);
  }

  .icols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: var(--space-8);
  }

  .icols > :first-child,
  .icols > :last-child {
    grid-column: 1 / -1;
  }

  .pimgs {
    padding-top: var(--space-12);
    row-gap: var(--space-12);
  }

  .pimgs .project-split-block,
  .project-split-text,
  .project-split-media {
    grid-column: 1 / -1;
  }

  .project-text-block.size-large p {
    line-height: 40px;
  }

  .pnav {
    padding-top: var(--space-12);
  }

  .pnav a:first-child {
    grid-column: 1 / 3;
  }

  .pnav a:last-child {
    grid-column: 3 / -1;
  }

  .foot > #footL {
    grid-column: 1 / 3;
  }

  .foot > .gridbtn {
    grid-column: 3 / 4;
  }

  .foot > .editbtn {
    grid-column: 4 / 5;
  }

  .grid-guides span:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 460px) {
  :root {
    --grid-cols: 2;
    --grid-margin: 16px;
  }

  .top .brand {
    grid-column: 1 / 2;
    grid-row: 1;
  }

  .top .playlink {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-top: var(--space-1);
  }

  .top .infolink {
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .top .brand,
  .top .playlink,
  .top .infolink {
    font-size: clamp(24px, 8vw, 34px);
  }

  .igrid .item {
    grid-column: 1 / -1;
  }

  .foot {
    column-gap: var(--space-1);
  }

  .foot > #footL {
    grid-column: 1 / 2;
  }

  .foot > .gridbtn,
  .foot > .editbtn {
    grid-row: 1;
  }

  .foot > .gridbtn {
    grid-column: 2 / 3;
    justify-self: start;
  }

  .foot > .editbtn {
    grid-column: 2 / 3;
  }

  .grid-guides span:nth-child(n+3) {
    display: none;
  }
}