/* ==========================================================================
   Atlaso --- responsive.css
   Cross-screen mobile rules. No horizontal overflow anywhere.
   ========================================================================== */

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

@media (max-width: 760px) {
    :root { --site-nav-h: 64px; --flowbar-h: 40px; }
    /* Keep the progress stepper visible (compact, numbers only). */
    .topbar { padding-inline: 14px; gap: 8px; }
    .topbar .brand-logo { height: 38px; }
    .topbar-nav, .topbar-create, .topbar-account--wide { display: none; }
    .topbar-menu { display: block; }
    .steps { gap: 0; }
    .step { padding: 0 6px; }
    .step__num { width: 22px; height: 22px; font-size: 0.7rem; }
    .step::before { width: 12px; inset-inline-end: -6px; }
    /* numbers only --- the label shows just for the CURRENT step */
    .step__label { display: none; }
    .step.is-active .step__label { display: inline; font-size: 0.78rem; font-weight: 800; }
    [data-mobile-only] { display: block; }
    .btn,
    .btn--sm,
    .topbar-account {
        min-height: 44px;
    }
    .btn--sm {
        padding-block: 12px;
    }
    /* Bigger, fuller titles on mobile (name of the game). */
    .display { font-size: clamp(3rem, 13vw, 4.4rem); line-height: 0.92; }
    .display--sm { font-size: clamp(2.2rem, 9vw, 3rem); }
}

@media (min-width: 761px) and (max-width: 920px) {
    .topbar-account__label { display: none; }
    .topbar-account--wide { width: 42px; padding: 0; }
    .topbar-create { display: none; }
    .topbar-nav { gap: 14px; font-size: .84rem; }
}

/* Larger tap targets on touch devices */
@media (hover: none) {
    .btn { padding-block: 15px; }
    .thumb__del { opacity: 1; }
}

/* Reduce heavy effects on small screens */
@media (max-width: 760px) {
    .cover-card:hover .cover-card__inner { transform: translateY(-4px) scale(1.03); }
    .float-cover { box-shadow: var(--shadow); }
}