/* =========================================================================
   Carcer — establishment listings (List / Grid)
   ========================================================================= */

.carcer {
    padding-top: calc(var(--header-h) + 0.5rem);
}

.carcer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* The view switcher sits in the left margin, outside the content column. */
.carcer-views {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.carcer-view {
    color: var(--c-yellow);
    font-size: var(--fs-nav);
}

.carcer-view.is-active {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.carcer-empty {
    opacity: 0.6;
}

/* The design parks the switcher in the page's left margin, near the viewport
   edge rather than beside the content column, so it is positioned against the
   page rather than pushed out of the content grid. */
@media (min-width: 1101px) {
    .carcer {
        position: relative;
    }

    .carcer-views {
        position: absolute;
        top: calc(var(--header-h) + 0.5rem);
        left: 30px;
    }

    .carcer-layout {
        display: block;
    }
}

/* --- List ---------------------------------------------------------------- */

.carcer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    text-align: left;
}

.carcer-table th {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--c-ink);
    font-weight: 500;
    white-space: nowrap;
}

.carcer-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.carcer-sort-caret {
    font-size: 0.85em;
    opacity: 0.7;
}

.carcer-sort:not(.is-active) .carcer-sort-caret {
    opacity: 0.3;
}

.carcer-row td {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--c-rule);
    vertical-align: middle;
}

.carcer-col-plan {
    width: 95px;
}

.carcer-col-plan .planta {
    display: inline-flex;
}

.carcer-col-area_territorial {
    text-align: right;
    white-space: nowrap;
}

.carcer-col-cidade {
    width: 25%;
}

/* --- Grid ---------------------------------------------------------------- */

.carcer-group + .carcer-group {
    margin-top: 4rem;
}

.carcer-group-title {
    margin-bottom: 0.75rem;
}

.carcer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem var(--gutter);
}

.carcer-tile-link {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.carcer-tile-link:hover {
    text-decoration: none;
}

.carcer-tile-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    background: var(--c-tile);
}

.carcer-tile-title {
    color: var(--c-mint);
    font-size: var(--fs-card);
    line-height: 1.2;
}

.carcer-tile-link:hover .carcer-tile-title {
    text-decoration: underline;
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 1100px) {
    .carcer-views {
        flex-direction: row;
        gap: 1.25rem;
    }
}

@media (max-width: 900px) {
    .carcer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The city column is the first thing worth dropping on a phone. */
    .carcer-col-cidade {
        display: none;
    }

    /* Fixed layout so the long establishment names can never widen the table
       past the viewport — auto layout lets their min-content win and pushes
       the zone column off-screen. */
    .carcer-table {
        table-layout: fixed;
        font-size: var(--fs-card);
    }

    .carcer-table th {
        white-space: normal;
    }

    .carcer-col-plan {
        width: 52px;
    }

    .carcer-col-area_territorial {
        width: 5.5rem;
    }

    .carcer-sort {
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .carcer-table {
        font-size: 0.9375rem;
    }

    .carcer-col-plan {
        width: 40px;
    }

    .carcer-col-area_territorial {
        width: 4.75rem;
        font-size: 0.8125rem;
    }

    .carcer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}