/*
 * Mobile-first responsive safety net for the public-facing pages
 * (register.php, check_status.php, success.php).
 *
 * Loaded AFTER register.css so it can patch remaining fixed-width /
 * non-collapsing spots without touching the original design (colors,
 * buttons, cards, badges, typography scale stay as-is).
 *
 * Breakpoints used across this project:
 *   Mobile        320px - 575px
 *   Large mobile  576px - 767px
 *   Tablet        768px - 991px
 *   Notebook      992px - 1199px
 *   Desktop       1200px+
 */

/* ---------- Global safety net ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    max-width: 100%;
    overflow-x: hidden;
    line-height: 1.6;
}

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

input,
select,
textarea {
    max-width: 100%;
}

.container,
.container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Fluid headings — same visual scale on desktop, never overflow on mobile */
h1 {
    font-size: clamp(22px, 5vw, 40px);
    line-height: 1.25;
}

h2 {
    font-size: clamp(20px, 4vw, 32px);
    line-height: 1.3;
}

h3 {
    font-size: clamp(17px, 3vw, 22px);
    line-height: 1.35;
}

/* ---------- Tablet (max 991px): remaining two-column grids stack ---------- */
@media (max-width: 991.98px) {
    .btn,
    .form-actions .btn,
    .action-grid .btn {
        min-height: 44px;
    }

    /* .hero-top switches to a column flex layout at this breakpoint
       (register.css) but keeps align-items: flex-start, so its text
       block never shrinks below its own max-width (640px) and pushes
       the page into horizontal scroll on narrow screens. Force it to
       fill the available width instead. */
    .hero-top {
        align-items: stretch;
    }

    .hero-top-text {
        max-width: 100%;
    }
}

/* ---------- Large mobile / mobile (max 767px) ---------- */
@media (max-width: 767.98px) {
    .event-item-grid--compact,
    .member-type-grid--cards,
    .status-result-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Mobile only (max 575px) ---------- */
@media (max-width: 575.98px) {
    .hero-ribbon-deco {
        display: none;
    }

    .promptpay-image {
        width: 100%;
        max-width: 220px;
    }
}