/* ══════════════════════════════════════════════════════════════
   Kahina Flip — Resume PRINT stylesheet
   Loaded only with media="print" — zero impact on screen.

   Strategy:
   - Hide: header, footer, CTA, WebGL hero, scroll, timeline chrome,
           modals, read-more buttons, preloader
   - Reveal: .print-header (static hero with photo + name + contact)
   - Timelines: panels stacked vertically, design preserved
   - Sections: tight A4 spacing in pt/mm
   ══════════════════════════════════════════════════════════════ */

@page {
    size: A4;
    margin: 12mm 14mm;
}

@media print {

    /* ─── FORCE COLOURS ─────────────────────────── */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* ─── HIDE NON-CONTENT ──────────────────────── */
    .site-header,
    .site-footer,
    #cta,
    .section-cta,
    .resume-hero-flip,
    #resume-hero-flip,
    .resume-scroll-indicator,
    .preloader,
    .process-modal,
    .timeline-track,
    .timeline-line,
    .timeline-bubble,
    .timeline-dot,
    .dot-label,
    .dot-point,
    .panel-read-more,
    #resume-download-btn {
        display: none !important;
    }

    /* ─── BODY / LAYOUT RESET ───────────────────── */
    /* v32: cream background for visual consistency with site
       Note: switch to #ffffff if printing physically on paper to save toner */
    html, body {
        background: #F8F8F6 !important;
        color: #121212 !important;
        font-size: 10pt;
        line-height: 1.45;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-main,
    main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .container {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove underlines on links, keep colour readable */
    a {
        color: #121212 !important;
        text-decoration: none !important;
    }

    /* ═══════════════════════════════════════════════
       PRINT HEADER (static hero replacement)
       Photo left, name + contacts right
       Full A4 width, first page
       ═══════════════════════════════════════════════ */
    .print-header {
        display: grid !important;
        grid-template-columns: 60mm 1fr;
        gap: 10mm;
        align-items: stretch;
        margin: 0 0 10mm 0 !important;
        padding: 0 !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    .print-header-photo {
        width: 60mm;
        height: 80mm;
        overflow: hidden;
        background: #121212 !important;
    }

    .print-header-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .print-header-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4mm 0;
    }

    .print-header-label {
        font-size: 8pt;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #D87757 !important;        /* v34: orange light at rest on print eyebrow */
        margin: 0 0 4mm 0;
    }

    .print-header-name {
        font-family: var(--kahina-font-display), Georgia, serif;
        font-size: 32pt;
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: -0.02em;
        margin: 0 0 4mm 0;
        color: #121212 !important;
    }

    .print-header-title {
        font-size: 11pt;
        font-weight: 400;
        color: #333 !important;
        margin: 0 0 5mm 0;
    }

    .print-header-contact {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .print-header-contact li {
        font-size: 9.5pt;
        color: #333 !important;
        margin: 0 0 1.5mm 0;
        padding: 0;
    }

    .print-header-icon {
        display: inline-block;
        width: 5mm;
        color: #888 !important;
        margin-right: 1mm;
    }

    /* ═══════════════════════════════════════════════
       SECTIONS — tight A4 spacing
       ═══════════════════════════════════════════════ */
    .section,
    .resume-experience,
    .resume-education,
    .resume-note,
    .process-timeline-section {
        padding: 6mm 0 !important;
        margin: 0 !important;
    }

    .section-label {
        font-size: 8pt !important;
        letter-spacing: 0.15em;
        color: #666 !important;
        margin-bottom: 3mm !important;
    }

    .section-heading {
        font-size: 16pt !important;
        line-height: 1.15 !important;
        margin-bottom: 5mm !important;
        page-break-after: avoid;
    }

    h1, h2, h3, h4 {
        page-break-after: avoid;
    }

    /* ═══════════════════════════════════════════════
       EXPERIENCE
       ═══════════════════════════════════════════════ */
    .resume-job {
        page-break-inside: avoid;
        margin-bottom: 6mm !important;
    }

    .resume-job-header {
        margin-bottom: 2mm !important;
    }

    .resume-job-title {
        font-size: 12pt !important;
        line-height: 1.2 !important;
        margin: 0 0 1mm 0 !important;
    }

    .resume-job-company {
        font-size: 10pt !important;
        color: #444 !important;
        margin: 0 !important;
    }

    .resume-job-date {
        font-size: 9pt !important;
        color: #666 !important;
    }

    .resume-job-intro {
        font-size: 9.5pt !important;
        margin: 2mm 0 3mm 0 !important;
    }

    /* Role grid: 3 → 2 columns for A4 legibility */
    .resume-role-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4mm !important;
    }

    .resume-role-block h3 {
        font-size: 9.5pt !important;
        margin: 0 0 1.5mm 0 !important;
    }

    .resume-role-block ul,
    .resume-job-list {
        font-size: 8.5pt !important;
        line-height: 1.4 !important;
        padding-left: 4mm !important;
        margin: 0 !important;
    }

    .resume-role-block li,
    .resume-job-list li {
        margin-bottom: 1mm !important;
    }

    /* ═══════════════════════════════════════════════
       TIMELINES — panels stacked, design preserved
       Each panel: big number left + content right
       ═══════════════════════════════════════════════ */
    .timeline-panels {
        position: static !important;
        min-height: 0 !important;
        display: block !important;
    }

    .timeline-panel {
        position: static !important;
        display: grid !important;
        grid-template-columns: 40mm 1fr !important;
        grid-template-rows: auto !important;
        gap: 0 6mm !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-bottom: 6mm !important;
        padding-bottom: 5mm !important;
        border-bottom: 1px solid #e0e0e0;
        page-break-inside: avoid;
    }

    .timeline-panel:last-child {
        border-bottom: none;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .panel-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-right: 4mm !important;
        border-right: 1px solid #e0e0e0 !important;
        margin-bottom: 0 !important;
    }

    .panel-num {
        display: block !important;
        font-size: 28pt !important;
        line-height: 1 !important;
        color: rgba(18, 18, 18, 0.12) !important;
        margin-bottom: 1mm !important;
    }

    .panel-title {
        font-size: 12pt !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .panel-right {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4mm !important;
    }

    .panel-col h4 {
        font-size: 7.5pt !important;
        letter-spacing: 0.08em;
        margin: 0 0 1.5mm 0 !important;
    }

    .panel-col p,
    .panel-col ul,
    .panel-col li {
        font-size: 8pt !important;
        line-height: 1.4 !important;
        margin: 0 0 1mm 0 !important;
    }

    .panel-col ul {
        padding-left: 3.5mm !important;
    }

    /* ═══════════════════════════════════════════════
       EDUCATION
       ═══════════════════════════════════════════════ */
    .resume-edu-grid {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 4mm !important;
        margin-bottom: 4mm !important;
    }

    .resume-edu-title {
        font-size: 11pt !important;
        margin: 0 0 1mm 0 !important;
    }

    .resume-edu-field,
    .resume-edu-school {
        font-size: 9pt !important;
        color: #444 !important;
        margin: 0 !important;
    }

    .resume-edu-year {
        font-size: 9pt !important;
        color: #666 !important;
    }

    .resume-edu-note p,
    .resume-edu-list li {
        font-size: 8.5pt !important;
        line-height: 1.45 !important;
        margin-bottom: 1.5mm !important;
    }

    .resume-edu-list {
        padding-left: 4mm !important;
    }

    /* ═══════════════════════════════════════════════
       HOW I WORK (resume-note)
       ═══════════════════════════════════════════════ */
    .resume-note {
        border-top: 1px solid #e0e0e0;
    }

    .resume-note-body {
        max-width: none !important;
    }

    .resume-note-lead {
        font-size: 13pt !important;
        margin-bottom: 3mm !important;
    }

    .resume-note-body p {
        font-size: 9pt !important;
        line-height: 1.55 !important;
        margin-bottom: 2mm !important;
        color: #333 !important;
    }

    .resume-note-sign {
        font-size: 10pt !important;
        margin-top: 4mm !important;
    }

    .resume-note-author {
        font-size: 9pt !important;
        margin-top: 1mm !important;
    }
}