/* Page margins */
@page {
    margin: 20mm 15mm;
    size: a4 protrait;

    @bottom-right {
        content: "Page " counter(page) " / " counter(pages);
        font-size: 10pt;
    }
}

html, body {
    margin: auto;
    max-width: 180mm;
}


div#identity {
    display: grid;
    grid-template-columns: 120pt auto 120pt;
    grid-gap: 4pt;

    /* QR code displayed on the left */
    #contact-and-qrcode {

        grid-column: 3;

        div#qrcode {
            display: initial;

            img {
                width: 100pt;
                height: 100pt;
            }
        }

        /* contact details only displayed on screen */
        #contact {
            display: none;
        }
    }

    /* CV title in the middle */
    div.cvtitle {
        text-align:center;
        grid-column: 2;

        h1 {
            margin-bottom:0;
        }
        p.subtitle {
            margin-top:0;
            font-style: italic;
            margin-bottom: 8pt;
        }

        div#msg {
            text-align:center;
        }
    }

    /* Photo displayed on the right */
    div#photo-frame {
        grid-column: 1;
        img {
            width: 100pt;
            height: 100pt;
        }
    }
}


/* Categories */
div#categories {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 8pt;

    page-break-after: always;

    div#tech-extra {
        display: none;
    }

    div {
        h3 {
            border-bottom: 1pt solid;
            text-align: center;
        }
    }
}

/* block layouts */
div.job {

    break-before: page;
    break-inside: avoid;

    /* Skip technical information */
    details {
        display: none;
    }
}

div.job.short {
    break-before: initial !important;
}