/* ==========================================================================
   RESUME CSS - Modern, clean design
   A4 pages, print-ready, exactly 2 pages
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"); /* taste-skill-ignore */

/* ---------- Reset & Base ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-style: normal;
}

body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* taste-skill-ignore */
    font-size: 9.55pt;
    line-height: 1.42;
    color: #292827;
    background: #ffffff;
    font-style: normal;
}

/* ---------- Page ---------- */
@page {
    size: A4;
    margin: 13mm 15mm;
}

/* Screen preview only */
@media screen {
    body {
        width: 100%;
        max-width: 210mm;
        padding: clamp(16px, 4vw, 15mm) clamp(16px, 4.5vw, 18mm);
        margin: 10mm auto;
        background: #ffffff;
        border: 2px solid #cbd5e1;
    }
}

/* Print: ensure pure white background */
@media print {
    body {
        background: #ffffff !important;
    }
    .cv-screen-toolbar {
        display: none !important;
    }
}

/* Avoid awkward page breaks */
.exp-header {
    page-break-inside: avoid;
}

.section-title {
    page-break-after: avoid;
}

/* ---------- Header ---------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 9pt;
    padding-bottom: 7pt;
    border-bottom: 2px solid #242321;
}

.header-left {
    flex: 1;
}

.name {
    font-size: 24pt;
    font-weight: 650;
    letter-spacing: 0;
    color: #242321;
    line-height: 1.1;
    margin-bottom: 2pt;
}

.title {
    font-size: 9.8pt;
    font-weight: 600;
    color: #bd5d40;
    letter-spacing: 0.5px;
    margin-bottom: 2pt;
    text-transform: uppercase;
}

.tagline {
    font-size: 8.8pt;
    color: #6b706f;
    font-weight: 400;
    letter-spacing: 0;
}

.header-right {
    text-align: right;
    font-size: 8.35pt;
    line-height: 1.7;
    color: #555452;
    padding-top: 2pt;
}

.header-right a {
    color: #bd5d40;
    text-decoration: none;
}

.header-right a:hover {
    text-decoration: underline;
}

/* ---------- Summary ---------- */
.summary {
    border-left: 3px solid #bd5d40;
    background: #f7f7f5;
    padding: 6pt 10pt;
    margin-bottom: 9pt;
    border-radius: 2px;
}

.summary p {
    margin-bottom: 2.5pt;
    line-height: 1.44;
    font-size: 9.05pt;
    color: #363534;
}

.summary p:last-child {
    margin-bottom: 0;
}

/* ---------- Sections ---------- */
.section {
    margin-bottom: 8pt;
}

.section-title {
    font-size: 9.9pt;
    font-weight: 700;
    color: #242321;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1.6px solid #d8d4ce;
    padding-bottom: 2.5pt;
    margin-bottom: 6pt;
}

/* ---------- Tech Stack Grid ---------- */
.tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt 15pt;
}

.tech-item p {
    font-size: 8.65pt;
    line-height: 1.42;
    color: #474644;
}

.tech-item strong {
    color: #bd5d40;
    font-weight: 600;
}

/* ---------- Experience ---------- */
.experience {
    margin-bottom: 9pt;
}

.experience:last-child {
    margin-bottom: 0;
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1.6px solid #d8d4ce;
    padding-bottom: 2.5pt;
    margin-bottom: 2.5pt;
}

.company {
    font-size: 10.7pt;
    font-weight: 700;
    color: #242321;
}

.company-repo {
    float: right;
    display: inline-block;
    margin-left: 8pt;
    font-size: 7.8pt;
    font-weight: 500;
    color: #bd5d40;
    text-decoration: none;
    vertical-align: 1px;
}

.company-repo:hover {
    text-decoration: underline;
}

.date {
    font-size: 9pt;
    color: #6b6a67;
    font-weight: 500;
    white-space: nowrap;
}

.role {
    font-size: 9.2pt;
    font-weight: 600;
    color: #bd5d40;
    margin-top: 5pt;
    margin-bottom: 2.5pt;
}

.role-date {
    font-weight: 400;
    font-style: normal;
    color: #6b6a67;
    margin-left: 8pt;
    font-size: 8.7pt;
}

