/* Друковані картки: аркуш A4 зі словами теми.
   Аркуш завжди білий - його друкують, тож він не бере кольори сайту. */

.wcards { display: grid; gap: 18px; margin: 26px 0 8px; }

.wcards-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wcards-print { flex: none; }
.wcards-hint { color: var(--wings-muted); font-size: 14px; line-height: 1.4; }

.wcards-sheet {
  width: 210mm;
  max-width: 100%;
  aspect-ratio: 210 / 297;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4.5%;
  padding: 5%;
  border: 1px solid var(--wings-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--wings-shadow);
  container-type: inline-size;
}

.wcards-sheet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.wcards-mark { display: flex; align-items: center; gap: 9px; }
.wcards-mark__glyph {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #ffd450; color: #052950;
  font-weight: 800; font-size: 15px; line-height: 1;
}
.wcards-mark__name { font-weight: 800; font-size: 14px; letter-spacing: .04em; color: #052950; }
.wcards-sheet__topic { text-align: right; }
.wcards-sheet__topic strong { display: block; font-size: 19px; font-weight: 800; line-height: 1.15; color: #052950; }
.wcards-sheet__topic span { font-size: 12.5px; color: #5f6e83; }

.wcards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3.5%;
}

/* Пунктир по контуру - лінія різу, а не оформлення. */
.wcards-card {
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px dashed rgba(5, 41, 80, .32);
  border-radius: 5px;
  background: #fff;
}
.wcards-card--empty { border-style: dashed; opacity: .35; }
.wcards-card__swatch { display: block; }
.wcards-card__swatch.is-light { box-shadow: inset 0 0 0 1px rgba(5, 41, 80, .16); }
/* Без кольору верх картки лишається порожнім навмисно: там дитина малює
   слово. Сірою заливкою це читалося як недороблена картка, тонкою пунктирною
   рамкою - як місце, куди щось треба вписати. */
.wcards-card__swatch.is-blank {
  position: relative;
  background: #fff;
}
.wcards-card__swatch.is-blank::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dotted rgba(5, 41, 80, .2);
  border-radius: 4px;
}

.wcards-card__body { display: grid; gap: 1px; padding: 7% 8% 9%; text-align: center; }
.wcards-card__word { font-size: 17px; font-weight: 800; line-height: 1.1; color: #052950; overflow-wrap: anywhere; }
.wcards-card__ipa { font-size: 11.5px; color: #7a879a; }
.wcards-card__uk { font-size: 13.5px; font-weight: 600; color: #44536a; overflow-wrap: anywhere; }

.wcards-sheet__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-top: 3.5%;
  border-top: 1px solid rgba(5, 41, 80, .13);
  font-size: 11.5px; color: #5f6e83;
}
.wcards-sheet__foot b { color: #052950; font-weight: 800; }

.wcards-after { margin: 4px 0 0; color: var(--wings-muted); font-size: 15.5px; line-height: 1.6; }

/* Аркуш стискається разом із контейнером, а не ламається на вузькому екрані. */
@container (max-width: 150mm) {
  .wcards-card__word { font-size: 15px; }
  .wcards-card__uk { font-size: 12px; }
  .wcards-card__ipa { font-size: 10.5px; }
  .wcards-sheet__topic strong { font-size: 16px; }
}

@media print {
  @page { size: A4 portrait; margin: 10mm; }

  /* На папері лишається сам аркуш: ні шапки сайту, ні підвалу, ні кнопок. */
  body > *:not(#main),
  .site-header, .site-footer, .wcards-actions, .wcards-hint, .wcards-after,
  .breadcrumbs, .page-content > h1 { display: none !important; }

  html, body { height: auto !important; }
  body, #main, #main .container, .page-content, .page-content .text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* На папері лишаються самі картки. Вступний абзац сторінки потрібен
     читачеві на екрані, але на аркуші він з'їдає рядок і зсуває сітку на
     другу сторінку. */
  .page-content .text > *:not(.wcards) { display: none !important; }
  .wcards { display: block; gap: 0; margin: 0; }

  .wcards-sheet {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: 277mm;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    break-after: page;
  }
  .wcards-sheet:last-of-type { break-after: auto; }

  .wcards-card, .wcards-card__swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .wcards-card--empty { display: none; }
}