/*
 * public/assets/shared/css/system-responsive-fix.css
 * Estabiliza a composição responsiva das páginas de erro/manutenção.
 *
 * O tamanho da mascote passa a depender sobretudo da largura disponível e
 * deixa de mudar de forma abrupta com a altura, o tipo de apontador ou pequenos
 * saltos de breakpoint. Desktop/portátil mantém duas colunas; apenas ecrãs
 * realmente estreitos passam para composição vertical.
 */
.system-page {
    overflow-x: hidden;
    overflow-y: auto;
}

@media (min-width: 701px) {
    .system-page {
        padding-inline: clamp(2.25rem, 4vw, 3.5rem);
    }

    .system-state__brand img {
        width: min(19.5rem, 88%);
        max-height: 7rem;
    }
}

.system-state,
.system-state--maintenance,
.system-state--coming-soon {
    grid-template-columns: minmax(18rem, 29rem) minmax(24rem, 1fr);
    align-items: center;
    gap: clamp(.75rem, 1.8vw, 1.75rem);
    width: min(82rem, 100%);
}

.system-state__content {
    grid-row: auto;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 31rem;
    justify-self: end;
    text-align: left;
}

.system-state__visual {
    grid-row: auto;
    width: 100%;
    min-width: 0;
    transform: none;
    place-items: center;
}

.system-state__visual img,
.system-state--maintenance .system-state__visual img,
.system-state--coming-soon .system-state__visual img {
    display: block;
    width: clamp(26rem, 44vw, 49rem);
    max-width: 100%;
    height: auto;
    max-height: min(74svh, 46rem);
    object-fit: contain;
}

.system-state__brand {
    justify-content: flex-start;
}

.system-state__brand img {
    object-position: left center;
}

.system-state__message,
.system-state__secondary {
    margin-inline: 0;
}

.system-state__actions {
    justify-content: flex-start;
}

/* Portáteis, tablets landscape e viewports reduzidos ainda em duas colunas. */
@media (min-width: 701px) and (max-width: 1100px) {
    .system-page {
        place-items: center;
        padding: clamp(1rem, 2.5vw, 1.75rem) clamp(2rem, 4vw, 3rem);
    }

    .system-state,
    .system-state--maintenance,
    .system-state--coming-soon {
        grid-template-columns: minmax(16rem, .88fr) minmax(20rem, 1.12fr);
        gap: clamp(.55rem, 1.4vw, 1.1rem);
        width: min(66rem, 100%);
        padding-block: .5rem;
    }

    .system-state__content {
        grid-row: auto;
        max-width: 27rem;
        justify-self: end;
        text-align: left;
    }

    .system-state__visual {
        grid-row: auto;
        transform: none;
        place-items: center;
    }

    .system-state__visual img,
    .system-state--maintenance .system-state__visual img,
    .system-state--coming-soon .system-state__visual img {
        width: clamp(21rem, 44vw, 36rem);
        max-width: 100%;
        max-height: min(72svh, 35rem);
    }

    .system-state__brand {
        justify-content: flex-start;
    }

    .system-state__brand img {
        object-position: left center;
    }

    .system-state__message,
    .system-state__secondary {
        margin-inline: 0;
    }

    .system-state__actions {
        justify-content: flex-start;
    }
}

/*
 * Ecrãs baixos: reduzimos moderadamente o conjunto, sem trocar de layout nem
 * deixar a altura do viewport comandar radicalmente o tamanho da mascote.
 */
@media (min-width: 701px) and (max-height: 820px) {
    .system-page {
        padding: .8rem clamp(2rem, 4vw, 3rem);
    }

    .system-state,
    .system-state--maintenance,
    .system-state--coming-soon {
        gap: clamp(.55rem, 1.25vw, 1rem);
    }

    .system-state__brand {
        min-height: 2.6rem;
        margin-bottom: .7rem;
    }

    .system-state__brand img {
        width: min(16.5rem, 84%);
        max-height: 5.5rem;
    }

    .system-state h1 {
        margin-block: .65rem;
        font-size: clamp(2rem, 4vw, 3.25rem);
        line-height: 1;
    }

    .system-state__message,
    .system-state__secondary {
        font-size: clamp(.94rem, 1.2vw, 1.05rem);
        line-height: 1.52;
    }

    .system-state__actions {
        margin-top: 1rem;
    }

    .system-state__visual img,
    .system-state--maintenance .system-state__visual img,
    .system-state--coming-soon .system-state__visual img {
        /* A largura mantém a regra do breakpoint corrente; num ecrã mais
         * baixo só a altura máxima atua como rede de segurança. */
        max-height: min(69svh, 34rem);
    }
}

/* Mobile/portrait estreito: uma coluna, sem sobreposição entre imagem e texto. */
@media (max-width: 700px) {
    .system-page {
        place-items: start center;
        padding: clamp(.9rem, 2.5svh, 1.5rem) 1rem 1.5rem;
    }

    .system-state,
    .system-state--maintenance,
    .system-state--coming-soon {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(.2rem, 1.2vw, .55rem);
        width: min(40rem, 100%);
        min-height: calc(100svh - 2.5rem);
        padding-block: .25rem .75rem;
        align-content: start;
    }

    .system-state__visual {
        grid-row: 1;
        transform: none;
        place-items: center;
    }

    .system-state__visual img,
    .system-state--maintenance .system-state__visual img,
    .system-state--coming-soon .system-state__visual img {
        width: clamp(17rem, 64vw, 28rem);
        max-width: 100%;
        height: auto;
        max-height: 42svh;
    }

    .system-state__content {
        grid-row: 2;
        max-width: 35rem;
        justify-self: center;
        text-align: center;
    }

    .system-state__brand {
        justify-content: center;
        min-height: 2.5rem;
        margin-top: -.1rem;
        margin-bottom: .45rem;
    }

    .system-state__brand img {
        width: min(13rem, 66%);
        max-height: 4.5rem;
        object-position: center;
    }

    .system-state h1 {
        margin-block: .5rem .6rem;
        font-size: clamp(1.9rem, 8vw, 2.8rem);
        line-height: 1;
    }

    .system-state__message,
    .system-state__secondary {
        margin-inline: auto;
        line-height: 1.5;
    }

    .system-state__actions {
        justify-content: center;
        margin-top: 1rem;
    }
}

@media (max-width: 700px) and (max-height: 700px) {
    .system-state__visual img,
    .system-state--maintenance .system-state__visual img,
    .system-state--coming-soon .system-state__visual img {
        width: clamp(14.5rem, 62vw, 23rem);
        max-height: 36svh;
    }

    .system-state__brand {
        margin-bottom: .45rem;
    }

    .system-state h1 {
        font-size: clamp(1.75rem, 7vw, 2.35rem);
    }
}