.exp-description {
    background: #f7f7f5;
    padding: 5pt 9pt;
    margin-bottom: 5pt;
    border-radius: 2px;
    border-left: 2px solid #d8d4ce;
}

.exp-description p {
    margin-bottom: 2pt;
    line-height: 1.44;
    font-size: 8.7pt;
    color: #474644;
}

.exp-description p:last-child {
    margin-bottom: 0;
}

/* ---------- Key Contributions ---------- */
.contributions-list {
    padding-left: 13pt;
    margin-bottom: 0;
}

.contributions-list li {
    font-size: 8.7pt;
    line-height: 1.4;
    margin-bottom: 2pt;
    color: #474644;
}

.contributions-list li:last-child {
    margin-bottom: 0;
}

.contributions-list li strong {
    font-weight: 600;
    color: #353432;
}

code {
    font-family: inherit;
    font-size: 0.95em;
    color: #4f4d49;
}

/* ---------- Role progression ---------- */
.role-block {
    break-inside: avoid;
}

.role-block + .role-block {
    margin-top: 7pt;
    padding-top: 6pt;
    border-top: 1.6px solid #d8d4ce;
}

/* ---------- Ashley capability pillars ---------- */
.ashley-journey {
    display: flex;
    flex-direction: column;
    gap: 4pt;
    break-inside: avoid;
}

.growth-axis {
    display: flex;
    align-items: center;
    gap: 5pt;
    width: 100%;
    min-height: 0;
    padding: 1pt 0 3pt;
    border-bottom: 1.6px solid #e5e1db;
    color: #9f8175;
    white-space: nowrap;
}

.ashley-pillars {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
    gap: 5pt;
}

.lineage-node {
    display: inline-flex;
    align-items: center;
    gap: 2.5pt;
    font-size: 6.8pt;
    font-weight: 550;
    letter-spacing: 0.15px;
    color: #91796f;
}

.lineage-number {
    color: #bd5d40;
    font-size: 6.7pt;
    font-weight: 700;
}

.lineage-arrow {
    color: #c9aaa0;
    font-size: 7pt;
    line-height: 1;
}

.pillar {
    break-inside: avoid;
}

.pillar-title {
    position: relative;
    display: block;
    font-size: 8.4pt;
    font-weight: 650;
    color: #bd5d40;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding-left: 0;
    padding-bottom: 1.5pt;
    margin-bottom: 2pt;
    border-bottom: 1.6px solid #e5e1db;
}

.pillar .contributions-list {
    margin-bottom: 0;
    padding-left: 11.5pt;
}

.pillar .contributions-list li {
    margin-bottom: 1.5pt;
}

.sopa-roles {
    margin: 4pt 0 5pt;
}

.sopa-roles .role {
    margin-top: 0;
    margin-bottom: 0;
}

.sopa-roles .role + .role {
    margin-top: 4pt;
    padding-top: 4pt;
    border-top: 1.6px solid #d8d4ce;
}

.contributions-label {
    margin: 6pt 0 2pt;
    font-size: 8pt;
    font-weight: 600;
    color: #6b6a67;
    letter-spacing: 0.15px;
}

.ecentric {
    page-break-before: always;
}

/* ---------- Education / Certifications / Languages (2x2 Grid) ---------- */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8pt 16pt;
    padding-top: 5pt;
}

.edu-heading {
    font-size: 8.8pt;
    font-weight: 700;
    color: #242321;
    margin-bottom: 3pt;
}

.edu-col p {
    font-size: 8.65pt;
    line-height: 1.52;
    color: #555452;
}

.cv-screen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    font-size: 9pt;
}

.cv-toolbar-btn {
    padding: 4px 10px;
    border: 2px solid #0f172a;
    background: #ffffff;
    color: #0f172a;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    font-size: 8.5pt;
}

.cv-toolbar-btn.primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #1e3a8a;
}

@media screen and (max-width: 680px) {
    body {
        margin: 0 auto;
    }
    .header {
        flex-direction: column;
        gap: 8px;
    }
    .header-right {
        text-align: left;
    }
    .tech-grid,
    .ashley-pillars,
    .edu-grid {
        grid-template-columns: 1fr;
    }
    .exp-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Utilities ---------- */
strong {
    font-weight: 700;
}

a {
    color: #bd5d40;
    text-decoration: none;
}