/* ==========================================================
   COMPLEX DIAGNOSTICS
   ========================================================== */

.diagnostics-disclosure {
    border-color: rgba(var(--bs-villa-dg-rgb), .16);
    box-shadow: 0 10px 28px rgba(var(--bs-villa-dg-rgb), .10);
}

.diagnostics-disclosure:hover,
.diagnostics-disclosure[open] {
    border-color: rgba(var(--bs-villa-dg-rgb), .22);
    box-shadow: 0 16px 38px rgba(var(--bs-villa-dg-rgb), .17);
}


/* Summary */

.diagnostics-disclosure__summary {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 44px;
    grid-template-areas: "icon main action";
    align-items: center;

    gap: 1.75rem;

    min-height: 150px;
    padding: 1.5rem 1.75rem;
}


/* Icon */

.diagnostics-disclosure__icon {
    grid-area: icon;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 104px;
    height: 104px;

    border-radius: 1.5rem;
    background: rgba(var(--bs-villa-dg-rgb), .07);
}

.diagnostics-disclosure__icon img {
    display: block;

    width: 68px;
    height: 68px;

    object-fit: contain;
}


/* Main */

.diagnostics-disclosure__main {
    grid-area: main;
    min-width: 0;
}

.diagnostics-disclosure__title {
    margin-bottom: .4rem;

    color: var(--villa-green-dark);

    font-size: 1.35rem;
    line-height: 1.3;
}

.diagnostics-disclosure__short {
    max-width: 850px;

    margin-bottom: 0;

    color: var(--villa-muted);

    font-size: 1rem;
    line-height: 1.55;
}


/* Action */

.diagnostics-disclosure__action {
    grid-area: action;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    justify-self: end;

    border-radius: 50%;
    background: var(--villa-surface-green);

    color: var(--villa-green);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .diagnostics-disclosure__summary {
        grid-template-columns: 68px minmax(0, 1fr) 36px;
        grid-template-areas:
            "icon main action"
            "short short short";

        gap: .85rem 1rem;

        min-height: 0;
        padding: 1rem;
    }

    .diagnostics-disclosure__icon {
        width: 68px;
        height: 68px;

        border-radius: 1rem;
    }

    .diagnostics-disclosure__icon img {
        width: 46px;
        height: 46px;
    }

    .diagnostics-disclosure__main {
        display: contents;
    }

    .diagnostics-disclosure__main .villa-eyebrow {
        display: none;
    }

    .diagnostics-disclosure__title {
        grid-area: main;

        align-self: center;

        margin-bottom: 0;

        font-size: 1.1rem;
        line-height: 1.25;
    }

    .diagnostics-disclosure__short {
        grid-area: short;

        max-width: none;
        margin: 0;

        font-size: .95rem;
        line-height: 1.5;
    }

    .diagnostics-disclosure__action {
        grid-area: action;

        width: 34px;
        height: 34px;
    }

}

@media (max-width: 767.98px) {

    .diagnostics-disclosure__summary {
        grid-template-columns: 72px minmax(0, 1fr) 36px;
        grid-template-areas:
            "icon title action"
            "short short short";

        gap: .85rem 1rem;
        min-height: 0;
        padding: 1rem;
    }

    .diagnostics-disclosure__icon {
        width: 72px;
        height: 72px;
    }

    .diagnostics-disclosure__icon img {
        width: 48px;
        height: 48px;
    }

    .diagnostics-disclosure__main {
        display: contents;
    }

    .diagnostics-disclosure__title {
        grid-area: title;
        align-self: center;
        margin-bottom: 0;
        font-size: 1.1rem;
    }

    .diagnostics-disclosure__short {
        grid-area: short;
        margin: 0;
        font-size: .95rem;
    }

    .diagnostics-disclosure__action {
        grid-area: action;
    }
}