/* =========================================================
   RADIUS · WEBSITE PREVIEW
   assets/css/pages/radius-builder/preview/website-preview.css
   =========================================================
   "Website" tab. The page mock (nav, hero, feature cards) is
   inline-styled with flex-wrap in website-preview.js, so it
   reflows on its own as the panel narrows. This file adds the
   explicit mobile-device-toggle stacking.
   ========================================================= */

/* Natural reflow already handled by flex-wrap; nothing required
   at desktop width. */

/* Mobile device toggle → stack everything into a phone column. */
.rd-preview-root--mobile .rd-wp-nav {
    flex-wrap: wrap;
    justify-content: center;
}

.rd-preview-root--mobile .rd-wp-hero {
    flex-direction: column;
}

/* Stretching to the column's full width would blow the accent image up into
   a giant banner; cap and center it so it stays a modest accent, matching
   its desktop proportions. */
.rd-preview-root--mobile .rd-wp-hero-art {
    align-self: center;
    width: 100%;
    max-width: 220px;
}

/* The floating stat card overlaps the hero art via absolute positioning on
   desktop. On mobile that overlap math assumed the small desktop-sized
   image; against a (still-capped) mobile image it could overshoot the
   hero card's own padding and spill into the section below, so it drops
   into normal flow with plain spacing instead — no overlap, no risk of
   bridging the gap to the next card. */
.rd-preview-root--mobile .rd-wp-hero-stat {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 10px auto 0;
    align-self: center;
}

.rd-preview-root--mobile .rd-wp-card {
    /* override the inline `flex: 1 1 150px` so cards stack full-width */
    flex: 1 1 100% !important;
}

/* Nav declutter — Search + Upgrade + avatar is too tight on a phone-width
   header, so Upgrade drops first; Search and the avatar still fit. */
.rd-preview-root--mobile .rd-wp-nav-upgrade {
    display: none;
}

/* The rules above only fire when the in-tool Desktop/Mobile toggle is set
   to Mobile. On a real narrow viewport with the toggle left on Desktop,
   nothing above applies and the hero/cards just raw-wrap — so mirror the
   same stacking behind an actual viewport query too. */
@media (max-width: 640px) {
    .rd-wp-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .rd-wp-hero {
        flex-direction: column;
    }

    .rd-wp-hero-art {
        align-self: center;
        width: 100%;
        max-width: 220px;
    }

    .rd-wp-hero-stat {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        margin: 10px auto 0;
        align-self: center;
    }

    .rd-wp-card {
        flex: 1 1 100% !important;
    }

    .rd-wp-nav-upgrade {
        display: none;
    }
}