/* Clean baseline for public profiles.
 * Keeps user customization intact while making untouched profiles look deliberate on first load.
 */
.profile-presentation {
  width: min(1240px, calc(100% - 32px));
  margin: 18px auto 0;
}

.profile-presentation .profile-cover {
  box-shadow: 0 10px 28px rgb(0 0 0 / 18%);
}
.profile-presentation .profile-cover.has-no-cover {
  min-height: 128px;
  max-height: 128px;
  height: 128px !important;
}

.profile-presentation .profile-identity,
.profile-presentation .profile-stats,
.profile-presentation .profile-tagline,
.profile-presentation .profile-banner,
.profile-presentation .profile-modules {
  width: calc(100% - 48px);
  max-width: 1180px;
}

.profile-presentation .profile-identity {
  margin-top: -34px;
  padding: 16px 18px;
  gap: 18px;
  box-shadow: 0 12px 30px rgb(0 0 0 / 20%);
}
.profile-presentation .profile-avatar-frame {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}
.profile-presentation .profile-identity h1 {
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.profile-presentation .profile-actions {
  gap: 8px;
  align-items: center;
}

.profile-presentation .profile-stats {
  gap: 12px;
  margin-top: 12px;
}
.profile-presentation .profile-stat {
  min-height: 84px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-presentation .profile-modules {
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
.profile-presentation .profile-module {
  padding: 18px;
  min-height: 0;
  box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
}
.profile-presentation .profile-module h2 {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.25;
}
.profile-presentation .profile-module-body {
  display: grid;
  gap: 10px;
  line-height: 1.55;
}
.profile-presentation .profile-module-body > :first-child {
  margin-top: 0;
}
.profile-presentation .profile-module-body > :last-child {
  margin-bottom: 0;
}

/* Untouched legacy/default profiles get a deliberate first composition.
 * Once a profile is published through Profile Studio, data-shared-presentation becomes
 * "published" and user-controlled desktop/mobile sizing takes over unchanged.
 */
.profile-appearance[data-shared-presentation="legacy"][data-profile-theme="classic"]
  .profile-module[data-profile-module-id="about"] {
  grid-column: 1 / -1 !important;
}
.profile-appearance[data-shared-presentation="legacy"][data-profile-theme="classic"]
  .profile-module[data-profile-module-id="posts"],
.profile-appearance[data-shared-presentation="legacy"][data-profile-theme="classic"]
  .profile-module[data-profile-module-id="stores"] {
  grid-column: span 6 !important;
  min-height: 150px;
}
.profile-appearance[data-shared-presentation="legacy"][data-profile-theme="classic"]
  .profile-module[data-profile-module-id="activity"] {
  grid-column: 1 / -1 !important;
}

/* The public-profile Details editor should be a focused form, not a full-width design canvas. */
.profile-appearance [data-edit-section="profile-identity"].is-editing {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--mc-border);
  border-radius: 16px;
  background: var(--mc-surface-1);
  box-shadow: 0 16px 44px rgb(0 0 0 / 16%);
  outline: none !important;
}
.profile-appearance [data-edit-section="profile-identity"].is-editing .editable-section-bar {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mc-border);
}
.profile-appearance [data-edit-section="profile-identity"] .profile-section-edit-panel {
  display: grid;
  gap: 18px;
}
.profile-appearance [data-edit-section="profile-identity"] .profile-section-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.profile-appearance [data-edit-section="profile-identity"] .mc-form-group {
  min-width: 0;
}

@media (max-width: 900px) {
  .profile-presentation {
    width: min(100% - 20px, 820px);
    margin-top: 12px;
  }
  .profile-presentation .profile-identity,
  .profile-presentation .profile-stats,
  .profile-presentation .profile-tagline,
  .profile-presentation .profile-banner,
  .profile-presentation .profile-modules {
    width: calc(100% - 20px);
  }
  .profile-presentation .profile-cover.has-no-cover {
    min-height: 112px;
    max-height: 112px;
    height: 112px !important;
  }
  .profile-presentation .profile-identity {
    margin-top: -28px;
  }
}

@media (max-width: 620px) {
  .profile-presentation {
    width: 100%;
    margin-top: 8px;
  }
  .profile-presentation .profile-cover {
    width: calc(100% - 16px);
    margin-inline: auto;
    border-radius: 18px;
  }
  .profile-presentation .profile-cover.has-no-cover {
    min-height: 96px;
    max-height: 96px;
    height: 96px !important;
  }
  .profile-presentation .profile-identity,
  .profile-presentation .profile-stats,
  .profile-presentation .profile-tagline,
  .profile-presentation .profile-banner,
  .profile-presentation .profile-modules {
    width: calc(100% - 16px);
  }
  .profile-presentation .profile-identity {
    margin-top: -22px;
    padding: 12px;
    gap: 12px;
  }
  .profile-presentation .profile-avatar-frame {
    width: 76px;
    height: 76px;
    border-radius: 18px;
  }
  .profile-presentation .profile-stats {
    gap: 8px;
    margin-top: 10px;
  }
  .profile-presentation .profile-stat {
    min-height: 72px;
    padding: 12px;
  }
  .profile-presentation .profile-modules {
    gap: 10px;
    margin-top: 10px;
  }
  .profile-presentation .profile-module,
  .profile-presentation .profile-module--compact,
  .profile-presentation .profile-module--standard,
  .profile-presentation .profile-module--wide {
    grid-column: 1 / -1 !important;
    min-height: 0;
    padding: 14px;
  }
  .profile-appearance [data-edit-section="profile-identity"].is-editing {
    width: calc(100% - 16px);
    padding: 14px;
    border-radius: 14px;
  }
  .profile-appearance [data-edit-section="profile-identity"] .profile-section-edit-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}