/* =========================================================
   SHADOW · WEBSITE PREVIEW
   assets/css/pages/shadow-builder/preview/website-preview.css
   =========================================================
   Polish for the in-context page. Core layout + colours are set
   inline by website-preview.js (using --sh-surface-* / --sh-* vars);
   this file adds shadow motion, hover, a centred frame and the
   mobile reflow.
   ========================================================= */

.sh-web-frame {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

/* Smoothly animate every shadowed surface as the sliders move. */
.sh-web-nav,
.sh-web-navcta,
.sh-web-cta,
.sh-web-card,
.sh-web-toast,
.sh-web-fab {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.sh-web-card:hover {
    transform: translateY(-3px);
}

.sh-web-cta:hover,
.sh-web-fab:hover {
    transform: translateY(-2px);
}

.sh-web-link {
    cursor: default;
}


/* =========================================================
   MOBILE — hide nav links, shrink hero, single-column grid
   ========================================================= */

.sh-preview-area--mobile .sh-web-link {
    display: none !important;
}

.sh-preview-area--mobile .sh-web-title {
    font-size: 23px !important;
}

.sh-preview-area--mobile .sh-web-hero {
    padding: 34px 20px 24px !important;
}

.sh-preview-area--mobile .sh-web-grid {
    grid-template-columns: 1fr !important;
}

.sh-preview-area--mobile .sh-web-toast {
    top: 66px !important;
    right: 14px !important;
    max-width: 180px !important;
}

.sh-preview-area--mobile .sh-web-fab {
    width: 46px !important;
    height: 46px !important;
    bottom: 16px !important;
    right: 16px !important;
}