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

    html
    {
        height: auto;
        scroll-behavior: auto;
    }

    body
    {
        margin: 0;
        background: var(--color-bg-card) !important;
        color: var(--color-print-text);
        font-size: 11pt;
        line-height: 1.4;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .topbar,
    .modal,
    .btn,
    .dots,
    .video-frame,
    video
    {
        display: none !important;
    }

    #video
    {
        display: none !important;
    }

    .wrap
    {
        max-width: none;
        margin: 0;
        padding: 0 !important;
    }

    h1
    {
        font-size: 20pt;
        margin: 0 0 4mm 0;
        page-break-after: avoid;
    }

    h2
    {
        font-size: 14pt;
        margin: 0 0 2mm 0;
        page-break-after: avoid;
    }

    p
    {
        margin: 0 0 4mm 0;
        line-height: 1.4;
    }

    /* keep only compact/visual sections together */
    #elevatorPitch,
    #overview,
    #milestones
    {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* screenshot section as compact printable grid */
    .screenshot-grid
    {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 5mm;
    }

    .screenshot-card,
    .screenshot-card.small
    {
        display: block;
        grid-column: auto !important;
        width: auto;
        margin: 0;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 0;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .screenshot-button
    {
        display: block;
        width: 100%;
        height: 100%;
    }



    
    .screenshot-button img,
    .screenshot-card img
    {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .screenshot-card-label
    {
        position: static;
        display: block;
        margin-top: 2mm;
        padding: 0;
        background: none;
        color: var(--color-print-label);
        border-radius: 0;
        font-size: 10pt;
        width: auto;
    }

    .mylist
    {
        margin: 2mm 0 4mm 6mm;
        padding-left: 0;
        list-style-position: outside;
    }

    .mylist li
    {
        margin-bottom: 2mm;
        line-height: 1.4;
    }

    .highlight
    {
        font-weight: bold;
    }

    .name
    {
        font-style: italic;
    }
    


    a,
    a:visited
    {
        color: inherit;
        text-decoration: none;
    }
}


/* ---------- mobile fixes ---------- */

@media (max-width: 800px)
{
    .two-column
    {
        flex-direction: column;
    }

    .topbar-inner
    {
        padding: 20px 32px;
    }

    .wrap
    {
        padding-top: 80px;
    }

    .download-button
    {
        font-size: 13px;
    }

    .modal
    {
        z-index: 5000 !important;
    }

    .btn.close
    {
        z-index: 6000 !important;
        top: calc(16px + env(safe-area-inset-top)) !important;
        right: 16px !important;
    }

    .card
    {
        padding: 28px 32px;
    }

    .portfolio-section-links
    {
        padding-left: 32px;
    }

    .roles
    {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}




/* ---------- Print behavior for cards ---------- */

@media print
{
    .card,
    .card-screenshots
    {
        display: block;
        margin: 0 0 8mm 0;
        padding: 8mm 10mm;
        background: var(--color-print-card) !important;
        border: 0;
        border-radius: 8px;
        box-shadow: none !important;
        break-inside: auto;
        page-break-inside: auto;
        page-break-before: always;
        break-before: page;
    }

    .card:first-child
    {
        margin-top: 0;
        page-break-before: auto;
        break-before: auto;
    }

    .card-screenshots
    {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}