/*
 * GetHug creator/public-share full-width layout override
 *
 * This file must be loaded AFTER style.css and style_creator.css.
 * It intentionally uses page-scoped selectors and !important only for
 * layout properties that may otherwise be constrained by the main site CSS.
 */

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body.creator-directory-page,
body.creator-settings-page,
body.creator-public-page,
body.public-share-page {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

/*
 * Center the page header and main content.
 *
 * Creator directory, creator profile, and profile settings:
 *   up to 1600 px.
 *
 * Public scripts and recipes:
 *   up to 1500 px, which keeps text readable while using wide screens well.
 */
body.creator-directory-page .topbar,
body.creator-settings-page .topbar,
body.creator-public-page .topbar {
  display: flex !important;
  float: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 64px) !important;
  min-width: 0 !important;
  max-width: 1600px !important;
  box-sizing: border-box !important;
  margin: 24px auto 0 !important;
}

body.public-share-page .topbar {
  display: flex !important;
  float: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 64px) !important;
  min-width: 0 !important;
  max-width: 1500px !important;
  box-sizing: border-box !important;
  margin: 24px auto 0 !important;
}

body.creator-directory-page main.creator-page-shell,
body.creator-settings-page main.creator-page-shell,
body.creator-public-page main.creator-page-shell {
  display: block !important;
  float: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 64px) !important;
  min-width: 0 !important;
  max-width: 1600px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 28px 0 64px !important;
}

body.public-share-page main.creator-page-shell {
  display: block !important;
  float: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: calc(100% - 64px) !important;
  min-width: 0 !important;
  max-width: 1500px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 28px 0 64px !important;
}

/* Neutralize the old narrow modifier completely on these pages. */
body.creator-directory-page main.creator-page-shell.creator-page-shell--narrow,
body.creator-settings-page main.creator-page-shell.creator-page-shell--narrow,
body.creator-public-page main.creator-page-shell.creator-page-shell--narrow,
body.public-share-page main.creator-page-shell.creator-page-shell--narrow {
  width: calc(100% - 64px) !important;
  max-width: inherit !important;
}

/*
 * Ensure top-level cards actually fill the widened main container rather than
 * preserving an old fixed width from style.css.
 */
body.creator-directory-page main.creator-page-shell > .script-card,
body.creator-directory-page main.creator-page-shell > .creator-card,
body.creator-settings-page main.creator-page-shell > .script-card,
body.creator-settings-page main.creator-page-shell > .creator-card,
body.creator-public-page main.creator-page-shell > .script-card,
body.creator-public-page main.creator-page-shell > .creator-card,
body.public-share-page main.creator-page-shell > .script-card,
body.public-share-page main.creator-page-shell > .creator-card {
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Use the additional width in the profile form. */
@media (min-width: 1280px) {
  body.creator-settings-page .profile-form-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }

  body.creator-public-page .creator-about-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }

  body.creator-public-page .public-grid {
    grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
  }

  body.creator-directory-page .creator-directory-grid {
    grid-template-columns: repeat(3, minmax(340px, 1fr)) !important;
  }
}

@media (min-width: 1680px) {
  body.creator-directory-page .creator-directory-grid {
    grid-template-columns: repeat(4, minmax(320px, 1fr)) !important;
  }
}

/* Keep paragraphs readable even though the surrounding card is wider. */
body.public-share-page .public-share-layout > .section p,
body.public-share-page .public-share-layout > p,
body.creator-public-page .creator-bio {
  max-width: 1050px;
}

/* Tablets */
@media (max-width: 1100px) {
  body.creator-directory-page .topbar,
  body.creator-settings-page .topbar,
  body.creator-public-page .topbar,
  body.public-share-page .topbar,
  body.creator-directory-page main.creator-page-shell,
  body.creator-settings-page main.creator-page-shell,
  body.creator-public-page main.creator-page-shell,
  body.public-share-page main.creator-page-shell,
  body.creator-directory-page main.creator-page-shell.creator-page-shell--narrow,
  body.creator-settings-page main.creator-page-shell.creator-page-shell--narrow,
  body.creator-public-page main.creator-page-shell.creator-page-shell--narrow,
  body.public-share-page main.creator-page-shell.creator-page-shell--narrow {
    width: calc(100% - 32px) !important;
  }

  body.creator-settings-page .profile-form-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }
}

/* Phones */
@media (max-width: 620px) {
  body.creator-directory-page .topbar,
  body.creator-settings-page .topbar,
  body.creator-public-page .topbar,
  body.public-share-page .topbar,
  body.creator-directory-page main.creator-page-shell,
  body.creator-settings-page main.creator-page-shell,
  body.creator-public-page main.creator-page-shell,
  body.public-share-page main.creator-page-shell,
  body.creator-directory-page main.creator-page-shell.creator-page-shell--narrow,
  body.creator-settings-page main.creator-page-shell.creator-page-shell--narrow,
  body.creator-public-page main.creator-page-shell.creator-page-shell--narrow,
  body.public-share-page main.creator-page-shell.creator-page-shell--narrow {
    width: calc(100% - 20px) !important;
  }

  body.creator-directory-page .topbar,
  body.creator-settings-page .topbar,
  body.creator-public-page .topbar,
  body.public-share-page .topbar {
    margin-top: 10px !important;
  }

  body.creator-settings-page .profile-form-grid {
    grid-template-columns: 1fr !important;
  }
}