@page {
    size: A4 portrait;
    margin: 10mm 14mm 16mm 14mm;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #f3f5f7;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

body {
    padding: 12px;
    box-sizing: border-box;
}

.print-preview {
    max-width: 96mm;
    margin: 0 auto;
    padding: 16mm 12mm;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 4mm;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
    text-align: center;
}

.print-preview-logo {
    display: block;
    width: 40mm;
    height: auto;
    margin: 0 auto 8mm auto;
}

.print-preview h1 {
    margin: 0 0 4mm 0;
    color: #0055a5;
    font-size: 18pt;
    line-height: 1.2;
}

.print-preview p {
    margin: 0 0 8mm 0;
    color: #000000;
    font-size: 11pt;
    line-height: 1.5;
}

.print-preview-actions {
    display: flex;
    justify-content: center;
    gap: 3mm;
    flex-wrap: wrap;
}

.print-preview-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.5mm;
    border: 0;
    border-radius: 999px;
    padding: 3.5mm 6mm;
    font: inherit;
    font-size: 10.5pt;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.print-preview-btn .material-icons {
    display: block;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.print-preview-btn-primary {
    background: #0055a5;
    color: #ffffff;
}

.print-preview-btn-secondary {
    background: #e7eaeb;
    color: #000000;
}

.print-document {
    display: none;
}

.print-job-shell {
    max-width: 210mm;
    margin: 0 auto;
    background: #ffffff;
    padding: 6mm 14mm 12mm 14mm;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
}

.print-job-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8mm;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 6mm;
    margin-bottom: 4mm;
}

.print-job-brand {
    flex: 0 0 auto;
}

.print-job-logo {
    display: block;
    width: 45mm;
    height: auto;
}

.print-job-dates {
    flex: 0 0 auto;
    text-align: right;
    color: #646466;
    font-size: 9pt;
    align-self: start;
}

.print-job-header-qr {
    flex: 0 0 auto;
    align-self: start;
    justify-self: start;
    padding-top: 1mm;
}

.print-job-header-qr-image {
    display: block;
    width: 18mm;
    height: 18mm;
}

.print-job-date-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 8pt;
    margin-bottom: 1mm;
}

.print-job-date-value {
    color: #000000;
    font-size: 12pt;
    font-weight: 700;
    margin-bottom: 1mm;
}

.print-job-date-caption {
    color: #646466;
}

.print-job-main {
    width: 100%;
}

.print-job-section {
    margin: 0 0 7mm 0;
}

.print-job-category {
    margin: 0 0 3mm 0;
    color: #646466;
    font-size: 10pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.print-job-title {
    margin: 0 0 4mm 0;
    color: #0055a5;
    font-size: 24pt;
    line-height: 1.12;
}

.print-job-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4mm 10mm;
}

.print-job-meta-item {
    display: flex;
    flex-direction: column;
    gap: 1mm;
    min-width: 40mm;
}

.print-job-meta-label {
    color: #646466;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-job-meta-value {
    color: #000000;
    font-size: 10.5pt;
    font-weight: 700;
}

.print-job-hero-image {
    margin-top: 2mm;
}

.print-job-hero-image-src {
    display: block;
    width: 100%;
    max-height: 60mm;
    object-fit: cover;
}

.print-job-richtext {
    color: #000000;
    font-size: 10.5pt;
    line-height: 1.5;
}

.print-job-richtext p {
    margin: 0 0 3.5mm 0;
}

.print-job-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
}

.print-job-list-block h2 {
    margin-top: 0;
}

.print-job-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.print-job-list li {
    position: relative;
    padding-left: 5mm;
    margin-bottom: 2.5mm;
}

.print-job-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 2mm;
    height: 2mm;
    border-radius: 50%;
    background: #0055a5;
}

.print-job-cta-link {
    margin: 4mm 0 0 0;
}

.print-job-cta-link span {
    font-weight: 700;
}

.print-job-qrs {
    margin: 0 0 4mm 0;
}

.print-job-qr-grid {
    display: grid;
    grid-template-columns: max-content;
    justify-content: start;
    gap: 4mm;
    align-items: start;
}

.print-job-qr-card {
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
}

.print-job-qr-image {
    display: block;
    width: 18mm;
    height: 18mm;
    flex: 0 0 18mm;
}

.print-job-qr-card figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
    font-size: 8pt;
    line-height: 1.2;
}

.print-job-qr-card figcaption strong {
    color: #000000;
    font-size: 8.5pt;
}

@media screen {
    .print-job-shell {
        min-height: calc(100vh - 32px);
    }
}

@media print {
    html,
    body {
        background: #ffffff;
        padding: 0;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .print-preview {
        display: none;
    }

    .print-document {
        display: block;
    }

    .print-job-shell {
        max-width: none;
        padding: 0;
        box-shadow: none;
    }

    .print-job-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: start;
    }

    .print-job-qr-grid {
        justify-content: start;
    }
}
