/* ============================================================
   BOARD — the expanding Kachel board (signature interaction).
   Owned by the website_services app; rendered inside the hero
   section of the home page. Page-local LAYOUT only, all colors/
   space/type are design-system tokens (from styles.css).
   No rounded corners.
   ============================================================ */

/* ---- The expanding Kachel board (signature interaction) ---- */
.board {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 0; background: var(--surface-card);
  border: var(--bw) dashed var(--border-dash); margin-top: var(--space-8);
  box-shadow: var(--shadow-md);
  min-height: 340px; transition: grid-template-columns var(--dur-4) var(--ease-snap);
}
.board:has(.kp:nth-child(1):hover), .board:has(.kp:nth-child(1):focus-visible) { grid-template-columns: 2.2fr .8fr .8fr .8fr; }
.board:has(.kp:nth-child(2):hover), .board:has(.kp:nth-child(2):focus-visible) { grid-template-columns: .8fr 2.2fr .8fr .8fr; }
.board:has(.kp:nth-child(3):hover), .board:has(.kp:nth-child(3):focus-visible) { grid-template-columns: .8fr .8fr 2.2fr .8fr; }
.board:has(.kp:nth-child(4):hover), .board:has(.kp:nth-child(4):focus-visible) { grid-template-columns: .8fr .8fr .8fr 2.2fr; }

.kp {
  --accent: var(--magenta-500);
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-5); background: var(--surface-card); color: var(--text-body);
  text-decoration: none; overflow: hidden; cursor: pointer;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
.kp:nth-child(1){--accent:var(--magenta-500);} .kp:nth-child(2){--accent:var(--teal);}
.kp:nth-child(3){--accent:var(--amber);} .kp:nth-child(4){--accent:var(--pink);}
.kp + .kp { border-left: var(--bw) dashed var(--border-dash); }
.kp__top { display: flex; align-items: center; justify-content: space-between; }
.kp__num { font: var(--type-mono); font-weight: var(--fw-bold); color: var(--accent); }
.kp__dot { width: 16px; height: 16px; background: var(--accent); }
.kp__title { font: var(--type-h3); color: var(--text-strong); writing-mode: vertical-rl; transform: rotate(180deg); margin-top: var(--space-4); transition: writing-mode 0s; }
.kp__reveal { opacity: 0; max-height: 0; transition: opacity var(--dur-3) var(--ease-out); }
.kp__quote { font: var(--type-body); color: var(--text-muted); margin-top: var(--space-3); }
.kp__more { font: var(--type-mono); font-size: var(--text-xs); color: var(--accent); margin-top: var(--space-4); display: inline-flex; gap: 6px; }

/* expanded state */
.kp:hover, .kp:focus-visible { background: var(--accent); color: var(--text-on-brand); outline: none; }
.kp:nth-child(4):hover, .kp:nth-child(4):focus-visible { color: var(--ink); }
.kp:hover .kp__title, .kp:focus-visible .kp__title { writing-mode: horizontal-tb; transform: none; color: inherit; }
.kp:hover .kp__num, .kp:focus-visible .kp__num, .kp:hover .kp__more, .kp:focus-visible .kp__more { color: inherit; }
.kp:hover .kp__dot, .kp:focus-visible .kp__dot { background: var(--gray-0); }
.kp:nth-child(4):hover .kp__dot { background: var(--ink); }
.kp:hover .kp__reveal, .kp:focus-visible .kp__reveal { opacity: 1; max-height: 220px; }
.kp:hover .kp__quote, .kp:focus-visible .kp__quote { color: inherit; }
.kp:focus-visible { box-shadow: inset 0 0 0 4px var(--ink); }

.hint { font: var(--type-mono); font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-3); text-align: center; }

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr !important; }
  .kp__title { writing-mode: horizontal-tb; transform: none; }
  .kp__reveal { opacity: 1; max-height: none; }
}