/* Grid */
.grid-d-24 {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 8px;
}

.grid-span-2 {
    grid-column: span 2;
}

.grid-span-4 {
    grid-column: span 4;
}

/* 
    Pages 
*/

/* Home Page */
.home-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 24px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

@media screen and (min-width: 640px) {
    .home-page {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 8px;
    }
}

@media screen and (min-width: 1024px) {
    .home-page {
        grid-template-columns: repeat(4, 1fr);
        gap: 48px 8px;
    }
}

@media screen and (min-width: 1280px) {
    .home-page {
        grid-template-columns: repeat(6, 1fr);
        gap: 48px 8px;
    }
}

/*
    Homepage splash sequence (see assets/js/main.js initHomeSplash, and
    assets/css/header.css for the matching header rules). Each stage rule
    below only lists what differs from normal - a stage that doesn't mention
    an element leaves its existing responsive behavior in charge.
*/

/* Everything on the page stays hidden through "logo" and "select" - the
   representation-type select that appears during "select" lives in the
   header, not in the page content. */
body[data-splash-stage="logo"] .home-page > *,
body[data-splash-stage="select"] .home-page > * {
    display: none;
}

/* From "images"/"cycling" on: project and publication galleries show, but not
   their titles/info yet; post cards have no images, so they stay empty too.
   All use visibility (not display) so their slot stays reserved and the
   grid doesn't reflow when the text pops in at the reveal. */
body[data-splash-stage="images"] .home-page .post,
body[data-splash-stage="cycling"] .home-page .post,
body[data-splash-stage="images"] .home-page .project-title,
body[data-splash-stage="images"] .home-page .project-info,
body[data-splash-stage="cycling"] .home-page .project-title,
body[data-splash-stage="cycling"] .home-page .project-info,
body[data-splash-stage="images"] .home-page .publication-title,
body[data-splash-stage="images"] .home-page .publication-info,
body[data-splash-stage="cycling"] .home-page .publication-title,
body[data-splash-stage="cycling"] .home-page .publication-info {
    visibility: hidden;
}

/* The footer waits for the final reveal along with everything else. */
body[data-splash-stage]:not([data-splash-stage="reveal"]) .footer {
    display: none;
}


