/* TrueSign — landing pública y modales de auth (login / registro / reset). */
/* Responsive: mismos breakpoints que en app.css. */

#landing.hidden {
    display: none !important;
}

/* Tailwind: el modal lleva `flex` + `hidden`; forzar ocultar al cerrar sesión */
#loginModal.hidden,
#registerModal.hidden,
#resetPasswordModal.hidden {
    display: none !important;
}

@media (max-width: 1279px) and (pointer: coarse) {
    /* ── LANDING PAGE — iPad adjustments ── */
    #landing h1 {
        font-size: 2.8rem !important;
        line-height: 1.15 !important;
    }
    #landing .text-lg.sm\:text-xl.md\:text-2xl {
        font-size: 1.15rem !important;
    }
    #landing section.relative.py-12 {
        min-height: 70vh !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    #landing header img {
        height: 5rem !important;
    }
    #landing header .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    #landing .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #landing .grid.lg\:grid-cols-3 > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
    #landing .grid.md\:grid-cols-3 h3 {
        font-size: 1.1rem !important;
    }
    #landing h2.text-3xl {
        font-size: 2rem !important;
    }
    #landing h2.sm\:text-5xl {
        font-size: 2rem !important;
    }
    #landing .sm\:px-12 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    #landing .sm\:py-6 {
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
    }
    #loginModal img, #registerModal img {
        height: 5rem !important;
    }
    #loginModal h2, #registerModal h2 {
        font-size: 1.5rem !important;
    }
    #loginModal .p-8, #registerModal .p-8 {
        padding: 1.5rem !important;
    }
}

@media (max-width: 1023px) and (pointer: coarse) {
    #landing h1 {
        font-size: 2.25rem !important;
    }
    #landing .text-lg.sm\:text-xl.md\:text-2xl {
        font-size: 1.05rem !important;
    }
    #landing section.relative.py-12 {
        min-height: 60vh !important;
    }
    #landing .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 834px) and (pointer: coarse) {
    #landing h1 {
        font-size: 1.8rem !important;
    }
    #landing .text-lg.sm\:text-xl.md\:text-2xl {
        font-size: 1rem !important;
    }
    #landing section.relative.py-12 {
        min-height: auto !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    #landing header img {
        height: 3.5rem !important;
    }
    #landing .grid.lg\:grid-cols-3,
    #landing .grid.md\:grid-cols-3,
    #landing .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    #landing .grid.lg\:grid-cols-3 > :last-child:nth-child(odd) {
        max-width: 100%;
    }
    #landing .flex.sm\:flex-row {
        flex-direction: column !important;
    }
}

@media (max-width: 480px) {
    #landing header .flex.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #landing header img {
        height: 2.5rem !important;
    }
    #landing header .py-6 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    #landing h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    #landing .text-lg.sm\:text-xl.md\:text-2xl {
        font-size: 0.95rem !important;
    }
    #landing section.relative.py-12 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        min-height: auto !important;
    }
    #landing .grid.lg\:grid-cols-3,
    #landing .grid.md\:grid-cols-3,
    #landing .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    #landing h2.text-3xl,
    #landing h2.sm\:text-5xl {
        font-size: 1.5rem !important;
    }
    #landing .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    #landing .flex.flex-col.sm\:flex-row button,
    #landing .flex.flex-col.sm\:flex-row a {
        width: 100%;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    #loginModal .p-4, #registerModal .p-4 {
        padding: 0.5rem !important;
    }
    #loginModal .bg-gray-800, #registerModal .bg-gray-800 {
        max-width: 95vw !important;
        padding: 1rem !important;
    }
    #loginModal img, #registerModal img {
        height: 3rem !important;
    }
    #loginModal h2, #registerModal h2 {
        font-size: 1.25rem !important;
    }
    #landing footer img {
        height: 2.5rem !important;
    }
    #landing footer .text-3xl {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 360px) {
    #landing h1 {
        font-size: 1.35rem !important;
    }
}