/* ==========================================================================
   Stamease - MOBILE VIEW ONLY
   Everything here is wrapped in @media (max-width: 600px).
   Desktop / web layout is NEVER affected by this file.
   Goal: on a phone, the core interactive part of each tool + its main
   controls fit on the first screen, so the user can practise without
   scrolling up and down. Compact but comfortable (text stays readable,
   tap targets stay >= 44px).
   Loaded AFTER each page's inline <style>, so these rules win.
   ========================================================================== */

@media (max-width: 600px) {

    /* ---- Page containers: trim the big top/bottom padding ---- */
    .page-container,
    .ra-page,
    .wrap,
    .main,
    .main-grid,
    .container {
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    /* ---- Heroes: compress. Keep the title, drop the long description ---- */
    .hero, .ra-hero, .ab-hero, .bs-hero, .cp-hero, .ds-hero,
    .pr-hero, .sb-hero, .sp-hero, .st-hero, .tts-hero, .wt-hero {
        margin-bottom: 1rem !important;
        text-align: center;
    }

    /* smaller headline on phones */
    .hero h1, .ra-hero h1, .ab-hero h1, .bs-hero h1, .cp-hero h1,
    .ds-hero h1, .pr-hero h1, .sb-hero h1, .sp-hero h1, .st-hero h1,
    .tts-hero h1, .wt-hero h1,
    .ra-heading, .cp-title, .st-title, .sp-title,
    .practice-title {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.5rem !important;
    }

    /* eyebrow / badge: shrink */
    .hero-badge, .ra-eyebrow, .ra-pill, .badge, .eyebrow {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
        margin-bottom: 0.6rem !important;
    }

    /* Long descriptive intro text is read once, not needed while
       practising -> hide on phones to reclaim vertical space. */
    .hero-text,
    .ra-subtext,
    .hero > p, .ra-hero > p, .ab-hero > p, .bs-hero > p, .cp-hero > p,
    .ds-hero > p, .pr-hero > p, .sb-hero > p, .sp-hero > p, .st-hero > p,
    .tts-hero > p, .wt-hero > p {
        display: none !important;
    }

    /* Section headings inside the tool card (e.g. "Reading Settings") smaller */
    .ra-heading, .practice-header h2, .card-heading, .card > h2, .panel > h2 {
        font-size: 1.15rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* ---- Cards: reduce padding so the tool sits higher ---- */
    .trainer-card,
    .practice-card,
    .practice,
    .practice-area,
    .card,
    .panel,
    .ra-practice,
    .ra-settings,
    .ra-sentence-card,
    .section-card,
    .tool-card {
        padding: 1.1rem !important;
        border-radius: 16px !important;
    }

    /* ---- Grids that are side-by-side on desktop stack on phone ---- */
    .main-grid,
    .ra-grid {
        display: block !important;
    }

    /* ---- Big text blocks (timers, status, stage sentence) trimmed ---- */
    .timer, .display, .countdown {
        font-size: 2.4rem !important;
    }
    .stage, .ra-reading-stage, .ra-text, .practice-content {
        font-size: 1.15rem !important;
        line-height: 1.5 !important;
    }

    /* ---- Section labels a touch smaller ---- */
    .section-label, .ra-label, .practice-status, .ra-status {
        font-size: 0.72rem !important;
    }

    /* ---- Selector button rows (levels/patterns): tighter but tappable ---- */
    .level-selector { gap: 0.5rem !important; margin-bottom: 1.1rem !important; }
    .level-btn { padding: 0.7rem 0.5rem !important; }
    .level-title { font-size: 0.85rem !important; }
    .level-description { display: none !important; } /* keep number+title only */

    /* ---- Primary/secondary controls: full width, comfortable height ---- */
    .controls, .ra-controls {
        gap: 0.6rem !important;
        margin-top: 1rem !important;
    }
    .btn, .ra-btn, .primary-btn, .secondary-btn,
    .ra-primary-btn, .ra-secondary, .pattern-btn {
        min-height: 46px !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.95rem !important;
    }
}