/* Table header */

.table-header {
    display: flex;
    margin-top: 1.1875rem;
    margin-bottom: 0.625rem;
}

.table-header small:first-child {
    width: var(--main-text-area-start);
}

@media screen and (min-width: 561px) and (max-width: 720px) {
    .table-header small:first-child {
        width: calc(5rem + var(--column-gap));
    }
}

@media screen and (max-width: 560px) {
    .table-header {
        display: none;
    }
}

/* Index projects overview */

.company-container {
    border-top: 1px solid var(--color-border);
    display: flex;
}

.company {
    width: var(--main-text-area-start);
    margin-top: 0.75rem;
    flex-shrink: 0;
}

.projects {
    width: 100%;
}

.project {
    position: relative;
}

.projects .project:nth-child(n + 2) {
    border-top: 1px solid var(--color-border);
}

.project-year {
    position: absolute;
    width: calc(var(--column-gap) + 2.5rem);
    left: calc(-1 * (var(--column-gap) + 2.5rem));
    padding-right: var(--column-gap);
    padding-top: 0.75rem;
    box-sizing: border-box;
    top: 0;
    text-align: end;
    opacity: 0;
    transition: opacity 0.075s linear;
}

.project:hover .project-year {
    opacity: 1;
}

.project-title a {
    font-weight: bold;
    padding: 0.75rem 0 0.9375rem 0;
    display: block;
    color: var(--color-text-primary);
}

.project-table:hover .company-container:not(:hover),
.project-table:hover .project:not(:hover) a {
    color: var(--color-text-secondary);
}

@media screen and (min-width: 561px) and (max-width: 720px) {
    .company {
        width: calc(5rem + var(--column-gap));
    }
}

.project-image-container {
    --project-column-width: calc((100% - 9 * var(--column-gap)) / 10);

    position: absolute;
    top: 0;
    right: 0;
    width: calc(6 * var(--project-column-width) + 5 * var(--column-gap));
    padding: 0 0 1.25rem var(--column-gap);
    /* background: linear-gradient(90deg, rgba(252, 253, 253, 0) 0%, #FCFCFD 12.5%); */
    background: var(--color-page-background);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}

.project:hover .project-image-container {
    opacity: 1;
}

.project-image img {
    width: 100%;
}

@media screen and (min-width: 721px) and (max-width: 840px) {
    .project-year {
        display: none;
    }
}

@media screen and (min-width: 561px) and (max-width: 720px) {
    .project {
        display: flex;
        justify-content: space-between;
    }
    .project-info-container {
        display: flex;
        flex-direction: column;
    }
    .project-year {
        position: unset;
        width: unset;
        text-align: unset;
        opacity: 1;
        padding: 0;
        order: 2;
    }
    .project-title a {
        padding-bottom: 0;
    }
    .project-image-container {
        position: unset;
        opacity: 1;
        padding: 1.25rem 0;
        pointer-events: unset;
        width: calc(5 * var(--project-column-width) + 4 * var(--column-gap));
    }
}

@media screen and (max-width: 560px) {
    .company-container {
        display: block;
        border-top: 1px solid var(--color-border);
        margin-bottom: 6.375rem;
    }
    .company-container:last-child {
        margin-bottom: 0;
    }
    .company {
        flex-shrink: initial;
        width: 100%;
        margin-top: 0.6875rem;
    }
    .project + .project {
        margin-top: 3.5rem;
    }
    .project-info-container {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .projects .project:nth-child(n + 2) {
        border-top: none;
    }
    .project-year {
        position: initial;
        width: unset;
        text-align: unset;
        opacity: 1;
        padding: 0;
    }
    .project-title {
        order: -1;
    }
    .project-title a {
        padding: 0;
    }
    .project-title a:hover {
        color: var(--color-text-secondary);
    }
    .project-table:hover .company-container:not(:hover),
    .project-table:hover .project:not(:hover) a {
        color: unset;
    }
    .project-image-container {
        padding: 0;
        width: 100%;
        opacity: 1;
        position: relative;
        pointer-events: auto;
    }
}

.project-image-textlink {
    display: none;
}

@media screen and (pointer: fine) and (max-width: 560px) {
    .project-image-textlink {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 3;
        text-align: center;
        padding-top: 25%;
        box-sizing: border-box;
        color: var(--color-text-primary);
        background-color: hsla(191, 2%, 99%, 0.8);
        opacity: 0;
        transition: opacity 85ms linear;
    }
    .project-image-textlink:hover {
        opacity: 1;
    }
}

@media (prefers-color-scheme: dark) {
    .project-image-textlink {
        background-color: hsla(240, 4%, 9%, 0.8);
    }
}

/* Coming soon */

.coming-soon {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    padding-left: var(--main-text-area-start);
}

@media screen and (max-width: 560px) {
    .coming-soon {
        padding-top: 0.6875rem;
    }
    .coming-soon small {
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        letter-spacing: var(--letter-spacing-body);
    }
}

@media screen and (min-width: 561px) and (max-width: 720px) {
    .coming-soon {
        padding-left: calc(5rem + var(--column-gap));
    }
}

/* Posts index */

.year-container {
    border-top: 1px solid var(--color-border);
    display: flex;
}

.year {
    width: var(--main-text-area-start);
    margin-top: 0.75rem;
    flex-shrink: 0;
}

@media screen and (min-width: 561px) and (max-width: 720px) {
    .year {
        width: calc(5rem + var(--column-gap));
    }
}

.posts {
    width: 100%;
}

.posts .post:nth-child(n + 2) {
    border-top: 1px solid var(--color-border);
}

.post {
    position: relative;
}

.post-title {
    font-weight: bold;
    margin: 0;
    width: 100%;
}

.post-title a {
    color: var(--color-text-primary);
    padding: 0.75rem 0 0.9375rem 0;
    display: block;
}

.post-table:hover .year-container:not(:hover),
.post-table:hover .post:not(:hover) a {
    color: var(--color-text-secondary);
}

.post-month-date {
    width: 2.5rem;
    text-align: right;
    margin: 0;
    position: absolute;
    top: 0.75rem;
    left: calc((var(--column-gap) + 2.5rem) * -1);
    opacity: 0;
    transition: opacity 50ms linear;
}

@media (hover: hover) {
    .post:hover .post-month-date {
        opacity: 1;
    }
}

@media screen and (max-width: 720px) {
    .post-month-date {
        display: none;
    }
}

@media screen and (max-width: 560px) {
    .year {
        width: 4.875rem;
        margin-top: 0.6875rem;
    }
    .posts {
        flex-grow: 1;
    }
    .post-title {
        width: 100%;
    }
    .post-title a {
        padding: 0.6875rem 0 0.875rem 0;
    }
}

/* index footer */

body.index {
    min-height: calc(100vh - var(--main-top-padding));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.index-contact {
    list-style: none;
    display: flex;
    padding: 0;
    gap: var(--paragraph-margin);
    margin-top: 0;
    margin-bottom: var(--paragraph-margin);
}

@media screen and (max-width: 560px) {
    .index-contact {
        margin-bottom: 1.125rem;
    }
}