/* Covozi v1.65 — Creator Hub full-width masthead + deliberate tablet/phone composition.
 * Loaded after v1.59/v1.62/v1.63/v1.64 layers. This file intentionally resolves
 * remaining legacy responsive conflicts without changing creator data or routes.
 */

/* The creator site header is a real site masthead, not a card inside the Hub rail. */
body.stanloop-loop-layout-page {
  overflow-x: clip !important;
}
.stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .covozi-public-shell__inner--creator-hub,
.stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .stanloop-loop-site-header__inner {
  width: min(1280px, calc(100% - 80px)) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
}

/* Give the approved desktop Hub a little more breathing room while keeping the
 * left-nav / centre / right-utility architecture untouched. */
@media (min-width: 901px) {
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] {
    padding-top: 22px !important;
  }
  .covozi-creator-mobile-dock { display: none !important; }
}

/* Tablet: full-width site, finite wrapped creator navigation, no bottom dock,
 * no sideways discovery gesture, and a deliberate two-column content rhythm. */
@media (min-width: 641px) and (max-width: 900px) {
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub {
    width: 100vw !important;
    height: 70px !important;
    min-height: 70px !important;
    margin-left: calc(50% - 50vw) !important;
  }
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .covozi-public-shell__inner--creator-hub,
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .stanloop-loop-site-header__inner {
    width: min(100% - 36px, 820px) !important;
    max-width: 820px !important;
    min-height: 70px !important;
    padding: 0 !important;
  }

  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] {
    padding: 14px 14px 34px !important;
  }
  body.stanloop-loop-layout-page .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .stanloop-loop-shell--public-creator {
    display: block !important;
    width: min(100%, 880px) !important;
    margin-inline: auto !important;
  }

  /* Tablet creator navigation is visible, wrapped and finite. */
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav {
    display: block !important;
    margin: 0 0 14px !important;
  }
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__toggle {
    display: none !important;
  }
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__panel {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__links {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
    padding: 8px !important;
    scroll-snap-type: none !important;
  }
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__item {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    white-space: normal !important;
    scroll-snap-align: none !important;
    font-size: 12.5px !important;
  }
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__studio {
    display: none !important;
  }
  .covozi-creator-mobile-dock { display: none !important; }

  /* Tablet Hub becomes a calm two-column website surface. Right-rail utilities
   * remain near the top instead of being pushed to the end of a long page. */
  .stanloop-creator-hub-layout {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 280px !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .stanloop-creator-hub-center,
  .stanloop-creator-hub-right {
    display: grid !important;
    gap: 12px !important;
  }
  .stanloop-creator-hub-right {
    align-content: start !important;
  }

  .stanloop-creator-hub-intro {
    grid-template-columns: 1fr !important;
  }
  .stanloop-creator-hub-identity {
    grid-template-columns: 64px minmax(0,1fr) !important;
    padding: 10px 0 12px !important;
    border: 0 !important;
    border-top: 1px solid var(--covozi-hub-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .stanloop-creator-hub-identity > img {
    width: 60px !important;
    height: 60px !important;
  }
  .stanloop-creator-hub-intro__bio { font-size: 14.5px !important; }
  .stanloop-creator-hub-connections,
  .stanloop-creator-hub-socials {
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  /* Tablet collections use contained grids rather than swipe rails. */
  .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 {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item,
  .stanloop-creator-hub-center .stanloop-loop-gallery-item[class*="--"] {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }
  .stanloop-creator-hub-course,
  .stanloop-creator-hub-page-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .stanloop-creator-hub-course__media,
  .stanloop-creator-hub-page-card__visual {
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
    min-height: 0 !important;
  }

  .stanloop-creator-hub-layout .stanloop-loop-section.is-empty {
    display: none !important;
  }
}

/* Phone: one vertical discovery gesture only. Every collection is stacked. */
@media (max-width: 640px) {
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub {
    width: 100vw !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    border-radius: 0 !important;
  }
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .covozi-public-shell__inner--creator-hub,
  .stanloop-loop-site-header.covozi-public-shell.covozi-public-shell--creator-hub .stanloop-loop-site-header__inner {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-height: 70px !important;
    padding: 0 !important;
  }

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

  /* Phone uses the thumb dock only; never expose a second horizontally scrolling nav. */
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__toggle,
  .stanloop-loop-page--public-creator[data-stanloop-loop-context="home"] .covozi-creator-profile-nav__panel {
    display: none !important;
  }
  .covozi-creator-mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    overflow: visible !important;
  }

  .stanloop-creator-hub-layout,
  .stanloop-creator-hub-center,
  .stanloop-creator-hub-right {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  /* Preserve the deliberate mobile editorial order from v1.62. */
  .stanloop-creator-hub-center,
  .stanloop-creator-hub-right { display: contents !important; }

  .stanloop-creator-hub-intro {
    order: 10 !important;
    padding: 14px !important;
  }
  .stanloop-creator-hub-email { order: 20 !important; }
  .stanloop-loop-mentioned-links { order: 30 !important; }
  .stanloop-loop-gallery-preview { order: 40 !important; }
  .stanloop-loop-small-section:not(.stanloop-loop-resources-preview) { order: 50 !important; }
  .stanloop-loop-featured-paths { order: 60 !important; }
  .stanloop-loop-resources-preview { order: 70 !important; }
  .stanloop-creator-hub-courses { order: 80 !important; }
  .stanloop-creator-hub-landing-pages { order: 90 !important; }
  .stanloop-creator-hub-message { order: 100 !important; }

  .stanloop-creator-hub-intro h1 {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: clamp(24px,7.1vw,30px) !important;
    line-height: 1.08 !important;
  }
  .stanloop-creator-hub-intro__bio {
    font-size: 15.5px !important;
    line-height: 1.52 !important;
  }
  .stanloop-creator-hub-identity h2 { font-size: 18px !important; }
  .stanloop-creator-hub-connections {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .stanloop-creator-hub-connection {
    flex: 1 1 145px !important;
    min-width: 0 !important;
  }
  .stanloop-creator-hub-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .stanloop-creator-hub-actions {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  .stanloop-creator-hub-action { min-height: 48px !important; }

  .stanloop-creator-hub-email {
    padding: 15px !important;
  }
  .stanloop-creator-hub-email__copy h2 { font-size: 20px !important; }
  .stanloop-creator-hub-email__copy p { font-size: 14px !important; }
  .stanloop-creator-hub-email__form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .stanloop-creator-hub-email__form input[type=email],
  .stanloop-creator-hub-email__form button {
    width: 100% !important;
    min-height: 50px !important;
  }

  /* Absolutely no horizontal card rails on phones. */
  .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 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item,
  .stanloop-creator-hub-center .stanloop-loop-gallery-item[class*="--"],
  .stanloop-creator-hub-course,
  .stanloop-creator-hub-page-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    scroll-snap-align: none !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;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }
  .stanloop-creator-hub-center .stanloop-loop-path-card__image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 8.5 !important;
  }
  .stanloop-creator-hub-course__media,
  .stanloop-creator-hub-page-card__visual {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 6.5 !important;
  }
  .stanloop-creator-hub-course strong,
  .stanloop-creator-hub-page-card strong {
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  .stanloop-creator-hub-right .stanloop-loop-link-card {
    grid-template-columns: 104px minmax(0,1fr) !important;
    min-height: 86px !important;
  }
  .stanloop-creator-hub-right .stanloop-loop-link-card__image {
    height: 86px !important;
    min-height: 86px !important;
  }
  .stanloop-creator-hub-right .stanloop-loop-link-card__body h3 {
    font-size: 14.5px !important;
    line-height: 1.25 !important;
  }

  .stanloop-creator-hub-layout .stanloop-loop-section.is-empty {
    display: none !important;
  }

  /* Compact creator-site footer, with navigation always available in the dock. */
  body.stanloop-loop-layout-page .stanloop-loop-site-footer {
    width: calc(100% - 16px) !important;
    margin: 18px auto 86px !important;
    border-radius: 16px !important;
  }
  body.stanloop-loop-layout-page .stanloop-loop-site-footer__inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 18px 14px 14px !important;
  }
  body.stanloop-loop-layout-page .stanloop-loop-footer-brand {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 380px) {
  .stanloop-creator-hub-connections { display: grid !important; grid-template-columns: 1fr !important; }
  .stanloop-creator-hub-actions { grid-template-columns: 1fr !important; }
}