/* ===== Grav Theme Overrides ===== */

/* Contact: hover colors from CMS data via CSS custom property */
.contact .social-item a:hover {
    color: var(--hover-color, #353535) !important;
}

/* Experience: use same grid system as original */
.experience {
    display: grid;
    grid-template-columns: [full-start] minmax(4rem, 1fr) [main-start] repeat(9, 1fr) [main-end] minmax(4rem, 1fr) [full-end];
    grid-auto-rows: auto;
    row-gap: 10vh;
    overflow: hidden;
}

.experience h4 {
    grid-column: 3;
    grid-row: 1;
    padding: 20vh 0 0;
}

.experience ul {
    grid-column: main;
    grid-row: 2;
}

/* Work-list: equal-width items, centered */
.work .work-item-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.work .work-item-row .item {
    min-width: 0;
}

/* Brand item as link: display flex for centering logo */
a.item.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Work-list bottom section: center items to balance the flex wrap gap */
.section .work-more .work-list ul {
    justify-content: center;
}

/* Current role: top-aligned grid items */
.section.current {
    align-items: flex-start;
}

.section.current p {
    align-self: flex-start;
    margin-top: -0.25em; /* Optical alignment for typography leading vs image box */
}

/* Mobile overrides */
@media only screen and (max-width: 770px) {
    .experience {
        grid-template-columns: [full-start] minmax(2rem, 1fr) [main-start] repeat(9, 1fr) [main-end] minmax(2rem, 1fr) [full-end];
        row-gap: 5vh;
    }

    .experience h4 {
        margin-left: 0rem;
        grid-column: main;
        grid-row: 1;
        padding: 10vh 0 0;
    }

    .work .work-item-row {
        grid-template-columns: 1fr;
    }
}