/* GORJE-380d: the leaflet for new parents (/prvi-koraki). On the screen 4 step cards (2 in a row from 48rem, equal height
   by the grid, rule of Kir 10.10.2026), on paper one A4 with the logo, the steps in 2 x 2 and the big QR. */
.pk { padding-bottom: var(--med-razdelki, 4rem); }
.pk-logo { display: none; }
.pk-gumbi { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.pk-koraki { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pk-korak { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.75rem 1rem; padding: 1.25rem; align-content: start; }
.pk-st { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--noc); color: var(--bela); font-size: var(--t-xl); line-height: 1; }
.pk-besedilo { display: grid; gap: 0.5rem; align-content: start; }
.pk-besedilo h2, .pk-besedilo p { margin: 0; }
.pk-besedilo p { line-height: 1.5; }
.pk-namig { color: var(--megla); }
.pk-slika { grid-column: 1 / -1; align-self: end; justify-self: center; width: 100%; max-width: 20rem; height: auto; border-radius: var(--r-polje); box-shadow: 0 0 0 1px var(--crta); }
.pk-qr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin-top: 1rem; padding: 1.25rem; }
.pk-qr h2, .pk-qr p { margin: 0 0 0.375rem; }
.pk-koda svg { display: block; width: 100%; height: auto; }
.pk-naslov { font-weight: 700; overflow-wrap: anywhere; }
.pk-noga { margin: 1.5rem 0 0; color: var(--megla); }
@container (min-width: 48rem) {
  .pk-koraki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .pk-korak { padding: 1.5rem; }
  .pk-qr { grid-template-columns: 10rem minmax(0, 1fr); max-width: 40rem; }
}
@container (max-width: 47.99rem) { .pk-gumbi .gumb { width: 100%; justify-content: center; } }  /* full width on a phone only (Kir 02.11.2026) */

/* one A4 page: what the coach hands out */
@page { size: A4; margin: 11mm 12mm; }
@media print {
  html, body, main, .stran { background: #fff !important; min-height: 0 !important; }
  main { padding: 0 !important; margin: 0 !important; }
  footer, .glava, .noga, .meni, .sv-gumb, .preskok, .nujno-pas, .zaprto-pas, .predogled-pas, .drobtine, .pk-gumbi, [data-zvonec], .vid-plosca { display: none !important; }
  .pk { padding: 0; max-width: none; }
  .pk-logo { display: block; width: 40mm; height: auto; margin-bottom: 3mm; }
  .pk-glava { padding: 0 0 3mm; }
  .pk-glava h1 { font-size: 22pt; line-height: 1.1; margin: 0 0 2mm; }
  .pk-glava .t-lg { font-size: 11.5pt; line-height: 1.4; margin: 0; }
  .pk-koraki { grid-template-columns: 1fr 1fr; gap: 4mm; }
  .pk-korak { break-inside: avoid; padding: 4mm; gap: 2mm 3mm; box-shadow: none; border: 0.3mm solid #c9d3db; border-radius: 4mm; }
  .pk-st { width: 9mm; height: 9mm; font-size: 14pt; }
  .pk-besedilo h2 { font-size: 13pt; }
  .pk-besedilo p { font-size: 9.5pt; line-height: 1.38; }
  .pk-namig { font-size: 8.5pt !important; }
  .pk-slika { max-width: 100%; max-height: 30mm; width: auto; object-fit: contain; border-radius: 2mm; box-shadow: none; border: 0.3mm solid #c9d3db; }
  .pk-qr { grid-template-columns: 30mm 1fr; gap: 6mm; margin-top: 3mm; padding: 4mm; box-shadow: none; border: 0.3mm solid #c9d3db; border-radius: 4mm; break-inside: avoid; max-width: none; }
  .pk-qr h2 { font-size: 14pt; }
  .pk-qr .t-base { font-size: 10pt; }
  .pk-naslov { font-size: 15pt !important; }
  .pk-noga { font-size: 9pt; margin-top: 3mm; }
}