/* ========================================
   TEXAS LEGACIES — CLIMA DE ALBANY
======================================== */


/* ========================================
   DASHBOARD
======================================== */

.dashboard-city-climate {
    padding:
        0 clamp(22px, 5vw, 78px) 40px;

    color:
        var(--cream);
}


.dashboard-city-climate-heading {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        24px;

    align-items:
        end;

    margin-bottom:
        16px;
}


.dashboard-city-climate-heading span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2.6px;
}


.dashboard-city-climate-heading h2 {
    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        31px;

    font-weight:
        normal;
}


.dashboard-city-climate-heading > p {
    color:
        rgba(241, 221, 194, .42);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.dashboard-city-climate-card {
    display:
        grid;

    grid-template-columns:
        minmax(260px, .8fr)
        1.2fr;

    border:
        1px solid rgba(241, 221, 194, .14);

    background:
        rgba(7, 27, 33, .36);
}


.dashboard-city-climate-main {
    min-height:
        210px;

    padding:
        28px;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    border-right:
        1px solid rgba(241, 221, 194, .12);
}


.dashboard-city-climate-icon {
    width:
        88px;

    height:
        88px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(223, 160, 108, .26);

    color:
        var(--sand);

    font-size:
        48px;
}


.dashboard-city-climate-main > div > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1.5px;
}


.dashboard-city-climate-main strong {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        clamp(46px, 6vw, 70px);

    font-weight:
        normal;

    line-height:
        1;
}


.dashboard-city-climate-main p {
    margin-top:
        8px;

    color:
        rgba(241, 221, 194, .58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        10px;
}


.dashboard-city-climate-stats {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.dashboard-city-climate-stats article {
    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid rgba(241, 221, 194, .1);

    border-bottom:
        1px solid rgba(241, 221, 194, .1);
}


.dashboard-city-climate-stats article:nth-child(2n) {
    border-right:
        0;
}


.dashboard-city-climate-stats span,
.dashboard-city-climate-note span {
    color:
        rgba(241, 221, 194, .42);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.3px;
}


.dashboard-city-climate-stats strong {
    margin-top:
        8px;

    color:
        var(--cream);

    font-size:
        20px;

    font-weight:
        normal;
}


.dashboard-city-climate-note {
    grid-column:
        1 / -1;

    padding:
        17px 20px;

    border-top:
        1px solid rgba(241, 221, 194, .1);
}


.dashboard-city-climate-note p {
    margin-top:
        6px;

    color:
        rgba(241, 221, 194, .54);

    font-family:
        Arial,
        sans-serif;

    font-size:
        9px;

    line-height:
        1.6;
}


/* ========================================
   ADMIN
======================================== */

.admin-city-climate {
    width:
        min(1320px, calc(100% - 48px));

    margin:
        26px auto 34px;

    padding:
        22px;

    border:
        1px solid rgba(223, 192, 155, .14);

    background:
        rgba(7, 27, 33, .34);

    color:
        var(--cream);
}


.admin-city-climate-summary {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        24px;
}


.admin-city-climate-summary > div:first-child > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.admin-city-climate-summary h2 {
    margin-top:
        7px;

    color:
        var(--cream);

    font-size:
        30px;

    font-weight:
        normal;
}


.admin-city-climate-summary p {
    max-width:
        680px;

    margin-top:
        6px;

    color:
        rgba(241, 221, 194, .45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    line-height:
        1.6;
}


.admin-city-climate-preview {
    min-width:
        160px;

    padding:
        14px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    border:
        1px solid rgba(223, 160, 108, .22);
}


.admin-city-climate-preview > span {
    color:
        var(--sand);

    font-size:
        30px;
}


.admin-city-climate-preview strong {
    color:
        var(--cream);

    font-size:
        24px;

    font-weight:
        normal;
}


.admin-city-climate-preview p {
    margin-top:
        2px;

    font-size:
        7px;
}


.admin-city-climate-editor {
    margin-top:
        18px;

    border-top:
        1px solid rgba(223, 192, 155, .12);
}


.admin-city-climate-editor summary {
    padding:
        16px 0 0;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

    cursor:
        pointer;

    list-style:
        none;
}


.admin-city-climate-editor summary::-webkit-details-marker {
    display:
        none;
}


.admin-city-climate-editor form {
    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        10px;
}


.admin-city-climate-editor label {
    display:
        grid;

    gap:
        7px;
}


.admin-city-climate-editor label.full {
    grid-column:
        1 / -1;
}


.admin-city-climate-editor label > span {
    color:
        var(--sand);

    font-family:
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        1.3px;
}


.admin-city-climate-editor label > div {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.admin-city-climate-editor input,
.admin-city-climate-editor select,
.admin-city-climate-editor textarea {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px 11px;

    border:
        1px solid rgba(223, 192, 155, .15);

    background:
        rgba(7, 27, 33, .68);

    color:
        var(--cream);
}


.admin-city-climate-editor textarea {
    min-height:
        90px;

    resize:
        vertical;
}


.admin-city-climate-editor small {
    color:
        rgba(241, 221, 194, .44);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-city-climate-editor button {
    grid-column:
        1 / -1;

    min-height:
        46px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border:
        1px solid var(--rust);

    background:
        var(--rust);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;
}


.admin-city-climate-message {
    margin-top:
        12px;

    padding:
        12px 14px;

    border:
        1px solid rgba(223, 160, 108, .22);

    color:
        var(--cream);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;
}


.admin-city-climate-message.error {
    border-color:
        rgba(183, 55, 38, .65);
}


.admin-city-climate-message.success {
    background:
        rgba(180, 71, 36, .07);
}


@media (max-width: 900px) {

    .dashboard-city-climate-card {
        grid-template-columns:
            1fr;
    }


    .dashboard-city-climate-main {
        border-right:
            0;

        border-bottom:
            1px solid rgba(241, 221, 194, .12);
    }


    .admin-city-climate-editor form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .dashboard-city-climate {
        padding:
            0 18px 34px;
    }


    .dashboard-city-climate-heading,
    .admin-city-climate-summary {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .dashboard-city-climate-main {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .dashboard-city-climate-stats,
    .admin-city-climate-editor form {
        grid-template-columns:
            1fr;
    }


    .admin-city-climate {
        width:
            min(100% - 28px, 1320px);
    }


    .admin-city-climate-preview {
        width:
            100%;
    }

}