/* Crossroads -- "Een ander traject?" panel
   Onderaan elke leren-pagina. Editorial italic prompts in 2 of 3 kolommen. */

.crossroads {
  padding: 112px 56px;
  background: #f5ebe6;
  color: #1f1416;
  border-top: 1px solid rgba(31,20,22,0.12);
}
.crossroads-head { margin-bottom: 56px; max-width: 60ch; }
.crossroads-head .eyebrow {
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; opacity: 0.55; margin-bottom: 20px;
  font-family: Inter, system-ui, sans-serif;
}
.crossroads-head h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; margin: 0;
  font-size: 56px; line-height: 0.98; letter-spacing: -0.02em;
  max-width: 18ch;
}
.crossroads-head h2 em { font-style: italic; color: #d97a86; }
.crossroads-head .lede {
  margin-top: 18px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic; font-size: 20px; line-height: 1.45;
  color: #6b0f1a; max-width: 56ch;
}

.crossroads-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(var(--cr-cols, 3), 1fr);
}

.cr-card {
  display: flex; flex-direction: column;
  padding: 36px;
  background: #efeae2;
  border: 1px solid rgba(31,20,22,0.18);
  color: #1f1416;
  text-decoration: none;
  min-height: 240px;
  transition: background 0.25s ease, color 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.cr-card:hover {
  background: #1f1416;
  color: #f5ebe6;
  padding-left: 44px;
  border-color: #1f1416;
}
.cr-q {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 18ch;
  color: #6b0f1a;
  transition: color 0.25s ease;
}
.cr-card:hover .cr-q { color: #d97a86; }
.cr-name {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  margin-top: auto;
  padding-top: 28px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.cr-meta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.55; margin-top: 6px;
  font-family: Inter, system-ui, sans-serif;
}
.cr-cta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #6b0f1a; margin-top: 16px;
  font-family: Inter, system-ui, sans-serif;
  transition: color 0.25s ease;
}
.cr-card:hover .cr-cta { color: #d97a86; }

/* 2-column variant: use class on .crossroads-grid */
.crossroads-grid.cols-2 { --cr-cols: 2; }

/* Tablet (641–1000px): 3-col → 2-col; cols-2 stays 2-col */
@media (max-width: 1000px) {
  .crossroads { padding: 88px 32px; }
  .crossroads-grid { grid-template-columns: repeat(2, 1fr); }
  .crossroads-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .crossroads-head h2 { font-size: 44px; }
  .cr-card { min-height: 200px; padding: 30px; }
  .cr-card:hover { padding-left: 36px; }
  .cr-q { font-size: 24px; }
}
/* Tablet portrait (641–768px): compact spacing */
@media (max-width: 768px) {
  .crossroads { padding: 72px 28px; }
  .crossroads-head h2 { font-size: 38px; }
  .cr-card { min-height: 180px; padding: 26px; }
}
/* Phone (≤640px): full stack */
@media (max-width: 640px) {
  .crossroads { padding: 64px 24px; }
  .crossroads-grid, .crossroads-grid.cols-2 { grid-template-columns: 1fr; gap: 16px; }
  .crossroads-head { margin-bottom: 36px; }
  .crossroads-head h2 { font-size: 30px; }
  .cr-card { min-height: auto; padding: 24px; }
  .cr-q { font-size: 20px; }
  .cr-name { font-size: 20px; padding-top: 22px; }
}