/* One-pager for the bootcamp talk: talk title, project with screenshot, speaker card, and the A4 print layout. */

/* Type step shared with the landing page's bands (landing.css keeps its own copy) */
.display-lg { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; }

/* Kopf: die Zeile zum Anlass statt des Testplatz-Knopfs; schmal rückt sie unter die Wortmarke */
.site-head .wrap { flex-wrap: wrap; }
.occasion { flex-basis: 100%; }
@media (min-width: 720px) {
  .occasion { flex-basis: auto; text-align: right; }
}

/* Talk: setzt das rosa Band des Kopfs fort, unten mit Tintenkante abgesetzt */
.talk { background: var(--coral-soft); border-bottom: 2px solid var(--ink); }
.talk .wrap { display: grid; gap: var(--s-sm); padding-block: var(--s-xl) var(--s-3xl); }
.talk h1 { max-width: 18ch; }
.talk .body-lg { padding-top: var(--s-xs); }

/* Projekt: Text und Screenshot nebeneinander ab 960px, darunter untereinander */
.project { padding-block: var(--s-3xl); }
.project-grid { display: grid; gap: var(--s-2xl); align-items: start; }
@media (min-width: 960px) {
  .project-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-3xl); }
}
.project-text { display: grid; gap: var(--s-sm); min-width: 0; }
.project-text .headline-lg { padding-bottom: var(--s-xs); }
.prose { display: grid; gap: var(--s-md); max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md); padding-top: var(--s-md); }
.pdf-link { padding-block: var(--s-xs); }

/* Screenshot: gerahmt wie das Board im Hero der Landingpage */
.shot { display: grid; gap: var(--s-sm); min-width: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 var(--press-rest) 0 0 var(--ink);
}
.shot figcaption { padding-inline: var(--s-2xs); }

/* Sprecher: Karte auf Papier, Portrait links, Text rechts */
.speaker { background: var(--paper); padding-block: var(--s-3xl); }
.speaker .wrap { display: grid; gap: var(--s-md); }
.speaker-card { display: grid; gap: var(--s-md); align-items: start; }
@media (min-width: 480px) {
  .speaker-card { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-lg); }
}
.portrait {
  width: var(--s-3xl);
  height: var(--s-3xl);
  border-radius: 50%;
  border: 2px solid var(--ink);
  object-fit: cover;
  background: var(--coral);
}
.speaker-text { display: grid; gap: var(--s-xs); max-width: 34rem; }
.speaker-text .link { justify-self: start; padding-block: var(--s-2xs); }

/* Druck: alles auf einer A4-Seite, Adressen ausgeschrieben */
.print-links { display: none; }
@page { size: A4 portrait; margin: 12mm 14mm; }
@media print {
  :root { --layout-max: none; }
  html { font-size: 12px; }
  body { background: #fff; }
  .wrap { padding-inline: 0; }
  .site-head, .talk, .speaker { background: transparent; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-head .wrap { padding-block: var(--s-md); border-bottom: 2px solid var(--ink); }
  .talk { border-bottom: 0; }
  .talk .wrap { padding-block: var(--s-xl) var(--s-lg); }
  .display-lg { font-size: 2.25rem; }
  .headline-lg { font-size: 1.5rem; }
  .project { padding-block: var(--s-md) var(--s-lg); }
  .project-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); }
  .prose { font-size: 1rem; }
  .actions { display: none; }
  .shot img { box-shadow: none; }
  .speaker { padding-block: var(--s-lg); border-top: 1px solid var(--quiet); }
  .print-links { display: block; padding-top: var(--s-lg); color: var(--muted); }
  .print-links ul { display: grid; gap: var(--s-2xs); }
  .site-foot .wrap { padding-block: var(--s-md); }
  a { color: inherit; text-decoration: none; }
  main, section, figure, .speaker-card { break-inside: avoid; }
}