/* ============================================================
   Portfolio Info Widget — Frontend Styles (Mobile Responsive)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@300;400&display=swap');

/* ----- Reset ----- */
.piw-root *,
.piw-root *::before,
.piw-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ----- Root ----- */
.piw-root {
    background-color: #0a0a0a;
    color: #f0ede8;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.65;
    padding: 48px 48px 64px;
    width: 100%;
    overflow-x: hidden;
}

/* ----- Row grid (UPDATED) ----- */
.piw-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 64px; /* increased spacing */
    margin-bottom: 44px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

/* ----- Label (UPDATED with subtle divider) ----- */
.piw-label {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240,237,232,0.38);
    padding-top: 4px;
    padding-right: 24px; /* spacing before divider */
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;

    border-right: 0.5px solid rgba(240,237,232,0.12); /* subtle divider */
}

/* ----- Body text (profile) ----- */
.piw-body-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    color: #f0ede8;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.piw-body-text p {
    margin: 0 0 1em;
}

.piw-body-text p:last-child {
    margin-bottom: 0;
}

/* ----- Contact ----- */
.piw-contact-block {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 2.1;
    color: #f0ede8;
    min-width: 0;
    word-break: break-all;
}

.piw-contact-block a {
    color: rgba(240,237,232,0.55);
    text-decoration: none;
    border-bottom: 0.5px solid rgba(240,237,232,0.2);
    transition: color 0.2s, border-color 0.2s;
    word-break: break-all;
}

.piw-contact-block a:hover {
    color: #f0ede8;
    border-color: rgba(240,237,232,0.6);
}

/* ----- Experience ----- */
.piw-exp-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.piw-exp-entry {
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 0.5px solid rgba(240,237,232,0.1);
    min-width: 0;
}

.piw-exp-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.piw-exp-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.piw-exp-company {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    color: #f0ede8;
    min-width: 0;
    word-break: break-word;
}

.piw-exp-date {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(240,237,232,0.38);
    white-space: nowrap;
    flex-shrink: 0;
}

.piw-exp-role {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240,237,232,0.45);
    margin-bottom: 10px;
}

.piw-exp-desc {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(240,237,232,0.55);
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ----- Plain list ----- */
.piw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    color: #f0ede8;
    width: 100%;
    min-width: 0;
}

.piw-list li {
    border-bottom: 0.5px solid rgba(240,237,232,0.07);
    padding: 6px 0;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    break-inside: avoid;
}

.piw-list li:first-child {
    padding-top: 0;
}

.piw-list li:last-child {
    border-bottom: none;
}

/* ----- Column layouts for lists ----- */
.piw-cols-2 {
    columns: 2;
    column-gap: 40px;
}

.piw-cols-3 {
    columns: 3;
    column-gap: 28px;
}

.piw-cols-4 {
    columns: 4;
    column-gap: 20px;
}

/* ----- Divider ----- */
.piw-divider {
    border: none;
    border-top: 0.5px solid rgba(240,237,232,0.1);
    margin: 0 0 44px;
    width: 100%;
}

/* ============================================================
   TABLET — 768px to 1024px
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
    .piw-root {
        padding: 40px 36px 56px;
    }

    .piw-row {
        grid-template-columns: 130px 1fr;
        column-gap: 36px;
    }

    .piw-cols-3 {
        columns: 2;
    }

    .piw-cols-4 {
        columns: 3;
    }
}

/* ============================================================
   MOBILE — up to 768px
   Label full-width on top, content full-width below (vertical)
   ============================================================ */
@media (max-width: 768px) {
    .piw-root {
        padding: 32px 20px 48px;
        font-size: 16px;
    }

    /* ── Core layout change: single-column vertical stack ── */
    .piw-row {
        display: flex;
        flex-direction: column;       /* label on top, content below */
        align-items: stretch;         /* both span full width        */
        gap: 14px;
        margin-bottom: 36px;
    }

    /* Label becomes a full-width section heading */
    .piw-label {
        width: 100%;
        padding-top: 0;
        padding-bottom: 6px;
        font-size: 9px;
        letter-spacing: 0.14em;
        border-bottom: 0.5px solid rgba(240,237,232,0.12);
    }

    /* Content area fills the remaining width */
    .piw-body-text,
    .piw-contact-block,
    .piw-exp-list,
    .piw-list {
        width: 100%;
    }

    /* Body text slightly smaller on mobile */
    .piw-body-text,
    .piw-contact-block,
    .piw-list {
        font-size: 16px;
    }

    .piw-exp-company {
        font-size: 16px;
    }

    .piw-exp-desc {
        font-size: 14px;
    }

    /* All multi-col lists collapse to single column */
    .piw-cols-2,
    .piw-cols-3,
    .piw-cols-4 {
        columns: 1;
        column-gap: 0;
    }

    /* Experience: stack date below company on mobile */
    .piw-exp-top {
        flex-direction: column;
        gap: 4px;
    }

    .piw-exp-date {
        white-space: normal;
    }

    .piw-divider {
        margin-bottom: 36px;
    }
}

/* ============================================================
   VERY SMALL — up to 480px
   ============================================================ */
@media (max-width: 480px) {
    .piw-root {
        padding: 24px 16px 40px;
    }

    .piw-row {
        gap: 12px;
        margin-bottom: 28px;
    }

    .piw-body-text,
    .piw-contact-block,
    .piw-list {
        font-size: 15px;
    }

    .piw-exp-company {
        font-size: 15px;
    }

    .piw-divider {
        margin-bottom: 28px;
    }
}