/* assets/layout-grid.css
 * Math Contract Grid v1.0 (LOCKED)
 * Tokens + grid utilities + sticky invariants + profile anchors
 */

:root {
  /* Unit + frame */
  --u: 8px;
  --max-w: 1200px;

  /* Page padding (default desktop; overridden by media queries below) */
  --page-pad: calc(var(--u) * 4); /* 32px */

  /* Grid defaults (desktop) */
  --grid-cols: 12;
  --gutter: calc(var(--u) * 3);   /* 24px */

  /* Bars */
  --wp-adminbar-h: 0px;           /* set by body.admin-bar below */
  --scc-topbar-h: 0px;            /* app toolbar height (set on the toolbar or root) */

  /* Sticky invariant */
  --sticky-top: calc(var(--wp-adminbar-h) + var(--scc-topbar-h) + (var(--u) * 2));

  /* Radii tokens */
  --r1: calc(var(--u) * 1);       /* 8px  */
  --r2: 12px;                     /* allowed (multiple of 4) */
  --r3: calc(var(--u) * 2);       /* 16px */
  --r4: calc(var(--u) * 3);       /* 24px */

  /* Vertical rhythm tokens */
  --gap-in-card: calc(var(--u) * 2);     /* 16px */
  --gap-section: calc(var(--u) * 4);     /* 32px */
  --gap-pageblock: calc(var(--u) * 6);   /* 48px */

  /* Profile defaults */
  --cover-h: 240px;               /* can be overridden per theme */
  --avatar-size: calc(var(--u) * 12); /* 96px */
}

/* WordPress admin bar heights (standard) */
body.admin-bar { --wp-adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --wp-adminbar-h: 46px; }
}

/* Breakpoints: tablet (8-col), mobile (4-col) */
@media (max-width: 1199px) {
  :root {
    --grid-cols: 8;
    --gutter: calc(var(--u) * 2);   /* 16px */
    --page-pad: calc(var(--u) * 3); /* 24px */
    --avatar-size: calc(var(--u) * 11); /* 88px */
  }
}
@media (max-width: 767px) {
  :root {
    --grid-cols: 4;
    --gutter: calc(var(--u) * 2);   /* 16px */
    --page-pad: calc(var(--u) * 2); /* 16px */
    --avatar-size: calc(var(--u) * 9);  /* 72px */
    --cover-h: 220px;
  }
}

/* Frame + container */
.scc-frame { box-sizing: border-box; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.scc-container { box-sizing: border-box; width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; }

/* Grid */
.scc-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

/* Column spans (desktop 12) */
.scc-span-12 { grid-column: span 12; }
.scc-span-9  { grid-column: span 9;  }
.scc-span-8  { grid-column: span 8;  }
.scc-span-6  { grid-column: span 6;  }
.scc-span-5  { grid-column: span 5;  }
.scc-span-4  { grid-column: span 4;  }
.scc-span-3  { grid-column: span 3;  }
.scc-span-2  { grid-column: span 2;  }
.scc-span-1  { grid-column: span 1;  }

/* Tablet overrides (8-col) */
@media (max-width: 1199px) {
  .scc-md-span-8 { grid-column: span 8; }
  .scc-md-span-6 { grid-column: span 6; }
  .scc-md-span-5 { grid-column: span 5; }
  .scc-md-span-4 { grid-column: span 4; }
  .scc-md-span-3 { grid-column: span 3; }
  .scc-md-span-2 { grid-column: span 2; }
}

/* Mobile overrides (4-col) */
@media (max-width: 767px) {
  .scc-sm-span-4 { grid-column: span 4; }
  .scc-sm-span-2 { grid-column: span 2; }
}

/* Canonical layout helpers */
.scc-layout-main-8 { grid-column: span 8; }
.scc-layout-side-4 { grid-column: span 4; }

@media (max-width: 1199px) {
  .scc-layout-main-8 { grid-column: span 5; } /* canonical 5/3 */
  .scc-layout-side-4 { grid-column: span 3; }
}
@media (max-width: 767px) {
  .scc-layout-main-8,
  .scc-layout-side-4 { grid-column: span 4; } /* stacks */
}

/* Spacing utilities (tokenized) */
.scc-stack { display: flex; flex-direction: column; gap: var(--gap-in-card); }
.scc-section { margin-top: var(--gap-section); }
.scc-pageblock { margin-top: var(--gap-pageblock); }

.scc-pad-16 { padding: calc(var(--u) * 2); } /* 16 */
.scc-pad-24 { padding: calc(var(--u) * 3); } /* 24 */
.scc-pad-32 { padding: calc(var(--u) * 4); } /* 32 */

/* Card baseline */
.scc-card {
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r3);
  background: rgba(255,255,255,0.02);
  padding: calc(var(--u) * 3); /* 24 desktop */
}
@media (max-width: 767px) {
  .scc-card { padding: calc(var(--u) * 2); } /* 16 mobile */
}

/* Sticky invariant */
.scc-sticky { position: sticky; top: var(--sticky-top); z-index: 20; }

/* Profile: cover + avatar anchors */
.scc-profile { position: relative; }

.scc-cover {
  position: relative;
  width: 100%;
  height: var(--cover-h);
  border-radius: var(--r4);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}

.scc-timeline { position: relative; }

.scc-avatar-wrap {
  position: absolute;
  width: var(--avatar-size);
  height: var(--avatar-size);
  left: calc(var(--u) * 2); /* U2 */
  top: calc(0px - (var(--avatar-size) / 2));
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
}

.scc-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scc-avatar-initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(var(--u) * 3); /* 24 */
}

.scc-timeline-top-pad { padding-top: calc((var(--avatar-size) / 2) + (var(--u) * 2)); }