/* =========================================================
   CV
   ========================================================= */

.cv-section {
    width: 100%;
}


/* Header
   --------------------------------------------------------- */

.cv-header {
    margin-bottom: 28px;
}

.cv-header h1,
.cv-header h2 {
    margin: 0;
}



/* Timeline
   --------------------------------------------------------- */

.cv-timeline {
    --cv-date-width: 130px;
    --cv-marker-size: 14px;
    --cv-line-width: 2px;
    --cv-column-gap: 18px;

    position: relative;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* Vertical timeline line */

.cv-timeline::before {
    content: "";

    position: absolute;

    left: calc(
        var(--cv-date-width)
        + (var(--cv-marker-size) / 2)
        - (var(--cv-line-width) / 2)
    );

    top: 7px;
    bottom: 7px;

    width: var(--cv-line-width);

    background: #d3dee8;
}


/* Entry
   --------------------------------------------------------- */

.cv-entry {
    position: relative;

    display: grid;

    grid-template-columns:
        var(--cv-date-width)
        var(--cv-marker-size)
        minmax(0, 1fr);

    column-gap: var(--cv-column-gap);

    align-items: start;
}


/* Date */

.cv-date {
    padding-top: 12px;

    font-size: 14px;
    font-family: "semibold";

    line-height: 1.4;

    text-align: right;

    white-space: nowrap;

    color: #718092;
}


/* Marker */

.cv-marker {
    position: relative;

    width: var(--cv-marker-size);
    height: var(--cv-marker-size);

    margin-top: 15px;

    border-radius: 50%;

    background: #9babbc;

    z-index: 2;
}


/* Connector from marker to card */

.cv-marker::after {
    content: "";

    position: absolute;

    left: 100%;
    top: 50%;

    width: calc(var(--cv-column-gap) + 1px);
    height: 2px;

    transform: translateY(-50%);

    background: #d3dee8;

    z-index: 1;
}


/* Card
   --------------------------------------------------------- */

.cv-card {
    min-width: 0;

    padding: 12px 20px;

    background: var(--color-bg-card);

    border-radius: var(--radius);
}

.cv-card h2 {
    margin: 0;

    font-size: 18px;
    font-family: "semibold";

    line-height: 1.3;
}

.cv-roles {
    margin: 4px 0 0;

    font-size: 14px;

    line-height: 1.45;

    color: #566575;
}


.cv-industry {
    color: #8a97a6;
    font-family: inherit;
    font-weight: 400;
}


/* Top line with optional tag
   --------------------------------------------------------- */

.cv-card-top {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 12px;
}


/* Independent / Creative
   --------------------------------------------------------- */

.cv-entry--independent .cv-marker {
    background: var(--color-accent, #00b4ff);
}


.cv-entry--independent .cv-card {
    position: relative;

    overflow: hidden;
}


/* Accent strip */

.cv-entry--independent .cv-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: var(--color-accent, #00b4ff);
}


/* =========================================================
   Highlights
   ========================================================= */

.cv-highlights {
    margin-top: 0;
}


.cv-highlights-header {
    margin-bottom: 18px;
}


.cv-highlights-header h2 {
    margin: 0;
}


/* Grid
   --------------------------------------------------------- */

.cv-highlight-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* Card
   --------------------------------------------------------- */

.cv-highlight-card {
    position: relative;

    overflow: hidden;

    background: white;

    border-radius: var(--radius);
}


.cv-highlight-image {
    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #dce5ee;
}


.cv-highlight-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Content */

.cv-highlight-content {
    padding: 18px 20px 20px;
}


.cv-highlight-content h3 {
    margin: 0;

    font-size: 19px;
    font-family: "semibold";

    line-height: 1.3;
}


.cv-highlight-content p {
    margin: 8px 0 0;

    font-size: 14px;

    line-height: 1.55;

    color: #566575;
}


/* Top line */

.cv-highlight-top {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 12px;
}


/* Independent variant
   --------------------------------------------------------- */

.cv-highlight-card--independent::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: var(--color-accent, #00b4ff);

    z-index: 2;
}


/* =========================================================
   Skills / Focus Areas
   ========================================================= */

.cv-skills {
    width: 100%;
}


.cv-skills-header {
    margin-bottom: 18px;
}


.cv-skills-header h2 {
    margin: 0;
}


/* Grid
   --------------------------------------------------------- */

.cv-skills-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* Group
   --------------------------------------------------------- */

.cv-skill-group {
    padding: 20px;

    background: white;

    border-radius: var(--radius);
}


.cv-skill-group h3 {
    margin: 0 0 16px;

    font-size: 18px;
    font-family: "semibold";

    line-height: 1.3;
}


/* Skills
   --------------------------------------------------------- */

.cv-skill-list {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.cv-skill-list span {
    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    background: #e8f0f8;

    font-size: 13px;
    line-height: 1.2;

    color: #566575;
}

.cv-profile {
    margin: 8px 0 28px;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;

    color: #566575;
}


/* =========================================================
   Contact & Information
   ========================================================= */

.cv-info {
    width: 100%;
}

.cv-info-header {
    margin-bottom: 18px;
}

.cv-info-header h2 {
    margin: 0;
}

.cv-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.cv-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cv-info-label {
    font-family: "semibold";
    font-size: 13px;
    color: #718092;
}

.cv-info-item > span:last-child,
.cv-info-item a {
    font-size: 15px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .cv-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 800px) {

    .cv-highlight-grid,
    .cv-skills-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .cv-timeline {
        --cv-date-width: 0px;
        --cv-column-gap: 16px;

        gap: 18px;

        padding-left: 20px;
    }


    .cv-timeline::before {
        left: 6px;
    }


    .cv-entry {
        grid-template-columns: 14px minmax(0, 1fr);

        column-gap: var(--cv-column-gap);
    }


    .cv-date {
        grid-column: 2;

        padding-top: 0;
        margin-bottom: 5px;

        text-align: left;
    }


    .cv-marker {
        grid-column: 1;
        grid-row: 1 / span 2;

        margin-top: 4px;
    }


    .cv-marker::after {
        width: calc(var(--cv-column-gap) + 1px);
    }


    .cv-card {
        grid-column: 2;

        padding: 16px 20px;
    }


    .cv-card h2 {
        font-size: 18px;
    }


    .cv-roles {
        font-size: 14px;
    }
}


/* =========================================================
   Print / PDF
   ========================================================= */

@media print {

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

    /* Keep the CV dense enough for a clean two-page PDF. */
    .cv-header {
        margin-bottom: 16px;
    }

    .cv-profile {
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 1.4;
    }

    .cv-timeline {
        --cv-date-width: 105px;
        --cv-marker-size: 10px;
        --cv-column-gap: 12px;
        gap: 7px;
    }

    .cv-timeline::before {
        top: 5px;
        bottom: 5px;
    }

    .cv-date {
        padding-top: 8px;
        font-size: 10px;
        line-height: 1.3;
    }

    .cv-marker {
        margin-top: 10px;
    }

    .cv-card {
        padding: 8px 14px;
    }

    .cv-card h2 {
        font-size: 13px;
    }

    .cv-roles {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.35;
    }

    .cv-card-top {
        gap: 5px 8px;
    }

    .cv-entry,
    .cv-card,
    .cv-skill-group,
    .cv-highlight-card,
    .cv-info-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Skills: retain the three-column desktop structure in print. */
    .cv-skills-header,
    .cv-highlights-header,
    .cv-info-header {
        margin-bottom: 10px;
    }

    .cv-skills-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .cv-skill-group {
        padding: 12px;
    }

    .cv-skill-group h3 {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .cv-skill-list {
        gap: 4px;
    }

    .cv-skill-list span {
        padding: 3px 6px;
        font-size: 9px;
    }

    /* Selected Work: force 2 x 2 instead of the mobile single column. */
    .cv-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .cv-highlight-content {
        padding: 10px 12px 12px;
    }

    .cv-highlight-content h3 {
        font-size: 12px;
    }

    .cv-highlight-content p {
        margin-top: 4px;
        font-size: 9px;
        line-height: 1.4;
    }

    .cv-highlight-top {
        gap: 5px 8px;
    }

    /* Contact information stays compact and horizontal. */
    .cv-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .cv-info-item {
        gap: 3px;
    }

    .cv-info-label {
        font-size: 9px;
    }

    .cv-info-item > span:last-child,
    .cv-info-item a {
        font-size: 10px;
        line-height: 1.35;
    }
}


/* Print refinement: use the full page instead of the outer website card */
@media print {

    header,
    footer,
    .topbar,
    .footer {
        display: none !important;
    }

    /* The website's outer .card becomes the PDF page itself. */
    #content > .card {
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        page-break-before: auto !important;
        break-before: auto !important;
    }

    /* Keep the CV sections in their normal vertical order:
       Experience, Skills, Selected Work, Contact. */
    .cv-skills-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}