/* landing page. kept it simple, flag colours like the banners */
body.home { max-width: 900px; }
.home header { border-bottom: 4px solid #ef3340; margin-bottom: 14px; }
.home header h1 { border: none; margin-bottom: 4px; }
#grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bcard { background: #fff; border: 2px solid #222; padding: 10px 12px; display: flex; gap: 12px; align-items: flex-start; }
.bcard img { width: 120px; height: 120px; border: 1px solid #ccc; flex: none; }
.bcard h2 { background: none; border: none; padding: 0; margin: 0 0 4px; font-size: 18px; }
.bcard .en { font-size: 14px; color: #444; margin: 0 0 6px; }
.tag { display: inline-block; font-size: 12px; padding: 1px 6px; border: 1px solid; }
.tag.ready { color: #00602a; border-color: #00602a; background: #e8f5e9; }
.tag.soon { color: #8a4b00; border-color: #8a4b00; background: #fff3e0; }
.bcard a.open { display: inline-block; margin-top: 8px; background: #00732f; color: #fff; padding: 5px 12px; text-decoration: none; }
.prog { font-size: 13px; color: #444; margin-top: 4px; }
.hidden { display: none !important; }
#teacher { margin-top: 20px; border-top: 3px dashed #00732f; }
.tb { background: #fff; border: 1px solid #aaa; padding: 8px 12px; margin: 10px 0; }
.tb h3 { margin: 4px 0; }
.tb ol { padding-right: 24px; }
.tb .right { color: #00602a; font-weight: bold; }
.ar, .small2 { direction: rtl; text-align: right; }
.small2 { font-size: 16px; }
#printSheet { display: none; }
@media (max-width: 620px) {
  #grid { grid-template-columns: 1fr; }
  .bcard img { width: 96px; height: 96px; }
}
/* print = one A4 page with the 4 QRs big enough to scan (about 6 cm) */
@media print {
  body.home > header, body.home > main { display: none; }
  #printSheet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10mm; }
  .pq { text-align: center; border: 1px dashed #999; padding: 5mm; page-break-inside: avoid; }
  .pq img { width: 60mm; height: 60mm; }
  .pq p { margin: 2mm 0; font-size: 12pt; }
}
.tb, .tb p { overflow-wrap: anywhere; }

/* v2 posters - straight, no rotation */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pgrid img{width:100%;height:auto;display:block;border:1px solid #ccc;transform:none}
@media (max-width:620px){.pgrid{grid-template-columns:1fr 1fr}}
@media print{#posters{display:none}}