/* board.css: Screen 2, the project board. A collage of every project on black, with "living frames". */
.board-section { background: var(--cream); color: var(--black); padding: var(--space-6) var(--space-6) var(--space-8); }
.board {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 72px; gap: var(--space-4);
}
/* Placement on the 12-column grid: small, medium and tall frames (order = projects.json order) */
.board-item:nth-of-type(1) { grid-column: 1 / span 4;  grid-row: 1 / span 6; }   /* tall */
.board-text                { grid-column: 5 / span 4;  grid-row: 1 / span 3; }
.board-item:nth-of-type(2) { grid-column: 9 / span 4;  grid-row: 1 / span 4; }   /* medium */
.board-item:nth-of-type(3) { grid-column: 5 / span 4;  grid-row: 4 / span 4; }   /* medium */
.board-item:nth-of-type(4) { grid-column: 9 / span 3;  grid-row: 5 / span 3; }   /* small */
.board-item:nth-of-type(5) { grid-column: 1 / span 4;  grid-row: 7 / span 4; }   /* medium */
.board-item:nth-of-type(6) { grid-column: 5 / span 3;  grid-row: 8 / span 3; }   /* small */
.board-item:nth-of-type(7) { grid-column: 8 / span 5;  grid-row: 8 / span 3; }   /* wide */

.board-item { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--black); min-height: 0; }
.board-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #EFEAE0; border-radius: 2px; }
.board-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease-slow), transform 8s linear; transform: scale(1.02); }
.board-frame img.is-on { opacity: 1; transform: scale(1.06); }
.board-item:hover .board-frame img.is-on, .board-item:focus-visible .board-frame img.is-on { transform: scale(1.09); }
.board-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); padding-top: var(--space-2); font-size: 15px; line-height: 1.25; }
.board-label strong { font-weight: 700; }
.board-label span { color: var(--yellow); font-size: 13px; font-weight: 700; white-space: nowrap; }
.board-item:hover strong, .board-item:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }

/* The TEXT block (placeholder until Nora's black-and-white picture arrives) */
.board-text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-4); background: var(--black); color: var(--white); border-radius: 2px; }
.board-text p { margin: 0; }
.board-text .big { font: 800 clamp(44px, 4.6vw, 72px)/.85 var(--font-accent); color: var(--yellow); }
.board-text .small { font: 700 18px/1.3 var(--font-heading); }

@media (max-width: 760px) {
  .board-section { padding: var(--space-5) var(--space-3) var(--space-7) calc(var(--rail) + var(--space-3)); }
  /* Mobile: two columns of images along the sides, the text block in the middle */
  .board { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr); grid-auto-rows: auto; gap: var(--space-2); }
  .board-item, .board-text { grid-column: auto !important; grid-row: auto !important; }
  .board-item .board-frame { flex: none; aspect-ratio: 3 / 4; }
  .board-item:nth-of-type(odd) { grid-column: 1 !important; }
  .board-item:nth-of-type(even) { grid-column: 3 !important; }
  .board-item:nth-of-type(4n+1) .board-frame, .board-item:nth-of-type(4n+2) .board-frame { aspect-ratio: 3 / 5; }
  .board-text { grid-column: 2 !important; grid-row: 1 / span 4 !important; align-self: center; padding: var(--space-2); text-align: center; min-width: 0; }
  .board-text .big { font-size: 26px; line-height: .95; }
  .board-text .small { font-size: 14px; }
  .board-label { flex-direction: column; gap: 2px; font-size: 13px; }
  .board-label span { font-size: 11px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .board-frame img { transition: none; transform: none !important; } }

/* Desktop: exact collage from Figma (positions set by board.js), airy spacing */
@media (min-width: 761px) {
  .board-section { padding: var(--space-6) 0 var(--space-8); }
  .board.is-laid-out { display: block; position: relative; max-width: 1440px; width: 100%; aspect-ratio: 1440 / 1260; margin: 0 auto; }
  .board.is-laid-out > [data-id] { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); grid-area: auto; }
  .board.is-laid-out .board-item .board-frame { height: 100%; flex: none; }
  .board.is-laid-out .board-extra { display: none; }
  .board.is-laid-out .board-text { padding: clamp(16px, 2vw, 32px); }
}
/* Projects not on the first screen fade in while the carousel moves into the collage */
.board.is-laid-out > [data-id] { transition: opacity .2s linear; }