/* Covozi v1.63 — Creator Hub no-horizontal-scroll responsive repair.
 * Desktop >=901px remains the approved v1.59 three-column website surface.
 * Tablet/mobile remove all swipe rails and compressed horizontal navigation;
 * content expands to the viewport and media/product collections become normal
 * stacked grids. Phone width uses one item per row for Paths, Gallery, Courses
 * and Covozi Landing Pages.
 */

@media (max-width: 900px) {
  html,
  body,
  body.stanloop-loop-layout-page,
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"],
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .stanloop-loop-shell--public-creator,
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .stanloop-loop-main--public-profile,
  .stanloop-creator-hub-layout,
  .stanloop-creator-hub-center,
  .stanloop-creator-hub-right {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  /* display:contents on the centre/right wrappers makes their sections direct
     flex items of the mobile layout. Force every public Hub surface to stretch
     across the available column instead of shrinking to intrinsic card width. */
  .stanloop-creator-hub-layout .stanloop-loop-card,
  .stanloop-creator-hub-layout .stanloop-loop-section,
  .stanloop-creator-hub-layout .stanloop-loop-gallery-preview,
  .stanloop-creator-hub-layout .stanloop-loop-featured-paths,
  .stanloop-creator-hub-layout .stanloop-creator-hub-courses,
  .stanloop-creator-hub-layout .stanloop-creator-hub-landing-pages,
  .stanloop-creator-hub-layout .stanloop-loop-mentioned-links,
  .stanloop-creator-hub-layout .stanloop-loop-resources-preview,
  .stanloop-creator-hub-layout .stanloop-creator-hub-message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
  }

  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] {
    padding-inline: 10px !important;
  }

  /* Header should read like a compact creator-site masthead, not a full card. */
  .covozi-public-shell--creator-hub {
    width: calc(100% - 20px) !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 6px auto 0 !important;
    border-radius: 13px !important;
  }
  .covozi-public-shell__inner--creator-hub {
    width: 100% !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .covozi-public-shell--creator-hub .covozi-public-shell__logo--creator-hub,
  .covozi-public-shell--creator-hub .covozi-shell-logo {
    width: 112px !important;
    min-width: 112px !important;
    height: 36px !important;
    overflow: hidden !important;
  }
  .covozi-public-shell--creator-hub .covozi-brand-logo__img {
    width: auto !important;
    max-width: 112px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  /* No horizontal dragging in creator identity controls. */
  .stanloop-creator-hub-connections,
  .stanloop-creator-hub-socials {
    overflow: visible !important;
    flex-wrap: wrap !important;
    scrollbar-width: auto !important;
  }

  /* Gallery is a normal tablet grid, not a swipe rail. */
  .stanloop-creator-hub-center .stanloop-loop-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item,
  .stanloop-creator-hub-center .stanloop-loop-gallery-item[class*="--"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 168px !important;
    min-height: 168px !important;
    grid-column: auto !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }

  /* Paths remain ordinary cards with no hidden horizontal dependency. */
  .stanloop-creator-hub-center .stanloop-loop-path-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-path-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Courses and landing pages: normal grids, no drag/peek affordance. */
  .stanloop-creator-hub-course-grid,
  .stanloop-creator-hub-page-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }
  .stanloop-creator-hub-course,
  .stanloop-creator-hub-page-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }
  .stanloop-creator-hub-course__media,
  .stanloop-creator-hub-page-card__visual {
    height: 145px !important;
  }

  /* Right-rail utilities are already inserted into the mobile content order;
     make sure they cannot carry desktop rail widths into tablet/mobile. */
  .stanloop-creator-hub-right .stanloop-loop-section,
  .stanloop-creator-hub-message {
    width: 100% !important;
    max-width: none !important;
  }

  /* Bottom dock is fixed, finite, and never scrolls horizontally. */
  .covozi-creator-mobile-dock {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    overflow: visible !important;
  }
  .covozi-creator-mobile-dock__item,
  .covozi-creator-mobile-dock__more,
  .covozi-creator-mobile-dock__more > summary {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] {
    padding-inline: 8px !important;
  }

  /* One item per row on phones. Scrolling the page is the only discovery
     gesture required; users never need to guess that a section swipes sideways. */
  .stanloop-creator-hub-center .stanloop-loop-gallery-grid,
  .stanloop-creator-hub-center .stanloop-loop-path-grid,
  .stanloop-creator-hub-course-grid,
  .stanloop-creator-hub-page-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item,
  .stanloop-creator-hub-center .stanloop-loop-gallery-item[class*="--"] {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-path-card__image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
  .stanloop-creator-hub-course__media,
  .stanloop-creator-hub-page-card__visual {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* Slightly calmer card density on narrow phones. */
  .stanloop-creator-hub-layout .stanloop-loop-section {
    padding: 13px !important;
  }
  .stanloop-creator-hub-layout .stanloop-loop-section-head {
    align-items: center !important;
    gap: 8px !important;
  }
  .stanloop-creator-hub-layout .stanloop-loop-section-head h2 {
    font-size: 17px !important;
  }
  .stanloop-creator-hub-layout .stanloop-loop-section-head a {
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  .stanloop-creator-hub-intro {
    padding: 14px !important;
  }
  .stanloop-creator-hub-intro__bio {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .stanloop-creator-hub-connections {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
  .stanloop-creator-hub-connection {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
  .stanloop-creator-hub-socials {
    display: flex !important;
    gap: 7px !important;
  }
  .stanloop-creator-hub-socials a {
    width: 40px !important;
    height: 40px !important;
  }

  .stanloop-creator-hub-right .stanloop-loop-link-card {
    grid-template-columns: 112px minmax(0,1fr) !important;
    min-height: 90px !important;
  }
  .stanloop-creator-hub-right .stanloop-loop-link-card__image {
    height: 90px !important;
    min-height: 90px !important;
  }

  .stanloop-creator-hub-course strong,
  .stanloop-creator-hub-page-card strong {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .stanloop-creator-hub-course small,
  .stanloop-creator-hub-page-card small {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .covozi-public-shell--creator-hub .covozi-public-shell__logo--creator-hub,
  .covozi-public-shell--creator-hub .covozi-shell-logo {
    width: 106px !important;
    min-width: 106px !important;
  }
  .covozi-public-shell--creator-hub .covozi-brand-logo__img {
    max-width: 106px !important;
    height: 30px !important;
  }
}

@media (max-width: 380px) {
  .stanloop-creator-hub-connections {
    grid-template-columns: 1fr !important;
  }
  .covozi-creator-mobile-dock {
    left: 5px !important;
    right: 5px !important;
    padding: 4px !important;
    border-radius: 15px !important;
  }
  .covozi-creator-mobile-dock__item small,
  .covozi-creator-mobile-dock__more > summary small {
    font-size: 9.5px !important;
  }
}