/* CARDS: note-card.html and build-card.html, on home + listing pages */

main > .notes > header {
    padding-bottom: calc(var(--padding-y) * 3);
}

main > .notes > .stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--text-gap);
}

.note-card {
    display: grid;
    grid-template-columns: auto 1fr auto ;
}

.note-card > .icon,
.note-card > .info,
.note-card > .extra {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.note-card > .icon {
    align-items: center;
    justify-content: center;
}

.note-card > .info {
    padding-inline: var(--text-gap);
    gap: calc(var(--text-gap) / 2);
}

.note-card > .extra {
    align-items: end;
    justify-content: center;
    gap: var(--text-gap);
}

.note-card > .icon > p {
    color: var(--muted-color);
    padding-top: 4px;
}

.note-card .info > h6 {
    color: var(--accent-color);
    font-size: var(--text-kicker);
}

.note-card .info > p,
.note-card .extra > .date {
    color: var(--muted-color);
    font-size: var(--text-label);
}

.note-card .extra > svg {
    height: 20px;
    aspect-ratio: 1 / 1;
}

main > .builds > header {
    padding-bottom: calc(var(--padding-y) * 3);
}

main > .builds > .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--text-gap);
}

.build-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    background: var(--figure-bg);
    border: var(--hashmark);
    border-radius: var(--radius);
}

.build-card > .sidebar {
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    padding: 12px 8px;
}

.build-card .serial > p {
    color: var(--muted-color);
}

.build-card > .content {
    display: grid;
    grid-template-rows: repeat(2, auto);
    border-left: var(--hashmark);
}

.build-card .media {
    display: block;
    width: 100%;
    height: 240px;
    border-bottom: var(--hashmark);
}

.build-card .media > img {
    display: block;
    margin: auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* just doing this for cube */
    filter: invert(1);
}

.build-card .details {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.build-card .details h4 {
    color: var(--accent-color);
}

.build-card .details p {
    color: var(--muted-color);
} 

.build-card .primary {
    display: flex;
    flex-direction: column;
    padding: var(--padding-y) var(--padding-x);
    gap: calc(var(--text-gap) / 3);
}

.build-card .primary > .tags {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: var(--text-gap);
}

/* two rows at every width: status + phase, then date + arrow */
.build-card .metadata {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    column-gap: var(--text-gap);
    row-gap: calc(var(--text-gap) / 2);
    border-top: var(--hashmark);
    padding: var(--padding-y) var(--padding-x);
}

.build-card .metadata > .date {
    grid-column: 1 / 3;
}

.build-card .metadata > .more {
    display: flex;
    margin-left: auto;
}

.build-card .metadata > .more > svg {
    display: flex;
    height: 18px;
    aspect-ratio: 1 / 1;
}

@media (max-width: 768px) {
    .note-card {
        /* drops the icon column */
        grid-template-columns: 1fr auto;
    }

    .note-card > .icon {
        display: none;
    }

    .note-card > .info {
        padding-left: 0;
    }
}

.note-card[hidden],
.build-card[hidden] {
    display: none;
}