/* Explain: Mobile optimizations for layout, typography, and interactive elements. */
/* =============================================================
   Knowledge School — MOBILE OPTIMISATION (compacto)
   Toda esta camada vive dentro de media queries de largura máxima,
   por isso a versão DESKTOP (>= 768px) permanece exactamente igual.
   Larguras testadas: 320 / 360 / 375 / 390 / 414 / 430 px.
   ============================================================= */

@media (max-width: 767px) {

    /* ---------- 1. Base — tipografia mais pequena, sem scroll horizontal ---------- */
    html {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        font-size: .84rem;
        line-height: 1.55;
    }

    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    iframe {
        width: 100%;
    }

    /* Nunca cortar palavras/sílabas em títulos e texto corrente. */
    h1, h2, h3, h4, p, li, dt, dd, a, span, strong {
        hyphens: none;
        word-break: normal;
    }

    /* ---------- 2. Contentor e ritmo vertical ---------- */
    .ks-shell {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    .ks-section {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .ks-section .mt-10 { margin-top: 1.5rem; }
    .ks-section .mt-12 { margin-top: 1.75rem; }

    /* ---------- 3. Cabeçalho e navegação ---------- */
    .ks-header {
        padding-top: env(safe-area-inset-top, 0px);
    }

    .ks-header nav {
        padding-top: .4rem;
        padding-bottom: .4rem;
        gap: .6rem;
    }

    .ks-header img {
        max-height: 1.9rem;
        width: auto;
    }

    #ksMobileNav ul {
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #ksMobileNav a {
        min-height: 40px;
        font-size: .88rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    .dropdown {
        position: relative;
    }

    .dropdown-content {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - 1.6rem);
        left: 0;
        right: auto;
    }

    /* ---------- 4. Tipografia ---------- */
    .eyebrow {
        font-size: .6rem;
        letter-spacing: .14em;
        gap: .45rem;
    }

    .eyebrow::before {
        width: 18px;
    }

    .ks-section h1 { font-size: 1.45rem; line-height: 1.15; }
    .ks-section h2 { font-size: 1.12rem; line-height: 1.2; }
    .ks-section h3 { font-size: .92rem; }
    .ks-section p { font-size: .82rem; }

    /* ---------- 5. Botões pequenos e compactos ---------- */
    .btn-ks {
        min-height: 0 !important;
        width: fit-content;
        max-width: 100%;
        padding: .3rem .7rem !important;
        font-size: .68rem !important;
        line-height: 1.15;
        gap: .25rem !important;
        white-space: normal;
        border-radius: 999px;
    }

    /* Botões de navegação/assistentes continuam a ocupar toda a largura útil */
    #ksMobileNav .btn-ks {
        width: 100%;
    }

    .btn-ks i,
    .btn-zoom i {
        font-size: .68rem !important;
    }

    .btn-zoom {
        min-height: 34px;
        padding: .45rem .9rem;
        font-size: .74rem;
    }

    .signup-nav .btn-ks,
    .wiz-nav .btn-ks {
        width: 100%;
        justify-content: center;
    }

    /* ---------- 6. Cartões ---------- */
    .ks-card {
        border-radius: var(--radius-md);
        padding: .9rem !important;
    }

    /* ---------- 7. Faixa de estatísticas — na vertical, tamanho original ---------- */
    .ks-stats-band {
        display: grid !important;
        grid-template-columns: 1fr !important;
        overflow: hidden;
    }

    .ks-stats-band > div {
        padding: .85rem .75rem !important;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .ks-stats-band > div:last-child {
        border-bottom: 0;
    }

    .ks-stats-band strong {
        font-size: 1.85rem !important;
        line-height: 1;
        display: block;
    }

    .ks-stats-band span {
        display: block;
        margin-top: .35rem;
        font-size: .82rem !important;
        line-height: 1.2;
        letter-spacing: normal;
    }

    /* ---------- 8. Widgets flutuantes + áreas seguras ---------- */
    .ks-whatsapp {
        right: calc(.7rem + env(safe-area-inset-right, 0px));
        bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
    }

    .ks-whatsapp i {
        font-size: 1.1rem !important;
    }

    /* ---------- 9. Formulários ---------- */
    .ks-input,
    .ks-file,
    input,
    select,
    textarea {
        font-size: 16px; /* evita o zoom automático do iOS ao focar */
    }

    .ks-input,
    .ks-file {
        min-height: 42px;
        padding: .55rem .7rem;
    }

    .signup-label {
        font-size: .74rem;
        margin-bottom: .3rem;
    }

    /* ---------- 10. Tabelas compactas — valor monetário numa só linha ---------- */
    .overflow-x-auto,
    .portal-table-scroll,
    .portal-table-wrap {
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
    }

    table {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }

    table th,
    table td {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
        font-size: .7rem;
        line-height: 1.25;
        padding: .3rem .22rem;
    }

    table th {
        font-size: .58rem;
        letter-spacing: 0;
    }

    /* Preços: «AOA 40.000» nunca parte para duas linhas. */
    .price-table td,
    .price-table th,
    #signupPricePreview td,
    #signupPricePreview th {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
        font-size: .64rem;
        padding: .3rem .18rem;
    }

    .price-table td:first-child,
    .price-table th:first-child,
    #signupPricePreview td:first-child,
    #signupPricePreview th:first-child {
        white-space: normal;
    }

    table .portal-badge {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    table .portal-icon-btn {
        display: block;
        width: 100%;
        min-height: 0;
        white-space: normal;
        word-break: normal;
        text-align: center;
        font-size: .68rem;
        line-height: 1.25;
        padding: .3rem .28rem;
    }
}

/* ---------- Ecrãs muito estreitos (320 – 400px) ---------- */
@media (max-width: 400px) {
    html {
        font-size: 13.5px;
    }

    .ks-shell {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .ks-section h2 {
        font-size: 1.05rem;
    }

    .btn-ks {
        padding-left: .7rem;
        padding-right: .7rem;
        font-size: .7rem;
    }

    .ks-stats-band span {
        font-size: .78rem !important;
    }
}