/* =========================================
   СТИЛІ ДЛЯ СЛОВНИКОВИХ СЛІВ (Встав букву)
   ========================================= */

.words-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки слів за замовчуванням */
    gap: 8mm 15mm; 
    padding: 10mm 15mm 20mm 15mm; 
    margin-top: 5mm;
    width: 100%;
    box-sizing: border-box;
}

/* Стиль одного слова */
.word-item {
    font-family: 'Comic Neue', cursive, sans-serif;
    font-size: 22pt;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 3px; 
    display: flex;
    align-items: center;
    word-break: break-word; /* Захист від надто довгих слів */
}

/* Лінія замість пропущеної букви */
.missing-letter {
    display: inline-block;
    width: 10mm; /* Зробив лінію трохи ширшою для зручності дитини */
    border-bottom: 2.5px solid #334155;
    margin: 0 4px;
    height: 6mm; 
}

/* =========================================
   АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ
   ========================================= */

/* Планшети (до 992px) */
@media (max-width: 992px) {
    .word-item {
        font-size: 20pt; /* Трохи зменшуємо шрифт для планшетів */
    }
}

/* Мобільні телефони (до 768px) */
/* Оскільки А4 аркуш на телефоні матиме горизонтальний скрол (через style.css), 
   ми зберігаємо 2 колонки всередині самого аркуша А4, щоб він виглядав ідентично друкованому формату. 
   Але зменшуємо відступи, щоб контент вміщувався щільніше. */
@media (max-width: 768px) {
    .words-grid {
        gap: 6mm 10mm;
        padding: 5mm 10mm 15mm 10mm;
    }
}

/* =========================================
   ПРАВИЛА ДЛЯ ДРУКУ (PDF та Принтер)
   ========================================= */
@media print {
    @page { size: A4 portrait; margin: 0 !important; }
    
    html, body { 
        margin: 0 !important; 
        padding: 0 !important; 
        height: 297mm !important; 
        max-height: 297mm !important; 
        overflow: hidden !important; 
        background: #fff !important; 
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact; 
    }
    
    .app-header, .controls-section, .seo-text-block, .ad-placeholder { 
        display: none !important; 
    }
    
    .main-layout, .preview-section { 
        display: block !important; 
        padding: 0 !important; 
        margin: 0 !important; 
        background: #fff !important; 
        height: 297mm !important; 
        width: 210mm !important; 
    }
    
    .a4-page { 
        box-shadow: none !important; 
        border: none !important; 
        margin: 0 !important; 
        padding: 15mm 20mm !important; 
        width: 210mm !important; 
        height: 297mm !important; 
        page-break-inside: avoid !important; 
        page-break-after: avoid !important; 
    }
}