/* Projects Page */
.projects-page {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

.projects-page-title,
.projects-page-categories {
    grid-column: 1/-1;
}

/* Projects Tablet */
@media screen and (min-width: 640px) {
    .projects-page {
        grid-template-columns: repeat(2, 1fr);
    }

    .projects-page-title {
        grid-column: 1;
    }

    .projects-page-categories {
        grid-column: 1/-1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Projects Page: Desktop  */
@media screen and (min-width: 1024px) {
    .projects-page {
        grid-template-columns: repeat(4, 1fr);
    }

    .projects-page-title {
        grid-column: 1;
    }

    .projects-page-categories {
        grid-column: 1/-1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}



/* Project Page */
.project-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 3rem 8px;
    padding: 5rem 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

/* On mobile the header has no grid of its own: its parts drop into the page
   grid, so they can share rows with what follows (see the last line below). */
.project-page-header {
    display: contents;
}

.project-page-header-title {
    display: grid !important;
    grid-column: 1/-1;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.project-page-header-year {
    grid-column: 1;
}

.project-page-header-categories {
    grid-column: 2;
}

.project-page-text {
    display: none !important;
}

.project-page-text.active {
    display: block !important;
}

.project-page-text-button {
    grid-column: span 1;
    order: 1;
    width: fit-content;
    height: fit-content;
}

.project-page-text {
    order: 3;
}

.project-page-gallery {
    order: 4;
}

.project-page-credits {
    order: 5;
}

.project-page-description,
.project-page-text,
.project-page-credits {
    grid-column: 1/-1;
}

.project-page-credits {
    margin: 3rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
}

.project-page-credit-label,
.project-page-credit-value {
    margin: 0;
    border-top: 1px solid black;
    padding: 4px 0 8px;

}

.project-page-gallery {
    grid-column: 1/-1;
    display: grid;
    gap: 3rem 8px;
}

.project-page-gallery-item {
    cursor: pointer;
    border-top: 1px solid black;
    padding-top: 4px;
    height: fit-content;
}

.project-page-gallery-item:hover .dotted {
    border-top: 1px solid black;
    background-image: none;
    padding-top: 3px;
}

.project-page-gallery-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.project-page-gallery-item.is-filtered-out {
    display: none;
}

/* Project Page: Gallery Drawings */
.project-page-gallery-item:is([data-representation-type="planta"], [data-representation-type="corte"], [data-representation-type="alcado"], [data-representation-type="diagrama"], [data-representation-type="implantacao"]) picture {
    background-color: rgb(250, 250, 250);
}

.project-page-gallery-item:is([data-representation-type="planta"], [data-representation-type="corte"], [data-representation-type="alcado"], [data-representation-type="diagrama"], [data-representation-type="implantacao"]) img {
    mix-blend-mode: multiply;
}

/* Project Page: Tablet */
@media screen and (min-width: 640px) {
    .project-page-header {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 3rem 8px;
        z-index: 1;
    }

    .project-page-header-title {
        grid-column: 1/6;
    }

    .project-page-header-year {
        grid-column: 6/7;
    }

    .project-page-header-categories {
        grid-column: 7/9;
    }

    .project-page-text,
    .project-page-description,
    .project-page-credits {
        grid-column: 1/3;
    }

    .project-page-gallery {
        grid-column: 1/-1;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Project Page: Laptop */
@media screen and (min-width: 1024px) {
    .project-page-header {
        position: sticky;
        top: 2.5rem;
        padding: 4px 8px 4px;
        margin: 0 -8px;
        background-color: white;
    }

    .project-page-header-title {
        grid-column: 1/5;
    }

    .project-page-header-year {
        grid-column: 5/6;
    }

    .project-page-header-categories {
        grid-column: 7/9;
    }

    .project-page-text,
    .project-page-description,
    .project-page-credits {
        grid-column: 1;
    }

    .project-page-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Publications Page */
.publications-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

.publications-page-title,
.publications-page-categories {
    grid-column: 1/-1;
    margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
    .publications-page {
        grid-template-columns: repeat(4, 1fr);
    }

    .publications-page-title {
        grid-column: 1;
    }

    .publications-page-categories {
        grid-column: 2/-1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 0;
    }
}

/* Posts Page */
.posts-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

.posts-page-title,
.posts-page-categories {
    grid-column: 1/-1;
    margin-bottom: 16px;
}

@media screen and (min-width: 768px) {
    .posts-page {
        grid-template-columns: repeat(4, 1fr);
    }

    .posts-page-title {
        grid-column: 1;
    }

    .posts-page-categories {
        grid-column: 2/-1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}


/*
    Publication Page (single)
    Figma desktop grid: 12 columns of 117px / 8px gap = the 24 column
    header grid, where one design column spans two grid columns.
*/
.publication-page,
.post-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 2rem 8px;
    padding: 5rem 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

/* Breadcrumb sits in the first column, desktop only */
.publication-page-breadcrumb,
.post-page-breadcrumb {
    display: none;
    grid-column: 1/3;
    height: fit-content;
}

.publication-page-header,
.post-page-header {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    row-gap: 4px;
    align-items: start;
}

.publication-page-title,
.post-page-title {
    grid-column: 1/3;
    grid-row: 1;
}

.publication-page-date,
.post-page-date {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: fit-content;
}

.publication-page-categories {
    grid-column: 1/-1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.publication-page-author {
    grid-column: 1/-1;
    grid-row: 3;
    width: fit-content;
}

.publication-page-cover,
.post-page-cover,
.publication-page-content,
.post-page-content {
    grid-column: 1/-1;
}

/* Cover carries the rule line above it, like the project gallery items */
.publication-page-cover,
.post-page-cover {
    border-top: 1px solid black;
    padding-top: 4px;
}

.publication-page-cover .figure-caption,
.post-page-cover .figure-caption {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.3em;
}

.publication-page-cover-tags,
.post-page-cover-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Article body: 16px/22px in the design, overriding the block snippet's text-micro */
.publication-page-content,
.post-page-content {
    border-top: 1px solid black;
    padding-top: 4px;
}

.publication-page-content .block-text,
.post-page-content .block-text {
    font-size: 16px;
    line-height: 1.375em;
}

.publication-page-content .block-text p:not(:last-child),
.post-page-content .block-text p:not(:last-child) {
    margin-bottom: 1em;
}

/* Publication + Post Page: Tablet */
@media screen and (min-width: 640px) {
    .publication-page,
    .post-page {
        grid-template-columns: repeat(12, 1fr);
    }

    .publication-page-header,
    .post-page-header {
        grid-template-columns: repeat(12, 1fr);
    }

    .publication-page-title,
    .post-page-title {
        grid-column: 1/7;
    }

    .publication-page-author {
        grid-column: 7/11;
        grid-row: 1;
    }

    .publication-page-date,
    .post-page-date {
        grid-column: 11/13;
        justify-self: start;
    }

    .publication-page-categories {
        grid-column: 7/13;
    }

    .publication-page-cover,
    .post-page-cover,
    .publication-page-content,
    .post-page-content {
        grid-column: 1/9;
    }
}

/*
    Publication + Post Page: Desktop
    24 columns; design column N spans grid columns (2N-1)/(2N+1).
*/
@media screen and (min-width: 1024px) {
    .publication-page,
    .post-page {
        grid-template-columns: repeat(24, 1fr);
    }

    .publication-page-breadcrumb,
    .post-page-breadcrumb {
        display: block;
    }

    /* Publication: header spans design columns 3-8, and sticks */
    .publication-page-header {
        grid-column: 5/17;
        position: sticky;
        top: 2.5rem;
        z-index: 1;
    }

    .publication-page-title {
        grid-column: 1/7;
    }

    .publication-page-author {
        grid-column: 7/11;
        grid-row: 1;
    }

    .publication-page-date {
        grid-column: 11/13;
        grid-row: 1;
    }

    .publication-page-categories {
        grid-column: 11/13;
        grid-row: 1;
        width: 100%;
    }

    /* Publication: image + text span design columns 3-8 */
    .publication-page-cover,
    .publication-page-content {
        grid-column: 5/17;
    }

    /* Post: header spans design columns 3-7 */
    .post-page-header {
        grid-column: 5/15;
        grid-template-columns: repeat(10, 1fr);
    }

    .post-page-title {
        grid-column: 1/9;
    }

    .post-page-date {
        grid-column: 9/11;
    }

    /* Post: image + text span design columns 3-7 */
    .post-page-cover,
    .post-page-content {
        grid-column: 5/15;
    }

    /* The rule above the body text is mobile only in the design */
    .publication-page-content,
    .post-page-content {
        border-top: 0;
        padding-top: 0;
    }
}


/* Projects Page: Archive (a sortable table of every project, listed after the grid) */
.projects-page-archive {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 48px 8px;
    align-content: start;
    margin: 4rem 0;
}

.archive-list {
    display: grid;
    gap: 4px;
}

.archive-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 4px;
    margin-bottom: 1rem;
}

.archive-cell-project {
    grid-column: 1 / 2;
}

.archive-cell-year {
    grid-column: 2 / 3;
}

.archive-cell-categories,
.archive-cell-location {
    display: none !important;
}

.archive-cell-meta {
    display: block !important;
    grid-column: 1 / -1;
}

/* Mobile: header row keeps Project sort and category filter, with an empty spacer column between them. Location/Year stay hidden */
.archive-row-head {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 4px;
}

.archive-cell-project-head {
    display: flex !important;
    grid-column: 1 / 2;
}

.archive-cell-categories-head {
    grid-column: 3 / 4;
}

.archive-cell-location-head,
.archive-cell-year-head {
    display: none !important;
}

/* Shared preview panel: all project pictures are pre-rendered, JS just toggles which one is .active */
.archive-preview {
    display: none;
}

.archive-preview-item {
    display: none;
}

.archive-preview-item.active {
    display: block;
}

.archive-cell-project-head,
.archive-cell-location-head,
.archive-cell-year-head {
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.archive-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.archive-sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px;
    opacity: 0.35;
}

.archive-sort-btn svg {
    display: block;
    width: 10px;
    height: 10px;
}

.archive-sort-btn-asc svg {
    rotate: 180deg;
}

.archive-sort-btn:hover,
.archive-sort-btn.active {
    opacity: 1;
}

.archive-cell-select {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.archive-cell-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: black;
    font: inherit;
    width: 100%;
}

.archive-cell-select .line-container-icon {
    flex-shrink: 0;
}

/* Projects Page: Archive - Tablet */
@media screen and (min-width: 768px) {
    .archive-row,
    .archive-row-head {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 4px;
    }

    .archive-row {
        margin-bottom: 0;
    }

    .archive-cell-meta {
        display: none !important;
    }

    .archive-cell-project-head,
    .archive-cell-location-head,
    .archive-cell-year-head {
        display: flex !important;
    }

    .archive-cell-project-head {
        grid-column: 1 / 3;
    }

    .archive-cell-project {
        grid-column: 1 / 4;
    }
    
    .archive-cell-categories-head {
        grid-column: 4 / 5;
    }

    .archive-cell-categories,
    .archive-cell-location {
        display: block !important;
    }

    .archive-cell-categories {
        grid-column: 4 / 6;
    }

    .archive-cell-location-head {
        grid-column: 6 / 7;
    }

    .archive-cell-location {
        grid-column: 6 / 8;
    }

    .archive-cell-year-head {
        grid-column: 8 / 9;
    }

    .archive-cell-year {
        grid-column: 8 / 9;
    }

    .archive-row-head {
        display: grid;
        position: sticky;
        top: 2.5rem;
        z-index: 1;
        background-color: white;
    }
}

/* Projects Page: Archive - Desktop */
@media screen and (min-width: 1024px) {
    .projects-page-archive {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    /* Header on its own row, spanning the same width as .archive-list so columns line up */
    .archive-row-head {
        grid-row: 1;
        grid-column: 1 / 10;
    }

    /* Results and preview share row 2, so their tops are always aligned */
    .archive-list {
        grid-row: 2;
        grid-column: 1 / 10;
    }

    /* Sticks within the projects-page-archive row while .archive-list scrolls past it */
    .archive-preview {
        display: block;
        grid-row: 2;
        grid-column: 10 / 13;
        position: sticky;
        top: 2.5rem;
        align-self: start;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        border-top: 1px solid black;
        padding-top: 4px;
    }

    .archive-preview:has(.archive-preview-item.active) {
        opacity: 1;
        visibility: visible;
    }

    .archive-preview-item img {
        display: block;
        width: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
    }

    .archive-preview-text {
        margin-top: 8px;
    }

    /* De-emphasize other rows while one is hovered */
    .archive-list:hover .archive-row:not(.archive-row-head):not(:hover) .archive-cell {
        border-top: 0;
        background-image: repeating-linear-gradient(to right,
            black 0px,
            black 1.5px,
            transparent 1.5px,
            transparent 5px);
        background-position: top left;
        background-size: auto 1.5px;
        background-repeat: repeat-x;
        padding-top: 4px;
    }
}


/* About Page */
.about-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px 8px;
    padding: 80px 8px 8px;
    min-height: 100dvh;
    align-content: start;
}

.about-page-label {
    align-self: start;
    height: fit-content;
}

.about-page-label-intro {
    display: none;
}

.about-page-intro {
    padding-top: 4px !important;
}

.about-page-intro p:not(:last-child),
.about-page-info p:not(:last-child) {
    margin-bottom: 1em;
}

/* About Page: Partners */
.about-page-partners {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-page-partner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-top: 1px solid black;
    padding: 8px 0;
}

.about-page-partner-photo {
    aspect-ratio: 1/1;
    overflow: hidden;
}

.about-page-partner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-page-partner-bio {
    margin: 0;
}

/* About Page: Team */
.about-page-team {
    display: flex;
    flex-direction: column;
}

.about-page-team-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    border-top: 1px solid black;
    padding: 4px 0 24px;
}

.about-page-see-more {
    width: fit-content;
    margin-top: 1rem;
}

/* About Page: Prizes */
.about-page-prizes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-page-prize {
    display: flex;
    gap: 8px;
    padding-top: 3px;
    border-top: 1px solid black;
}

.about-page-prize-extra {
    display: none;
}

.about-page-prizes.active .about-page-prize-extra {
    display: flex;
}

.about-page-prize-year {
    flex-shrink: 0;
    width: 55px;
}

.about-page-prize-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.about-page-prize-title {
    margin: 0;
}

.about-page-prize-project p {
    margin: 0;
}

.about-page-prize-project a {
    text-decoration: underline;
}

.about-page-prizes > .about-page-see-more {
    margin-left: 63px;
}

/* About Page: Desktop */
@media screen and (min-width: 1024px) {
    .about-page {
        grid-template-columns: repeat(24, 1fr);
        column-gap: 8px;
        row-gap: 64px;
    }

    .about-page-label-intro {
        display: block;
        grid-column: 1/5;
        grid-row: 1;
    }

    .about-page-intro {
        grid-column: 5/17;
        grid-row: 1;
    }

    .about-page-info {
        grid-column: 18/25;
        grid-row: 1;
        align-self: start;
    }

    .about-page-label-partners {
        grid-column: 1/5;
        grid-row: 2;
    }

    .about-page-partners {
        grid-column: 5/17;
        grid-row: 2;
    }

    .about-page-prizes {
        grid-column: 18/25;
        grid-row: 2;
        align-self: start;
    }

    .about-page-label-team {
        grid-column: 1/5;
        grid-row: 3;
    }

    .about-page-team {
        grid-column: 5/17;
        grid-row: 3;
    }

    .about-page-partner {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 8px;
    }

    .about-page-partner-photo {
        grid-column: span 3;
    }

    .about-page-partner-bio {
        grid-column: 5 / -1;
    }

    .about-page-team-group {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 8px;
    }

    .about-page-team-group-label {
        grid-column: span 4;
    }

    .about-page-team-group-value {
        grid-column: span 8;
    }
}


/*
    Components
*/

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    border: 0;
    border-top: 1px solid black;
    border-radius: 0;
    background-color: white;
    color: black;
    font: inherit;
    padding-right: 1rem;
}

select::-ms-expand {
    display: none;
}

.representation-type-select {
    position: relative;
    height: fit-content;
}

.representation-type-select-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font: inherit;
    color: black;
}

.representation-type-select .line-container-icon {
    flex-shrink: 0;
    transition: rotate 0.15s ease;
}

.representation-type-select.is-open .line-container-icon {
    rotate: 180deg;
}

.representation-type-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: white;
    z-index: 5;
    max-height: 40vh;
    overflow-y: auto;
}

.representation-type-select.is-open .representation-type-select-list {
    display: block;
}

.representation-type-select-option {
    display: block;
    width: 100%;
    padding: 4px 4px 6px;
}

.representation-type-select-list .representation-type-select-option {
    background-image: repeating-linear-gradient(to right,
        black 0px,
        black 1.5px,
        transparent 1.5px,
        transparent 5px);
    background-position: top left;
    background-size: auto 1.5px;
    background-repeat: repeat-x;
}

.representation-type-select-option:hover,
.representation-type-select-option.active {
    background-image: none;
    border-top: 1px solid black;
    padding-top: 2px;
}

/* Line Container */
.line-container {
    display: block;
    position: relative;
    background-color: white;
    border-top: 1.25px solid black;
    padding: 3px;
    margin-top: -1px;
}

.line-container.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.line-container.dotted {
    border-top: 2.25px dotted black;
}

.line-container.dotted.link.active,
.line-container.dotted.link:hover {
    border-top: 1px solid black;
}

.line-container > a {
    display: block;
    width: 100%;
}

.line-container-icon {
    translate: 0 1px;
    transition: rotate 0.15s ease;
}

.line-container.active .line-container-icon {
    rotate: 45deg;
}


/* 
    Project 
*/
.project {
    padding-bottom: 4px;
    position: relative;
    border-top: 1px solid black;
}

/* Project: Gallery */
.project-gallery {
    margin-top: 4px;
    aspect-ratio: 3/2;
    background-color: rgb(250, 250, 250);
    margin-bottom: 4px;
}

.project-gallery-picture {
    display: none;
    margin-bottom: 4px;
}

.project-gallery-picture.active {
    display: block;
}

.project-gallery-picture-image {
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Project: Gallery Drawings */
.project-gallery-picture:is([data-representation-type="planta"], [data-representation-type="corte"], [data-representation-type="alcado"], [data-representation-type="diagrama"], [data-representation-type="implantacao"]) {
    background-color: rgb(250, 250, 250);
}

.project-gallery-picture:is([data-representation-type="planta"], [data-representation-type="corte"], [data-representation-type="alcado"], [data-representation-type="diagrama"], [data-representation-type="implantacao"]) .project-gallery-picture-image {
    mix-blend-mode: multiply;
}

/* Project: Title */
.project-title {
    border-top: 1px solid black;
    padding: 2px 0;
    margin-bottom: 6px;
}

.project-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 
    Publication
*/

.publication {
    padding-bottom: 4px;
    position: relative;
}

/* Publication: Gallery */
.publication-cover {
    border-top: 1px solid black;
    padding-top: 4px;
}

.publication-cover-picture {
    display: block;
    margin-bottom: 4px;
}

.publication-cover-picture-image {
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Publication: Title */
.publication-title {
    border-top: 1px solid black;
    padding-top: 2px;
    margin-bottom: 8px;
}

.publication-description {
    margin-bottom: 8px;
    border-top: 1px solid black;
    padding-top: 2px;
}

.publication-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* 
    Post
*/

.post {
    padding-bottom: 4px;
    position: relative;
}

/* Post: Gallery */
.post-cover {
    border-top: 1px solid black;
    padding-top: 4px;
}

.post-cover-picture {
    display: block;
    margin-bottom: 4px;
}

.post-cover-picture-image {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}

/* Publication: Title */
.post-title {
    border-top: 1px solid black;
    padding: 2px 0;
    margin-bottom: 6px;
}

.post-description {
    padding-top: 2px;
    margin-bottom: 8px;
}

.post-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}


/* 
    Footer 
*/

.footer {
    padding: 8px;
    margin-top: 6rem;
}

.footer-company,
.footer-address,
.footer-contacts,
.footer-copyright {
    border-top: 1px solid black;
    padding-top: 3px;
    grid-column: 1/-1;
}


@media screen and (min-width: 768px) {
    .footer-company {
        grid-column: 1/5;
    }

    .footer-address {
        grid-column: 5/9;
    }

    .footer-contacts {
        grid-column: 9/13;
    }

    .footer-copyright {
        grid-column: -7/-1;
    }

}


/* Error Page */
.error-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 80px 8px 8px;
    min-height: calc(100dvh - 88px - 4rem);
    align-content: start;
}

.error-page-text {
    margin: 0;
}

.error-page-link {
    width: fit-content;
}


/* Panel Guide Page */
.panel-guide-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 32px 8px;
    padding: 80px 8px 8px;
    min-height: 100svh;
    align-content: start;
}

@media screen and (min-width: 640px) {
    .panel-guide-page {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .panel-guide-page {
        grid-template-columns: repeat(6, 1fr);
    }
}

.panel-guide-title {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-guide-toc {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.panel-guide-block {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 12px 8px;
    align-content: start;
}

.panel-guide-heading {
    grid-column: 1/-1;
    display: flex;
    gap: 12px;
    align-items: baseline;
}

.panel-guide-idx {
    opacity: 0.5;
}

.panel-guide-intro {
    grid-column: 1/-1;
    margin: 0;
}

.panel-guide-subheading {
    grid-column: 1/-1;
    margin: 0;
    border-top: 1px solid black;
    padding-top: 3px;
    text-transform: uppercase;
}

.panel-guide-list {
    grid-column: 1/-1;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

.panel-guide-list li {
    border-top: 1px solid black;
    padding: 3px 0 6px;
    margin: 0;
}

.panel-guide-field {
    text-transform: uppercase;
    font-size: 10px;
    border: 1px solid black;
    padding: 1px 4px;
    white-space: nowrap;
}

.panel-guide-table {
    grid-column: 1/-1;
    width: 100%;
    border-collapse: collapse;
}

.panel-guide-table th,
.panel-guide-table td {
    text-align: left;
    padding: 6px 12px 6px 0;
    border-top: 1px solid black;
    vertical-align: top;
    font-weight: 400;
}

.panel-guide-table thead th {
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.6;
}

.panel-guide-note {
    grid-column: 1/-1;
    border-top: 1px solid black;
    padding-top: 4px;
    margin: 0;
    text-transform: uppercase;
}

.panel-guide-tree {
    grid-column: 1/-1;
    white-space: pre;
    overflow-x: auto;
    font-family: inherit;
    margin: 0;
    padding-top: 4px;
}

@media screen and (min-width: 1024px) {
    .panel-guide-intro,
    .panel-guide-list,
    .panel-guide-note,
    .panel-guide-tree {
        grid-column: 1/5;
    }

    .panel-guide-table {
        grid-column: 1/6;
    }
}