/*
 * SCROMA LANDING RESPONSIVE V1
 * Authoritative mobile layer.
 * Loaded after legacy inline landing styles.
 */

@media (max-width: 980px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .brand-top {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 16px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .brand-top img {
        width: min(150px, 55vw) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .hero-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        padding: 0 16px 30px !important;
        overflow: visible !important;
    }

    .hero-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 26px !important;
        transform: none !important;
    }

    .info-panel,
    .story-box,
    .story-line,
    .story-trust,
    .story-trust-list,
    .story-trust-note,
    .campaign-stack,
    .campaign-panel,
    .campaign-card,
    .account-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .story-box {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .story-line,
    .story-trust-title,
    .story-trust-list,
    .story-trust-list div,
    .story-trust-note,
    .campaign-title,
    .campaign-after-sub,
    .campaign-mini-explainer {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .info-panel .livebar.livebar-stats-final,
    .livebar,
    .livebar-stats-final {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 24px 0 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        transform: none !important;
        overflow: visible !important;
    }

    .livebar-stats-final .live-stat-card,
    .livebar-stats-final .live-stat-community,
    .livebar-stats-final .live-stat-scr {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 130px !important;
        padding: 18px 16px 34px !important;
    }

    .livebar-stats-final .live-stat-scr {
        display: flex !important;
        gap: 14px !important;
    }

    .livebar-stats-final .live-stat-scr .live-stat-copy {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .livebar-stats-final .live-stat-title,
    .livebar-stats-final .live-stat-title span,
    .livebar-stats-final .live-stat-claim,
    .livebar-stats-final .live-stat-value {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .info-panel .livebar-stats-final .livebar-btn.live-join-final,
    .livebar-stats-final .livebar-btn,
    .livebar-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 96px !important;
        padding: 16px !important;
        border-radius: 24px !important;
        overflow: visible !important;
    }

    .livebar-stats-final .live-join-main {
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .campaign-stack {
        align-items: stretch !important;
    }

    .campaign-panel {
        margin: 0 !important;
        padding: 30px 18px 34px !important;
    }

    .campaign-card {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 14px !important;
    }

    .account-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .account-actions a,
    .account-actions button,
    .account-actions .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}