/* =========================================================
   SERVOMIX — CREDITS PAGE
   File: css/credits.css
   Needs: tokens.css, base.css, components.css, site.css.
========================================================= */

.credits{
    display:grid;
    gap:var(--s-8);
    padding-block:var(--s-7) var(--s-9);
}

.credits__head{
    display:grid;
    gap:var(--s-3);
    max-width:var(--measure);
}

.credits__section{
    display:grid;
    gap:var(--s-4);
}

.credits__section > p{
    color:var(--ink-2);
}


/* ---------------------------------------------------------
   TABLE
   Rows become stacked cards below 720px, so the page never
   scrolls sideways.
--------------------------------------------------------- */

.credits-table{
    width:100%;
    border-collapse:collapse;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    overflow:hidden;
    font-size:var(--t-small);
}

.credits-table th,
.credits-table td{
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
}

.credits-table thead th{
    background:var(--surface-sunken);
    color:var(--ink);
    font-weight:var(--w-strong);
}

.credits-table tbody tr:last-child td{
    border-bottom:0;
}

.credits-table td{
    color:var(--ink-2);
}

.credits-table td:first-child{
    color:var(--ink);
    font-weight:var(--w-strong);
}

@media (max-width:719px){

    .credits-table thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }

    .credits-table,
    .credits-table tbody,
    .credits-table tr,
    .credits-table td{
        display:block;
    }

    .credits-table tr{
        padding:var(--s-3) var(--s-4);
        border-bottom:1px solid var(--line);
    }

    .credits-table tbody tr:last-child{
        border-bottom:0;
    }

    .credits-table td{
        display:grid;
        grid-template-columns:7.5rem minmax(0, 1fr);
        gap:var(--s-3);
        padding:var(--s-1) 0;
        border:0;
    }

    .credits-table td::before{
        content:attr(data-label);
        color:var(--ink-3);
        font-weight:var(--w-body);
    }
}